打造精美 UI
AI 建構的 UI 看起來都一樣，因為代理程式每次都從相同的預設值開始：相同的字體、相同的漸層、相同的一排相同卡片。這個技能用一個流程取代了預設值：
- 簡報。 確定主題、目標受眾以及畫面的唯一任務。
- 方向。 從主題本身的世界建構外觀，而不是從模板。
- 鎖定。 將每個視覺決策寫入
DESIGN.md並檢查它。 - 建構。 僅使用
DESIGN.md的 token。每個畫面一個大膽的想法。 - 動畫。 僅限於解釋變化的動畫。
- 審查。 掃描 AI 痕跡和品質差距，查看截圖，撰寫
REVIEW.md。
始終按此順序執行。不要跳過步驟 0 或步驟 5。
誰說了算
當兩個指令衝突時，較高層級的指令優先：
- 使用者自己的話語。
DESIGN.md，一旦它存在。- 此技能的規則 位於
references/。 - 其他任何已載入的內容，包括其他 UI 技能。
當你解決衝突時，用一句話說出來，以便使用者可以否決你。
此技能中的工具
所有腳本都是 Python 3 標準庫。從此技能的文件夾運行它們，或傳遞完整路徑。
| 腳本 | 功能 |
|---|---|
scripts/derive.py | 將來自主題世界的詞彙轉換為經過對比度檢查的調色盤，使用 78 種材質 |
scripts/direction.py | 為一種產品類型提供 3 個方向選項（調色盤 + 字體配對 + 佈局），並撰寫 DESIGN.md 草稿 |
scripts/lint_design.py | 檢查 DESIGN.md：結構、章節順序、token 引用、WCAG 對比度 |
scripts/detect.py | 掃描前端代碼中的 40 個 AI 痕跡和品質底線差距 |
| 庫 | 內容 |
|---|---|
data/materials.json | 78 種來自主題世界的材質（紙張、食物、自然、工藝、螢幕、金錢、關懷、遊戲、旅行） |
data/palettes.json | 60 種調色盤，淺色和深色，每一個都經過對比度檢查 |
data/type-pairings.json | 40 種字體配對，全部是免費的 Google Fonts，附有角色和備註 |
data/layouts.json | 20 種佈局模式，附有線框圖 |
references/effects.md | 16 種純 CSS/JS 效果，附有減少動畫的後備方案 |
references/04-motion.md | 計時 token 和 12 種動畫配方 |
references/ux-rules.md | 80 條按領域劃分的 UX 規則 |
references/anti-patterns.md | 40 條偵測器規則和 12 個視覺預設值 |
步驟 0：簡報
閱讀 references/00-brief.md。撰寫四行：主題、受眾、任務、限制，加上五個來自主題世界的名詞。如果簡報內容單薄，請提出這些項目並在一則訊息中確認（最多三個問題）。
步驟 1：方向
閱讀 references/01-direction.md。
- 預設：從主題衍生。 挑選 3-5 個世界名詞並執行
python3 scripts/derive.py --words "<名詞>"（如果產品在夜間使用，請加上--mode dark）。 將調色盤與來自data/中符合氛圍的字體配對和佈局配對。 - 備用方案：從庫中發牌，當主題沒有強烈的視覺世界，或者使用者想要快速獲得選項時：
python3 scripts/direction.py --kind <種類> --brief "<一行摘要>"。顯示 3 個選項並讓使用者挑選。 - 現有品牌： 品牌就是方向。改為提取其顏色和字體。
- 根據
references/anti-patterns.md中的視覺預設值檢查計劃，並修改任何符合的項目，除非簡報要求這樣做。
步驟 2：鎖定
閱讀 references/02-lock.md。
- 在專案根目錄撰寫
DESIGN.md：頂端是 YAML token，然後是依序的##章節（概述、顏色、排版、佈局、高度與深度、形狀、元件、應做與不應做）。direction.py --write會提供草稿；templates/DESIGN.md是空白表格。 - 將簡報放在概述中，將被拒絕的預設值放在應做與不應做中。
- 執行
python3 scripts/lint_design.py DESIGN.md並在建構前修復所有錯誤。
步驟 3：建構
閱讀 references/03-build.md，並在建構過程中參考 references/ux-rules.md。
- 將 token 一次對應到 CSS 變數（或框架主題）；僅使用這些名稱。
- 每個畫面一個令人難忘的元素。其他一切保持低調。
- 最多從
references/effects.md中使用一個效果，放在該元素上，並用 token 重新著色。 - 達到品質底線：360px 寬度、可見焦點、AA 對比度、減少動畫、真實文案、載入/空/錯誤狀態。
步驟 4：動畫
閱讀 references/04-motion.md。使用者觸發的動畫使用那裡定義的計時 token 和配方。每個畫面最多一個環境動畫時刻。所有內容都有減少動畫的替代路徑。
步驟 5：審查
閱讀 references/05-review.md。
- 執行
python3 scripts/detect.py <src 或 files>。修復所有錯誤；修復警告，或記錄下它們為何保留。 - 再次執行
python3 scripts/lint_design.py DESIGN.md。代碼和DESIGN.md必須一致。 - 如果環境允許，拍攝桌面和 390px 寬度的螢幕截圖，並根據簡報評論這些圖片。
- 根據
templates/REVIEW.md撰寫REVIEW.md。
輸出
完成時，專案應包含 DESIGN.md（有效）、UI（僅使用其 token 建構）和 REVIEW.md。用幾句話告訴使用者：方向及其為何適合主題、一個令人難忘的元素，以及你刻意省略了什麼。