Design Quality v2

一個用於創建和評估介面設計的全週期技能。對於現有介面，它會稽核並評分。對於新介面，它會設定方向並確保工藝水準。對於有缺陷的介面，它會逐步套用修復。

此版本使用專門的子代理來執行審查模式和修復模式——盡可能平行處理，當任何維度得分 ≤ 5 時會自動進行深入分析。

關卡 0：判斷輸入類型

在進行任何分析或創建之前，先識別共享的內容。這會徹底改變後續流程。

共享內容	應對方式
截圖 / 圖片	視覺分析；記下無法確認的 CSS
HTML / CSS 原始碼	讀取樣式；可進行完整稽核
專案資料夾	先 glob 搜尋主要 CSS/元件檔案；評分前先閱讀
URL / 即時頁面	讀取 DOM；如有瀏覽器可用，則透過 DevTools 檢查樣式
Artifact 連結	讀取 artifact；視為 HTML 原始碼處理
純文字描述	在評分前要求至少提供上述一種內容；描述缺失的部分

同時偵測上下文類型——這會影響適用的啟發式原則：

應用程式畫面（工具、儀表板、SaaS 產品）：密度為重；標題區塊較小；操作本身就是內容
頁面（登入頁面、行銷、編輯內容）：有更多創意空間；英雄區域很重要；章節與節奏

如果不確定，請說明你的假設並繼續進行。

模式選擇

從請求中偵測——如有疑問，從審查開始：

請求類型	模式
"review", "critique", "audit", "does this look AI-generated?"	review
"build", "create", "design this page"	create
"fix", "improve", "unslop", "redesign"	fix（review → apply）
"polish", "feels slightly off", "almost there"	polish

如果專案根目錄中存在 PROJECT_DESIGN.md 檔案，請先讀取它。其中包含已核准的方向、調色板和 Signature——未經詢問不要覆蓋它。

代理架構

對於審查模式和修復模式，分派專門的子代理，而不是依序處理所有工作。這樣可以在更短的時間內產生更深入的分析。

何時使用代理

審查模式 針對任何真實的 UI 輸入 → 始終分派 3 個平行審查代理
任何維度得分 ≤ 5 → 在評分卡顯示後自動分派相符的深入分析代理
修復模式 → 為每個階段分派一個專用的修復代理（階段 3 和 4 平行進行）
創建模式關卡 1 → 當已知產品 URL 或類別時，可選擇分派一個方向研究代理

Fork 與全新

subagent_type: "fork" — 用於需要完整對話上下文（UI 輸入、截圖、程式碼）的審查和修復代理
Default (fresh) — 用於不需要對話歷史的方向研究代理

代理提示檔案

完整的提示範本位於 references/agents/。分派時請參考它們——每個檔案都包含該代理的指令和輸出格式。

審查模式

稽核、評分和優先排序。未經詢問不得更改程式碼。

步驟 0：分派 3 個平行審查代理

在你進行任何分析之前，使用 Agent 工具在一則訊息中分派全部三個代理。三者都是 forks——它們繼承完整的對話上下文，包括 UI 輸入。

代理 1 — 廉價感稽核員 (Slop Auditor) 提示範本：references/agents/review-slop.md 任務：廉價感稽核、範本檢查、無障礙性、行動端/觸控、效能快速檢查。

代理 2 — 評分卡評分員 (Scorecard Scorer) 提示範本：references/agents/review-scorecard.md 任務：對所有 8 個維度以 1-10 分評分，並附上每項評分的理由。

代理 3 — 情緒分析師 (Emotion Analyst) 提示範本：references/agents/review-emotion.md 任務：在所有關鍵狀態下進行感受狀態檢查 + 峰終定律映射。

等待所有 3 個代理完成，然後進入步驟 1。

步驟 1：整合

將三個代理的輸出合併為標準輸出格式。去重出現在多個代理中的發現。如果代理對某個分數有分歧，則使用較低的值並記下分歧。

## 廉價感稽核 (Slop Audit)
[來自 Agent 1 — 每個發現附帶位置和嚴重性]

## 範本檢查 (Template Check)
[來自 Agent 1]

## 評分卡 (Scorecard)
產品契合度：    X/10   [來自 Agent 2 — 一行備註]
層級結構：      X/10
清晰度：        X/10
品味：          X/10
克制力：        X/10
資訊密度：      X/10
工藝：          X/10
響應式：        X/10
整體：          X/10

## 情感設計 (Emotional Design)
[來自 Agent 3 — 感受狀態 + 峰終發現]

## 判決 (Verdict)
最佳部分：
最差部分：
必要修復 (P0)：[如果有的話 — 否則 "none"]
快速獲勝 (P1)：[最多 3 個]

