Communitygithub.com

設計記號 (Design Tokens)

以 DTCG 格式產生、擴充或稽核設計記號,支援三層架構 (基本 → 語意 → 元件)。適用於建立色板、字級、間距、陰影、圓角、動畫記號、多品牌主題化或驗證記號檔案。涵蓋色彩、字體、間距、陰影、邊框、斷點、動畫、漸層、不透明度、模糊、尺寸、狀態、主題。

設計記號 (Design Tokens) 是什麼?

這個技能專為需要系統性管理設計記號的專案而設計,它能協助開發者或 AI 助手在專案中建立、擴充及稽核符合 DTCG (`$type`/`$value`) 格式的設計記號。它遵循一套三層架構:基本記號 (Pr imitives) 儲存原始值,語意記號 (Semantic) 建立用途別名,元件記號 (Component) 則限定在特定元件範圍內。技能會先讀取專案中關於記號系統、色彩規範與排版間距的規則文件,再參考 `tokens/` 目錄下既有的 JSON 檔案結構 (如 `colors.json`、`typography.json` 等) 來產生或延伸記號。它特別支援使用 OKLCH 色彩空間產生色板,並透過輔助技能或腳本驗證色彩對比度 (AA 標準),確保文字與 UI 元件的可及性。最後,技能會自動執行驗證腳本檢查 JSON 語法及別名解析是否正確,並要求每個記號都附上 `$description` 說明,以提升可維護性。支援的平台包括 Claude Code 等能與專案檔案系統互動的 AI 編碼助手。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/design-tokens

在你喜歡的 AI 中提問

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

說明文件

技能:設計記號

依照專案的三層系統,產生並維護 DTCG ($type/$value) 記號。

步驟

  1. 讀取 .claude/rules/tokens-and-color.md →「記號系統」+「色彩規範」以及.claude/rules/typography-and-spacing.md 中的規則 (4px 基數、大三度音階、OKLCH 色板產生、在語意層實現暗色模式)。
  2. 讀取 tokens/ 中相關的既有檔案,以比對結構:colors.json、typography.json、spacing.json、shadows.json、borders.json、breakpoints.json、motion.json、gradients.json、opacity.json、blur.json、sizing.json、states.json、theming.json。
  3. 產生/擴充記號:
    • 基本記號 = 原始值 (永不直接使用)。語意記號 = 用途別名。元件記號 = 限於元件範圍。
    • 新色板:產生 11 階 OKLCH 色調;使用 a11y-audit 技能 / scripts/contrast.py 驗證 500 階在白色背景上 ≥ 4.5:1 (文字),600 階 ≥ 3:1 (UI)。
    • 多品牌/密度 → theming.json。
  4. 驗證:執行 python3 scripts/validate_tokens.py (檢查 JSON 有效性 + 別名解析)。

產出

DTCG JSON。每個記號都保留 $description。一律引用,絕不硬編碼。

Individual skills in this repo

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

plugin87/governance

Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.

plugin87/image-to-code

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

plugin87/performance

Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.

plugin87/prototype

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

plugin87/redesign

Upgrade an existing website or app to premium quality without breaking functionality — audit the current design, identify generic/AI tells, then apply taste and system rules surgically. Use when the user wants to improve, modernize, polish, or "make better" an existing UI/codebase.

plugin87/token-build

Set up or run the token build pipeline — transform the DTCG tokens/*.json (source of truth) into platform artifacts (CSS variables, Tailwind @theme, JS/TS, iOS Asset Catalog, Android, Compose) with Style Dictionary / Tokens Studio / W3C DTCG export. Use when the user wants to generate platform theme files from tokens, wire token CI, or multi-platform token output.

plugin87/ux-writing

Write or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error formula and inclusive-language rules. Use when the user needs interface copy, error messages, empty-state text, or a copy review.

相關技能