ui 是做什麼的？
一個用於建構與重新設計介面的技能。它將 Jakub Krehel 的技能「make-interfaces-feel-better」、「Impeccable」以及 Molveau 自己的參考資料（包括從 Emil Kowalski 的作品中提煉出的品味指南）整合為一本操作手冊。
從這裡開始
先閱讀 references/playbook.md，從其「Do this first」區塊開始；僅在需要深度或實際範例時才開啟供應商檔案與 Molveau 參考資料。 操作手冊是合併後的準則（包含開始前、塑形、佈局、排版、色彩、深色模式、表面、圖示、元件與狀態、回饋動畫、響應式與原生、審查、精煉迭代、效能、mockup-first、提示詞），附有來源標籤以及在來源意見不一致時所做的裁決。下表是深度索引。
方向閘
在為新頁面、畫面或重新設計撰寫任何程式碼之前執行此步驟，即使請求只有一行也一樣。本技能的其餘部分用於消除錯誤；它不會賦予畫面個性。若跳過此步驟，結果將是每個模型都會產生的平庸頁面：細節正確，但無人擁有。
- 五條線。 產品：它做什麼，為誰而做。性格：兩到三個具體的詞（例如「平靜、精確、略帶溫暖」），絕不使用乾淨、現代、時尚、簡約或高級。世界：產品所屬的地點或材質；它會為中性色調色並設定強調色。時刻：一或兩個獲得豐富色彩與細節的地方。簽名：只有這個產品才有的、一致使用的一個小細節。 一個時刻是用心繪製的，而不僅僅是清理乾淨：為圖表必須表達的內容重新繪製（平滑線條、鏡像比較、真實比例），或是用重量與光線渲染產品本身的物體。
- 盤點，然後是想法。 列出 8 到 12 個競爭對手沒有的東西（名稱、街道、簡報中的數字、材料、工具、儀式、該行業印刷的文件）。寫下：「在這個畫面上，[一個項目] 變成了 [那個裝置]」。那個裝置就是時刻。
- 拒絕使用次等預設值，除非品牌已經擁有它們。這些是模型在明顯的特徵被禁止後會轉而使用的東西：
- 帶有燒橙色、陶土色、鼠尾草色或森林綠強調色的奶油色、石色或暖白頁面，搭配或不搭配襯線標題（「紙墨」外觀是新的預設值，而不是一個方向）；
- 習慣性地使用 Fraunces、Instrument Serif、Playfair 或 Georgia 作為標題字體；system-ui 作為唯一字體；
- 在白色背景上使用 Inter 或 Geist，搭配一種靛藍色或藍色強調色；
- 無任何理由地按順序排列英雄區、三個功能、見證、行動呼籲；在應用程式畫面上，則是四個等大的統計卡片位於長條圖之上；
- 一個置中的小標題、標題和兩個按鈕作為整個首屏。
- 替換測試。 將名稱和行業替換為競爭對手的。如果畫面仍然適用，則更改主張、時刻和簽名，然後再次測試。
- 展示並等待。 展示這五條線和想法，然後等待擁有者。如果您無法詢問（使用者說直接建構，或者您在沒有真人參與的情況下運行），則將其作為註解寫在主檔案頂部，並完全按照該註解建構。
深度：anti-slop 操作手冊 §2（方向）和 §12（應用程式畫面）；design-inspiration-index 技能提供實際參考資料。
始終啟用
- 專案優先。 專案的 token、元件、
DESIGN.md和同級畫面在決定之前優先於此處的任何預設值。 - 一次一個設計權威。 在疊加另一層之前，先完成一個階段的處理。
- 每個畫面一個焦點和一個主要操作，每個狀態都經過設計（操作手冊 §3、§9）。
- 在實施之前先製作 mockup：對於新的或重新設計的畫面，如果專案採用 mockup-first 工作流程，則使用 Molveau 的 house 預設值（
references/mockup-first.md）；否則遵循專案自己的審查流程。 - 在宣告 UI 完成之前：執行
anti-slop技能及其檢測器，然後進行型別檢查、lint 和測試。
相鄰技能：anti-slop 技能負責處理 vibe-coded 的痕跡和去 AI 化迭代；motion 負責處理 UI 回饋之外的動畫；ux 負責處理文案、表單、焦點、目標、無障礙深度、錯誤、邊界情況和入門引導。審查深度：design-grill 是深度稽核（七個透鏡，排名報告），下方的 critique 行是較輕的單次迭代，而 anti-slop 是去 AI 外觀的迭代。
根據任務閱讀什麼
所有路徑均相對於此技能資料夾。
| 任務 | 閱讀內容 |
|---|---|
| 合併後的規則、價值觀與衝突裁決 | references/playbook.md |
| 需要反饋的新或重新設計畫面（非微小調整） | references/mockup-first.md |
| 專案尚無 token 時的品味預設值 | references/taste.md |
| 佈局、分組、對齊、間距 | references/vendor/jakub/better-layout.md，然後是 references/vendor/impeccable/layout.md |
| 排版：字體、尺度、行長、OpenType | references/vendor/jakub/better-typography.md 和 references/vendor/impeccable/typeset.md |
| 色彩：色板、對比、深色模式、token | references/vendor/jakub/better-colors.md，再加上 references/vendor/impeccable/colorize.md 來添加色彩 |
| 最終打磨：圓角、陰影、光學對齊、圖示狀態 | references/vendor/feel/make-interfaces-feel-better.md 和 references/vendor/impeccable/polish.md；精確數值請參考 references/vendor/jakub/better-ui.md |
全螢幕排名審查（無障礙和文案存在於 ux 技能中） | references/vendor/jakub/better-interface.md，總括性文件 |
| 審查分支或 PR 的 UI 回歸 | references/vendor/jakub/interface-review.md |
| 對檔案、元件或路由進行完整多透鏡設計稽核（重量級：需要多個代理器） | design-grill 技能 |
| 英雄區、CTA、導航欄、動畫、圖示的視覺參考或靈感 | design-inspiration-index 技能 |
| 畫面 critique 或設計審查 | references/vendor/impeccable/critique.md（啟發式、認知負載、人物誌）；快速拆解：references/prompts.md 中的提示 4 |
稽核：效能、主題、響應式（無障礙請使用 ux 技能） | references/vendor/impeccable/audit.md、references/vendor/impeccable/optimize.md |
| 過於雜亂或沉重 | references/vendor/impeccable/distill.md、references/vendor/impeccable/quieter.md |
| 過於平淡或膽怯 | references/vendor/impeccable/bolder.md、references/vendor/impeccable/colorize.md、references/vendor/impeccable/delight.md |
| 技術上雄心勃勃的效果 | references/vendor/impeccable/overdrive.md |
| 從頭規劃新設計 | references/vendor/impeccable/shape.md；references/vendor/impeccable/new-work.md 以及模式檔案（references/vendor/impeccable/mode-operate.md、mode-persuade.md、mode-read.md）用於新的視覺識別 |
| 應用程式、儀表板與設定深度 | references/vendor/impeccable/operate.md |
| 小螢幕、觸控、其他平台 | references/vendor/impeccable/adapt.md；原生：references/vendor/impeccable/ios.md、references/vendor/impeccable/android.md、references/vendor/impeccable/adapt.native.md |
撰寫或更新 DESIGN.md，提取 token 和元件 | references/vendor/impeccable/document.md、references/vendor/impeccable/extract.md |
| 回饋動畫配方（按下、進入與離開、圖示切換、主題切換） | references/vendor/jakub/better-ui/animations.md、references/vendor/jakub/better-ui/enter-exit.md、references/vendor/jakub/better-ui/icon-transitions.md；Emil 的數值在 references/animation.md（完整工作流程：motion 技能）。某些配方持續時間較長（~500ms 的 sheet、Sonner 的 400ms）：在 UI 中，操作手冊將覆蓋層限制在 300ms 以內（§10） |
| 互動式元件完成檢查清單（toast、抽屜、選單） | references/components.md |
| 應被 LLM 引用的公開行銷網站 | references/discoverability.md |
| 強制將品味注入 AI 生成 UI 的提示詞 | references/prompts.md |
| 規則背後的哲學 | references/quotes.md |
| UI 看起來有 vibe-coded 或通用感 | anti-slop 技能 |
| 文案、錯誤、空狀態、無障礙深度 | ux 技能 |
Impeccable 的入口點 references/vendor/impeccable/impeccable.md 描述了完整的命令集及其自己的設置檔案和腳本；當您想要整個工作流程而不是單次迭代時，請閱讀它。其 clarify、harden 和 onboard 命令已作為供應商檔案收錄一次，位於 ux 技能中。
關於供應商檔案的說明
references/vendor/ 下的檔案是從其作者處未經修改複製而來的，因此其中的相對連結和命令名稱（Impeccable 的斜線命令、scripts/impeccable、live mode、comp gates）可能不存在於此安裝中。接受其指導；跳過指向缺失工具的部分。當供應商檔案要求瀏覽器截圖、子代理器或自動化視覺迭代時，請遵循專案自己的規則（操作手冊衝突 14）。授權和確切來源位於每個供應商資料夾中（LICENSE、SOURCE.md）。
致謝與授權
references/vendor/jakub/是 Jakub Krehel 的技能 (https://github.com/jakubkrehel/skills)，採用 MIT 授權。references/vendor/feel/是 Jakub Krehel 的 make-interfaces-feel-better (https://github.com/jakubkrehel/make-interfaces-feel-better)，採用 MIT 授權。references/vendor/impeccable/是 Paul Bakaus 的 Impeccable (https://github.com/pbakaus/impeccable)，採用 Apache-2.0 授權，並保留了其 LICENSE 和 NOTICE。檔案已重新定位，SKILL.md已重新命名，未包含scripts/；請參閱其SOURCE.md。操作手冊改寫並濃縮了 Impeccable 的指導；該改編是對原作的變更。- 品味指南（
references/taste.md、animation.md、components.md、quotes.md）是從 Emil Kowalski 的設計工程工作 (https://emilkowal.ski) 中提煉出來的，在操作手冊中標記為[Molveau/Emil]。文字和結構是 Molveau 的（採用 MIT 授權）；想法和數值是他的。references/quotes.md標註了每條引用的出處。references/animation.md也參考了 Rauno Freiberg 的 devouringdetails.com。 references/discoverability.md是從 Suganthan Mohanadasan 的研究 (suganthan.com) 中提煉出來的。references/playbook.md、references/prompts.md和references/mockup-first.md是 Molveau 自己的作品（採用 MIT 授權），並通過標籤標註了每個來源。