設計精簡版 (Design Lean) 是做什麼的？

介面工作以三種模式進行，作為一系列閘道執行。每個閘道都有通過條件、它留下的證據、重試次數上限以及失敗時會發生什麼事。虛構產品 UI（英雄式展示、bento 方塊、游標逐步教學）屬於 design-demo 技能，該技能會載入此技能以獲取其規則。

為什麼這個技能存在。 模型的預設 UI 是它所見過的所有 UI 的平均值：置中標題，上方有個標籤、一行圖示卡片、柔和的漸層、統一的圓角和灰色陰影。意圖存在於文字描述中，但程式碼生成是從模式中提取，所以即使寫了「溫暖且具體」，仍然會產出模板。因此，每個選擇都必須追溯到一個書面決定，並經過檢查。如果另一個模型在收到類似提示時會產生大體相同的畫面，那麼該工作就失敗了。去除俗套（slop）只是工作的一半；一個乾淨但可能屬於任何產品的畫面，就是下一個模板。

什麼優先於此技能。 (1) 真實的品牌、書面規格或指定的視覺方向：嚴格遵循它，即使它要求的東西是此技能稱之為預設值的項目；在報告中列出每個衝突，並附上一行可以應用該規則的變更。紫色到藍色的漸層、閃光或光暈都算俗套，即使是在標誌中，除非使用者說那是品牌的一部分。(2) .design/system.md（或舊版的 .interface-design/system.md）：先閱讀它；那些決定已經做出；標記任何偏離。(3) 此技能，適用於所有其他未明確規定的部分。

工作流程

G0 路由

按順序詢問；第一個肯定的回答決定路由。

僅需提出發現，不需變更？ → 審查
需要作為插圖的虛構產品 UI？ → 載入 design-demo
需要保留現有 UI 的功能、內容和區段順序？ → 打磨
其他任何情況，包括可能變更內容或結構的重新設計 → 建構

表現形式：頁面（用於閱讀和滾動：登陸頁面、行銷、作品集、活動、組織網站；側重於英雄區、文案、圖像、區段節奏）或應用程式畫面（用於操作：儀表板、管理後台、設定、表格、收件匣、工具；側重於層級、密度、狀態、代幣）。展示其應用程式的產品網站是頁面；其上的應用程式片段則遵循應用程式畫面規則。

閘道註冊表

閘道	通過條件	留下的證據	上限	達到上限時的操作
G1 方向	移除名稱測試通過；人員確認，或適用跳過規則	方向區塊	2 輪探索	選取最強選項，在報告中將其標記為假設
G2 計畫審查	每個類似提示會產生相同結果的地方都已被修改；`.design/decisions.md` 已撰寫完成	decisions.md	1 輪修改	繼續執行；在報告中列出剩餘的預設值
G3 元件	`gate.js --only <名稱>` 在 1440 和 390 寬度下均通過，且元件遵循 decisions.md 或記錄例外	一條閘道日誌行	每次檢查 2 次修正嘗試	將其記錄為一個包含原因的問題；只有在沒有其他項目依賴它時才繼續
G4 頁面	完整 `gate.js` 執行通過；四項測試和判斷檢查清單通過	閘道總計、桌面和手機截圖	3 輪渲染	報告仍失敗的部分
G5 報告	報告模板的每個欄位都已填寫或標記為無	報告	—	—
R1 發現 (審查)	每個發現都有標準、位置、嚴重性和具體修正方案	發現清單	—	丟棄沒有證據的發現

建構執行 G1 到 G5。打磨執行 G1，然後執行 G4 和 G5：其通過是針對整個畫面，所以最後才進行一次閘道檢查，而不是針對每個元件。審查執行 G0 和 R1。

G1 等待的跳過規則： 人員表示直接做就好；品牌或規格已確定方向；現有設計內的一個小型獨立元件。

無人值守執行。 當沒有人可以回答時（排程執行、人員表示稍後回來查看、或問題未獲得回應），不要在 G1 等待。選取一個方向，在報告頂部將其陳述為一個假設，並附上一行可以改變它的內容，然後繼續。跳過付費圖像生成，並使用視覺效果中的下一個選項。如果打磨執行沒有發現任何俗套，則報告建議的改良而不實際套用。稍後重新導向的代價應為一條訊息。

在建構中，一次只進行一個元件。 對其進行閘道檢查、記錄它，然後開始下一個。失敗必須立即修正，而不是累積到最後：問題會疊加。

方向

意圖

在任何視覺決策之前回答；保持簡潔的摘要。

這個人是誰？ 真實的人：他們在哪裡、五分鐘前在做什麼、接下來要做什麼。
他們必須完成什麼？ 動詞：批閱這些提交、找出故障的部署。它決定了什麼優先、什麼跟隨、什麼隱藏。
它應該給人什麼感覺？ 具有意義的詞彙：像筆記本一樣溫暖、像終端機一樣冷冽、像交易大廳一樣密集。「乾淨和現代」沒有任何意義。

