莫提夫斯佩克语Name
Liam Marshall的设计系统,Aitrien.com的构建,以及一个实验: 将一个品牌工具包变成一个AI助手可靠遵循的标志和规则. 而不是一个长长的规则文件,规则是分层的(原则,然后是布局,然后是它使用的组件,然后是它们命名的符号),所以一个助手只读出它的任务需要的部分. 目的是避免其上下文被淡化,使指令遵守性比单体更好 AGENTS.md,并花费更少的模型标志做.
每个决定都写过一次,在这个寄存器中,其他一切都由此产生. 脚趾是 技术合作组 JSON; 组件是被记录下来的规则并加分复制; 检查器将每个工程按那些规则保存; 和 MCP 服务器一次为AI 助手服务一层. CI检查每个更改,每个发布会构建CSS,发布npm软件包,部署MCP服务器并重建 motifspec.com (英语),这使得这个 README 的引导部分, 文档和更改日志.
原则
- 给角色取名,而不是页面. Tokens和组件描述他们的工作,所以一个食谱应用程序,一个docs网站和这个组合可以共享.
- 颜色和类型带有意义. 色调标记了链接,状态或焦点. 矫形是装饰,总是隐藏在辅助技术中.
- 测量它,不要盯着它. 阅读文本满足7:1,控件和焦点满足3:1,每个构件上的两个主题都检查每对.
- HTML第一,脚本第二. 内容,导航和代码工作没有JavaScript. 脚本会添加主题切换,复制按钮和TOC跟踪.
- 平面,发线,标签. 结构以 1px 规则,平角和单标签来绘制,就像一个字段分类账. 按钮,导航项目和只限图标的控件是一个例外:它们是药丸,所以任何你能按的都可以一一看就辨认出来.
- 动议证实了一个变化. 只有状态会改变活性,加上轮廓勘测:它会在到达时安顿一次并回答指针,标本板的漂移可以被暂停. 文字从不移动, 减少运动意味着没有.
- 一个口音;布局允许的装饰. 浅绿色标记行动。 Yarndings和轮廓勘测(背景,或标本板)是唯一的装饰,每景一次,布局允许.
布局
版式是站点的一种:它的外壳,页面模板,组件,装饰和标题规则. 在选择组件之前先选一个合适的部件.
| 版式 | 对于 | 文件 |
|---|---|---|
| 组合 | 案例研究、写作和关于网页 | docs/layouts/portfolio.md |
| 盘子 | 工具和管理员屏幕(正在进行) | docs/layouts/dashboard.md |
| 文档 | 指南、参考和更改日志 | docs/layouts/documentation.md |
| 点菜 | 一个不适应其中任何一个的项目:选定的组件,它自己的框架 | docs/layouts/a-la-carte.md |
每个组件 Doc 都说它属于哪个前题的布局(layouts:) (中文(简体) ). 共享组件属于每个布局.
一个工程宣布了它的布局,这样检查器就可以把它握住. 一个雨果网站 设置在它的配置中:
[params.motifspec]
layout = "dashboard"
点菜项目还按文件名称列出其使用的部件: components = ["table-of-contents", "heading-anchor"]雨果外面,通过 --layout (和 --components)取取取取取取者. 宣布无内容的项目会被检查为组合 .
人工智能助理规则
- 首先选择布局( E) (
docs/layouts/),如果项目有堆栈,则使用堆栈;否则请查看布局的堆栈表。 只使用共享组件和该布局的组件 . - 只使用语义符号 :
var(--cx-color-text-primary)永远--cx-primitive-*,从来没有生的六分法,px,rem或ms值. - 读一个符号
$description在使用它之前。 这是使用规则,包括何时 没有 用来使用它. - 仅在文字符号列出表面时将文字放入表面
codex.pairsWith如果对方没有申报,请选一个能申报的标志. - 构建用户界面
docs/components/*.md。复制标记和类名;不要发明新的cx-课程. - 在雨果的遗址,叫
motifspec/部分(docs/hugo.md)而不是写入组件标记,让渲染钩将马克下调为数字,表格,代码块和点名. 一个需要改变的组件在这里被改变,而不是在站台被覆盖. - 在完成前, 运行项目上的检查器 :
node <module>/scripts/check.mjs .(雨果网站发现)<module>与hugo config mounts; 见docs/hugo.md) (中文(简体) ). 修其所报;勿以所取为所取. - 圆形只来自80个 批准的甘油在
font.family.ornament→codex.glyphs.glyphs(从来没有)codex.glyphs.forbidden),总是aria-hidden="true",每个景点最多有一个装饰组. - 图标仅来自
icons/manifest.json中,每个被列出的角色,作为<svg class="cx-icon"><use href="#cx-icon-{key}"></use></svg>除了文字 说同样的事情。 从不使用图标字体,从不使用CDN. - 单独内置元数据为
<span class="cx-sep" aria-hidden="true">|</span>。从不使用“-”作为分隔符. - 铺设有弹性包装、自动填充网格和
min()。 Width 媒体查询无法读取自定义属性:当一个布局必须在宽度的替代内容之间切换时,写@media (width < token(size.breakpoint.md))内css/components.css和建筑填充值。 不得以其他文字写作token(...)。 。 。 . - JavaScript 是增强。 在一个没有脚本的网站上,任何读者需要的东西都必须没有脚本才能工作;需要脚本船的控制
hidden并被降示, 在需要脚本才能渲染的应用程序中, MotifSpec 的组件不添加自己的脚本: 本地元素(<details>, (中文(简体) ),<meter>, (中文(简体) ),<dialog>无线电按钮)做工作. - 服务 MotifSpec 的自有文件(CSS,字体,图标,脚本)来自项目,从未来自一个CDN. 当一个应用获得其数据是项目的决定,而不是MotifSpec规则.
- 使用平面,功能标签:工作,写作,关于.
- 从头写出样本和占位符内容。 永远不要从参考站点或竞争站点复制措辞;只引用被命名人和块引脚中可追踪来源.
- 给每个区域
<h2>正在读取文本 id 和 acx-anchor链接(参见docs/components/heading-anchor.md) (中文(简体) ). Dashboard部分有ID,没有锚.
开始
MotifSpec通过三种方式达到一个项目:作为雨果模块,作为npm包,或通过连接到其MCP服务器的AI助手. 首先选择布局( E) (布局) (中文(简体) ).
在雨果遗址
导入 github.com/aitrien/motifspec 作为雨果的模块,并用 hugo mod get github.com/aitrien/[email protected]。然后,网站获得CSS、脚本、字体、组件部分和Markdown渲染钩; docs/hugo.md 盖好布置,每个部分 和他们阅读的前题.
从 npm
npm install --save-exact @aitrien/motifspec
当雨果网站贴上标记时, 精确的版本 : 您安装的版本是检查器所持有的版本 。 软件包有CSS,脚本,符号,字体,图标,组件docs,雨果模板和检查器;它不包含docs站点.
| 导入 | 这是什么 |
|---|---|
@aitrien/motifspec/codex.css | 指针、字体和每个组件。 它的字体 URL 是 ../fonts/…,所以一个复制资产(Vite,webpack,Parcel)的捆绑机从包中解析出. 没有捆绑者,服务 dist/ 财务报告和审定财务报表 fonts/ 并肩而来. |
@aitrien/motifspec/tokens.css, (中文(简体) ), fonts.css, (中文(简体) ), chroma.css | 其分相自有;其分相自有, @font-face 只有语法突出. |
@aitrien/motifspec/codex.js | 行为:主题切换,复制按钮,TOC,工具提示. 装入 defer。 。 。 . |
@aitrien/motifspec/theme-init.js | 内入 <head> 在样式表之前,所以存储的主题在第一次涂料之前适用. |
@aitrien/motifspec/plate.js, (中文(简体) ), backdrop.html, (中文(简体) ), backdrop-foot.html, (中文(简体) ), backdrop-side.html | 轮廓背景及其动向backdrop.md) (中文(简体) ). |
@aitrien/motifspec/icons.svg | 圣像图示. 内插一次 <body>。 。 。 . |
@aitrien/motifspec/tokens.js, (中文(简体) ), tokens.json | 每一个有其价值的标志,级别和CSS名称,用于构建工具. |
@aitrien/motifspec/check | checkText 财务报告和审定财务报表 checkProject 从规则检查器. |
@aitrien/motifspec/fonts/* | WOFF2文件,用于预装. |
复制组件标记从 docs/components/*.md (在下面的软件包中) node_modules/@aitrien/motifspec/docs/) (中文(简体) ). 为了反应和类似, MCP 服务器的 get_component 与 form: "jsx" 提供与JSX相同的例子,机械地转换;带有脚本的组件在其行为部分中描述要执行什么.
有个人工智能助理
MCP 服务器 : https://mcp.motifspec.com/mcp 为任何支持远程MCP服务器的助手提供最新版本。 它不需要签入,只读. MCP 服务器 列出其工具.
要连接它 :
- 克洛德(网络,桌面): 自定义 → Connectors → 添加自定义连接器,上面有 URL 和 “ 无 标志 ” .
- 克劳德代码 :
claude mcp add --transport http motifspec https://mcp.motifspec.com/mcp,或项目.mcp.json。 。 。 . - VS 代码 : 加上来
.vscode/mcp.json与"type": "http"与 URL 连接. - 其他国家: 通过 URL 添加远程 MCP 服务器.
检查工程
scripts/check.mjs 是一条规则检查器: 这次repo的审计运行在 layouts/ 和组件Docs的标记, 和项目运行 它的版本他们钉。 它检查一个项目 layouts/ 财务报告和审定财务报表 content/ 违抗释放,并且失败:
- 工程中任何地方的样式表,或
style属性 - 原始颜色,或长度或时间单位的数字(允许零)
- 原始、未知或已贬值
--cx-符号 - (单位:千美元)
cx-样式表和脚本没有定义的类,或者cx-icon-里面没有icons/manifest.json - “ ” 用作分隔符
- 未知的布局,或 à la carte 列表中的未知组件
- 在一个 à la carte 工程自己的样式表, 相同的原始值和符号, 以及任何选择对象
cx-类
它警告,当一个组件(它的类或它的雨果部分)在布局外使用时,或者一个à la carte项目使用它没有列出的布局组件时,它不会失败. 这些在后来的发行中变成了失败.
在雨果的地盘上跑 node <module>/scripts/check.mjs .时 hugo config mounts 给 <module> (单位:千美元)docs/hugo.md) (中文(简体) ). 雨果外面,从包裹里跑,指着 --dirs 在您的标记文件夹中:
npx motifspec-check . --dirs src
添加 --layout dashboard (或项目的布局) 所以组件被对照它检查; à la carte 工程添加 --components 和他们的名单。 写着 .html, (中文(简体) ), .jsx, (中文(简体) ), .tsx, (中文(简体) ), .vue, (中文(简体) ), .svelte, (中文(简体) ), .astro, (中文(简体) ), .md 财务报告和审定财务报表 .mdx (两者) class 财务报告和审定财务报表 className),并跳过 node_modules, (中文(简体) ), dist 财务报告和审定财务报表 build。它的样式表规则也在这里适用:一个使用 MotifSpec 的项目没有自己的CSS,除了 à la carte 项目的框架(docs/layouts/a-la-carte.md) (中文(简体) ).
MCP 服务器
| 工具 | 它的回报 |
|---|---|
get_rules | 这个 aI助手的规则检查者执行的 |
find_tokens | 符合查询的语义符号: CSS 属性、 使用规则、 光和暗值、 颜色可能坐落的表面 |
get_component | 一个组件的 doc(标记,做和不做,可访问,行为). form 选择标记 : html, (中文(简体) ), jsx 或者说 hugo (带有部分);没有它,HTML和部分。 没有名称, 每个组件布局的列表 |
get_doc | docs/hugo.md,或从 docs/layouts/ (单位:千美元)portfolio, (中文(简体) ), dashboard, (中文(简体) ), documentation, (中文(简体) ), a-la-carte(中文(简体) ) |
check | 检查者的问题在一块加分,Markdown或CSS中 layout,警告来自其他布局的组件 |
它为最新的发行服务。 一个被固定在更古老版本上的项目可以提供它版本还没有的东西;它自己的检查器,在被固定版本上,可以捕捉到它.
简要身份
| 概念 | 标本分类账:作为技术目录绘制的档案植物简编,有美国国家公园标志音. |
| 颜色 | OKLCH中产生的5个染料-植株:灰 (中性), sap (发芽和成功), Woad (焦点和信息),焊接 (警告)和发疯 (危险). 平淡模式下为凉纸,暗模式下为绿黑色. |
| 类型 | 国家公园(Display and body),Geist Mono (代码和标签),Yarndings 12 (ordnament). 总计82 KB. |
| 签署 | 加入标签:每个条目都有目录编号(LM-W-004, (中文(简体) ), LM-P-031)显示在带有注册勾选的被设定标签上. |
| 装饰 | 背景:在光线下对生成的地势进行轮廓测量,有谷地霜,主页声明后和每页脚. 到达后他们就安顿下来 温和地进入指针下方的山地 像热图一样 与起落页标本板(平面为0)和脚印上编织的Yarndings乐队相同的勘测框架. |
| 图标 | 16 材料符号(Sharp,重量300)作为自发托管的SVG图案:方向箭头,主题,复制,呼号等类型,RSS,外部链接. 仅限功能. |
| 分隔符 | 一个哑巴管子, |,隐藏在屏幕阅读器中. |
见 CONVENTIONS.md 用于命名、分级、扩展和版本.
这是什么
LICENSE MIT, for code, tokens and docs
AGENTS.md Instructions for AI agents changing this repo (CLAUDE.md points to it)
CHANGELOG.md Every release, newest first (the build fails without an entry for the current version)
tokens/ DTCG source of truth (color, typography, space, size, radius, border, motion)
css/components.css Reference implementation of every component (tokens only)
syntax/chroma.json Hugo Chroma class → token mapping
icons/ Approved Material Symbols (manifest.json, source SVGs, Apache-2.0 LICENSE)
docs/components/ One rule file per component (front-matter token lists generated from the CSS)
docs/layouts/ One file per layout: shell, page templates, components, decoration, headings, stack
docs/hugo.md The Hugo partials and render hooks, their contexts and the front matter they read
docs/foundations/, docs/reference/ The wording of motifspec.com's pages about the tokens, icons and checker rules; their tables are generated
layouts/ Hugo partials (_partials/motifspec/) and Markdown render hooks (_markup/), mounted by the module
docs/syntax-highlighting.md
fonts/ Self-hosted WOFF2 (Latin subsets) and their OFL licences
scripts/ validate, build, audit, check (the rule checker projects run), pack-check, release, and docs with docs-reference (motifspec.com and its generated pages)
js/codex.js Theme toggle, copy buttons, tooltip dismissal, TOC docking and active section, search, tabs and the component preview
js/theme-init.js One-line <head> snippet that applies a stored theme before first paint
js/plate.js Contour survey generator for the backdrop and the specimen plate: draws the static contours at build time and animates them in the browser
site/ motifspec.com: a Hugo site whose pages are made from this README's sections, docs/, CONVENTIONS.md and CHANGELOG.md
mcp/ The MCP server (server.mjs), its Lambda handler, bundle step and tests
infra/mcp.yml The server's AWS stack and deploy role (CloudFormation, applied by hand)
hugo.toml, go.mod Hugo module definition and its mounts
dist/ Generated: tokens.css, components in codex.css, chroma.css, fonts.css, icons.svg (sprite), tokens.json, tokens.js (ES module export), codex.js and theme-init.js (behaviour), backdrop.html, backdrop-foot.html and backdrop-side.html, plate.html and plate.js (backdrop and specimen plate), contrast.md
图标
npm run validate # naming rules, tiers, aliases, DTCG value shapes, every contrast pair in both themes
npm run build # validate, then write dist/ and refresh generated doc tables
npm run audit # prove codex.css and the shipped scripts have no raw colour, size or duration outside :root
npm run release:check # what merging this would release, and whether that release is valid
npm run pack:check # the npm package has every file the README and package.json promise
npm run check -- <dir> # check a project that uses MotifSpec (Checking a project, above)
npm run test:mcp # call every MCP tool through the Lambda handler
npm run mcp:bundle # build/mcp.zip, the server's Lambda package
npm run docs # build motifspec.com into site/public and index it for search (needs Hugo extended)
npm run docs:check # run the checker on the site
npm run docs:quality # Lighthouse accessibility on four pages of the built site (needs Chrome)
释放是自动的; CONVENTIONS.md (维西宁)说如何.
节点20或后. 软件包没有依赖性;MCP服务器是dev依赖性,被捆绑到它的部署中.
许可证
代码、标志和文件是麻省理工学院(LICENSE) (中文(简体) ). 字体保留其 SIL 打开字体许可证( S)fonts/OFL-*.txt)和图标它们的Apache-2.0许可(icons/LICENSE) (中文(简体) ).