Communitygithub.com

borghei/ui-design-system

產生設計代碼（Design Tokens）、建立色板、計算字體排版比例、建構元件系統及準備開發交接文件。

ui-design-system 是什麼？

此技能（Agent Skill）用於自動化 UI 設計系統的生成與開發交接流程。它從一個品牌主色開始，能產生完整的設計代碼（Design Tokens），包括顏色、字體排印、間距（8pt 網格）、邊框、陰影和動畫等類別。技能同時提供建構元件系統的指南，包含原子、分子與有機體的層級結構、變體模式及 API 文件。此外，還涵蓋響應式設計的斷點設定、流體排版計算，以及將代碼匯出為 CSS、SCSS 或 JSON 格式的標準流程，並與 Figma 等設計工具同步。支援三種風格預設（現代、經典、活潑），並內建 WCAG 對比度驗證表，確保生成結果符合無障礙標準。此技能適用於 Claude Code、Cursor、Codex 等支援 Skill 架構的 AI 代理平台，開發者能透過自然語言觸發工作流程。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/borghei/Claude-Skills/tree/HEAD/product-team/ui-design-system
查看原文→瀏覽所有技能

在你喜歡的 AI 中提問

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

說明文件

UI 設計系統

產生設計代碼（Design Tokens）、建立色板、計算字體排版比例、建構元件系統及準備開發交接文件。

目錄

觸發條件

當你需要下列任一需求時，可使用此技能：

  • "產生設計代碼"
  • "建立色板"
  • "建構字體排版比例"
  • "計算間距系統"
  • "建立設計系統"
  • "產生 CSS 變數"
  • "匯出 SCSS 代碼"
  • "設定元件架構"
  • "文件化元件庫"
  • "計算響應式斷點"
  • "準備開發交接"
  • "將品牌色轉換為色板"
  • "檢查 WCAG 對比度"
  • "建構 8pt 網格系統"

先釐清事項

在產生代碼或系統之前，請先確認下列輸入。若某項資訊遺漏或模糊不清且會影響結果，應主動提問；若不影響，則使用合理的預設值並告知使用者。

  • 品牌主色（十六進位）： 完整色板的種子色（驅動色彩階梯與 WCAG 對比度檢查）。
  • 風格預設： modern、classic 或 playful（設定字型、邊框圓角與陰影風格）。
  • 輸出格式與框架： CSS、SCSS 或適用於 Tailwind/styled-components/Figma 的 JSON（驅動匯出與開發交接）。

針對此請求，僅詢問最關鍵的兩三個輸入項，而非全部列出。若使用者希望立即獲得結果，則直接產生，並在開頭說明你所做的假設。

工作流程

工作流程 1：產生設計代碼

情境： 你有一個品牌色，需要一套完整的設計代碼系統。

步驟：

  1. 識別品牌色與風格

    • 品牌主色（十六進位格式）
    • 風格偏好：modern | classic | playful

  2. 使用腳本產生代碼

    python scripts/design_token_generator.py "#0066CC" modern json

  3. 檢查產生的類別

    • 顏色：primary、secondary、neutral、semantic、surface
    • 字體排印：fontFamily、fontSize、fontWeight、lineHeight
    • 間距：基於 8pt 網格的尺度 (0-64)
    • 邊框：radius、width
    • 陰影：none 至 2xl
    • 動畫：duration、easing
    • 斷點：xs 至 2xl

  4. 以目標格式匯出

    # CSS 自訂屬性
python scripts/design_token_generator.py "#0066CC" modern css > design-tokens.css

# SCSS 變數
python scripts/design_token_generator.py "#0066CC" modern scss > _design-tokens.scss

# 適用於 Figma/工具的 JSON
python scripts/design_token_generator.py "#0066CC" modern json > design-tokens.json

  5. 驗證無障礙性

    • 檢查色彩對比是否符合 WCAG AA（一般文字 4.5:1，大型文字 3:1）
    • 確認語意色已定義對比色

工作流程 2：建立元件系統

情境： 你需要使用設計代碼來建構元件庫的結構。

步驟：

  1. 定義元件層級

    • 原子：Button、Input、Icon、Label、Badge
    • 分子：FormField、SearchBar、Card、ListItem
    • 有機體：Header、Footer、DataTable、Modal
    • 模板：DashboardLayout、AuthLayout

  2. 將代碼對應至元件

    元件使用的代碼
    Buttoncolors、sizing、borders、shadows、typography
    Inputcolors、sizing、borders、spacing
    Cardcolors、borders、shadows、spacing
    Modalcolors、shadows、spacing、z-index、animation

  3. 定義變體模式

    尺寸變體：

    sm：高度 32px，左右內距 12px，字體大小 14px
