UI 设计系统

生成设计令牌，创建色彩调色板，计算排版比例，构建组件系统，以及准备开发者交付文档。

目录

• 触发词
• 工作流程
  • 工作流程 1：生成设计令牌
  • 工作流程 2：创建组件系统
  • 工作流程 3：响应式设计
  • 工作流程 4：开发者交付
• 工具参考
• 速查表
• 知识库

触发词

在您需要时使用此技能：

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

工作流程

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

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

步骤:

1. 识别品牌颜色和风格

   • 品牌主色（十六进制格式）
   • 风格偏好:现代|经典|活泼

2. 使用脚本生成令牌

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

3. 审查生成的类别

   • 颜色：主色、辅色、中性色、语义色、表面色
   • 排版：字体家族、字体大小、字体粗细、行高
   • 间距：基于8pt网格的刻度（0-64）
   • 边框：圆角、宽度
   • 阴影：无至2xl
   • 动画：持续时间、缓动效果
   • 断点：xs至2xl

4. 以目标格式导出

   # CSS custom properties
   python scripts/design_token_generator.py "#0066CC" modern css > design-tokens.css
   
   # SCSS variables
   python scripts/design_token_generator.py "#0066CC" modern scss > _design-tokens.scss
   
   # JSON for Figma/tooling
   python scripts/design_token_generator.py "#0066CC" modern json > design-tokens.json
   

5. 验证无障碍性

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

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

情景：您需要使用设计令牌来构建组件库。

步骤：

1. 定义组件层级

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

2. 将令牌映射到组件

   组件	已使用的代币
   按钮	颜色，尺寸，边框，阴影，排版
   输入框	颜色，尺寸，边框，间距
   卡片	颜色，边框，阴影，间距
   模态框	颜色，阴影，间距，z轴层级，动画

3. 定义变体模式

   尺寸变体：

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

   颜色变体：

   primary: background primary-500, text white
   secondary: background neutral-100, text neutral-900
   ghost: background transparent, text neutral-700
   

4. 记录组件API

   • 包含类型的Props接口
   • 变体选项
   • 状态处理（悬停，激活，聚焦，禁用）
   • 无障碍访问要求

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

工作流程3：响应式设计

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

步骤：

1. 定义断点

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

2. 计算流体排版

   公式：clamp(最小值, 理想值, 最大值)

   /* 16px to 24px between 320px and 1200px viewport */
   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. 以所需格式导出令牌

   # For CSS projects
   python scripts/design_token_generator.py "#0066CC" modern css
   
   # For SCSS projects
   python scripts/design_token_generator.py "#0066CC" modern scss
   
   # For JavaScript/TypeScript
   python scripts/design_token_generator.py "#0066CC" modern json
   

2. 准备框架集成

   React + CSS 变量：

   import './design-tokens.css';
   
   <button className="btn btn-primary">Click</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

根据品牌色生成完整的设计令牌系统。

示例：

# Generate JSON tokens (default)
python scripts/design_token_generator.py "#0066CC"

# Classic style with CSS output
python scripts/design_token_generator.py "#8B4513" classic css

# Playful style summary view
python scripts/design_token_generator.py "#FF6B6B" playful summary

输出类别：

快速参考表

色彩比例生成

字体比例尺（1.25倍比率）

WCAG对比度要求

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

样式预设

知识库

包含详细参考指南参考资料/:

验证清单

令牌生成

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

组件系统

• 所有尺寸已实现（小，中，大）
• 所有变体已实现（主要，次要，幽灵）
• 所有交互状态均正常运作（悬停、激活、聚焦、禁用）
• 仅使用设计令牌（无硬编码数值）

无障碍性

• 色彩对比度符合WCAG AA标准
• 聚焦指示器清晰可见
• 触控目标尺寸≥44×44像素
• 采用语义化HTML元素

开发交付

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