UI 设计系统生成技能：从品牌色一键产出设计令牌

技能简介

UI 设计系统生成技能（ui-design-system，作者 alirezarezvani）解决的是一类很实际的团队痛点：颜色、间距、字体等设计决策长期靠手工维护，时间一长就散落成各处不一致的数值。该技能能够从一个品牌主色出发，自动生成一整套结构化的设计令牌，涵盖颜色、字体、间距、尺寸、边框、阴影、动画、断点与 z-index 等类别，并支持按现代、经典、活泼等风格预设产出。对于想要快速搭建设计系统雏形、又不想从零整理令牌表的团队，它提供了一条高效的起步路径。

核心能力

1. 全类别令牌生成：一次性产出颜色、字体、间距、尺寸、边框、阴影、动画、断点与 z-index 等令牌。
2. 风格预设：支持现代、经典、活泼等风格，以适配不同产品气质。
3. 多格式导出：通过内置 Python 脚本把令牌导出为 JSON、CSS 或 SCSS 格式。
4. 组件体系文档：附带组件系统架构、无障碍、响应式设计与开发者交付流程的说明。
5. 令牌概览：在正式导出前，先给出令牌类别与数量的摘要，方便快速评审。

安装配置

1. 准备 Node.js 环境以运行 skillstore 命令行，并确保可执行随技能提供的 Python 脚本。
2. 安装命令：npx skillstore add alirezarezvani/ui-design-system。
3. 兼容 Claude、Codex、Claude Code 等 AI 编程工具，安装后即可调用。
4. 采用 MIT 许可；输入通过命令行参数传入，格式错误的颜色可能引发脚本报错，需注意校验。

使用步骤

1. 确定品牌色：选定一个六位十六进制的品牌主色作为生成起点。
2. 选择风格预设：根据产品气质选择现代、经典或活泼等风格。
3. 生成令牌：让技能从品牌色产出整套令牌，并先查看类别与数量摘要。
4. 评审覆盖度：在设计落地前，检查令牌类别是否覆盖完整。
5. 导出格式：按项目需要导出为 JSON、CSS 或 SCSS，并说明各类令牌的使用位置。
6. 组件落地：依据令牌为按钮、卡片、表单与导航等组件编写使用规范，并补充无障碍说明。

适用场景

• 新建设计系统：从品牌色出发，快速生成颜色、间距、字体、阴影与断点的首套令牌。
• 准备开发交付：把令牌导出为 Web 友好格式，并说明组件应如何使用共享数值。
• 统一产品 UI：为需要跨多个产品区共享设计决策的团队，建立一致的尺度体系。
• 审计现有体系：对照该技能的建议，检查现有颜色、间距、字体、断点与交付方式中的不一致之处。

适用人群

前端工程师、UI/UX 设计师、设计系统与设计工程团队，以及使用 AI 编程工具辅助搭建产品视觉规范的开发者。

工作原理

技能基于预设的风格逻辑从品牌色推导出一整套设计令牌，并不替代完整的品牌设计评审。输入以命令行参数形式提供，因此需要对颜色格式做基本校验。它不会连接 Figma、设计仓库或外部令牌注册表，生成的令牌仍需设计评审与真实产品界面验证，尤其是无障碍对比度与组件状态。建议每次只为一个产品区使用一种风格预设，避免混用导致视觉规则冲突。

官方链接

• 技能主页：https://skillstore.io/skills/alirezarezvani-ui-design-system
• 开源仓库：https://github.com/alirezarezvani/claude-skills/tree/main/product-team/ui-design-system