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（動效紀律） ​

怎麼在你的技能裡用 ​

手動呼叫 ​

相關 ​