在輸出之後，詢問是否要套用任何修復。

步驟 2：自動深入分析

在評分卡顯示後，檢查每個維度。對於任何得分 ≤ 5 的維度，無需等待提示，自動分派相符的深入分析代理。

請參閱 references/agents/deepdive-dispatch.md 了解分派表和提示範本。

在分派前宣布：「層級結構得分 4 — 分派聚焦的視覺層級結構批評。」

深入分析對應表：

維度 / 發現	要分派的技能
層級結構 ≤ 5	`critique-visual-hierarchy` 技能
清晰度 ≤ 5 (affordances)	`critique-affordance` 技能
清晰度 ≤ 5 (密度)	`critique-information-density` 技能
工藝 ≤ 5 (字體排印)	`critique-typography` 技能
工藝 ≤ 5 (色彩)	`critique-color` 技能
工藝 ≤ 5 (版面)	`critique-composition` 技能
品味 ≤ 5 (感覺平淡)	`interfaces-that-feel` 技能
密度 ≤ 5	`critique-information-density` 技能
情感弧線問題	`peak-end-rule` 技能

創建模式

在撰寫任何 UI 之前，請遵循此順序。每個步驟都是一道關卡——在繼續之前停止並確認。

關卡 0：上下文類型

在繼續之前說明適用哪一種：

應用程式畫面 — 工具、儀表板、資料產品。密度、操作和狀態為重。
頁面 — 登入、編輯、行銷。構成、節奏和章節為重。

關卡 1：產品研究代理（可選但建議）

如果產品有 URL、名稱或屬於已知類別，請在向使用者詢問產品理解之前分派一個研究代理。這可以節省一次來回溝通，並揭示使用者可能不會想到提及的領域特定慣例。

提示範本：references/agents/direction-research.md

如果沒有已知的 URL 或類別，請跳過此步驟，直接詢問使用者。

檢查專案根目錄中是否存在 PROJECT_DESIGN.md。如果存在，請讀取它——方向已設定；跳至關卡 3（建置）並套用記錄的方向。

如果沒有，請讀取或詢問：產品的用途、目標用戶、主要任務、現有內容、技術棧、現有品牌色彩、字型、元件。

詢問：「在我設定設計方向之前，我的理解是否正確？」 停下。等待。

關卡 2：方向 + 設計撥盤

從產品推導出五條線——絕不從趨勢、作品集或看起來很酷的東西中獲取：

產品：用一句簡單的話說明它的用途和目標用戶。
性格 (Character)：2-3 個具體的詞。例如 calm, exact, a little warm 或 fast, technical, playful。「乾淨、現代、時尚、極簡、高級」是被禁止的——它們描述了每個範本。
世界 (World)：產品自然歸屬的材料或場所。筆記應用：紙張和墨水。監控工具：儀表板和夜班。旅遊應用：地圖和窗光。這會為中性色、強調色和視覺時刻著色。
時刻 (Moments)：螢幕上 1-2 個設計變得豐富且具體的地方。其他所有東西保持低調，以便這些時刻能立即被讀取。
簽名 (Signature)：只有該產品才會有一個小細節，並且一致地重複。

展示 1-3 個方向。對於每個方向，顯示三個設計撥盤：

變化性  ░░░░░░░░░░  1-10   (1 = 極簡/居中，10 = 大膽/不對稱)
動態感  ░░░░░░░░░░  1-10   (1 = 靜態，10 = 動畫)
密度    ░░░░░░░░░░  1-10   (1 = 寬敞/編輯風格，10 = 儀表板/密集)

詢問：「哪個方向？撥盤設定是否正確，或者我應該調整任何一項？」 停下。等待。

方向確認後，建議在專案根目錄中建立一個 PROJECT_DESIGN.md：

# PROJECT_DESIGN.md

## 方向：[名稱]
產品：[一句話]
性格：[2-3 個詞]
世界：[材料 / 場所]
時刻：[1-2 個具體位置]
簽名：[一個細節]

## 撥盤
變化性：X/10
動態感：X/10
密度：X/10

## 調色板
背景色：[token + hex]
強調色：[token + hex]
主要文字色：[token + hex]
次要文字色：[token + hex]

## 字體排印
顯示字型：[字型名稱 + 粗細]
正文字型：[字型名稱 + 粗細]
等寬字型：[字型名稱]（如果適用）

## 邊框圓角：[數值]px

設計原則

方向確認後，按此順序應用（較早的階段會影響後續階段）：

間距 — 首先建立

