UI Design System Generator
从零生成完整的前端设计系统：色彩体系、字体层级、组件库和主题切换，支持 Tailwind CSS。
【AI技能】UI Design System Generator：功能详解与安装指南
技能简介
你是否曾经在项目起步时，为了一致的设计规范而反复调整颜色、字号和间距？是否希望前端开发从第一天起就拥有一套“活”的设计语言，而不是临阵拼凑？UI Design System Generator 正是为了解决这些痛点而生。它是一款面向 AI 编程助手的技能（Skill），能够根据你的简单输入（品牌色、设计风格、技术栈偏好），自动生成一整套可落地的前端设计系统——包括语义化的色彩体系、严谨的字体层级、可复用的组件库骨架，以及开箱即用的暗色/亮色主题切换，并深度集成 Tailwind CSS 生态。
这个技能更像是一位“设计系统架构师”常驻在你的开发环境里。你只需要告诉它“我们是一个面向年轻用户的 SaaS 工具，品牌主色是蓝色调，字体用 Inter”，它就会输出完整的 Tailwind 配置（tailwind.config.js）以及对应的 CSS 变量、Typography 预设、组件样式类名，甚至生成一段 Storybook 或 React 示例代码。从此，设计师与开发者的沟通不再依赖截图和“你觉得这个蓝色再深一点行不行”——AI 帮你把设计意图变成可运行的代码。
为什么值得关注？因为设计系统已经从“大厂专用”变成了每一个前端项目的必备基础设施。但手动搭建成本高、迭代慢，而 UI Design System Generator 将这个过程从数小时的人工设计压缩到几分钟的 AI 对话，并且保证了一致性、可维护性和无障碍考量。无论你是独立开发者、初创团队还是大厂基建，这个技能都能成为你的“设计提效杠杆”。
核心优势
1. 从一句话到完整设计系统，零手工劳动
传统做法：设计师出 Figma 设计规范 → 前端手动转换成 CSS/ Tailwind 配置 → 反复校对色值、字号、间距 → 浪费大量时间在“翻译”上。UI Design System Generator 直接跳过了“翻译”环节：你只需要在 AI 对话框中描述你的品牌调性、色系偏好、目标用户群，技能就会一次性输出色彩 token、字体比例、间距系统、阴影层级等完整配置，并附带 Tailwind 的 custom theme 配置。整个过程无需打开任何设计工具。
2. 深度 Tailwind CSS 集成，生产级可用
生成的代码不是“伪代码”或“参考思路”，而是可以直接粘贴到 Tailwind 项目中的 tailwind.config.js 和 globals.css。所有颜色、字体、间距、边框半径都映射为 Tailwind 的语义化 className（如 bg-primary-500、text-body、shadow-level-2），并保持与 Tailwind 官方扩展方式的兼容。同时还会生成 Sass 变量或 CSS 自定义属性，方便你按需微调。
3. 内置主题切换（亮色/暗色/更多）
许多设计系统只考虑亮色模式，而暗色模式往往后期“打补丁”导致 token 混乱。这个技能从一开始就输出两套色彩 token，通过 CSS 变量 + prefers-color-scheme 或 class 切换实现暗色主题。并且可以在第一次对话时就要求“同时生成对比色模式”或“给一个中性灰度备色”，让主题扩展成为默认行为，而不是事后补救。
4. 组件级骨架生成，不仅仅是 Token
除了设计 token，技能还能生成至少 6 个基础 UI 组件的样式骨架：Button（含变体与状态）、Input（含聚焦/错误/禁用）、Card（含布局）、Badge、Alert、Modal。每个组件输出 Tailwind 类名组合 + React/Vue 的简单模板代码，并遵循你前一步生成的色彩和字体 token。这意味着你得到的不只是一套配置，而是可以直接运行的最小组件库。
5. 无障碍与可访问性默认考量
生成的色彩组合会自动检查 AA 级对比度（必要时给出警告），字体层级会考虑可读性和屏幕适配，Focus Ring 的样式也会默认生成。技能会在输出时附带一段无障碍注释：“请确保实际使用时测试对比度”，但核心设计已经内置了 WCAG 2.1 的基本要求，帮助你从一开始就做出更包容的产品。
主要功能
| 功能 | 说明 |
|---|---|
| 智能色彩体系生成 | 基于品牌色自动生成 50-900 阶语义色板，包括 primary、secondary、neutral、success、warning、error 等常用语义，并输出 HSL 变量。 |
| 字体层级与排版系统 | 根据品牌字体、设备类型（web/mobile）和设计基调，生成字体大小、行高、字重、字距的完整 scale，并输出 Tailwind 的 fontFamily 与 fontSize 扩展。 |
| 主题切换（亮/暗/自定义） | 同时生成亮色和暗色两套色彩 token，输出为 CSS 变量，并提供基于 class 或 media 的切换方案，支持扩展更多主题。 |
| 基础组件样式骨架 | 自动生成 Button（primary/secondary/outline/ghost、大小变体、disabled、loading）、Input、Card、Badge、Alert、Modal 的 Tailwind 类名+结构，可导出为 React 或 Vue 模板。 |
| Tailwind 配置导出 | 输出可直接粘贴的 tailwind.config.js（含自定义 theme）、globals.css 及 theme.js（可选），并兼容插件（如 typography、forms）。 |
| 设计规范文档（Markdown） | 生成一份人类可读的设计系统文档，包含色板说明、字体层级图、间距/圆角/阴影规范，适合放入项目 Wiki 或设计系统官网。 |
如何获取与安装
UI Design System Generator 是一款通用型 AI 技能，你可以根据自己使用的 AI 编程助手（Claude Code、Cursor、GitHub Copilot Chat 等）选择对应的安装方式。建议使用Claude Code 获得最佳体验，因为技能输出正是为 Claude 的上下文窗口优化过的。
方式一：在 Claude Code 中安装（推荐）
- 打开 Claude Code 终端，输入以下命令直接安装技能包：
claude /plugin install https://raw.githubusercontent.com/topics/design-systems/main/ui-design-system-generator.json
（如果上述 URL 无法访问，请使用绕墙镜像或自行托管）
- 安装成功后，你可以在对话中直接使用
!design-system命令来触发技能。例如：
!design-system 品牌色：#3B82F6，字体：Inter，项目类型：SaaS 仪表盘
- 技能会自动加载预设的 Prompt，并生成上面表格中的所有输出。如果你想调整细节，直接在对话中追加要求即可。
方式二：作为 Cursor 规则（.cursorrules）使用
如果你使用 Cursor IDE，可以将技能规则添加到项目根目录的 .cursorrules 文件中：
- 下载技能规则文件：
curl -O https://raw.githubusercontent.com/topics/design-systems/main/.cursorrules-ui-design-system
- 将文件内容合并到你的
.cursorrules文件中，或者直接命名为.cursorrules覆盖。 - 打开 Cursor，在聊天界面输入 “生成设计系统” 或 “请按照 UI Design System 规则，为我的项目创建设计系统 token”，AI 就会按照规则输出。
方式三：通用 Prompt 模板（适用于任何 AI 助手）
如果你使用 GitHub Copilot Chat 或 OpenAI Playground 等工具，可以通过添加下面的系统提示词来获得类似效果（将该 Prompt 作为前置指令）：
你是一个 UI 设计系统生成专家。用户会提供品牌色、字体、项目风格等描述。请按以下步骤输出：
1. 语义色板（50-900阶，含语义命名）
2. 字体层级（h1-h6、body、caption、small，含行高与字重）
3. 间距/圆角/阴影系统（4阶）
4. 暗色主题 token
5. Button 组件样式变体
6. 完整的 tailwind.config.js 和 globals.css
7. 可选的 React 示例代码
将这段 Prompt 保存为系统提示词或会话开场白即可。
注意：以上安装方式中的 URL 为示例指引，实际使用时建议从 GitHub Topics: Design Systems 社区获取最新的、经过验证的技能包，或者直接 fork 相关仓库来自用。
适用场景
- 新项目起步：当你准备用 Tailwind + React/Vue 搭建新应用时，先跑一次这个技能，即可获得一致的设计基础，避免后期碎片化。
- 设计系统迁移/统一：团队有多个产品线，设计规范不统一？用技能生成一套统一的设计 token，并输出迁移指南。
- 快速原型 / Hackathon：在 48 小时内需要构建一个美观可用的产品，AI 帮你瞬间构建设计语言，省去设计师沟通成本。
- 暗色模式改造：已有亮色主题但想快速添加暗色模式，技能可以直接对照现有 token 生成暗色变体，并给出 CSS 变量映射方案。
- 设计文档自动化：需要给团队写一份设计规范文档？技能输出的 Markdown 文档可直接放入 Storybook 或内部知识库，节省文档时间。
小贴士
- 提供明确的设计约束：在触发技能前，尽可能给出具体的品牌色 HEX 值、字体名称、设计风格关键词（如“极简”“圆弧形”“粗边框”）。输入越精确，输出越接近你的期望，减少多轮修改。
- 生成后手动检查对比度：虽然技能内置了基本对比度检查，但建议在真实 UI 中使用专业工具（如 Contrast Checker）验证，尤其是深色背景上的文字。AI 不保证 100% 无障碍合规。
- 渐进式使用，不必一次全生成：如果你只需要色彩系统，可以在命令中指定 “只生成色彩 token 和 Tailwind 配置，不需要组件”。技能支持按需输出，避免信息过载。
免责声明：技能效果可能因 AI 模型版本、插件配置及输入质量而有所差异。生成的设计系统代码仅供参考，实际生产环境请结合设计评审与测试。具体安装方式请以各工具官方文档为准。