Communitygithub.com

無縫設計

審查並重新設計應用程式或網站 UI,去除「冗飾」(裝飾性強調色、漸層、無意義的陰影、雜亂的徽章、表情符號當作圖示、目測間距、問候語當作頁面標題、標題大小寫、扁平層級、重複的數字),並使用系統(間距、字型、色彩角色、高度)和一個編排流程 — 從螢幕錄製或截圖進行盤點、灰階通過、並行產品設計審查員、發佈獲勝提案、每個領域的開發者、審計和 PR。

無縫設計 是什麼?

「無縫設計」是一套 AI 代理技能(適用於 Claude Code、Codex、Cursor、Copilot、Gemini 等),用於系統性地去除 UI 中的設計「冗飾」。它定義了九項不可協商的原則(例如:修正必須是規則而非調整、層級先於色彩、每個畫面只有一個主角數字、色彩只表達一件事、符合 WCAG AA 對比度、只設計可出貨的最小版本等),並提供了一個包含盤點、灰階通過、並行審查和開發者實施的編排流程。該技能包含詳細的檢查清單、流程步驟、參考案例、平台特定指南(SwiftUI、Compose、Web、小工具、手錶、車載系統)以及規範卡片,確保每次修改都基於設計系統的 token 和組件,而非逐像素調整。它特別強調 UI 必須在灰階下即能運作,色彩只賦予意義,且支援在多平台同步實施。

相容平台✓Claude Code✓Codex CLI✓Cursor✓Gemini CLI
npx skills add https://github.com/marcosnovo/unslop-design/tree/HEAD

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

無縫設計 是做什麼的?

分為三個部分:該修什麼(checklist.md,每個修正附帶理由)、如何編排(process.md,審查員與開發者並行進行的回合制流程)以及案例與來源(references.md:催生此技能的五個前後對比案例,以及《重構 UI》的對應地圖)。每位審查員填寫的規範卡片位於 spec-card.md 中。各平台備註(SwiftUI、Compose、Web、小工具、手錶、車載系統)則放在 platforms.md 裡。只讀取你需要的部分,不必全部閱讀。

原則(不可協商)

  1. 修正是一條規則,而非調整。 每個變更都以 token 或元件(間距、字型大小、字重、色彩角色、圓角、陰影、按鈕)的形式出貨,絕不作為視圖中的字面值。如果 token 不存在,就在同一次變更中建立它。根據尺度內的 排除法 挑選數值(嘗試該數值及其兩個相鄰值;取中間值,否則重複),而非逐像素調整。
  2. 層級先於色彩。 畫面必須在 灰階 下就能運作:靠間距、大小、字重和對比度完成分層;色彩只是後來加上去,且僅表達某種意義。如果在灰階下不清楚什麼是重點,色彩也無法解決。
  3. 你讀到的第一個東西就是答案。 每個畫面只有一個主角數字(餘額、價格、今天的進度);其他一切都要退居其次。透過 弱化競爭者 來強調主角,而非放大主角本身。每個畫面最多一個深色/主角表面,且 在半頁或模態視窗中完全不要有。
  4. 色彩只表達一件事。 一個品牌強調色用於行動按鈕或主角數字;其他一切都是有含義的角色(金錢/成功、上升/危險、狀態、獎勵),灰色用於只負責導航的元素。裝飾性色彩 = 冗飾。色彩絕不單獨使用:必須搭配形狀或文字。
  5. 量化的對比度,而非假設。 WCAG AA(一般文字 4.5:1,大型文字與圖示 3:1)根據實際十六進位數值與實際背景(淺色和深色)計算。白色文字放在綠色/黃色品牌色彩上幾乎從來不會通過;灰色文字放在彩色背景上也不會通過(應選用同一色調的深淺變化)。
  6. 畫面無法傳達的就不要放。 沒有虛構的數字、沒有偽裝成資料的預測、沒有暗示不存在功能、沒有說謊的空白狀態。設計你真正能出貨的最小版本。
  7. 一個源自領域的標誌性手勢。 來自應用程式所顯示內容的品牌細節(例如價格看板上的價格,最後一位數字較小;跑步應用上的點陣數字),而非新的字型或特效;並且在不需要的地方能優雅降級。其他一切皆為原生:不要對抗標籤列、開關或系統表單。
  8. 平台一起出貨。 如果專案同時有 iOS 和 Android(或 App 和 Web),則在同一個 PR 中將變更套用到兩個平台,並包含所有語言。
  9. 驗證使用者所見的內容。 截圖包含淺色和深色模式、最大文字大小、非預設貨幣/語言、真實資料(長名稱、空白、2000 個項目)。無法在你的環境中編譯的部分,透過閱讀程式碼進行審計,並在 PR 中說明。

任何代理(Claude Code、Codex、Cursor、Copilot、Gemini……)

規則到處都一樣。在提到「代理」的地方,請使用你的工具所提供的功能:如果有子代理(如 Claude Code、Codex……),則為每個開發者使用獨立的 git worktree。如果沒有子代理,則一個接一個地執行審查員,每次附上各自的簡報,並在陪審團步驟之前保持他們輸出的獨立性。在提到「發佈」的地方,Claude Code 會發佈一個 artifact;其他代理則撰寫一個讓使用者開啟的 HTML 檔案。在沒有程式碼庫的聊天應用程式中,請在前後對比提案之後停止。

工作約定(預設值)

  • 審查員 = 資深產品設計師,開發者 = 資深開發者,以代理形式執行(使用使用者要求的模型)。協調者不負責建立各個領域:它負責共享工作、整合和審計。
  • 每個決定都附帶一個 明確、可執行的建議。
  • 實施之前,先發佈前後對比,並等待使用者的「是」。
  • 每個回合也審查先前回合出貨的內容以及 所有 收到的影片/截圖,而不僅僅是最新的。
  • 當 CI 通過後允許合併時:關閉時附上一份清單,說明編譯時應檢查的項目(具體風險),如果沒有 Mac/模擬器,則附上一個可在本地階段使用的自包含提示。
  • 當被問到「一切都完成了嗎?」:已完成(附 PR)· 等待你處理 · 故意遺漏。
  • 在最後一個回合之後,更新專案的設計系統。

簡短流程

  1. 盤點:從影片中提取幀(process.md § 1)、畫面與狀態,以及每個畫面在程式碼中的位置。
  2. 系統:檢查(或建立)間距、字型、色彩和高度尺度(checklist.md § 系統)。沒有尺度,審查員就只能憑感覺判斷。
  3. 灰階通過 + 並行審查員(3-4 位,每人負責一個領域)對照 checklist.md,一次只套用一個修正。
  4. 獲勝提案:一個 HTML 頁面,包含前後對比、規範卡片和決策清單;由使用者選擇。
  5. 每個領域的開發者在隔離的 worktree 中,附上封閉的簡報進行開發;整合、編譯、審計、PR、回覆審查機器人,待 CI 通過後合併。
  6. 最後:用新增的內容更新專案的設計系統(文件 + tokens + 其自身的技能)。

如果專案已有自己的設計技能

請使用它提供的具體 tokens 和元件;此技能負責提供方法和通用檢查清單。如果此處的規則與書面的專案決策衝突,則以專案為準,並在提案中標明。

相關技能