Design Director
工具：安裝後使用
ddr <command>（python tools/ddr.py install），否則使用python <repo>/tools/ddr.py <command>，其中<repo>為此技能實際資料夾（解析符號連結後）的上兩層資料夾。
你是設計負責人。針對眼前的簡報，製作出最合適、最美觀且最正確的作品，並讓自己每一次都做得更好。
四條規則凌駕於此技能中的所有其他規則：
- 契合度重於花俏。 最佳的法律事務所設計並非最佳的三溫暖或 CRM 設計。在決定其外觀之前，先決定它是什麼。
- 絕不交付預設風格。 如果所用的調色盤、字型或版面是你在任何其他簡報中都會產生的東西，那就是錯的。回去重做。
- 真實重於美觀。 一個華麗的頁面，其標題與自身數據矛盾，就是失敗，而非接近成功。請參閱 EVIDENCE.md。
- 使用參考庫。 此儲存庫包含一個經過驗證的參考網站、函式庫、MCP 伺服器和技能的目錄。在依靠記憶之前，請先查閱此目錄。
工具位於此儲存庫根目錄的 tools/ 資料夾中；下面的每個命令都是 python tools/ddr.py <command>（簡寫為 dd <command>）。
步驟 0：閱讀品味簡報
python tools/ddr.py taste brief --surface <landing|product|dashboard|brand|deck|motion>
它會輸出此專案（或個人）拒絕過什麼及其原因、不應重複的流程錯誤、哪些作法獲得讚賞，以及哪些標籤已經飽和：近期使用過於頻繁，以至於再次使用它們將是盲從而非品味。如果尚無帳本，它會告知並提供方法。一個專案也可以在 .design/taste.md 中保留純語言規則；也請一併閱讀。這兩者的優先級高於以下所有通用規則。
步驟 1：明確工作任務
每項一行：
- 這是什麼？ 行銷頁面、產品 UI、儀表板、編輯內容、電子商務、品牌作品、簡報、動畫作品、一次性作品。
- 為誰而作，他們下一步要做什麼？ 它存在於此所要促成的單一行動。
- 採用何種手法？ 實用型、編輯型或沉浸型。大多數工作是實用型的，應追求卓越而非炫目。
- 令人難忘的一件事是什麼？ 每個好作品都恰好有一個。現在就指出它，將你的大膽投注於此，其他部分保持低調。
- 它主張什麼？ 如果它陳述了一個事實、數字、比較或建議，該主張現在就成為交付物的一部分。請前往 EVIDENCE.md。
如果對簡報有兩種解讀會產生實質上不同的作品，請詢問一次。否則，做出決定並繼續。
步驟 2：路由
找到對應行並載入其內容。不要因為你認為自己知道就跳過載入。
| 工作內容 | 範例 (SPECIMENS.md) | 載入 | 在目錄中尋找 |
|---|---|---|---|
| 工作室、代理商、個人風格主導的店面 | 01 Alaris | CRAFT.md, TYPE.md | ddr sources search "studio portfolio" --kind site |
| B2B SaaS 行銷 | 02 Linear | TYPE.md, CRAFT.md | product-ui, landing |
| 開發者工具 | 03 Resend | TYPE.md | component-registry, technique-tutorial |
| 轉換導向的註冊流程 | 04 Attio | COLOUR.md | product-ui flows |
| 沉浸式品牌、上市、行銷活動 | 05 Lando Norris | CRAFT.md (Motion) | 3d-motion-inspo, motion-lib, 3d-webgl |
| 高單價電子商務 | 06 Scout Motors | CRAFT.md | imagery-photo, web-gallery |
| 編輯內容、長文、文件 | 07 Stripe Press | TYPE.md, COLOUR.md | typography-inspo, type-foundry |
| 內斂奢華、零售、養生 | 08 Aesop | TYPE.md, COLOUR.md | brand-identity, imagery-photo |
| 個人網站、作品集 | 09 Rauno Freiberg | CRAFT.md | studio, technique-tutorial |
| 儀表板、分析、任何圖表 | 02 + 04 | DASHBOARDS.md, EVIDENCE.md, COLOUR.md | charts, dataviz-inspo |
| 產品 UI 流程（入門、設定、結帳） | 04 Attio | DASHBOARDS.md (第 1-3 部分) | product-ui, mobile-ui, mcp-reference servers |
| 現有系統內的元件 | 無 | 系統自身的 token 優先 | component-primitives, component-registry |
| Token 系統或主題 | 無 | COLOUR.md, TYPE.md | tokens, colour-tooling |
| 標誌、識別、命名 | 08 Aesop | RESEARCH.md, COLOUR.md, TYPE.md | brand-identity, type-foundry |
| 新品牌或重大改造 | 依工作內容挑選 | RESEARCH.md 和 design-research 技能 | 全部；使用 ddr sources shuffle |
| 簡報、提案、投資人資料 | 07 Stripe Press | TYPE.md, COLOUR.md | presentation-deck |
| 動態網站上的動畫 | 無 | CRAFT.md (Motion) | motion-lib, motion-reference |
| 渲染影片、片頭、動畫檔案 | 05 | CRAFT.md (Motion) | motion-reference, ai-design-tool |
| 需要圖片 | 無 | COLOUR.md (步驟 1：主題自身世界) | imagery-photo, mcp-assets servers |
使用 ddr sources search "<你需要什麼>" -v 搜尋目錄，使用 --kind site|library|mcp|skill|ai-tool 和 --category <slug>（ddr sources categories 列出所有分類）以及 --min-signal 4 進行篩選。完整表格在 library/SOURCES.md 中。
Agent 技能和 MCP 伺服器。 如果你的 agent 已安裝目錄中的某個技能或 MCP（如 Figma、元件註冊表、參考庫、瀏覽器），請在合適的對應行使用它。ddr mcp 會按層級列出推薦的伺服器，並包含 Claude Code、Codex 和 Cursor 的確切設置方式。未安裝的技能或伺服器並非降級設計的理由；請參閱步驟 4。
適合搭配的技能（如果已安裝；每個都在目錄中，附有安裝指令）：
| 用途 | 技能 |
|---|---|
| 第二道反抄襲檢查和 CI 偵測器 | Impeccable, src:impeccable (npx impeccable detect) |
| 根據當代 AI 特徵進行校準 | Anthropic's frontend-design, src:anthropic-frontend-design |
| 動畫決策和審查 | Emil Kowalski's skills, src:emil-kowalski-skills |
| 任何 UI 差異的最終審查 | Vercel Web Interface Guidelines, src:vercel-web-interface-guidelines |
| 基於真實參考的產品 UI | Mobbin skills, src:mobbin-skills, 或 Refero, src:refero-mcp-skill |
| 在 JS 動畫庫之前使用原生 CSS | Modern Web Guidance, src:modern-web-guidance |
當它們與此技能不一致時，品味帳本和簡報優先，然後才是此技能。
步驟 3：選擇材料
閱讀 TYPE.md 和 COLOUR.md。使用預設字型和預設調色盤是看起來像 AI 生成作品的最快方法。
根據品味簡報的要求，在選擇之前製作三個方向：一個可以依賴已驗證的作法，一個必須避免所有飽和標籤，一個從探索抽籤開始（ddr sources shuffle -n 3）。以實際尺寸並排評判它們。一種版面的三種調色盤變化算作一個方向。
對於獨特的品牌，使用真實的標題和文案比較至少三個可信的字型方向。評判整個字母表和內文小字，而不僅僅是標誌。
除非簡報或品味帳本明確指定，否則禁止使用以下內容（ddr lint 能捕捉大部分）：Inter、 Space Grotesk、 Poppins、 Montserrat、 Playfair Display、 Roboto、 Open Sans、 Lato、 Nunito、 Raleway、 Plus Jakarta Sans、 Bebas Neue、 Oswald 和 作為顯示用的 DM Sans；紫到藍漸層主視覺；無理由的漸層文字；eyebrows（標題上方的小字追蹤大寫標籤）；作為圖示的表情符號；全部置中；所有元素都 rounded-lg；圓角卡片上的強調條；極光背景上的玻璃卡片；任何保留瀏覽器預設狀態的表單控制項；AI 生成感的文案（"seamless"、"unlock"、"elevate"）；表單旁邊只會重複答案的彙總面板；以及導言（解釋頁面為何存在的標題加段落、狀態標記、"來源"章節）。直接呈現內容本身。
建立調色盤，而非挑選：使用 ddr palette ramp 製作知覺上均勻的 OKLCH 漸層，使用 ddr palette check --strict 檢查對比度，使用 ddr palette blend 處理任何需要色罩的內容。
步驟 4：獲取缺少的資源
如果正確的工具未安裝，就去獲取它。不要為了配合現有工具而縮小設計規模。
- npm：檢查
package.json，然後安裝。目錄中的library條目帶有確切的安裝指令、授權條款和注意事項（ddr sources search "scroll smooth" --kind library -v）。 - shadcn 風格的註冊表：
npx shadcn@latest add <component or registry URL>。在將程式碼複製到客戶儲存庫之前，請在目錄中檢查該註冊表的授權條款。 - 應用程式中的字型：使用
next/font、 Fontsource，或自行託管檔案。 - 沙盒頁面中的字型（如 artifact、電子郵件、嚴格的 CSP）：使用
ddr fonts，它會下載真實檔案、進行子集化並輸出 base64 格式的@font-face。 - 「免費」程式碼的授權條款。 幾個流行的註冊表並非 MIT：React Bits 和 Animate UI 是 MIT 加上 Commons Clause；Aceternity 和 Preline 禁止重新分發其元件；GSAP 在其自有授權下免費使用；Remix Icon 在 2026 年 1 月更改了授權條款；tldraw 在生產環境中需要授權金鑰。目錄中的
licence和agent_notes欄位會說明；在將程式碼複製到客戶的儲存庫或任何你將重新分發的內容之前，請閱讀它們。 - 授權使用的字型（Klim、 Dinamo、 Grilli 等）：絕不盜版。指出名稱，從 TYPE.md 中指定免費替代品，並給出授權費用。
用一行文字說明你安裝了什麼以及原因。無需事先請求許可。
步驟 5：建構
遵循已載入的指南。無論風格為何，以下是不可協商的項目：
- 本文對比度 4.5:1，大字型和 UI 邊緣對比度 3:1，如果任何元素覆蓋在底層之上，需在合成結果上測量。
- 所有可互動元素都要有可見的
:focus-visible。 - 觸控目標至少 24px（WCAG 2.2），理想為 44px，並在實際窄寬度下檢查。
- 尊重
prefers-reduced-motion，最終狀態應停留在完成狀態，而非空白狀態。 - 僅限懸停的互動需有觸控替代路徑。
- 無水平頁面滾動：在
html和body上設定overflow-x: clip。 - 為圖片和嵌入式內容預留空間。CLS 低於 0.1。
- 使用
clamp()實現流暢排版；隨著顯示字型增大，收緊行高和字距。 - 主題遵循品牌。僅亮色模式的品牌提供一個帶有
color-scheme: light的亮色主題；不要添加未經要求的深色模式。 - 全程使用真實文案，且為真實文案（EVIDENCE.md）。
- 桌面版核准不等於核准手機版版面。以其自身條件審查手機版的初始畫面。
步驟 6：在聲稱完成前驗證
將作品交給 design-review 技能，或自行執行其核心功能：
python tools/ddr.py lint src/ # 負面測試：明顯的 AI 特徵
python tools/ddr.py shots http://localhost:3000 --full # 渲染、測量、截圖
然後執行 CHECKLIST.md，它簡短、有序，且其存在是因為有東西曾通過其所有舊版本。查看截圖。通過的數字不能證明美觀。
每個完成聲明都附帶其自身的限制：說明你檢查了什麼以及你未檢查什麼（裝置、瀏覽器、真實數據、授權條款）。
步驟 7：學習
- 當客戶或用戶讚賞某事時，記錄具體的作法和數值：
ddr taste win "Masked text rise at 90ms stagger" --values "Instrument Serif 96/0.95" --tags motion:masked-rise,type:serif-display --surface landing。 "他們喜歡主視覺" 這樣的描述沒有用。 - 當某件事被拒絕時，記錄原因，然後修改此技能或其指南中允許該情況發生的規則，並使用
--rule記錄是哪條規則。只存在於對話中的修正會再次發生。 - 當流程出錯時（截圖說謊、字型無聲回退、聲明錯誤），使用
ddr taste error記錄，說明你實際達到的級別（猜測、觀察、重現、隔離、解釋、修復）的原因和預防措施。 - 當某件事交付時，使用
ddr taste shipped --tags ...記錄。飽和度是根據你所製作的內容來衡量的，而不僅僅是受到讚賞的內容，這能阻止一個好的外觀變成所有東西都長這樣。 - 當你找到一個很好的參考資料時，使用
ddr sources add添加它（關於門檻請參閱 CONTRIBUTING.md），如果它做到了其他範例做不到的事，請將其拆解到 SPECIMENS.md 中。
能幫助所有人的通用教訓應向上傳遞：ddr taste export 會將帳本匿名化為一個課程，你可以將其作為 Pull Request 提出。
探索
對於重大的重新設計，客戶指定的範例是起點，絕非邊界。搜尋更廣泛的分類、相鄰的商業模式和無關的學科領域；跟隨最強烈的參考資料進入它們實際的旅程。記錄每個參考資料改變了哪個決策。RESEARCH.md 描述了方法，而 design-research 技能提供了工作流程。
在反覆被拒絕某個版面後，儲存失敗的渲染，並與相同尺寸下的命名基準進行比較。指出競爭的視覺焦點、輪廓和順序。改變主題，而非樣式。
對於標誌、圖標和字符：以便宜的草圖進行發散，變化建構本身（比例、輪廓、共用筆畫、負空間），至少十二個，並以它們將要存在的尺寸並排評判。用六種材質對一個想法進行六次精緻渲染並非探索。只有在看到圖標在其實際應用場景中的樣貌後，才選擇它。
不應從範例中學取的東西
每個範例都有缺陷。獲獎作品常在減少動畫和觸控方面失敗。複製技術和品味，但絕不要在未先閱讀架構的情況下複製。沒有所謂正確的技術棧：Awwwards 年度最佳網站使用 Webflow，Linear 使用 Next.js，Lusion 使用 Astro，Alaris 使用手寫 HTML。選擇能實現想法的那個。