網站設計 是做什麼的？
每個專案都應擁有自己獨特的外觀，植基於其主題與真實參考資料。此技能掌管工作順序與 此專案的檔案；實作則來自於一同安裝的設計技能。
閘門
在 design/DESIGN.md → 設計輸入 的所有四行內容填寫完成之前，不得編寫任何頁面或元件程式碼。
每行都需由您填入一個來源或「無」，且順序固定。唯一例外是針對現有設計進行小幅調整（請見規則）。
1. 依序收集輸入
每個步驟都會讀取前一個步驟的決定。較早的輸入永遠優先於較晚的輸入。
- 人類的參考資料與設計文件（最高優先權）。
- 讀取
design/DESIGN.md。如果已填寫（顏色權杖有數值），則以此為基礎：直接前往步驟 3。 design/references/：每張圖片讀取一次，並為每張圖片在 DESIGN.md → 參考資料中寫下一行說明 （檔案 → 採用：… · 避免：…）。之後依據該文字工作。- 人類在對話中給予的連結、品牌指南、標誌、顏色或字型，以及 PROJECT.md。
- 簡報空白嗎？在一則訊息中向人類提出 3 個簡短問題：這是什麼、為誰而做；三個形容感覺的詞； 他們喜歡或不喜歡的網站。將答案寫入 DESIGN.md → 簡報。
- 寫入 設計輸入 → 參考資料（您找到的內容，或「無」）。
- 讀取
- 如果步驟 1 未提供設計語言：awesome-design-md 基底。
{{run}} design:md list會依類別列出目錄，每個項目一行（--category <word>可縮小範圍）。 提出 2–3 個符合簡報的選項，每個附上一句理由，讓人類選擇。{{run}} design:md use <name>會將其複製到design/DESIGN.md並附上來源標註。將所有品牌名稱、標誌 和商標替換為此專案自己的。- 如果步驟 1 已提供設計語言，或 DESIGN.md 已從某個項目開始（其標頭會註明），則跳過此步驟。
- 寫入 設計輸入 → 基底（該項目，或「無：從人類的參考資料建立」）。
- taste-skill（技能
design-taste-frontend）：藝術方向。- 為此頁面執行其步驟 1–4（簡報與主題盤點、論點、方向、概念）。
- 當步驟 1–2 確定了顏色與字型後，使用
--keep palette,type使其在設計語言內部規劃構圖、圖像與區段， 而不是取代它。 - 將選擇的方向寫入 DESIGN.md 的各節（主題、佈局、元件），以及 設計輸入 → 方向（方向 ID 與一句理由）。
- 符合此網站需求的真實網站。
- 在
references/project-types.md（rg -n "^## " <file>）中打開您的專案類型章節，並針對此頁面 所需的特定模式（定價、結帳、文件、儀表板、入門引導…），參閱references/inspiration.md中的圖庫。 - 使用瀏覽器工具研究 2–3 個符合這些模式的真實網站（層級結構、密度、解釋方式）。 在 DESIGN.md → 參考資料中為每個寫下一行說明。
- 寫入 設計輸入 → 參考網站。
- 在
2. 建置
- 權杖： 將 DESIGN.md 的權杖對應到 {{#tanstack-start}}
src/styles.css{{/tanstack-start}}{{#next}}src/app/globals.css{{/next}}{{#shadcn}}（shadcn/ui 的--background、--primary、--radius…）{{/shadcn}} 中的主題。元件中不得使用原始十六進位值。 - 建置 使用技能
frontend-design，遵循 taste-skill 的方向表（其步驟 5–6）。 {{#shadcn}} 使用 shadcn/ui 元件（技能shadcn；{{dlx}} shadcn@latest add <component>）。 {{/shadcn}} 元件與圖示選擇：references/libraries.md。 - 內容： 真實內容。要求提供，或撰寫特定的純文案。不得使用 Lorem Ipsum、假標誌、假統計數字或 假推薦。讓一件事令人印象深刻，其餘保持低調。
- 基準： 自 360px 起響應式、可見焦點、
prefers-reduced-motion、WCAG 2.2 AA 對比度，以及空白、 載入中與錯誤狀態。
3. 審查
- taste-skill 的閘門與外觀步驟（其步驟 7–8），使用 390px、768px 和 1440px 的螢幕截圖（技能
playwright-cli{{#next}}，或對開發伺服器使用next-dev-loop{{/next}}）。 - 技能
web-design-guidelines用於無障礙與 UX，技能writing-guidelines用於每段文案，以及 技能web-perf用於主要頁面的載入效能。 - 修正前 3 大問題，然後在完成前移除一項裝飾。
規則
- 從參考資料中學習原則（層級結構、節奏、密度、字型、顏色）。絕不複製網站的佈局、文字、標誌、插圖或程式碼， 也絕不發布其他品牌的名稱、標誌或商標。
- 人類的簡報與參考資料優先於 awesome-design-md 基底，後者優先於 taste-skill 的預設值， taste-skill 的預設值優先於您自己的品味。
- 對現有設計進行小幅視覺調整（間距、調色板內的顏色、單一元件）屬於快速變更：遵循 DESIGN.md， 無需重新執行輸入步驟。