build-design-system

build-design-system 技能是一种专门的代理工作流程，旨在帮助开发人员和设计师使用 Brent Jackson 的 Design Graph 方法论从零开始构建专业的组件库。通过优先考虑基于约束的系统而非随意的数值，此工具可确保您的 UI 在不同项目中保持可扩展性、数学上的连贯性以及视觉上的一致性。

• 实现 Design Graph 架构：将比例 (Scales)、组件 (Components)、变体 (Variants) 和主题 (Themes) 连接成一个互连的节点系统。
• 利用 2 的幂次与数学比例（例如 1.25 倍率）自动化排版比例的生成，确保一致的视觉节奏。
• 为语义化设计令牌提供结构，包括调色盘、间距数组、字重和边框半径。
• 强制执行严格的样式规则：组件必须引用主题令牌而非硬编码值，从而防止技术债和样式不一致。
• 生成全面的设计系统规范，包括浅色和深色模式的主题切换逻辑。
• 提供实现的实用模板，包括基于 TypeScript 的主题配置。

当您在 UI 开发的初期阶段或建立组件库时调用此技能，代理程序将扮演架构指南的角色。它协助首先定义核心约束原始码，然后引导将这些原始码转化为可重用的 UI 组件和灵活的主题变体。当您寻求以系统化方法取代混乱的 CSS 时，此技能非常有效。输入通常包括项目需求、设计目标或基础样式偏好。输出包括结构化的设计规范、准备好用于 TypeScript 的主题对象，以及厘清比例与组件变体之间关系的文档。请记得遵循 Design Graph 的规则：保持变体的可加性，将每个属性的比例值限制在 6-7 个项目，并始终避免使用魔术数字，以维护系统的长期可维护性。