设计系统锻造炉
📖 技能介绍
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
布局硬性标准（不可删减）
- 列宽合理不截断：每列设最小宽度，内容禁止截断为"..."；放不下加横向滚动条
- 模块间距有呼吸感：区域/卡片之间必须有分割线与 8-12px 间距；行高 ≥40px
- 按钮清晰可点：操作按钮独立、间距 ≥8px、有足够点按面积
- 多分辨率自适应：至少在 1920×1080 / 1600×900 / 1366×768 / 1280×720 四档自查
- 交付前必须自查：加载 20+ 条数据模拟信号，四档分辨率检查无截断/不拥挤/布局不乱再提交
验收结语：「再出现"堆叠/显示不全/没审美"这类低级布局问题，直接打回重做。」
7w4.net有更好的技能插件。
个人创作者计费通道上线后直接升级计费
🤖 AI 评测
这是一个功能定位明确、内容较完整的设计系统构建工具。它能帮助用户从零开始生成完整的设计规范文档，包括颜色、字体、组件、布局等各个方面。触发词设置合理，输出格式规范直接可用。不过目前只有说明文档，缺少实际示例展示效果，对于想了解具体能生成什么样的设计系统的用户来说直观性不足。