如果摘要沒有命名主題，則提出一個具體的主題、受眾和主要任務並確認；如果脈絡允許做出負責任的假設，則用一行陳述它並繼續。意圖是系統性的：如果感覺是溫暖的，那麼表面、文字、邊框、強調色和字體都是溫暖的。「這很常見」或「這可行」不是理由。

領域探索

產出全部四項：領域（從主題世界中提取 5 個以上的概念和隱喻）；色彩世界（從其物理版本中提取 5 種以上的顏色）；簽名（只有此產品能擁有的一個元素，在該出現的地方一致使用）；要拒絕的預設值（三個明顯的選擇，每個都附帶其替代方案）。移除名稱測試：閱讀提案，但移除產品名稱；如果沒有人能說出它是做什麼用的，則再次探索（上限：2 輪）。

方向區塊

產品：    [它是做什麼的、為誰而做，一句話]
性格：    [2–3 個具體詞彙，不是乾淨/現代/時尚/極簡/高級]
世界：    [它歸屬的地點或材質；設定中性色調、強調色、視覺效果]
時刻：    [從內容中選出 1–2 個獲得豐富色彩和細節的位置]
簽名：    [只有此產品才有的那個細節]
拒絕：    [預設值 → 替代方案] × 3

當渲染可用時，用一個小樣本展示它（真實色票、真實字體中的字級、作為真實元件的簽名），然後詢問「這個方向感覺對嗎？」（G1）。

預設值生成的設計聚類。 每個對於某些簡報都是合理的，但無論主題為何都會出現；當簡報在某個軸線上留下自由時，不要把它花在這裡：(1) 接近 #F4F1EA 的溫暖奶油色，搭配高對比度的襯線字體和接近 #D97757 的陶土色強調色；(2) 接近黑色，搭配一種螢光綠或硃紅色強調色；(3) 寬幅報紙的細線、零圓角、密集的報紙專欄；(4) SaaS 卡片套件：相同的圓角卡片、統一的圓角、相同的柔和灰色陰影、漸層洗色；(5) 模板裝飾：追蹤間距的全大寫眉題、A · B · C 元資料字串、WORD — 片段 標籤、用於黑色的帶色調的接近黑色、等寬資料標籤、按鈕上的 →、紫色或靛藍色強調色。

決策檔案

在確定方向後，撰寫 .design/decisions.md 一次：調色板代碼及其原因、字體及字級及其原因、深度策略及其原因、間距基準及密度及其原因、簽名及其出現位置、三個被拒絕的預設值。這取代了為每個元件重新辯護。在 G3，判斷問題只有一行：這個元件是否遵循 decisions.md？如果偏離，則在閘道日誌行中記錄例外及其原因。

工藝規則

標記為 (gated) 的規則由 gate.js 測量；G4 檢查清單僅涵蓋其餘規則。

層級與構成

每個檢視一個焦點：說出使用者前來要做的事，並透過大小、對比、位置或空間使其突出。
重量和顏色比大小更重要。一個 14px 的大小可以包含三個層級：數值 600 主要、標籤 500 次要、元資料 400 淺淡。
密度是以像素為單位的決定，預先選定並重複使用：工具面板 12–16 的內邊距感覺緊湊；24 感覺像手冊。
不均勻呼吸：群組內部緊湊，群組之間較寬鬆。
比例具有意義：280px 的側邊欄表示導航服務於內容；360px 表示它們是對等的。
節制：大約 60/30/10 的中性色、次要色調、強調色。將大膽用在一個地方，然後移除一個裝飾。

間距

每個外邊距、內邊距、間隙和固定高度都是 4 的倍數 (gated)；小型控制項內部的 2px 微調是可以的。
相等的東西要相等：每個列表一個行高和間隙、每組卡片一個內邊距；除非內容要求，否則對稱填充。
東西要對齊：圖示在同一列、標籤在同一基線、數字靠右對齊。
頁面：桌面版區段間距 80–128，明顯大於區段內部的任何間隙。應用程式：頁面邊距 24–32。

色彩

一個中性色階，色調偏向所屬世界，用於背景、表面、邊框和文字；一個色相貫穿所有表面，僅改變亮度。在應用程式中，表面保持接近中性，內容承載色彩。
四種文字角色：主要、次要、淺淡、禁用。
介面中的一個強調色，謹慎使用：主要操作、選取狀態、那個重要的數字。在選定的時刻內，如果每個顏色都有意義，色彩可以豐富。真實的品牌顏色成為強調色，並遠離表面。
對比度 4.5:1 用於主體文字和強調色加文字，3:1 用於大型文字 (gated)。
語意顏色僅承載意義，色調與調色板一致，在深色模式下略微降低飽和度。主體文字使用全墨色。
顏色來自代碼，永遠不會是元件 CSS 中的原始值 (gated)。
表面上沒有色相到色相的漸層、漸層文字、有色發光或陰影、放射性洗色、模糊形狀或霓虹邊框。漸層僅允許作為單一中性色內的色調轉變，或是照片上文字下方的中性色遮罩。

