用途:生成令牌驱动的设计系统,包括设计令牌、基础组件、构建配置与文档。适用于构建设计系统、创建组件库或建立设计令牌的场景。
主要能力与内容: references/design-tokens.md 提供颜色、字体排版、间距、阴影和圆角令牌文件,以及 CSS 变量设置。 references/components.md 提供 Button、Input、Card 实现以及组件 barrel 索引。 references/config-and-utilities.md 提供 Tailwind 配置与 cn 类名合并辅助函数。
工作流程:
- 定义设计令牌。按 references/design-tokens.md 创建 tokens/,包含颜色、排版、间距和效果(阴影、圆角);用项目品牌色板替换参考值。
- 添加 CSS 变量。在 globals.css 中使用该参考中的变量块设置 :root 与 .dark 自定义属性。
- 接入构建。按 references/config-and-utilities.md 添加 cn 辅助函数,并从令牌文件扩展 Tailwind 主题。
- 构建基础组件。按 references/components.md 实现 Button、Input 和 Card,再按产品需要扩展该集合。
- 导出 barrel。从 components/ui/index.ts 重新导出所有交付组件(见 references/components.md)。
- 记录用法与变体。为每个组件注明其变体、尺寸、props 与无障碍行为,便于使用者一致地应用。
限制:资料未提供具体安装命令、依赖版本、收费或价格信息;也未说明生成组件的实际运行效果与支持平台,这些暂未提供。