04 · Craft：12 条与品牌无关的准则

设计系统决定长什么样。Craft 决定什么算合格。

这是两件事，OpenDesign 把它们分成两层是有道理的：换品牌的时候，可访问性底线不应该跟着变；用了很酷的视觉风格，按钮的 disabled 状态也不能没有。

工作方式

技能在自己的 frontmatter 里声明需要哪些 Craft 规则。Agent 加载这个技能时，把对应的规则文件一起装进系统提示。

结果是质量约束跟着能力走，不用你每次在提示词里重复。你写「做一个落地页」，可访问性、状态覆盖、排版层级这些规则自动到位。

12 条

#	名称	管什么
01	Accessibility baseline	可访问性的法定底线，以及超出底线的那部分承诺
02	Animation discipline	动效什么时候值得跑，跑多久，缓动怎么选
03	Anti-AI-slop rules	区分「做过产品的人做的」和「模型默认输出」的具体规则
04	Color	在设计系统提供的色板之上，颜色该怎么用
05	Editorial typography hierarchy	长文、杂志版式、编辑型落地页的层级行为
06	Form validation	表单校验的生命周期、错误如何传给辅助技术、规则住在哪
07	Future Craft Sections	已被技能引用但对应规则文件还没写的槽位登记
08	Laws of UX	有研究出处的认知与行为启发式，决定界面怎么组合
09	RTL and bidirectional	从右往左的排版，以及一行里混合方向时的行为
10	State coverage	每个可交互界面必须渲染哪些状态
11	Typography	任何设计系统之上通用的排版规则
12	Typography hierarchy	层级怎么建立、怎么打破、什么条件下允许打破

第 07 条不是一条规则

「Future Craft Sections」是个登记表：某些技能已经声明依赖某条规则，但那个文件还没写。pnpm lint:craft 会把这些当成计划中的前向引用放过，同时对没登记的拼写错误报错。列在目录里是为了让这个约定是明面上的。

三条实际最常起作用的

State coverage（状态覆盖）

官方对这条的描述值得原样记住：AI 设计最可靠的失败模式，是只做了有数据的那个状态。

生成一个列表页，它给你一个填满数据的漂亮列表。空的时候呢？加载中呢？出错呢？只有一条数据呢？一千条呢？

这条规则要求每个可交互界面把状态写全。你在验收的时候也该按这个查：

[ ] 空态（还没有数据，且有引导）
[ ] 加载态
[ ] 错误态（且说明怎么恢复）
[ ] 极少数据（一条）
[ ] 极多数据（要不要分页、虚拟滚动）
[ ] 无权限态

Anti-AI-slop（反 AI 味）

这条比较特别：其中一部分规则是 daemon 的 lint-artifact 会自动检查的。 违反被强制的那几条不是审美偏好，是回归。

剩下的部分是给 Agent 和评审人看的指引，文件里明确标注了「(guidance, not auto-checked)」——哪些是硬检查、哪些是建议，这个边界写在明面上。

详见 05 · 反 AI 味。

Animation discipline（动效纪律）

设计系统决定动效的性格，这条决定动效该不该跑，以及时长、缓动和可访问性底线。

实际影响最大的是那条可访问性底线：prefers-reduced-motion 必须被尊重。用户在系统里关了动效，你的页面就不该动。这一条容易被忘，但它是硬要求。

怎么在你的技能里用

在 SKILL.md 的 frontmatter 里声明：

markdown

---
name: your-skill
craft: [accessibility-baseline, state-coverage, typography-hierarchy, color]
---

声明哪些，取决于你这个技能产出什么：

产出类型	建议声明
交互界面	accessibility-baseline, state-coverage, form-validation, laws-of-ux
落地页	accessibility-baseline, typography-hierarchy, color, animation-discipline
长文 / 编辑型	typography, typography-hierarchy-editorial, color
演示 deck	typography-hierarchy, color, animation-discipline
面向国际	追加 rtl-and-bidi

手动调用

不写技能的时候，也可以在提示词里直接引用：

text

这一版按 state coverage 的要求补全：空态、加载态、错误态、
单条数据、大量数据，每一种都要有对应的渲染，不要只做填满的那一版。

同时对着 anti-AI-slop 自查一遍，把命中的地方列出来并修掉。

这条在验收阶段特别有用——生成完之后跑一次，能捞出一批你自己看不出来的问题。

04 · Craft：12 条与品牌无关的准则 ​

工作方式 ​

12 条 ​

三条实际最常起作用的 ​

State coverage（状态覆盖） ​

Anti-AI-slop（反 AI 味） ​

Animation discipline（动效纪律） ​

怎么在你的技能里用 ​

手动调用 ​

相关 ​