設計
打造看起來是「精心挑選」而非「隨機生成」的介面。每個預設值都是一個被跳過的決定。這個技能讓每個決定都出於刻意：先有設計摘要，再建立品質底線，最後對真實截圖進行評審。
兩種失敗模式，第一種更糟：
- 過於通用。 該頁面可以屬於其類別中的任何產品。它套用了當前 AI 的預設風格，或者平淡無奇到沒有人會記得。
- 過於雜亂。 每個元素都在表現。動畫、漸層和裝飾相互競爭，以至於沒有任何東西能第一眼被閱讀。
這兩種問題的解法是：一個強而有力的核心概念，在一個位置，於一個有紀律的系統內表達。節制不是目標，意圖才是。
1. 選擇模式
| 模式 | 使用時機 | 執行動作 |
|---|---|---|
| 建立 (Build) | 新頁面、畫面、元件、投影片組或圖像集 | 第 2 到第 5 節 |
| 優化 (Refine) | 「讓它更大膽、更安靜、更簡單、更繽紛、更有活力」 | 第 6 節 |
| 評審 (Critique) | 「請審查這個」，「這樣看起來對嗎？」「評個分」 | references/critique.md |
| 打磨 (Polish) | 在任何視覺作品上線之前 | 第 7 節 |
優化絕不重新設計。它保留品牌識別、文案以及請求範圍外的所有內容。如果請求需要重新設計，請直言不諱並停止。切勿在兩者之間妥協。
2. 首先載入上下文
- 讀取倉儲根目錄的
DESIGN.md、倉儲的CLAUDE.md、現有的設計代碼（global.css、tailwind.config.*、主題檔案）以及.claude/image-generation/style.md。 - 設計摘要 (brief) 優先。 當
DESIGN.md或用戶指定了某種外觀時，嚴格遵循它，即使該外觀出現在「破綻提示清單」上。以下規則僅管轄尚未被決定的選擇。 - 若無
DESIGN.md，先探索倉儲，然後最多問三個關於持久事實的問題：誰在用、必須達成什麼、有何證據。切勿要求用戶在抽象層面挑選美學。改為展示兩個或三個選項。 - 將你學到的內容依據 references/design-md.md 寫入
DESIGN.md。下一個工作階段不應再問同樣的問題。 - 一次修正就是一條常設規則。 當用戶糾正一個視覺選擇時，在同一輪對話中，於
DESIGN.md的「常設規則 (Standing rules)」中加入一行。 - 僅使用現有證據。 切勿編造客戶推薦、客戶標誌、用戶數量、指標或引言。標記佔位資料並列出清單供用戶確認。
3. 撰寫設計摘要 (建立模式)
在撰寫程式碼之前，先在對話中發布一份簡短的設計摘要。這只需要一分鐘，可防止產出過於通用的結果。
-
設計閱讀。 一句話：「以 [表層] 身份，針對 [受眾]，在 [模式] 模式下，傾向 [方向]。」
-
表層模式。 每個表層選擇一個模式，而非每個產品。開發者工具的登陸頁面仍然是「說服 (Persuade)」模式。
模式 表層 表達方式 變化度 / 動態度 / 密集度 說服 (Persuade) 登陸頁面、定價頁面、產品發布頁面、作品集首頁 一個大創意、真實圖像、色彩區域 7 / 6 / 3 操作 (Operate) 應用程式、儀表板、設定、後台 系統本身就是設計。不炫技 3 / 2 / 7 閱讀 (Read) 文件、文章、課程 字體撐起整個頁面 3 / 2 / 5 體驗 (Experience) 遊戲、趣味學習、兒童、活動 角色、環境動畫、幽默感 8 / 8 / 4 三個刻度範圍從 1 到 10。變化度是從對稱到大膽不對稱。動態度是從靜態到電影感。密集度是從畫廊到駕駛艙。將感受詞彙對應到這些刻度：「極簡 (minimal)」降低變化度和密集度，「花俏 (flashy)」或「生動 (lively)」提昇動態度，「密集 (dense)」或「專業 (pro)」提昇密集度。在
DESIGN.md中記錄這些刻度設定。 -
場景句子。 誰在用、在哪裡、用什麼光線。「一位值夜班的護士在昏暗的休息室裡用手機查看排班表」決定了要用深色模式還是淺色模式。像「開發者工具等於深色」這種類別標籤則不適用。
-
概念句子。 「[只有這個主題才有的特點] 變成了 [一種視覺裝置]。」然後執行競爭者測試：換上競爭者的名字。如果句子仍然成立，表示概念太籠統。重寫它。
-
設計代碼。 四到六種命名顏色與一個色彩策略 (references/color.md)。字體家族及其角色 (references/typography.md)。一個由一句話加上 ASCII 線框圖表示的佈局概念。動態等級。
-
論點 (僅限說服模式)。 每個區塊一個主張，每個主張附上證據。刪除任何沒有主張的區塊。不要預設使用英雄區塊、合作夥伴標誌條、三個功能特點、行動呼籲按鈕這種結構。
-
對照破綻檢查。 對於設計摘要中未定義的每個軸向，請閱讀 references/tells.md。問問自己：這個主題是否能僅從類別被猜出？這個外觀是否能從「類別加上『非典型外觀』」被猜出？如果任一答案是肯定的，請修改該部分並說明做了哪些改動。
4. 建立到品質底線
將大膽用於一處。讓一個元素成為令人難忘的部分，圍繞它的所有東西保持安靜，並刪除不服務於核心概念的裝飾。當你移除一個破綻時，用真實的東西填補空間：比例、圖像、內容或色彩區域。僅移除會留下一個薄弱、空洞的頁面。
品質底線在每個表層上都應成立，無需特別說明：
- 用設計代碼，非固定值。 顏色、字體、間距、圓角和動畫作為
:root上的 CSS 變數存在。淺色和深色來自prefers-color-scheme，可使用data-theme覆寫。當存在切換開關時，以開關為準。 - 對比度。 文字 4.5:1，大型文字、圖示、控制項和焦點環 3:1。切勿在彩色背景上使用灰色文字。
- 字體。 最多兩個家族。五種或更少字級。正文字體 16px 或更大，每行 45 到 75 個字元。標題在任何寬度下都能容納在兩行內。
- 行動優先。 從 320px 寬度開始正常運作，16px 間距，無橫向滾動。觸控目標 44px。輸入框 16px 以避免 iOS 縮放。永遠不要禁用縮放。
- 狀態。 每個控制項均有預設、懸停、焦點可見、啟用、禁用、載入中、錯誤和成功狀態。每個非同步區塊均有載入中、空資料和錯誤狀態。
- 穩定性。 無版面偏移。動畫或非同步面板保持固定高度。網格中的卡片共享統一高度，頁尾置底。
- 切勿傾斜任何可點擊元素。 傾斜僅適用於裝飾性圖章和貼紙。
- 動畫。 有目的性、可中斷、僅使用
transform和opacity屬性，並在prefers-reduced-motion下更為輕緩。內容無需 JavaScript 即可看見。 - 圖像。 使用一致風格的實拍或生成藝術。角色和裝飾性藝術以透明裁剪圖形式輸出，絕非深色方塊。影像中不內嵌文字。
- 文案。 簡短、具體，並從用戶角度撰寫。視覺勝過段落。
細節存在於參考文件中。僅閱讀任務所需的部分：
| 文件 | 涵蓋內容 |
|---|---|
| references/typography.md | 挑選字體、字級系統、度量衡、顯示字體、載入方式 |
| references/color.md | 色彩策略、OKLCH 變數、深色模式、對比度 |
| references/layout.md | 間距、框架、網格、層級結構、響應式與觸控 |
| references/motion.md | 是否使用動畫、緩動函數、持續時間、效能、減少動畫偏好 |
| references/interaction.md | 狀態、表單、最糟情況資料、感知速度 |
| references/copy.md | UX 寫作、錯誤訊息、空狀態、誠實內容 |
| references/imagery.md | 藝術指導、生成藝術、照片、圖示 |
| references/decks.md | 投影片與簡報 |
| references/tells.md | 過時的「生成式設計」預設值列表 |
5. 用眼睛看
程式碼審查不是設計審查。渲染出來，用眼睛看。
- 執行頁面並在 375px 和 1440px 寬度下截圖，若版面在此處改變則加上 768px。當淺色和深色模式都存在時，兩者都截圖。使用
playwright-cli、瀏覽器開發者面板或工作階段可用的任何瀏覽器工具。 - 瞇著眼睛看每張截圖。主要元素、次要元素和各組應仍按此順序被閱讀。
- 尋找衝突：重疊、被裁剪的橫幅、不該換行卻換行的文字、對齊不準確的圖示、不均勻的網格、本該是 2x2 卻出現 3+1 的行列。
- 使用 references/critique.md 進行評審，按照其修復順序修復，然後再次截圖。三輪後停止，並報告剩餘問題。
- 對於遊戲和互動作品，實際遊玩。由子代理在行動裝置寬度下進行遊玩測試，能發現僅閱讀程式碼無法找出的問題。
- 保持開發伺服器運行，並將網址提供給用戶。將最終截圖放入 PR 中：包含行動版和桌機版、淺色和深色模式。
當方向尚未確定時（例如字體、標誌或色板），並排建立兩到三個小型模型，讓用戶挑選。然後建置獲勝方案。
6. 優化
每個優化請求都遵循一個方法：評估當前狀態，撰寫一句話的論點，在現有系統的語彙中應用它，截取螢幕截圖，然後進行打磨。
| 請求 | 應對方式 |
|---|---|
| 更大膽 (Bolder) | 將目標提升到其周邊元素的信心水準：比例、粗細、色彩承諾、圖像。然後讓其周圍的東西安靜下來 |
| 更安靜 (Quieter) | 一次移除一個配件。調低動態刻度。合併顏色以減少角色 |
| 更簡單 (Simpler) | 刪除沒有主張的區塊。將文字量減半。將段落轉變為一個視覺元素 |
| 更多色彩 (More color) | 在色彩策略階梯上向上移動一步。切勿先加入第二個強調色 |
| 排版 (Typography) | 根據 references/typography.md 重建字級系統和字體配對 |
| 佈局 (Layout) | 根據 references/layout.md 修正框架、左邊界和節奏 |
| 加入動畫 (Animate) | 先通過 references/motion.md 中的頻率門檻。然後加入一個編排好的動畫時刻 |
| 更清晰的文案 (Clearer copy) | 套用 references/copy.md 的原則 |
| 響應式 (Responsive) | 先在 375px 寬度下重新設計：單欄佈局、真實的觸控目標、無任何元素被裁剪 |
| 強化 (Harden) | 輸入最糟情況資料，並根據 references/interaction.md 補上缺失的狀態 |
7. 上線檢查清單
在宣告任何視覺工作完成前，請執行此檢查：
-
DESIGN.md反映了所做的決定以及任何給出的修正 - 375px 和桌機版的截圖（淺色與深色模式）無衝突或裁剪問題
- 除非設計摘要特別指定，否則 references/tells.md 中的任何項目都未出現
- 每個控制項都有其狀態，每個非同步區塊都有載入中、空資料和錯誤狀態
- 最糟情況資料的渲染正常：長名稱、零個和一個項目、極大數字
- 鍵盤可以操作所有內容，焦點可見，並尊重減少動畫偏好設定
-
accessibility技能針對主要主題報告零個嚴重違規 - 圖像風格一致、在需要處已去背，並使用
web-optimize進行了優化 - 文案已精簡到用戶所需，無任何編造的證據
- 開發伺服器正在運行，且 PR 中附有截圖
相關技能
accessibility使用 axe-core 跨寬度、色彩配置和主題審計 WCAG 2.2 AA 標準。image-generation根據鎖定色板的style.md生成藝術。background-removal負責去背。web-optimize負責輸出。architecture在其 web 參考文件 中持有網站的框架預設值。
致謝
此技能改寫並融合了來自 Anthropic 的 frontend-design 技能（Apache-2.0 授權）、Paul Bakaus 的 Impeccable（Apache-2.0 授權）、Emil Kowalski 的設計工程技能（MIT 授權）和 Leonxlnx 的 taste-skill（MIT 授權）的概念。未複製任何文字。每份參考文件都列出了其規則的來源。