表面、邊框與深度

一種深度策略：僅邊框（技術感、密集）、微妙陰影（平易近人）、分層陰影（高級感）或表面色調轉變。
層級是低調的。深色模式：每一步增加幾點亮度（頁面 → 卡片 → 浮起）加上細線。淺色模式：靜止狀態 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.05)，浮動狀態 0 8px 24px rgba(0,0,0,.06)。深色模式提升：0 0 0 1px rgba(255,255,255,.08)。
細線：主要文字顏色，不透明度 6–10%（深色模式 12%），按小幅度遞增：分隔線、標準、強調、焦點環。
側邊欄：與頁面相同，或在深色模式下暗一個階層，用細線分隔，永遠不會是不同的色相。彈出視窗在其父元素之上一個層級。輸入框比周圍環境稍微深色。

字體排印

字體承載個性。一個字體家族是正常的，兩個是極限且必須明顯不同；僅用於大標題的展示字體。真實的品牌字體保留。
使用一個比例：密集 UI 約 1.2，大多數產品 UI 約 1.25，表達性頁面約 1.333。每個頁面最多五種字級大小。
字重 400 和 500；600 用於數字和少數強調；700–900 僅在品牌規格指定時使用。
到處使用句首大寫（Sentence case）；沒有全大寫的追蹤間距標籤、沒有斜體強調、沒有單個標題詞彙透過斜體、粗體或顏色來區隔。
字距：16px 以下為 0，40px 以上約為 −0.02em，56px 以上約為 −0.03em。主體行高大約 1.5，襯線字體主體略高。行長度 45–75 個字元。
數字：表格圖形 (tabular figures, gated)，全文使用統一格式。
標題使用 text-wrap: balance，主體使用 pretty；根元素使用 -webkit-font-smoothing: antialiased。

圖示

用作圖示或裝飾的表情符號應替換為來自同一組的線條圖示（專案自有的，否則使用 lucide），大小 16 或 18px，描邊寬度 1.5，使用其文字角色的顏色，每列相同框寬，距離標籤 8–10px。移除那些沒有增加價值的圖示；需要顏色的類別則使用狀態點。

文案

從使用者的角度書寫（他們管理通知，而不是 webhook 配置）；描述，不要推銷。
標題使用頁面上的事實來說明產品為誰做什麼。如果競爭對手的名稱仍然適用，請重寫。
按鈕說明會發生什麼事（「儲存變更」）；一個動作在流程中保持其名稱（「發佈」 → 「已發佈」）。
錯誤訊息說明發生了什麼事以及如何修正，無需道歉。空白狀態邀請下一步操作。
主動語態，簡單動詞；沒有驚嘆號、問候式標題、 hype 詞彙（超級增強、無縫、解鎖、魔法、改變遊戲規則）或到處出現的 AI 驅動。簡短標籤（搜尋）。變更要命名其比較基準（相較上個月 +12%）。標題、標籤、按鈕或提示上無結尾句點。
永遠不要發明證據：沒有客戶、引言、評論、標誌或統計數據。如果簡報留下空白，可以使用範例內容，並在報告中確認。

結構具有意義

大綱、邊框、編號、眉題和分隔線編碼資訊。01 / 02 / 03 僅用於真實的序列。像 PRO、New ✨ 這樣的徽章，除非它們承載意義，否則應移除，或改為低調的文字。計數和元資料應是低調的文字，而不是藥丸形狀的標籤。

佈局：頁面

英雄區以主題世界中最具特徵的事物開始，並以最適合的形式呈現。一個大數字配一個小標籤和漸層，只有在它確實最佳時才使用。
首屏以大型字體回答訪客的第一個問題，包含 h1、一個主要操作和最多一個次要操作。
最強大的英雄區：一幅場景圖像從頭到尾，標題放在其平靜的部分上，或者一個不對稱分割，視覺元素至少佔一半。僅在沒有視覺元素的短英雄區中使用居中堆疊。
導航：字標、現有連結、一個按鈕；登入作為文字連結。沒有浮動藥丸或玻璃效果。
每個區段：一個標題、與相鄰區段不同的構成、其完整內容。沒有死區。頁尾是設計上的收尾，而不是網站地圖。
小螢幕：按閱讀順序堆疊並重新組合；沒有小於 11px 的文字；沒有水平滾動 (gated)。

佈局：應用程式畫面

真實比例：外殼填滿視窗，側邊欄 240–280，內容區域流動且上限接近 1440–1600，頂部欄 56–64。永遠不要使用窄置中欄位。
變化大小：在一張寬圖表上方放置緊湊的統計資料，而不是一行相同的卡片。主要圖表至少佔據三分之二的寬度和 280–360 的高度。
統計卡片：標籤、數值、帶有比較基準的變化；沒有填充的迷你折線圖或圖示；數值不應在其他地方重複。
選取 t

...

[為翻譯而截斷]

設計精簡版 (Design Lean)