md：高度 40px，左右內距 16px，字體大小 16px
lg：高度 48px，左右內距 20px，字體大小 18px

    顏色變體：

    primary：背景 primary-500，文字 white
secondary：背景 neutral-100，文字 neutral-900
ghost：背景 transparent，文字 neutral-700

  4. 文件化元件 API

    • 包含型別的 Props 介面
    • 變體選項
    • 狀態處理（hover、active、focus、disabled）
    • 無障礙需求

  5. 參考資料： 請參閱 references/component-architecture.md

工作流程 3：響應式設計

情境： 你需要斷點、流體排版或響應式間距。

步驟：

  1. 定義斷點

    名稱寬度目標裝置
    xs0小型手機
    sm480px大型手機
    md640px平板
    lg768px小型筆電
    xl1024px桌機
    2xl1280px大螢幕

  2. 計算流體排版

    公式：clamp(min, preferred, max)

    /* 在 320px 到 1200px 視口間從 16px 到 24px */
font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem);

    預計算的尺度：

    --fluid-h1: clamp(2rem, 1rem + 3.6vw, 4rem);
--fluid-h2: clamp(1.75rem, 1rem + 2.3vw, 3rem);
--fluid-h3: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
--fluid-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);

  3. 設定響應式間距

    代碼手機平板桌機
    --space-md12px16px16px
    --space-lg16px24px32px
    --space-xl24px32px48px
    --space-section48px80px120px

  4. 參考資料： 請參閱 references/responsive-calculations.md

工作流程 4：開發交接

情境： 你需要將設計代碼交接給開發團隊。

步驟：

  1. 以所需格式匯出代碼

    # 適用於 CSS 專案
python scripts/design_token_generator.py "#0066CC" modern css

# 適用於 SCSS 專案
python scripts/design_token_generator.py "#0066CC" modern scss

# 適用於 JavaScript/TypeScript
python scripts/design_token_generator.py "#0066CC" modern json

  2. 準備框架整合

    React + CSS 變數：

    import './design-tokens.css';

<button className="btn btn-primary">點我</button>

    Tailwind 設定：

    const tokens = require('./design-tokens.json');

module.exports = {
  theme: {
    colors: tokens.colors,
    fontFamily: tokens.typography.fontFamily
  }
};

    styled-components：

    import tokens from './design-tokens.json';

const Button = styled.button`
  background: ${tokens.colors.primary['500']};
  padding: ${tokens.spacing['2']} ${tokens.spacing['4']};
`;

  3. 與 Figma 同步

    • 安裝 Tokens Studio 外掛
    • 匯入 design-tokens.json
    • 代碼會自動與 Figma 樣式同步

  4. 交接檢查清單

    • 代碼檔案已加入專案
    • 建置管線已設定
    • 主題/CSS 變數已匯入
    • 元件庫已對齊
    • 文件已產生

  5. 參考資料： 請參閱 references/developer-handoff.md

工具參考

design_token_generator.py

從品牌色產生完整的設計代碼系統。

引數值預設值說明
brand_color十六進位色碼#0066CC品牌主色
stylemodern、classic、playfulmodern設計風格預設
formatjson、css、scss、summaryjson輸出格式

範例：

# 產生 JSON 代碼（預設）
python scripts/design_token_generator.py "#0066CC"

# 經典風格，CSS 輸出
python scripts/design_token_generator.py "#8B4513" classic css

# 活潑風格，摘要檢視
python scripts/design_token_generator.py "#FF6B6B" playful summary

輸出類別：

類別說明關鍵值
colors色板primary、secondary、neutral、semantic、surface
typography字型系統fontFamily、fontSize、fontWeight、lineHeight
spacing8pt 網格0-64 尺度，語意化 (xs-3xl)
sizing元件尺寸container、button、input、icon
borders邊框值radius（依風格）、width
shadows陰影樣式none 至 2xl、inner
animation動畫代碼duration、easing、keyframes
breakpoints響應式xs、sm、md、lg、xl、2xl
z-index圖層系統base 至 notification

速查表

色階生成

步驟亮度飽和度用途
50固定 95%30%淺色背景
100固定 95%38%淺色背景
200固定 95%46%懸停狀態
300固定 95%54%邊框
400固定 95%62%禁用狀態
500原始70%基底/預設色
600原始 × 0.878%懸停（深色）
700原始 × 0.686%作用中狀態
800原始 × 0.494%文字
900原始 × 0.2100%標題

字體排版比例（1.25x 比例）

尺寸值計算方式
xs10px16 ÷ 1.25²
sm13px16 ÷ 1.25¹
base16px基底
lg20px16 × 1.25¹
xl25px16 × 1.25²
2xl31px16 × 1.25³
3xl39px16 × 1.25⁴
4xl49px16 × 1.25⁵
5xl61px16 × 1.25⁶

