前端與設計流程
一個路由器，而非龐大單體。這個技能不親自做設計工作——它決定哪個專業技能在何時執行，並強制執行那些能讓產出看起來不像 AI 生成的紀律。真正的工藝存在於 references/skill-registry.md 所列的底層技能中。
運作原則
- 路由，不要重新發明。 每個階段下方都標註了負責該階段的技能。如果該技能尚未安裝，
references/skill-registry.md會說明從哪裡取得。不要當場重新實作某個技能的工作。 - 先研究，再像素。 絕不從空白畫布開始。對於任何真正的設計任務，階段 1 是必備的先決條件。
- 按需執行，非自動執行。 這個技能是刻意呼叫（透過名稱 / 斜線指令）而啟動的。它不安裝任何鉤子，也不會自行觸發任何動作。複製步驟（clone / extract）是提議；由使用者決定是否執行。
- 反俗套是關卡，不是建議。 階段 3 必須在「完成」之前執行。未通過 P0 反俗套規則視為回歸，而非品味偏好。
- 用獨立的審查來驗證。 產出 UI 的技能不批准該 UI。審查是獨立的工作線（
design-review/ 新的審查者）。
流程
┌── 階段 4：技術棧與詞彙（參考層——貫穿全程查閱）──────────────────┐
│ tech-stack.md · design-vocabulary.md │
└─────────────────────────────────────────────────────────────────────┘
想法 ─▶ 階段 1：研究 ─▶ 階段 2：產出 ─▶ 階段 3：審查 ─▶ 交付
(研究 + 複製 (方向 + (反俗套 +
決策) 高保真建置) 無障礙關卡)
階段 1 — 研究與複製決策 → references/stage-1-research-and-clone.md
在設計之前，先執行一輪競爭者動態研究，然後決定複製路徑（僅靈感參考 / 整個網站複製 / 單一效果提取）。擁有連鎖 deep-research → web-clone → web-shader-extractor 的決策樹。
階段 2 — 設計產出與方向 → references/stage-2-design-output.md
產出高保真原型 / 頁面 / 組件。當需求不明確時，先進入設計方向顧問模式。路由到 huashu-design / frontend-design 及其衛星技能（動畫、色彩、圖表、簡報、演算法藝術）。
階段 3 — 審查與反俗套關卡 → references/stage-3-review-anti-slop.md
執行七宗罪反俗套檢查清單、動畫紀律數字、無障礙基準線，以及獨立的設計審查回合。這是交付關卡。
階段 4 — 技術棧與詞彙 → references/stage-4-stack-and-vocab.md
參考層，不是順序步驟。從 tech-stack.md 挑選函式庫；在撰寫提示或審查時，使用 design-vocabulary.md 命名機制（而非症狀）。在階段 1–3 期間查閱，每當出現依賴項目或模糊描述時不可略過。
快速路由表
| 使用者說… | 前往 | 主要技能 |
|---|---|---|
| 開始任何真正的 UI 任務 | 先到階段 1 | deep-research |
| 「複製這個整個網站」 | 階段 1 → 複製分支 | web-clone |
| 「只抓那個背景效果」 | 階段 1 → 提取分支 | web-shader-extractor |
| 「建立一個原型 / 頁面 / 組件」 | 階段 2 | huashu-design, frontend-design |
| 「我不知道我想要什麼風格」 | 階段 2，顧問模式 | huashu-design, creative-director |
| 「讓它看起來更好 / 減少 AI 感」 | 階段 3 | design-review, 反俗套檢查清單 |
| 「我應該用什麼來做 X？」 | 階段 4 | tech-stack.md |
| 「這個效果叫什麼？」 | 階段 4 | animation-vocabulary |
來源備註
這個技能是一個編排層，旨在串聯一系列獨立擁有的技能。它僅包含原創/策劃的參考資料（references/design-vocabulary.md、references/tech-stack.md 及各階段指南）。它所路由的每個第三方技能都在 references/skill-registry.md 中標註了來源，且不在此重新分發——請另外安裝它們。完整的歸屬清單請參閱 README.md。