介面設計
以頂尖設計團隊的工藝打造產品介面 — Linear、Vercel、Stripe、Apple。它們與通用輸出之間的差異不在於天賦，而是在於每個決定都是「刻意為之」，層級結構無可置疑，並且同時有上百個小細節是正確的。這項技能就是教你如何達到這個境界。
適用範圍
適用於： 儀表板、管理後台、SaaS 應用程式、工具、設定頁面、資料介面。
不適用於： 登陸頁面、行銷網站、廣告活動、僅限品牌的工作。這些應使用行銷/前端設計技能。
此技能是自成一體的：視覺方向、視覺層級、設計系統架構，以及產出生產級 UI 所需的光澤與動態效果精華，全都包含在此。
問題
你將會產出通用的輸出。你的訓練資料見過成千上萬個儀表板，模式非常強烈。你可以遵循這整個流程 — 探索領域、命名簽名、陳述意圖 — 但仍然產出一個模板：溫暖的顏色配上冰冷的結構、友善的字體配上通用的佈局。
這是因為意圖存在於文字中，但程式碼生成卻從模式中提取。兩者之間的差距就是預設值勝出的地方。流程有幫助，但它無法保證工藝。你必須自我警覺，並且必須知道預設值做不到的具體動作。
標準： 如果另一個 AI，在收到類似提示後，會產出大致相同的輸出，那你就失敗了。不是為了不同而不同 — 而是因為介面是從「這個」使用者、「這個」任務、「這個」世界裡浮現出來的。當你從預設值開始設計時，所有東西看起來都一樣，因為預設值是共享的。
預設值隱藏在何處
預設值偽裝成基礎設施 — 那些讓人覺得只需要正常運作、不需要設計的部分。
- 排版感覺像是一個容器。 但字型不是你設計的載體，它「就是」你的設計。標題的重量、標籤的個性、段落的質感，在任何人閱讀一個字之前，就已經塑造了產品的感受。伸手去拿你常用的字型，就代表你沒有在設計。
- 導航感覺像鷹架。 但導航「就是」產品本身 — 你在哪裡，你可以去哪裡，什麼是重要的。一個漂浮在空間中的頁面只是一個元件展示，而不是軟體。
- 資料感覺像呈現方式。 但螢幕上的一個數字並不是設計。它對觀看者來說「意味著」什麼？一個進度環和一個堆疊標籤都顯示「3/10」— 一個訴說故事，一個填補空間。
- Token 名稱感覺像實作細節。 但
--ink和--parchment喚起一個世界；--gray-700和--surface-2喚起一個模板。只看你的 token，應該要能猜出這是什麼產品。
沒有所謂的結構性決定。一切都是設計。當你停止問「為什麼是這個？」的那一刻，就是預設值接管的時候。
意圖優先
在碰觸程式碼之前，先回答這些問題。保持為一個簡潔的工作摘要，除非方向需要使用者確認。
- 這個人是誰？ 不是「使用者」。是實際的人。他們在打開這個介面時身在何處？他們 5 分鐘前在做什麼，5 分鐘後又會做什麼？早上 7 點喝著咖啡的老師，與半夜除錯的開發者不一樣，也與在投資人會議間隙的創辦人不一樣。
- 他們必須完成什麼？ 動詞。批改這些作業。找到故障的部署。核准付款。答案決定了什麼是主要的、什麼是次要的、什麼是隱藏的。
- 這應該感覺像什麼？ 用有意義的詞語來說明。「乾淨現代」沒有意義 — 每個 AI 都這麼說。像筆記本一樣溫暖？像終端機一樣冰冷？像交易大廳一樣密集？像閱讀應用一樣平靜？這塑造了顏色、字型、間距、密度 — 所有一切。
如果提示過於模糊，無法識別使用者、任務和感受，則問一個簡潔的問題。如果上下文允許做出負責任的假設，則簡要說明並繼續。
意圖必須是系統性的。 說「溫暖」然後使用冷色調並不是貫徹始終。如果意圖是溫暖的：表面、文字、邊框、強調色、語義顏色、字型 — 全部都要溫暖。如果是密集的：間距、字型大小、資訊架構 — 全部都要密集。根據陳述的意圖檢查每一個 token。對於每一個選擇 — 佈局、色溫、字型、間距比例、層級 — 你必須能夠說出「為什麼」。「這很常見」或「它有效」表示你使用了預設值。
產品領域探索
這裡是預設值被逮住 — 或沒被逮住 — 的地方。通用路徑：任務類型 → 視覺模板 → 主題。工藝路徑：任務類型 → 產品領域 → 簽名 → 結構 + 表達。差別在於在進行任何視覺思考之前，花時間在產品的世界裡。
在提出任何方向之前，產出所有四項：
- 領域 — 來自這個產品世界的概念、隱喻、詞彙。不是功能 — 是領域。至少 5 個。
- 色彩世界 — 在這個世界裡「自然」存在哪些顏色？不是「暖色」或「冷色」— 去實際的世界裡找。如果這個產品是一個實體空間，你會看到什麼？列出 5 個以上。
- 簽名 — 一個只能存在於「這個」產品的元素（視覺、結構或互動）。如果你無法命名一個，就繼續探索。
- 預設值 — 這個介面類型的 3 個顯而易見的選擇，包括視覺和結構。你無法避開你還沒命名的模式。
測試： 移除產品名稱來閱讀你的提案。有人能識別出它是做什麼的嗎？如果不能，就探索得更深入一些。
能渲染就渲染
如果會話中可用內嵌視覺渲染工具（例如，一個能在對話中內嵌渲染 HTML 或 SVG 的 show_widget / visualize 工具），請優先「展示」設計，而不是描述它。一個困在文字中的方向，其效用遠不及一個可以直接觀看的。這是條件式的：當沒有此類工具時（CI、無頭代理、純終端機），則退而使用程式碼、token 和書面提案。切勿假設工具存在；先檢查，再使用。
在三個時刻渲染：
- 提出方向時。 伴隨「建議 + 詢問」區塊，渲染一個小的即時樣本：調色板作為實際色票、以真實字型呈現的字體比例、作為堆疊卡片的表面層級步驟、作為真實元件的簽名元素。使用者應該「看到」「像筆記本一樣溫暖」，而不是閱讀文字。
- 設計元件時。 渲染實際的元件（或緊湊的 before/after，兩個變體並排），讓工藝決策 — 間距、邊框、層級、狀態 — 是可見的，而不是被宣稱的。在需要時渲染真實狀態（預設、懸停、空狀態、錯誤狀態）。
- 評論或稽核時。 將當前版本和改進後的版本一起渲染，以展示差距，而不是敘述。
渲染時的規則：
- 小工具只顯示「視覺」。所有的推理、領域探索、被拒絕的預設值列表和建議都保留在你的回覆文字中 — 切勿將文字貼到小工具中。
- 符合渲染工具本身的設計系統契約（如果有，則載入其
read_me/指導）。使用其主題變數，使樣本繼承淺色/深色模式，並在宿主中顯得自然。不要與宿主的外框衝突。 - 樣本仍然必須通過下面的檢查。一個被渲染的預設值仍然是預設值 — 渲染是讓工藝被「看見」的方式，而不是它的替代品。
- 這是渲染到「對話」中，而不是專案中。實際的實作仍然通過正常的編輯操作進入程式碼庫。
重點：將「這是我的想法」和「這是它的樣子」之間的迴圈壓縮成一個使用者可以反應的單一訊息。
視覺層級與構圖
這是區分「這看起來像設計過的」與「這看起來像生成的」的最大單一因素。預設值產生的是「扁平化」— 所有東西的大小、粗細和間距都一樣，因此沒有什麼是主要的，眼睛無處可去。工藝產生的是「層級」— 眼睛立刻知道什麼是重要的。這些是具體的動作，而不是感覺。
每個視圖一個焦點
每個畫面都有一件使用者來此要做的事。那件事通過大小、對比度、位置或周圍的空白空間來主導。當所有東西平等競爭時，沒有東西勝出，介面讀起來像個停車場。在建構之前，大聲說出焦點元素的名稱。然後讓它勝出：更大、更高對比，或環繞空白空間。刻意貶低其他所有東西。
字型比例是一個比率，粗細勝過大小
不要憑感覺選擇大小。選擇一個比率並逐步套用：密集/平靜的 UI 使用約 1.2（小三度），大多數產品 UI 使用約 1.25，表達性強的 UI 使用約 1.333。從 14-16px 的正文字體，這會產生一個「明顯」可區分的比例，而不是 15/16/17 的糊狀。14px 基底搭配 1.25：caption 11 · body 14 · h4 16 · h3 18 · h2 22 · h1 28 · display 44+。四捨五入到整數像素，並與你的間距網格對齊。
Apple/Linear 的招數：粗細和顏色比大小更能建立層級。 單一 14px 大小可以通過粗細和透明度/顏色的組合容納三個層級 — value: 600 / primary，label: 500 / secondary，meta: 400 / muted — 比兩個相差兩個點的常規粗細分離得更乾淨。同時使用三個槓桿（大小、粗細、顏色/透明度）來構建，絕不單獨使用大小。如果你瞇著眼看，卻分不清標題、正文和標籤，那麼層級就太弱了。
實例 — 一個指標，扁平 vs 經過設計。扁平： Revenue / $48,200 都是 14px 常規灰色，三個相同的盒子，沒有焦點。經過設計： REVENUE 11px/500/muted/追蹤間距 · $48,200 28px/600/primary/tabular-nums（英雄元素） · ↑12% 12px/500/success。同樣的資料，截然不同的可讀性 — 主要數字通過大小+粗細+一個強調色來領導，標籤被降級，次要指標下降到較低的層級。
密度是一個決定，以像素表示
Linear 是緊湊的；Stripe 是寬敞的。兩者都不是預設值 — 兩者都是「被選擇的」，而這個選擇是同樣的數字重複出現在各處。預先決定密度並命名其值：一個工具面板使用 12-16px 內邊距感覺像工作檯一樣緊湊；同樣的卡片使用 24px 內邊距感覺像一本手冊。同樣的數字在一個脈絡下可能是對的，但在另一個脈絡下可能很懶惰。刻意選擇，然後堅持使用。
空間韻律 — 不均勻地呼吸
優秀的介面不會平等地間隔所有東西。緊湊的控制區域讓位給開放的內容；重的元素與輕的元素平衡；眼睛有目的地移動。單調的佈局 — 相同的卡片大小、相同的間距、各處相同的密度 — 是沒有人做出決定的聲音。刻意變化韻律：將緊密相關的東西分組，然後在組之間放真正的空氣。
比例在說話
一個 280px 的側邊欄緊鄰全寬內容，說的是「導航服務於內容」。一個 360px 的側邊欄說的是「這些是平等的」。特定的數字宣告了什麼是重要的。如果你無法闡明一個比例在說什麼，那它就什麼也沒說。選擇能陳述關係的寬度和比例。
分佈與克制（「昂貴」的外觀）
- 約 60/30/10：一個佔主導的中性表面，一個次要色調，以及約 10% 的強調色。顏色是一種稀缺資源 — 螢幕的大部分是結構。
- 一個有目的地使用的強調色，勝過五個未經思考使用的顏色。灰色構建結構；顏色「傳達訊息」（狀態、動作、識別）。沒有動機的顏色是噪音。
- 通過空間和粗細建立層級，而不是線條。 在邊界和分隔線之前，先使用空白空間和色調轉變。最高級的介面大多是不可見的結構。
- 大字型的光學調整：隨著字型變大而縮緊字母間距（標題略微負追蹤）；在正文上放鬆行高以獲得可讀性（約 1.5）。緊湊的字型讀起來像是精心打造的；在 32px 標題上使用預設字距則讀起來像文件。
工藝基礎
微妙的層次（主幹）
無論方向如何，這適用於一切。你應該「幾乎注意不到系統在運作」— 當你看著 Vercel 的儀表板時，你不會想「漂亮的邊框」，你只是理解結構。看不見的工藝才是有效的工藝。
表面層級。 表面堆疊：下拉選單位於卡片之上，卡片位於頁面之上。建立一個編號系統 — 基底，然後增加層級。每次跳躍只有幾個百分點的明度變化 — 例如，深色模式基底 → +7% → +9% → +12%；淺色模式保持淺色並添加陰影代替。單獨看一個步驟幾乎察覺不到，但疊加起來，層級就浮現了。輕柔到幾乎感覺不到的轉變。
- 側邊欄： 背景與畫布相同，而不是不同的顏色。不同的顏色會將空間碎片化為「側邊欄世界」和「內容世界」。一個微妙的邊框就足夠了。
- 下拉選單/彈出視窗： 比其父表面高一層，否則它們會融為一體，失去層次感。
- 輸入框： 比周圍環境「稍暗」，而不是更亮。輸入框是內嵌的 — 它們接收內容。較暗的填充表示「在這裡輸入」，無需厚重的邊框。
邊框。 應該在你沒有刻意尋找它們時消失，但在你需要結構時能被找到。低透明度的 rgba 會與背景融合，並在不引起注意的情況下定義邊緣；實心的 hex 邊框相比之下顯得刺眼。深色模式大約在 rgba(255,255,255,0.06–0.12)，淺色模式稍高。建立一個漸進序列 — 標準、較柔和的分隔、強調、焦點環 — 並使強度與邊界的重要性相匹配。
瞇眼測試： 瞇起眼睛看介面。你仍然應該能感知到層級 — 什麼在什麼上面，區塊在哪裡劃分 — 但沒有東西應該跳出來。沒有刺眼的線條，沒有突兀的轉變。只有安靜的結構。這點做錯了，其他一切都不重要。
無限表達
每個模式都有無限的表達方式 — 沒有任何兩個介面看起來應該一樣。 一個指標顯示可以是英雄數字、內聯統計、迷你圖、量表、進度條、比較增量或趨勢徽章。每次都使用相同的側邊欄寬度、相同的卡片網格、相同的圖示-左-數字-大-標籤-小-指標框，會「立即被識別為 AI 生成的」，而且令人難忘。Linear 的卡片看起來不像 Notion 的；Vercel 的指標看起來不像 Stripe 的。相同的概念，無限的表達方式。在開始建構之前，問：使用者在這裡做的「一件事」是什麼，以及什麼產品能以類似的方式出色地解決這個問題？
顏色有其歸屬
每個產品都存在於一個
…
[為翻譯而截斷]