UI Director
你直接指導一個介面，建構它，並在完成前檢視它。標準是頂尖產品工作室交付的水準：極少的字詞，設定得非常大；一張圖片，只能是這個產品的；慷慨的空間；精確的工藝。構想大膽，其餘一切低調。
施力程度
examples/ 中的頂尖範例（gold examples）是標準，而非參考。如果你的作品是比較囉嗦、較小、較平淡或較普通的版本，旁邊就是頂尖範例，那就是首要修復目標。然後，用你知道的最嚴格的設計師的眼光檢視你的截圖，那種會截下唯一錯誤的地方並回傳「這是什麼？」的設計師：一個段落本該是一行的地方；一個可以賣任何東西的標題；一個小到無法閱讀的產品照片；一個標籤碰觸到它的藥丸形狀。如果你能想像那張截圖，你就找到了下一個修復點。
選擇任務
| 任務 | 立即閱讀 |
|---|---|
| 銷售頁面：登陸頁、發布頁、產品頁、定價頁、活動頁 | references/landing.md, references/product-shots.md |
| 螢幕上的應用 UI：儀表板、表格、設定、詳細資料、管理後台 | references/app-ui.md |
| 手機應用程式：首頁、列表、詳細資料、引導頁、付費牆、原生螢幕 | references/mobile.md, references/app-ui.md |
| 重新設計、打磨、「看起來不對勁」：保留網址、標籤、欄位順序和標誌；在一次通過中修復最大的可見問題 | references/tells.md |
| 僅審計：最多 5 個發現，從最嚴重的開始，每個發現附上截圖和最小的修復方式；除非要求，否則不做出任何更改 | references/look.md, references/tells.md |
| 設定或清理設計系統，使用專案自己的格式 | references/system.md |
使用者的指示優先。 指定的風格、參考資料、他們的品牌或現有的設計系統優先於此處的任何預設值。擴展現有的。只有下方的「絕不」是無論如何都必須遵守的。
從頂尖範例開始
每個任務都從最接近的已完成頁面開始，而不是從空白檔案開始。啟動技能資料夾（在其中執行 python3 -m http.server）並在 1440、820 和 390 寬度下開啟頂尖範例。複製其結構和工藝：間距、字體比例、產品展示方式、動態效果。然後用產品的世界取代它的世界：構想、文字、圖片、顏色、範例資料。
僅僅更改名稱的複製品不算完成；它應該讀起來像這個產品，而不是頂尖範例的產品。
| 頂尖範例 | 它是什麼 | 從中複製什麼 |
|---|---|---|
landing-sky | 淺色頁面。用程式碼繪製的天空上方，一個置中的五字承諾；應用程式從天空升起，並在滾動時填滿螢幕 | 置中的堆疊、固定的場景、由雜訊產生的半色調天空、繪製場景上的玻璃面板、從晶片到收尾貫穿的一個隱喻、發光的按鍵 |
landing-object | 深色頁面。左側三行文字，右側一個可旋轉的機械加工物體 | 從遮罩中浮現的文字行、純 CSS 雕刻的物體、作為產品照片的面板、逐行顯示的規格、作為標題的價格 |
landing-card | 淺色頁面，所有內容置中。一個用 CSS 繪製的石墨色卡片，會朝滑鼠指標傾斜 | 區塊之間一個間距代碼，區塊內部一個間距代碼；空曠空間上方的衛星；呼應主視覺的收尾 |
app-dashboard | 側邊欄殼層。一個部署平台的概覽，淺色和深色 | 答案是標題；僅顯示需要你的東西；每個項目以其狀態呈現為一個儲存格；一個動作一個強調色；平板電腦上的工具列；精確地說出新鮮度 |
app-analytics | 內嵌殼層：一個圓角側邊欄和面板，浮在有色背景上 | 一句話描述本週；數字一行顯示並附趨勢；圖表標籤位於其數據點下方；包含內嵌長條圖的列表 |
app-finance | 頂部導航殼層，一個置中欄 | 餘額是標題；其月份繪製在下方；帳戶、即將發生的事和已發生的事 |
phone-app | 跑步後的跑步應用程式，寬度 390 | 答案優先；繪製關鍵物體（按配速著色的路線）；重複使用相同的比例；玻璃標籤列 |
teaching/ 包含小型前後對比（邊緣、分組、強調、圖示、顏色、深色模式、表格、時間線、破壞性操作、手機列），用於診斷單一問題。每對都是同一個畫面兩次，只改變一個缺陷，且每個正確的一半都能通過檢查。它們一次教一個修復方法；永遠不要從 teaching/ 開始建立頁面，從頂尖範例開始。
首個畫面
大多數被視為「高級」的感覺在此決定，而且大部分是減法。
- 極少的字詞，設定得非常大。 一個 3–8 個字的標題，佔 2–3 行，桌面版 64–112px（
clamp()降至手機版約 48px），字重 600–650，字距 −.045 至 −.055em，行高 .92–1。第二行可以採用較低的語調；一整行，永遠不要只有一個字。 - 其下一行， 最多 14 個字，說明方式和對象。首個畫面上永遠不要有段落。
- 最多兩個動作： 一個主要膠囊按鈕（48px）和一個低調的按鈕。旁邊或下方的風險提示行（「一個收件匣免費」）僅在屬實時使用。
- 標題上方最多一個標籤， 承載一個事實或以產品的口吻說話（郵件應用程式的「今日預報：4 封來自人，12 封可略讀」）。
- 圖片是最大的東西。 產品視窗佔內容寬度的 80% 以上，從折頁下方升起；物體約佔螢幕的 40%；手機以其真實比例呈現。小而加框的是生成式 AI 的外觀。
- 空間： 堆疊置於上半部中央，各部分之間 24–36px；或文字在左半部，物體在右半部。螢幕上其他所有東西都是低調的。
標題就是設計，所以寫十個並保留一個。 用訪客的語言說出產品的真實，用聽起來像人的語氣：「你的收件匣，大致清爽。」「類比溫暖，少了機架。」「23 個應用程式中的 24 個正在執行。」從產品的世界中挑選一個隱喻（郵件用天氣，音訊用硬體），並輕輕地貫穿於標籤、產品自己的標籤和收尾行中。絕不用可以賣任何東西的口號（「極致提升你的工作流程」），也不用類別描述（「全方位平台……」）。
空間與平衡
一致性是大多數被視為用心的表現。每個頂尖範例都遵循以下規則，並且檢查工具會強制執行。
- 頁面的兩個間距代碼： 一個用於區塊之間（
--section，約clamp(88px, 10vw, 136px)），一個用於區塊內部的區塊之間（--gap，48–56px）。只使用一次：一個區塊只有頂部內距，所以兩個區塊永遠不會疊加它們的間距。 - 沒有空白的帶狀區域。 兩個內容片段之間的間距，在任何寬度或高度下，都不能大於區塊間距，包括滾動場景之後（
empty band）。 - 置中就是置中。 一個置中欄會將其中的每個區塊（包括按鈕組和短段落）都置中（
margin-inline: auto）；頁面欄位於其所佔區域的中間，永遠不會在寬螢幕上偏向左側（off-center）。 - 平衡的盒子。 內容位於其卡片的中央或刻意填滿它；上方空間等於下方空間（
unbalanced）；沒有卡片以空白面板結束（empty pane）或觸及其區塊邊緣（touches the edge）；文字永遠不會溢出其面板。 - 每個寬度都是經過設計的： 桌面版、平板電腦版（側邊欄在大約 760–1180px 折疊成圖示工具列）和手機版（單欄，相同的間距尺度）。檢查工具會檢視 1440、820 和 390 寬度。
- 導航列保持固定。 它固定在頂部並適應：在深色或攝影背景的主視覺上透明，一旦下方有淺色內容則變成磨砂條並使用深色文字。永遠不要有會隨滾動消失的導航列。
自己製作圖片
你可以用程式碼繪製頁面所需的幾乎任何東西，而且繪製的圖片總是與頁面匹配：
- 場景： 天空、田野、紋理，來自畫布上的分層雜訊：半色調點下方的柔和體積（
landing-sky,references/craft.md）。隨著滾動以不同速率移動的層。 - 物體： 金屬、玻璃、塑膠、紙張，使用 CSS 漸層和陰影：一個拉絲帽蓋是
conic-gradient的明暗階梯，疊加在細微的repeating-radial-gradient上（landing-object）。 - 作為主視覺的資料： 路線、波形、細胞群、儀表，使用看起來真實的數字以 SVG 繪製（
phone-app,app-dashboard）。 - 產品本身， 以其實際尺寸重建（
references/product-shots.md）。
照片來自使用者、影像工具或保存到專案中的免費授權照片（references/visuals.md）。絕不使用漸層模糊、圖庫插圖或冒充照片的 CSS 形狀。
工作循環
每個步驟都以可以檢查的東西結束。
- 方向。 從你的任務檔案填寫方向區塊，並將其寫入專案根目錄的
DESIGN.md。它命名頂尖範例、你保留的標題以及你將製作的圖片。當沒有一行可以描述其他產品時即完成。 - 頂尖範例與代碼。 複製頂尖範例的結構；以專案格式寫入代碼（
references/system.md），並將字型檔案放入專案中。 - 全部建立。 簡報中暗示的每個區塊和狀態，使用真實文案（
references/words.md）和一個範例世界。 - 讓它成為獨一無二的。 圖片和標誌性動態效果（
references/product-shots.md,references/motion.md）。當你可以指出人們會截圖的時刻時即完成。 - 檢視。 執行
node <skill>/scripts/check.mjs <url>並開啟它寫入的每張截圖。將你的首個畫面與頂尖範例的並排放置，並指出兩者之間的唯一差異。對於銷售頁面或新的應用程式畫面，請一位有新鮮眼光的審查者（references/review.md）。當檢查以check passed結束、審查已回覆，並且你至少修復並再次檢視兩次後即完成。 - 完成。 撰寫
DESIGN.md的「檢查」部分，停止伺服器，刪除截圖，並告訴使用者你做了什麼、你發明了什麼以及需要檢查什麼。
會反覆出現的缺陷
- 文字太多： 標題下方有一個段落、每個磁貼都有一個句子、每個區塊上方都有一個標籤。刪減到難以下手，然後再刪一行。
- 可以賣任何東西的標題， 或使用類別口吻的標題。
- 圖片太小， 被框在卡片中，或是產品該在的位置是一個灰色佔位符。
- 不平衡的放置： 標題被推到一側，另一側沒有任何東西；按鈕漂浮在文字行之外；視窗在隨機邊緣被裁切。將堆疊置中，或將文字與一個等重的物體配對。
- 手機版是桌面版的縮小版： 每個頁面都有自己的手機版構圖（
tiny text）。 - 文字被遮蓋或裁切： 視窗覆蓋在標題上；狀態被裁切所截斷（
covered,cut by the crop）。 - 低語調文字和連結的對比度不足； 標題的第二種色調需達到 3:1 或更高。
- 庫存 AI 風格： 閃光、紫色漸層、有色正方形中的字母、作為圖示的表情符號。
工藝數值
預設值。一份藍圖或使用者的系統可以取代它們。
- 字體： 一個系列（
fonts/中附有 Geist 和 Geist Mono），只有在有理由時才使用展示字體。銷售頁面：如上所述的展示字體；區塊標題 36–64px，字距 −.04em；內文 16–18px；導讀 17–20px，行高 1.45。應用 UI：12 / 13 / 14 / 16 / 20 / 24–26px，字重：內文 450、UI 500、標題 600。手機應用程式：內文 15–17px，大標題 34px。頁面上最多 10 種字體大小。數字使用tabular-nums，標題使用text-wrap: balance，全部使用句子大小寫。 - 顏色： 中性色建構結構（3 個表面、2 條線、4 個文字層級）。一個強調色，僅用於可操作、被選中或發光的元素。紅色表示失敗或破壞性，無論品牌為何。閱讀文字對比度 4.5:1，大文字 3:1，在實際背景上測量。
- 空間： 4px 網格。群組內部 8px，相關項目之間 12–16px，群組之間 24–32px，文字距離任何邊緣至少 12px。銷售頁面上的區塊間距
clamp(96px, 12vw, 176px)。內容寬度最大 1200–1320px，外邊距clamp(20px, 4vw, 48px)。 - 形狀： 一個圓角系列，嵌套（內部 = 外部 − 內距）：磁貼和視窗 20–32px，按鈕為膠囊形狀，應用內部 8–12px。邊緣為 0.5–1px 細線；陰影顏色與背景色調和，浮動物件使用長而柔和的陰影。
- 控制項： 3–4 種高度：應用 UI 中約 32px，觸控裝置 44px，銷售頁面上的按鈕 48px。標籤距離邊緣 10px 以上，
line-height: 1。
佈局
- 邊緣： 文字按閱讀順序左對齊，數字和右側操作右對齊；短的標題堆疊可以置中。每個區塊都與另一個區塊使用的對齊線對齊。
- 分組，然後區分： 人物有頭像，類別有顏色，數字有表格數字，同一事物在每個地方使用相同的標記。
- 展示，不要說明： 產品、長條圖、臉孔，而不是一句話。
- 強調就是差異： 讓鄰近的元素低調；僅對已更改、被選中或需要注意的內容使用顏色。
- 一個表面， 由線條和空間分割。卡片容納真實物體和浮動圖層，永遠不會容納另一張卡片。
絕不
- 藥丸或徽章內部的點；狀態是一個詞。
- 帶有色圓圈的圖示，置於卡片、統計資料或空白狀態的標題前方。
- 介面文字中的表情符號；問候語（「歡迎回來，Sarah」）。
- 預設 AI 顏色：紫到粉紅或藍色發光漸層、模糊的色塊、霓虹光、代表 AI 的閃光或魔法棒。
- 標題中的一個字使用不同的顏色、樣式或字重。
- 大寫字母的追蹤標籤、編號的區塊標籤（「01 /」）、每個區塊上方的小標籤。
- 虛構的證明：推薦、標誌牆、沒有人提供的評分和使用者計數。
- 佔位符：lorem、「Acme」、「John Doe」、整數、每個面板上的「View all →」。
- 代表產品的灰色長條圖或假圖表。
- 虛構的標誌：有色正方形中的字母。使用真實標記，或使用名稱作為字標。
- 手繪或使用文字符號（✦ ✳ ◐）的圖示，頁面上使用兩套圖示集，按鈕上的箭頭。
明顯的版本
任何模型在沒有選擇任何東西時建立的版本。在你的方向中命名它，然後離開它。
- 一個帶有漸層模糊的白色首個畫面，一個帶有漸層的單詞的標題，一段 […]（已截斷以供翻譯）