Communitygithub.com

borghei/ui-design-system

生成设计令牌、创建调色板、计算排版比例、构建组件系统并准备开发交接文档。

ui-design-system 是什么？

此技能可协助开发者及AI智能体从品牌色出发，自动化生成完整的UI设计系统。它涵盖了颜色色阶、排版比例、间距网格、阴影及动画等设计令牌，并支持输出为CSS自定义属性、SCSS变量和JSON格式，方便与Tailwind、styled-components等框架集成。该技能还能定义组件层级（原子、分子、有机体）、制作响应式布局参数，并自动检查WCAG无障碍对比度。它为设计到开发的交接提供了标准化的流程，确保设计令牌能通过插件同步至Figma等工具，从而提升整个开发流程的效率与一致性。

兼容平台~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 设计系统

生成设计令牌、创建调色板、计算排版比例、构建组件系统并准备开发交接文档。

目录

触发词

当您需要以下内容时，可使用此技能：

  • "生成设计令牌"
  • "创建调色板"
  • "构建排版比例"
  • "计算间距系统"
  • "创建设计系统"
  • "生成CSS变量"
  • "导出SCSS令牌"
  • "搭建组件架构"
  • "文档化组件库"
  • "计算响应式断点"
  • "准备开发交接"
  • "将品牌色转换为调色板"
  • "检查WCAG对比度"
  • "构建8pt网格系统"

首先澄清

在生成令牌或系统之前，请先确定以下输入。如果某项缺失或模糊且会影响结果，请询问；如果不会，则使用合理的默认值并说明你使用了哪个。

  • 品牌主色（十六进制）： 完整调色板的种子（驱动颜色色阶和WCAG对比度检查）。
  • 风格预设： 现代、经典或活泼（设置字体、圆角和阴影样式）。
  • 输出格式和框架： CSS、SCSS 或 JSON，用于 Tailwind/styled-components/Figma（驱动导出和开发交接）。

仅询问本次请求最相关的两到三个输入，而非整个列表。如果用户希望立即得到结果，则直接生成，并在顶部说明你的假设。

工作流

工作流 1：生成设计令牌

场景： 你拥有一个品牌色，需要一套完整的设计令牌系统。

步骤：

  1. 确定品牌色和风格

    • 品牌主色（十六进制格式）
    • 风格偏好：modern | classic | playful

  2. 使用脚本生成令牌

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

  3. 审查生成的类别

    • 颜色：主色、辅色、中性色、语义色、表面色
    • 排版：fontFamily, fontSize, fontWeight, lineHeight
    • 间距：基于8pt网格的比例（0-64）
    • 边框：圆角、宽度
    • 阴影：无 到 2xl
    • 动画：持续时间、缓动函数
    • 断点：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

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

  5. 验证可访问性

    • 检查颜色对比度是否符合 WCAG AA（普通文本 4.5:1，大文本 3:1）
    • 确认语义色已定义对比色

工作流 2：创建组件系统

场景： 你需要使用设计令牌构建一个组件库。

步骤：

  1. 定义组件层级

    • 原子：按钮、输入框、图标、标签、标记
    • 分子：表单字段、搜索栏、卡片、列表项
    • 有机体：页眉、页脚、数据表格、模态框
    • 模板：仪表盘布局、认证布局

  2. 将令牌映射到组件

    组件使用的令牌
    按钮颜色、尺寸、边框、阴影、排版
    输入框颜色、尺寸、边框、间距
    卡片颜色、边框、阴影、间距
    模态框颜色、阴影、间距、z-index、动画

  3. 定义变体模式

    尺寸变体：

    sm: 高度 32px, 内边距X 12px, 字号 14px
md: 高度 40px, 内边距X 16px, 字号 16px
lg: 高度 48px, 内边距X 20px, 字号 18px

    颜色变体：

    primary: 背景色 primary-500, 文字白色
secondary: 背景色 neutral-100, 文字颜色 neutral-900
ghost: 背景透明, 文字颜色 neutral-700

  4. 文档化组件API

    • 带类型的 Props 接口
    • 变体选项
    • 状态处理（悬停、激活、聚焦、禁用）
    • 可访问性要求

  5. 参考： 参见 references/component-architecture.md

工作流 3：响应式设计

场景： 你需要断点、流式排版或响应式间距。

步骤：

  1. 定义断点

    名称宽度目标设备
    xs0小手机
    sm480px大手机
    md640px平板电脑
    lg768px小型笔记本
    xl1024px台式机
    2xl1280px大屏

  2. 计算流式排版

    公式：clamp(最小值, 首选值, 最大值)

    /* 视口宽度 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 网格混合仅使用生成的水平系统值；避免任意像素值
阴影令牌在暗黑模式下看起来不对阴影设计用于浅色背景为暗黑模式创建单独的阴影令牌，使用更浅的不透明度值

成功标准

标准目标衡量方式
令牌一致性代码库中零硬编码的颜色/间距值代码检查规则违规次数
WCAG AA 合规所有文本颜色满足 4.5:1 对比度自动对比度检查器或手动审查
导出格式覆盖CSS、SCSS 和 JSON 均能正确生成使用每种格式运行生成器；验证输出
设计与开发同步令牌更新到代码部署 <24 小时从 Figma 变更到生产的时间
组件令牌覆盖100% 的组件使用设计令牌审查组件样式中的硬编码值
排版一致性所有文本使用设计系统字体比例跨所有页面进行视觉审查
响应式行为流式排版在所有断点下工作在 xs, sm, md, lg, xl, 2xl 宽度下测试

范围与限制

范围包括：

  • 根据品牌色生成完整的设计令牌
  • 调色板生成（主色、辅色、中性色、语义色）
  • 使用模块化比例的排版系统
  • 基于 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