技能介绍

解决设计资产碎片化与一致性问题

在多团队协作和跨平台开发中，视觉样式往往容易陷入各自为战的局面。设计师在 Figma 里定的色值，到了前端代码里可能被随意硬编码为 #FFFFFF；间距和圆角规则缺乏统一约束，导致同一组件在不同页面表现出明显的视觉割裂感。这种设计资产的碎片化不仅增加了沟通成本，也让后续的重构和主题切换变得异常艰难。

核心能力与工作流

该技能通过结构化的规范模板，帮助团队从零搭建或梳理现有的设计系统。其核心工作流分为以下三个阶段：

Design Token 体系构建：从色彩、字体、间距、圆角和阴影五个维度提取设计原子。支持 层级命名法 与 语义命名法，确保基础色阶能平滑扩展为语义色彩，并原生支持深色模式与 CSS/SCSS/JSON 等多格式导出。
组件规范与文档沉淀：针对 Button、Input 等核心组件，明确定义默认、悬停、激活、禁用和加载等完整状态。配合质量检查清单，确保组件符合无障碍标准且具备完善的 TypeScript 类型定义，并自动生成包含代码片段的文档。
主题切换与工具链集成：通过 CSS 变量主题 或 React 主题上下文 实现动态换肤。同时推荐集成 Style Dictionary 进行 Token 管理，结合 Storybook 进行组件开发与视觉测试，形成工程化闭环。

适用边界与注意事项

需要特别注意的是，该技能包含大量的 Token 模板和组件示例，在加载时应根据实际项目需求选择性使用，避免一次性注入全部内容导致上下文冗余。此外，设计系统的建立是一个持续迭代的过程，该技能提供的是脚手架和规范标准，仍需团队投入精力进行实际业务场景的验证与调优，并不适用于缺乏长期维护计划的短期项目。