design-system-implementation

此技能作为优先考量设计系统的实现助理，确保所有前端代码严格遵循既定的设计约束，而非随意进行样式设定。它设计为在建立项目设计系统（通常定义于 design/design-system.json）后的第二阶段运行，缩短设计代码（tokens）与产品级实现之间的差距。代理程序会解析包括颜色、间距比例、排版与组件配方在内的设计系统元数据，以指导 React 与 Tailwind CSS 等框架的代码生成。它透过验证每个新组件、页面或流程是否符合授权的模式库来防止架构偏离，确保整个储存库中拥有可访问性标准与一致的用户体验。

• 自动抓取 design/design-system.json 与选用的 design/design.json 作为样式真理来源。

• 将复杂的 UI 需求映射至现有的组件变体，以减少重复代码。

• 强制遵守排版层级、颜色状态（主要、成功、错误等）以及布局间距网格。

• 提供关于生成的代码如何透过代码利用来遵循系统约束的明确反馈。

• 若需求需要新模式，将建议受控的设计系统扩充，确保 JSON 配置完整性。

• 验证组件可访问性，包括 ARIA 标签、键盘导航与语义化 HTML 结构。

• 最适合维护长期前端扩展性且视觉一致性至关重要的团队。

• 请在 design-system-from-reference 技能成功引导配置文件后使用。

• 要求开发者提供新功能的需求，包括框架选择或数据层交互等限制。

• 若缺少设计系统，技能将提示用户优先初始化，而非随意猜测样式。

• 非常适合在不发明任意工具类的情况下，将现有旧版 UI 重构为连贯且符合设计系统的结构。

• 透过在实现期间识别差距时建议设计系统的 JSON 修补程序，支持系统化的 UI 扩展。