design-system-generator

设计系统生成器

生成一套由设计令牌驱动的设计系统：令牌、基础组件、构建配置和文档。

目录

• references/design-tokens.md — 颜色、字体、间距、阴影和圆角令牌文件，以及 CSS 变量设置。
• references/components.md — Button、Input、Card 的实现和组件汇总索引。
• references/config-and-utilities.md — Tailwind 配置和 cn 类名合并辅助函数。

工作流

1. 定义设计令牌。按照 references/design-tokens.md 创建包含颜色、字体、间距和效果（阴影、圆角）的 tokens/。将参考值替换为项目的品牌配色。
2. 添加 CSS 变量。使用 references/design-tokens.md 中的变量代码块，在 globals.css 中设置 :root 和 .dark 自定义属性。
3. 配置构建。按照 references/config-and-utilities.md 添加 cn 辅助函数，并基于令牌文件扩展 Tailwind 主题。
4. 构建基础组件。根据 references/components.md 实现 Button、Input 和 Card，然后根据产品需求扩展组件集。
5. 导出汇总索引。从 components/ui/index.ts 重新导出所有已发布的组件（参见 references/components.md）。
6. 记录用法和变体。对于每个组件，注明其变体、尺寸、属性和无障碍行为，以便使用者保持一致的应用方式。