核心功能
该技能为高级 UI 设计师提供完整的设计系统构建能力，主要涵盖四大工作流：
1. 设计令牌生成（Design Tokens）：基于品牌主色自动生成全量设计系统，包括色彩阶梯（50-900）、字体层级、8pt 网格间距、圆角、阴影、动画等；支持输出 JSON、CSS、SCSS 格式，并内置 WCAG AA 对比度验证。
2. 组件系统架构：采用 Atomic Design 方法论（Atoms → Molecules → Organisms → Templates），提供 Button、Input、Card、Modal 等典型组件的令牌映射表、变体规范（size/color/state）及 Props 接口定义模板。
3. 响应式设计计算：预置 xs-2xl 断点体系，提供 clamp() 流体字体计算公式，以及跨断点的间距适配表，简化从移动端到桌面的适配工作。
4. 开发交付（Developer Handoff）：一键导出多格式令牌文件，附带 React/Tailwind/styled-components 集成示例，支持 Tokens Studio for Figma 双向同步，显著降低设计与开发的沟通成本。
显著优点
- 算法化生成：色彩阶梯基于 HSV 空间智能计算，非简单透明度叠加
- 工程化输出：直接生成代码可用格式，减少手工转录错误
- 多框架适配：原生 CSS、SCSS、JS/TS、Tailwind 全覆盖
- 无障碍内置：自动生成对比色、WCAG 合规检查清单
潜在局限
- 依赖 Python 脚本执行，需本地配置运行环境
- 风格预设仅三种（modern/classic/playful），高度定制化需手动调整
- 组件文档为模板级，需结合具体设计工具（Figma）补充视觉资产
- 未提及版本控制机制，多主题切换需额外架构设计
适合人群
- Senior UI Designer 构建/维护中大型企业级设计系统
- 设计团队负责人建立跨团队协作规范
- 需要快速启动新项目设计基础设施的独立设计师
常规风险
- 令牌膨胀：过度细分的令牌可能导致维护负担，建议遵循"实际需要再添加"原则
- 色彩偏差：算法生成色板可能与品牌指南存在视觉差异，关键色值需人工校准
- 技术债务：若开发团队未及时同步令牌更新，易产生设计与实现不一致