8px 網格。所有外邊距、內邊距、間距：4 或 8 的倍數。（mt-[13px] → 修正它。）
相同元素 = 相同大小。所有列表行共用一個高度和一個間距。
空間顯示分組：內部 < 外部。章節標籤更靠近自己的項目，而不是上面的項目。
導航最密集：行高 32-36px，之間 2-4px。

色彩

一個中性色階，朝向世界色調傾斜。背景、表面、邊框、文字都來自那個色階。
一個強調色，很少使用：主要操作、選取、或唯一重要的數字。
三種文字角色：主要、次要、次要淡化。絕不使用十種略微不同的灰色。
禁止：表面上的色相漸層、漸層文字、彩色發光、彩色陰影、放射狀色塊、霓虹邊框。
強調色上的文字：≥ 4.5:1 對比度。
對於新的色彩 token，偏好使用 OKLCH：oklch(L% C H)。

字體排印

將一個獨特的顯示字型與一個乾淨的正文字型配對。最大化粗細對比。
所有標題（h1-h3）使用 text-wrap: balance。正文和列表文字使用 text-wrap: pretty。
在 :root 或 html 上使用 -webkit-font-smoothing: antialiased。
正文文字最小值 14px（偏好 16px）。每頁一個 h1。

元件

按鈕：動詞優先的標籤。每個區塊一個主要按鈕。
不使用 emoji 作為圖示。一個圖示庫，一個描邊粗細，僅使用 currentColor。
卡片：陰影或邊框，不能兩者都用。
空狀態：插圖 + 標題 + CTA。絕不能只是空白。
載入：300ms 延遲後使用骨架螢幕（而不是轉圈圈動畫）。
模態框：X 關閉按鈕、取消和 Escape。鎖定焦點。關閉時返回焦點。
在所有模態框、抽屜和下拉式選單上使用 overscroll-behavior: contain。
所有圖示按鈕都需要 aria-label。所有表單輸入都需要關聯的 <label>。

一個亮點元素規則

每個畫面都有一個經過拋光的豐富元素。它周圍的所有東西都保持低調。

反通用護欄

如果設計在作品集截圖中看起來令人印象深刻，但會讓產品變得不清晰，請拒絕它。

建置後

執行審查模式（使用代理）。完成條件：無 P0 發現，整體 ≥ 7/10，產品契合度 ≥ 7/10。

修復模式

先執行審查模式以取得評分卡。然後按階段順序分派修復代理。

執行順序：

階段 1、2 → 依序（先間距，後色彩）
階段 3 + 階段 4 → 平行（圖示和文案是獨立的）
階段 5-10 → 依序

請參閱 references/agents/fix-passes.md 了解每個階段的代理提示範本。

對於每個階段，宣告代理正在做什麼，並報告每個階段的內容：變更了什麼以及仍然需要注意什麼。

階段順序：

間距 — 8px 網格對齊、節奏、分組
色彩 — 移除廉價感，從中性色階建立
圖示 — 一組、一種尺寸、一種描邊、currentColor （與文案平行）
文案 — 移除 emoji 標籤，緩和誇張語氣，使其具有產品特色 （與圖示平行）
字體排印 — 層級結構、粗細、text-wrap: balance、text-wrap: pretty、抗鋸齒、tabular-nums
版面 — 對齊、密度
細節 — 同心圓角、陰影、邊框
無障礙與觸控 — 焦點狀態、aria-label、touch-action: manipulation、44px 目標、overscroll-behavior
視覺 — 空狀態插圖、圖示一致性、圖片長寬比。請參閱 references/passes-visuals.md
動態 — 最後階段，僅在能增加意義的地方使用。請參閱 references/passes-motion.md

所有階段完成後：再次執行審查模式代理以驗證。報告與原始評分卡的差異。

拋光模式

適用於大部分設計良好但感覺略有偏差的介面。

技巧：在瀏覽器 DevTools（動畫面板）中將介面速度降至 10%，並瀏覽每個狀態：懸停、焦點、啟用、載入、空。在 10% 速度下感覺不對勁的地方，就是全速時微妙地有問題的地方。

請參閱 references/micro-polish.md 了解具體數值。

快速檢查清單：

交付前檢查清單

在將任何 UI 標記為完成之前：

沒有使用 emoji 作為圖示（使用 SVG：Heroicons / Lucide / Phosphor / Radix）
所有可點擊元素上使用 cursor-pointer
文字對比度 ≥ 4.5:1（WCAG AA）
鍵盤導航的焦點狀態可見（focus-visible，不要移除 outline）
每個圖示按鈕上都有 aria-label
每個表單輸入都關聯了 <label>

...

RomuloRogerio/design-quality-v2

design-quality-v2 是什麼？

在你喜歡的 AI 中提問

說明文件