WCAG 對比度需求

等級一般文字大型文字
AA4.5:13:1
AAA7:14.5:1

大型文字：≥18pt 一般字重 或 ≥14pt 粗體

風格預設

面向現代經典活潑
無襯線字型InterHelveticaPoppins
等寬字型Fira CodeCourierSource Code Pro
預設圓角8px4px16px
陰影多層次、柔和單層柔軟、明顯

知識庫

詳細參考指南位於 references/：

檔案內容
token-generation.md色彩演算法、HSV 空間、WCAG 對比度、字型比例
component-architecture.md原子設計、命名慣例、Props 模式
responsive-calculations.md斷點、流體排版、網格系統
developer-handoff.md匯出格式、框架設定、Figma 同步

驗證檢查清單

代碼生成

  • 品牌色以十六進位格式提供
  • 風格符合專案需求
  • 所有代碼類別已產生
  • 語意色包含對比值

元件系統

  • 所有尺寸已實作 (sm、md、lg)
  • 所有變體已實作 (primary、secondary、ghost)
  • 所有狀態正常運作 (hover、active、focus、disabled)
  • 僅使用設計代碼（無硬編碼值）

無障礙性

  • 色彩對比符合 WCAG AA
  • 焦點指示器可見
  • 觸控目標 ≥ 44×44px
  • 使用語意化 HTML 元素

開發交接

  • 代碼已以所需格式匯出
  • 框架整合已文件化
  • 設計工具已同步
  • 元件文件完整

疑難排解

問題原因解決方案
產生的顏色未通過 WCAG 對比度品牌色太淺或飽和度過高使用更深色階 (600+) 作為淺色背景上的文字；使用對比工具檢查
代碼匯出值不正確格式引數錯誤或色彩語法有誤確保十六進位色碼有引號（例如 "#0066CC"）；確認格式為 json、css 或 scss
字體排版比例過大/過小預設 1.25x 比例不適合設計修改 DesignTokenGenerator 類別中的 type_scale_ratio（1.125 更緊湊，1.333 更寬鬆）
SCSS 變數與現有衝突代碼命名衝突為所有代碼加上專案命名空間前置詞（編輯匯出函式）
設計工具顯示不同顏色色階生成中的十六進位四捨五入使用 JSON 匯出作為真相來源；透過 Tokens Studio 外掛同步
間距值與網格不一致自訂間距混入 8pt 網格僅使用產生的間距系統中的值；避免任意像素值
陰影代碼在深色模式下看起來不對陰影專為淺色背景設計為深色模式建立獨立的陰影代碼，搭配較低的透明度值

成功標準

標準目標如何衡量
代碼一致性程式碼庫中零硬編碼顏色/間距值Lint 規則違規次數
WCAG AA 合規所有文字顏色符合 4.5:1 對比度自動化對比度檢查器或人工稽核
匯出格式覆蓋率CSS、SCSS 和 JSON 皆正確生成使用每種格式執行產生器；驗證輸出
設計-開發同步從代碼更新到部署時間 <24 小時從 Figma 變更到上線時間
元件代碼覆蓋率100% 的元件使用設計代碼稽核元件樣式中的硬編碼值
字體排版一致性所有文字使用設計系統字型比例跨所有頁面的視覺稽核
響應式行為流體排版在所有斷點正常運作在 xs、sm、md、lg、xl、2xl 寬度測試

範圍與限制

涵蓋範圍：

  • 從品牌色生成完整設計代碼
  • 色板生成（primary、secondary、neutral、semantic）
  • 字體排印系統與模組化比例
  • 基於 8pt 網格的間距系統
  • 元件尺寸、邊框、陰影、動畫代碼
  • 匯出至 CSS 自訂屬性、SCSS 變數和 JSON
  • 響應式斷點定義
  • WCAG 對比度參考表

不涵蓋範圍：

  • 深色模式代碼生成（需要單獨的色板對應）
  • 動畫/動態設計庫
  • 圖示系統生成
  • 執行時期主題切換實作
  • Figma 外掛或 API 整合（請使用 Tokens Studio）
  • 視覺回歸測試
  • 設計轉程式碼轉換（請使用 Figma Dev Mode 或 Locofy）

整合點

…

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

borghei/brand-strategist

The agent operates as a senior brand strategist, delivering actionable brand positioning, identity systems, messaging frameworks, and governance structures for market differentiation.

borghei/ux-researcher-designer

Generate user personas from research data, create journey maps, plan usability tests, and synthesize research findings into actionable design recommendations.

相關技能

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community