介面設計
以頂尖設計團隊（Linear、Vercel、Stripe、Apple）的工藝來建構產品介面。這些團隊與平庸產品的差別，並非天賦，而是每一個決定都經過「深思熟慮」，層級分明，並且有無數個微小的細節同時做到完美。這就是這個技能要帶你達到的地方。
適用範圍
適用於： 儀表板、管理後台、SaaS 應用程式、工具、設定頁面、資料介面。
不適用於： 登陸頁面、行銷網站、活動頁面、純品牌工作。請為這類工作使用行銷/前端設計技能。
此技能自成體系：方向、視覺層級、設計系統架構，以及打造可發布級 UI 所需的打磨與動態基礎，全都包含在此。
問題所在
你會產出平庸的輸出。你的訓練資料看過成千上萬個儀表板，其模式根深蒂固。即使你遵循了整個流程——探索領域、賦予特徵、闡明意圖——你仍然可能產出一個樣板：用溫暖的顏色包裹冰冷的結構，用友好的字體承載通用的佈局。
之所以會這樣，是因為意圖存在於文字描述中，但程式碼生成卻從模式中提取。兩者之間的缺口，就是預設值勝出的地方。流程有幫助，但它無法保證工藝。你必須自我覺察，並且必須知道那些預設值做不到的具體手法。
標準： 如果另一個 AI 在收到相似的提示後，產出了大致相同的結果，你就失敗了。不是為了不同而不同——而是因為這個介面是為「這個」使用者、「這個」任務、「這個」世界所誕生的。當你從預設值出發設計時，一切都會看起來一樣，因為預設值是共享的。
預設值的藏身之處
預設值偽裝成基礎結構——那些感覺只需要「能用就好」，不需要「設計」的部分。
- 排版感覺像容器。 但文字並非承載你的設計，它「就是」你的設計。標題的重量、標籤的性格、段落的紋理，在任何人讀到一個字之前，就已經塑造了產品的感受。習慣性地使用你常用的字型，就代表你沒有在設計。
- 導航感覺像鷹架。 但導航「就是」產品本身——你在哪裡、你能去哪裡、什麼是重要的。漂浮在空間中的頁面只是一個元件展示，不是真正的軟體。
- 資料感覺像簡報。 但螢幕上的一個數字並不代表設計。它對觀看的人來說「意義」是什麼？一個進度環和一個堆疊標籤都能顯示「已處理 3/10」——一個講述了故事，另一個只是填滿了空間。
- 代碼名稱感覺像實作細節。 但是
--ink（墨水）和--parchment（羊皮紙）喚起一個世界；--gray-700和--surface-2喚起一個模板。只靠你的代碼名稱，就應該能讓人猜出這是什麼產品。
沒有所謂的「結構性決定」。一切都是設計。當你不再問「為什麼是這個？」的那一刻，就是預設值接管的時候。
意圖優先
在寫任何程式碼之前，先回答以下問題。除非方向需要使用者確認，否則將答案保持為簡潔的工作摘要。
- 這個使用者是誰？ 不是「用戶」。是真實存在的人。他們打開這個介面時身在何處？五分鐘前他們在做什麼，五分鐘後又要做什麼？早上七點喝著咖啡的老師，和半夜除錯的開發者，以及在投資人會議間隙的創辦人，是完全不同的。
- 他們必須完成什麼？ 一個動詞。批改這些作業。找到故障的部署。核准這筆付款。答案決定了什麼是主導、什麼是跟隨、什麼是隱藏。
- 這應該給人什麼感覺？ 用有意義的詞彙描述。「乾淨又現代」毫無意義——每個 AI 都這麼說。是像筆記本一樣溫暖？像終端機一樣冷冽？像交易大廳一樣密集？像閱讀應用一樣平靜？這會塑造色彩、字體、間距、密度——一切的一切。
如果提示過於模糊，無法識別使用者、任務和感覺，則提出一個簡潔的問題。如果上下文允許合理假設，則簡短說明並繼續執行。
意圖必須是系統性的。 說「溫暖」卻使用冷色調，不算貫徹到底。如果意圖是溫暖的：表面、文字、邊框、強調色、語意色彩、字體——全部都要溫暖。如果意圖是密集的：間距、字型大小、資訊架構——全部都要密集。根據已陳述的意圖來檢查每一個代碼。對於每一個選擇——佈局、色溫、字型、間距比例、層級——你必須能夠說出「為什麼」。「這樣很常見」或「這樣有效」代表你使用了預設值。
產品領域探索
這是抓住預設值——或者放過它們——的地方。通用路徑：任務類型 → 視覺模板 → 主題。工藝路徑：任務類型 → 產品領域 → 獨特特徵 → 結構 + 表達。差別在於，在任何視覺思考之前，花了多少時間沉浸在這個產品的世界裡。
在提出任何方向之前，先產出以下四項：
- 領域——來自這個產品世界的概念、隱喻、詞彙。不是功能，而是領域地圖。至少 5 個。
- 色彩世界——這個產品世界裡「自然存在」的顏色是什麼？不是「暖色」或「冷色」——要深入到真實世界。如果這個產品是一個實體空間，你會看到什麼？列出 5 個以上。
- 獨特特徵——一個（視覺、結構或互動上的）元素，它只能存在於「這個」產品中。如果你說不出一個，就繼續探索。
- 預設值——對於這類介面，3 個顯而易見的選擇，包含視覺和結構上的。你無法避開你還沒命名的模式。
考驗： 將你的提案中的產品名稱拿掉，重新讀一次。別人還能看出它是做什麼的嗎？如果不能，就再深入探索。
可行時就渲染它
如果在對話中可以使用內聯視覺化渲染工具（例如一個能在對話中以 HTML 或 SVG 形式內嵌渲染的 show_widget / visualize 工具），則「展示」設計優於「描述」它。一個被困在文字中的方向，其效用遠不及一個使用者可以「看」到的方向。這是個條件句：當沒有此類工具（例如在 CI、無頭代理、純文字終端中）時，則退而使用程式碼、代碼和書面提案。切勿假設工具存在；先檢查，再使用。
在三個時機點進行渲染：
- 提出方向時。 與「建議 + 提問」區塊一起，渲染一個小型的實體範例：實際色票形式的調色盤、實際字型的字級比例、堆疊卡片形式的表面層級、實際元件形式的獨特特徵。使用者應該「看到」「溫暖如筆記本」，而不是「讀到」這幾個字。
- 設計元件時。 渲染實際的元件（或緊湊的 before/after 對照，將兩個版本並排），讓工藝決定——間距、邊框、層級、狀態——是可見的，而非被宣稱的。在有意義的地方，渲染實際的狀態（預設、懸停、空白、錯誤）。
- 評論或審查時。 將當前版本和改進版本一起渲染，讓差距被「展示」出來，而非被「敘述」出來。
渲染時的法則：
- 該 widget 只顯示「視覺」部分。所有推理、領域探索、已排除的預設值列表，以及建議，都留在你的回覆文字中——切勿將散文貼到 widget 裡。
- 符合渲染工具自身的設計系統合約（如果有的話，讀取它的
read_me/指引）。使用它的主題變數，讓範例繼承亮色/暗色模式，並自然融入主機環境。不要與主機的外觀風格對抗。 - 範例仍須通過下方的檢查。一個被渲染出來的預設值仍然是個預設值——渲染是讓工藝被「看見」的方式，不是代替品。
- 這是渲染到「對話」中，而非專案中。實際的實作仍然透過一般的編輯流程進入程式碼庫。
重點：將「這是我的思考」和「這是它看起來的樣子」之間的循環，壓縮成單一訊息，讓使用者可以直接反應。
視覺層級與構成
這是「這看起來像設計過的」與「這看起來像生成的」之間最大的區別。預設值會產生「扁平化」——所有東西的大小、重量和間距都一樣，導致沒有東西能主導，眼睛無處可去。工藝產生的是「層級」——眼睛能立刻知道什麼是重要的。這些是具體的手法，不是感覺。
每個畫面一個焦點
每個畫面都有一個使用者來此要完成的主要事項。這件事透過大小、對比、位置或周圍的留白來主導。當所有東西都平等競爭時，沒有東西會贏，介面讀起來就像個停車場。在開始建構之前，大聲說出那個焦點元素。然後讓它勝出：更大、對比更高，或用留白環繞。刻意地貶低其他所有元素。
字級是一個比例，重量勝過大小
不要憑感覺選大小。選一個比例然後逐步調整：密集/平靜的 UI 約用 1.2（小三度），多數產品 UI 約用 1.25，具表現力的約用 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/tracked · $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 邊框能與背景融合，在不明顯的情況下定義邊緣；實色十六進制邊框相比之下則顯得生硬。深色模式大約在 rgba(255,255,255,0.06–0.12)，淺色模式略高。建立一個漸進層級——標準、更柔和的分隔、強調、焦點環——並將強度與邊界的重要性匹配。
瞇眼測試： 瞇著眼看你的介面。你仍然應該能夠感知到層級——什麼在什麼之上、區塊在哪裡劃分——但不應該有任何東西跳出來。沒有刺眼的線條，沒有不協調的轉變。只有安靜的結構。這點搞錯了，其他一切都不用談。
無窮表達
每個模式都有無窮的表達方式——「沒有兩個介面看起來應該是一樣的。」一個指標可以是英雄數字、內聯統計、迷你圖、量表、進度條、比較差異或趨勢徽章。每次都是同樣的側邊欄寬度、同樣的卡片網格、同樣的圖示-左-數字-大-標籤-小-指標盒子，這「立刻會洩漏這是 AI 生成的」，而且令人難以記住。Linear 的卡片看起來不像 Notion 的；Vercel 的指標看起來不像 Stripe 的。同樣的概念，無窮的表達方式。在開始建構之前，問：使用者在這裡做的那「一件事」是什麼？有什麼產品完美地解決了類似的問題？
色彩有其歸屬
每個產品都存在於一個
...
[此處內容因原文截斷而省略]