统一设计令牌系统

多端设计变量失同步的痛点

在跨平台项目开发中，设计师与开发者常常面临变量管理混乱的问题。直接在代码中硬编码色值、字号等样式属性，会导致主题切换（如暗色模式）成本高昂，且 iOS、Android 和 Web 端难以保持视觉一致性。当设计规范发生调整时，开发者需要在多个代码库中手动查找并替换，极易引入视觉回归缺陷。

结构化的 Token 工作流

该技能通过标准化的设计令牌（Design Tokens）工作流来解决上述问题。其核心步骤包括：

• 定义 Token 层级：将令牌分为 Tier1 原子层（如 color-blue-500）、Tier2 语义层（如 color-bg-primary）和 Tier3 组件层（如 button-bg-primary）。
• 规范命名：采用 {category}-{property}-{variant} 的结构化命名约定，确保团队理解一致。
• 多平台输出：将统一的令牌源文件转换为 CSS、SCSS、JSON、Android XML 以及 iOS Swift 等各端可用的格式。
• 暗色模式映射：建立明暗主题的语义映射关系，实现一键切换主题。

适用边界与落地建议

该技能主要提供体系化的分析与模板指导，输出结构化的报告和可执行步骤。它适用于需要建立或重构设计令牌系统的项目。需要注意的是，它不适用于超出设计变量管理范围的场景，实际落地时仍需结合具体的业务约束和现有的前端架构进行调整。