📖 技能介绍

name: design-system-forge slug: design-system-forge version: 1.0.0 displayName: "设计系统锻造炉" description: "从零构建完整的设计系统：Design Token（颜色/字体/间距/圆角/阴影）、组件库规范（按钮/表单/卡片/导航/表格/模态框）、布局栅格系统、响应式断点、暗色模式、设计审查清单。输出可直接用于开发的规范化设计资产。" tags: ["design-system", "ui-design", "design-tokens", "component-library", "css", "frontend"] category: "design" author: leilei homepage: ""

设计系统锻造炉

触发词

设计系统、设计规范、UI规范、组件库、Design Token、设计token、颜色体系、组件规范、布局系统、响应式设计、暗色模式、设计审查、样式指南

能力概述

不只是生成一份设计指南文档，而是锻造一套完整可用的设计系统资产，包含 token、组件、布局、交互规范的完整定义。

可交付物

Design Token 完整定义
颜色 token（主色/中性色/语义色/渐变）— 含色值、用途、无障碍对比度
字体 token（字号/字重/行高/字间距）— 含排版层级
间距 token（基础单位/衍生间距）— 8px 栅格体系
圆角 token（从小到大四级）
阴影 token（ elevation 分层）
组件规范库
基础组件：Button / Input / Select / Checkbox / Radio / Switch / Toggle
数据展示：Table / Card / List / Badge / Avatar / Tooltip
导航：Nav / Breadcrumb / Tabs / Pagination / Sidebar
反馈：Modal / Toast / Alert / Progress / Skeleton
布局：Container / Grid / Stack / Divider
布局系统
栅格定义（12列/24列可选）
断点体系（手机/平板/桌面/大屏）
容器规范（max-width / padding / 居中方式）
交互规范
动效时长/缓动曲线
Hover/Focus/Active/Disabled 四态
加载状态/空状态/错误状态
暗色模式映射
每个 token 的亮/暗色值对应
自动转换规则
设计审查清单
新组件/页面是否符合设计系统的逐项检查

使用流程

模式A：从零创建

输入：品牌色/行业/目标平台/技术栈
输出：完整设计系统文档（Token + 组件 + 布局 + 交互）

收集品牌要素（Logo色/辅助色/字体偏好）
推导完整 Token 体系
基于Token定义所有组件样式
生成布局和响应式规则
输出审查清单

模式B：审查现有设计

输入：设计稿截图或代码
输出：符合性报告 + 改进建议

对照设计系统规范逐项检查
列出不符合项（具体到属性级别）
给出修复建议和优先级

模式C：扩展现有系统

输入：现有设计系统 + 新需求
输出：增量更新（新token/新组件/新规则）

Design Token 输出格式

每个 Token 以标准 JSON 格式输出，可直接用于 CSS 变量 / Tailwind Config / Style Dictionary：

{
  "color": {
    "primary": { "value": "#3B82F6", "comment": "主色调-蓝" },
    "primary-hover": { "value": "#2563EB", "comment": "主色悬停" },
    "success": { "value": "#10B981", "comment": "成功-绿" },
    "warning": { "value": "#F59E0B", "comment": "警告-橙" },
    "error": { "value": "#EF4444", "comment": "错误-红" }
  },
  "spacing": {
    "base": { "value": "4px", "comment": "基础单位" },
    "xs": { "value": "4px", "comment": "超小" },
    "sm": { "value": "8px", "comment": "小" },
    "md": { "value": "16px", "comment": "中" },
    "lg": { "value": "24px", "comment": "大" },
    "xl": { "value": "32px", "comment": "超大" }
  }
}

组件规范模板

每个组件输出包含：

### Button 按钮
- **Variants**: primary / secondary / ghost / danger / link
- **Sizes**: sm / md / lg
- **States**: default / hover / focus / active / disabled / loading
- **With Icon**: left-icon / right-icon / icon-only
- **Spacing**: padding horizontal 16-24px, vertical 8-12px
- **Border Radius**: radius-md (from token)
- **Accessibility**: minimum touch target 44x44px, contrast ratio ≥ 4.5:1