⚡

ui-design-system ui-design-system

UI设计系统工具包，为高级UI设计师提供设计令牌生成、组件文档、响应式设计计算和开发者交接工具。用于创建设计系统、维护视觉一致性以及促进设计-开发协作。

UI/UX设计 0 次安装 0 次浏览 更新于 3/5/2026

UI设计系统

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

目录

触发词

使用此技能时，你需要：

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

工作流程

工作流程1：生成设计令牌

**情境：**你有品牌颜色，需要一个完整的设计令牌系统。

步骤：

  1. 确定品牌颜色和风格

    • 品牌主色（十六进制格式）
    • 风格偏好：现代 | 经典 | 有趣

  2. 使用脚本生成令牌

    python scripts/design_token_generator.py "#0066CC" 现代 json

  3. 审查生成的类别

    • 颜色：主色、辅助色、中性色、语义色、表面色
    • 排版：fontFamily、fontSize、fontWeight、lineHeight
    • 间距：基于8pt网格的比例（0-64）
    • 边框：半径、宽度
    • 阴影：无至2xl
    • 动画：持续时间、缓动
    • 断点：xs至2xl

  4. 导出目标格式

    # CSS自定义属性
python scripts/design_token_generator.py "#0066CC" 现代 css > design-tokens.css

# SCSS变量
python scripts/design_token_generator.py "#0066CC" 现代 scss > _design-tokens.scss

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

  5. 验证可访问性

    • 检查颜色对比度符合WCAG AA（正常文本4.5:1，大文本3:1）
    • 验证语义颜色定义了对比颜色

工作流程2：创建组件系统

**情境：**你需要使用设计令牌构建组件库。

步骤：

  1. 定义组件层次结构

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

  2. 将令牌映射到组件

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

  3. 定义变体模式

    大小变体：

    sm: 高度 32px, paddingX 12px, fontSize 14px
md: 高度 40px, paddingX 16px, fontSize 16px
lg: 高度 48px, paddingX 20px, fontSize 18px

    颜色变体：

    主色：背景 primary-500, 文本白色
辅助色：背景 neutral-100, 文本 neutral-900
幽灵色：背景透明，文本 neutral-700

  4. 文档化组件API

    • 属性接口及类型
    • 变体选项
    • 状态处理（悬停、活动、焦点、禁用）
    • 可访问性要求

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

工作流程3：响应式设计

**情境：**你需要断点、流体排版或响应式间距。

步骤：

  1. 定义断点

    名称 宽度 目标
    xs 0 小型手机
    sm 480px 大型手机
    md 640px 平板电脑
    lg 768px 小型笔记本电脑
    xl 1024px 桌面电脑
    2xl 1280px 大型屏幕

  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-md 12px 16px 16px
    –space-lg 16px 24px 32px
    –space-xl 24px 32px 48px
    –space-section 48px 80px 120px

  4. 参考： 见 references/responsive-calculations.md

工作流程4：开发者交接

**情境：**你需要将设计令牌交给开发团队。

步骤：

  1. 导出所需格式的令牌

    # 对于CSS项目
python scripts/design_token_generator.py "#0066CC" 现代 css

# 对于SCSS项目
python scripts/design_token_generator.py "#0066CC" 现代 scss

# 对于JavaScript/TypeScript
python scripts/design_token_generator.py "#0066CC" 现代 json

  2. 准备框架集成

    React + CSS Variables：

    import './design-tokens.css';

<button className="btn btn-primary">点击</button>

    Tailwind Config：

     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 主品牌颜色
style 现代，经典，有趣 现代 设计风格预设
format json, css, scss, summary json 输出格式

示例：

# 生成JSON令牌（默认）
python scripts/design_token_generator.py "#0066CC"

# 经典风格，CSS输出
python scripts/design_token_generator.py "#8B4513" 经典 css

# 有趣风格摘要视图
python scripts/design_token_generator.py "#FF6B6B" 有趣 summary

输出类别：

类别 描述 键值
colors 调色板 主色、辅助色、中性色、语义色、表面色
typography 字体系统 fontFamily, fontSize, fontWeight, lineHeight
spacing 8pt网格 0-64比例，语义（xs-3xl）
sizing 组件大小 容器、按钮、输入框、图标
borders 边框值 半径（每风格）, 宽度
shadows 阴影样式 无至2xl, 内部
animation 动态令牌 持续时间，缓动，关键帧
breakpoints 响应式 xs, sm, md, lg, xl, 2xl
z-index 层级系统 基础至通知

快速参考表

调色板生成

步骤 亮度 饱和度 用例
50 95%固定 30% 微妙背景
100 95%固定 38% 浅色背景
200 95%固定 46% 悬停状态
300 95%固定 54% 边框
400 95%固定 62% 禁用状态
500 原始 70% 基础/默认颜色
600 原始×0.8 78% 悬停（暗）
700 原始×0.6 86% 活动状态
800 原始×0.4 94% 文本
900 原始×0.2 100% 标题

排版规模（1.25倍比例）

大小 值 计算
xs 10px 16 ÷ 1.25²
sm 13px 16 ÷ 1.25¹
base 16px 基础
lg 20px 16 × 1.25¹
xl 25px 16 × 1.25²
2xl 31px 16 × 1.25³
3xl 39px 16 × 1.25⁴
4xl 49px 16 × 1.25⁵
5xl 61px 16 × 1.25⁶

WCAG对比度要求

级别 正常文本 大文本
AA 4.5:1 3:1
AAA 7:1 4.5:1

大文本：≥18pt常规或≥14pt粗体

风格预设

方面 现代 经典 有趣
字体Sans Inter Helvetica Poppins
字体Mono Fira Code Courier Source Code Pro
半径默认 8px 4px 16px
阴影 层叠，微妙 单层 柔和，明显

知识库

详细参考指南在 references/：

文件 内容
token-generation.md 颜色算法，HSV空间，WCAG对比度，排版规模
component-architecture.md 原子设计，命名约定，属性模式
responsive-calculations.md 断点，流体排版，网格系统
developer-handoff.md 导出格式，框架设置，Figma同步

验证清单

令牌生成

  • [ ] 提供品牌颜色为十六进制格式
  • [ ] 风格符合项目要求
  • [ ] 生成所有令牌类别
  • [ ] 语义颜色包含对比值

组件系统

  • [ ] 实现所有大小（sm, md, lg）
  • [ ] 实现所有变体（主色，辅助色，幽灵色）
  • [ ] 所有状态工作（悬停，活动，焦点，禁用）
  • [ ] 只使用设计令牌（无硬编码值）

可访问性

  • [ ] 颜色对比度符合WCAG AA
  • [ ] 焦点指示器可见
  • [ ] 触摸目标≥44×44px
  • [ ] 使用语义HTML元素

开发者交接

  • [ ] 令牌导出所需格式
  • [ ] 文档化框架集成
  • [ ] 设计工具同步
  • [ ] 组件文档完整