以工藝為核心的介面設計，適用於儀表板、管理後台、SaaS 應用程式、工具、設定頁面、資料介面與互動式產品。當你在設計、建立、審查、稽核或精修產品 UI，且極度看重視覺細節工藝、版面層級、Token、狀態、視覺方向或設計系統一致性時使用。不適用於行銷頁面、落地頁（Landing Page）、行銷活動或純品牌專案。
Interface Design
打造具備頂尖設計團隊（如 Linear、Vercel、Stripe、Apple）工藝水準的產品介面。這些團隊與平庸產出之間的差異不在於天賦，而是在於每一個決定都是經過深思熟慮的、版面層級清晰無誤，且上百個微小細節同時精準到位。本 Skill 就是帶你邁向該境界的指南。
適用範圍
適用於： 儀表板、管理後台、SaaS 應用程式、工具、設定頁面、資料介面。
不適用於： 落地頁（Landing Page）、行銷網站、活動宣傳頁、純品牌專案。此類需求請改用行銷或前端設計相關 Skill。
本 Skill 內容自成體系：視覺方向、視覺層級、設計系統架構，以及交付正式生產環境 UI 所需的打磨與動態效果要領，皆已涵蓋其中。
問題所在
你很容易產出平庸、千篇一律的介面。你的訓練資料看過成千上萬個儀表板，那些既定模式（Pattern）根深蒂固。你即使完整執行了整個流程——探索領域、定義招牌特色（Signature）、宣示設計意圖——最後依然可能做出一套套版感十足的成品：在冷酷的結構上套用暖色系，或者在套版版面上搭配親切的字型。
之所以會這樣，是因為意圖存在於文字描述中，但程式碼生成卻是從既定模式中汲取素材。兩者之間的落差，正是「預設值（Defaults）」大行其道的地方。流程雖然有幫助，但無法保證工藝品質。你必須隨時自我警覺，並且掌握那些預設做法所不具備的具體技巧。
衡量標準： 如果另一個 AI 收到類似的 Prompt，產出的結果跟你大同小異，那你就是失敗了。不是為了與眾不同而與眾不同，而是因為介面是從這位使用者、這項任務、這個具體情境中自然孕育而生的。當你仰賴預設值進行設計時，所有東西看起來都會一模一樣，因為預設值是大家共用的。
預設值藏在哪裡
預設值常偽裝成「基礎設施」——也就是那些讓你覺得「只要能運作就好，不需要特別設計」的部分。
- 字體排印（Typography）感覺像容器。 但字體不是用來裝載你的設計，字體就是你的設計。標題的字重、標籤的性格、段落的紋理，在使用者讀出任何字詞之前，就已經塑造了產品給人的感覺。直接隨手抓慣用的字型，代表你根本沒有在做設計。
- 導覽列（Navigation）感覺像骨架。 但導覽列就是產品本身——它告訴使用者身在何處、能去往何方、何者才是重點。一個懸浮在空白中的頁面只是元件展示（Component Demo），而不是真正的軟體。
- 資料（Data）感覺像單純呈現。 但畫面上顯示一個數字不叫設計。對看著它的人來說，那代表什麼意義？進度環和上下堆疊的標籤都可以顯示「3 / 10」——一個是在訴說故事，另一個只是在填補空間。
- Token 名稱感覺像實作細節。 但
--ink與--parchment能勾勒出一座世界，而--gray-700與--surface-2只能勾勒出一套套版。即使只讀你的 Token 名稱，別人也應該能猜出這是什麼產品。
世界上沒有純粹的結構決策，一切皆是設計。當你停止問「為什麼要這樣選？」的那一刻，就是預設值接管的時候。
意圖先行
在動手寫程式碼前，請先回答以下問題。除非方向需要使用者確認，否則請保持為一份簡潔的作業摘要（Working Brief）。
- 這個「人」是誰？ 不是抽象的「使用者」，而是具體活生生的人。他們打開這個介面時身在何處？5 分鐘前做了什麼，5 分鐘後要做什麼？早上 7 點手握咖啡的教師、午夜正在 Debug 的開發者，以及在多場投資人會議空檔中的創辦人，需求截然不同。
- 他們必須完成什麼任務？ 找出動詞。給這些作業打分數。找出出錯的 Deployment。批准這筆付款。答案決定了什麼該置頂、什麼該次之、什麼該隱藏。
- 這應該給人什麼感覺？ 請用有實際意義的詞彙描述。「簡潔現代（Clean and modern）」毫無意義——每個 AI 都會這麼說。像筆記本一樣溫暖？像 Terminal 一樣冷峻？像交易大廳一樣高密度？還是像閱讀 App 一樣寧靜？這會形塑色彩、字體、間距、密度——影響一切細節。
如果 Prompt 太過模糊，無法辨識出具體的人、任務與感受，請提出一個精確簡短的問題。如果上下文允許合理推測，請簡要說明假設並繼續進行。
意圖必須貫徹於整個系統。 嘴上說「溫暖」卻使用冷色調，就是沒有貫徹意圖。如果意圖是溫暖：表面（Surface）、文字、邊框、強調色、語意色、字型——全部都要偏向溫暖。如果意圖是高密度：間距、字體大小、資訊架構——全部都要高密度。將每個 Token 與宣示的意圖進行對照。對於每個選擇——版面配置、色溫、字型、間距階梯、層級——你都必須能說出為什麼。「很常見」或「這樣行得通」意味著你又退回了預設值。
產品領域探索
這是預設值會被捕獲——或是漏網——的地方。平庸的路徑：任務類型 → 視覺範本 → 主題。精雕細琢的路徑：任務類型 → 產品領域 → 招牌特色（Signature） → 結構與表達。兩者的差異在於：在進行任何視覺思考前，你在產品的世界裡沉浸了多久。
在提出任何方向前，請先產出以下全部四項：
- 領域（Domain）——來自此產品世界的概念、比喻、專有名詞。不是功能——而是領域地圖。至少 5 個。
- 色彩世界（Color world）——此處自然存在哪些色彩？不要只填「暖色」或「冷色」——深入真實世界。如果這個產品是一個實體空間，你會看到什麼？列出至少 5 個。
- 招牌特色（Signature）——一個唯獨專屬於此產品的元素（視覺、結構或互動）。如果你說不出任何一個，請繼續探索。
- 預設值（Defaults）——針對此介面類型，列出 3 個視覺與結構上的顯而易見選項。你無法避開你尚未命名的既定模式。
測試方法： 遮住產品名稱閱讀你的提案。別人能辨識出這是做什麼用的嗎？如果不行，請再深入探索。
儘可能進行即時渲染
如果會話中提供行內視覺渲染工具（例如可在對話中直接行內渲染 HTML 或 SVG 的 show_widget / visualize 工具），請優先直接展示設計，而非僅用文字描述。困在文字中的設計方向，實用性遠不及眼前能直接看到的畫面。這是條件式的：當沒有此類工具時（如 CI、無頭 Agent、純 Terminal），請降級使用程式碼、Token 和書面提案。切勿直接假設工具存在，先檢查，再使用。
在以下三個時機進行渲染：
- 提出方向時。 在「建議 + 提問」區塊旁，渲染一份小型的即時範例：將調色盤呈現為實際色塊、字體階梯使用真實字型、表面階梯（Surface-elevation）呈現為堆疊卡片、招牌特色元素呈現為真實元件。讓使用者能直觀看到「像筆記本一樣溫暖」，而不是讀文字。
- 設計元件時。 渲染真實元件（或緊湊的修改前/後對比，雙版本並排），讓工藝決策——間距、邊框、層級、狀態——直接肉眼可見，而非徒具宣示。在關鍵處渲染真實狀態（預設、Hover、空狀態、錯誤）。
- 進行檢討或稽核時。 將當前版本與改進版本一同渲染，直接展示差距，而不是口頭講述。
渲染時的規則：
- Widget 僅展示視覺本身。所有推理解析、領域探索、已拒絕的預設值清單及建議，請保留在回覆文字中——絕不要把長篇文字貼進 Widget。
- 符合渲染工具本身的設計系統規範（若有
read_me或指引請載入）。使用其主題變數，使範例能繼承淺色/深色模式，並原生融合於宿主環境中。不要與宿主外框產生衝突。 - 範例仍必須通過下方的各項檢查。渲染出來的預設值依然是預設值——渲染是用來讓細節工藝被看見，而不是工藝的替代品。
- 這是渲染到對話中，而不是專案中。實際的程式碼實作仍須透過正常的編輯寫入程式碼庫。
重點在於：將「這是我的思考」與「這是成果外觀」之間的反饋迴圈，壓縮到單一訊息中，方便使用者立即給予回饋。
視覺層級與構圖
這是區分「精心設計」與「自動生成」的最大關鍵。預設做法會產生平坦感（Flatness）——所有東西尺寸、字重、間距都一樣，導致沒有主次之分，視覺找不到落腳點。工藝則創造層級（Hierarchy）——眼睛能瞬間辨識出何者最重要。這些都是具體的動作，而不是模糊的感覺。
每個視圖僅設一個焦點
每個畫面都有一個使用者最想完成的核心任務。該元素必須佔據主導地位——透過尺寸、對比、位置或周圍的留白來達成。當所有元素互相爭寵時，就沒有贏家，介面看起來只像個混亂的停車場。在開始建構前，請大聲說出焦點元素是什麼。接著讓它脫穎而出：加大、提升對比，或用留白包覆。果斷地降低其他所有元素的層級。
字體階梯是比例，且字重勝於尺寸
不要憑感覺挑選字體大小。請選擇固定比例並進行階梯化：高密度/寧靜 UI 建議使用 ~1.2（小三度）；多數產品 UI 建議使用 ~1.25；具表現力的介面使用 ~1.333。從 14–16px 的內文基準出發，產生肉眼清晰可辨的階梯，而不是 15/16/17px 這種混濁不清的尺寸。以 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——比相差 2px 的普通字重分得更乾淨。請同時運用三種槓桿（尺寸、字重、色彩/透明度），切勿單靠尺寸。如果你瞇起眼睛無法分辨標題、內文與標籤，說明層級建立得太弱。
實例分析——指標數據（平坦 vs 著意設計）。平坦： Revenue / $48,200 皆為 14px 普通灰色，三個一模一樣的框，沒有焦點。著意設計： REVENUE 11px/500/muted/字距加大 · $48,200 28px/600/primary/等寬數字 (Hero 焦點) · ↑12% 12px/500/success。相同的資料，可讀性卻截然相反——數字透過尺寸+字重+單一強調色引導視覺，標籤降低層級，次要指標降至更低階梯。
密度是一種決策，用 px 呈現
Linear 緊湊；Stripe 大氣。兩者都不是預設值——都是特意選擇的結果，且該選擇貫穿於各處重複的數值中。事先決定好密度並命名數值：工具面板採用 12–16px 內襯（Padding）感覺像是緊湊的工作檯；相同的卡片採用 24px 則感覺像宣傳手冊。相同的數值在某個情境下很合適，在另一個情境下可能代表懶惰。請深思熟慮後選擇，並嚴格保持一致。
空間韻律——呼吸要有節奏
優秀的介面不會把所有東西都以等距排列。高密度的控制區塊過渡到開放的內容區；重量的元素與輕盈的元素相互平衡；視覺流動帶有明確目的。單調乏味的版面——各處都用相同的卡片尺寸、相同的 Gap、相同的密度——代表根本沒有人在做決策。請特意改變韻律：將緊密相關的物件分組，再在組與組之間留出充足的空氣。
比例會說話
全寬內容旁邊擺放 280px 的側邊欄，代表「導覽輔助內容」。換成 360px 的側邊欄，則代表「兩者平起平坐」。具體的數值宣示了何者重要。如果你無法說明某個比例在表達什麼，那它就什麼也沒表達。請選擇能明確展現關聯性的寬度與比例。
分布與克制（塑造「高級感」）
- ~60/30/10 比例：主要的中性表面、次要色調，以及 ~10% 的強調色。色彩是稀缺資源——畫面的大部分應該是結構。
- 特意使用的單一強調色，勝過盲目使用的五種色彩。灰色建立結構；色彩用來傳達資訊（狀態、動作、身份）。沒有動機的色彩只是雜訊。
- 透過空間與字重建立層級，而非依靠線條。 在使用邊框和分隔線之前，優先考慮留白與色調變化。最頂級的介面，其結構大部分是無形的。
- 大字體的視覺微調（Optical sizing）：字體越大，字距（Letter-spacing）越要收緊（標題稍微採用負 Tracking）；內文行高（Line-height）則要拉開以利閱讀（~1.5）。收緊的字體讀起來具備工藝感；32px 標題如果用預設 Tracking 讀起來就像普通文件。
工藝基石
微妙的圖層堆疊（骨幹）
無論設計方向為何，這都適用於所有地方。你應該隱約感...
<!-- truncated for translation batch; full body continues in source -->
