技能介绍

设计系统断裂与同步挑战

在现代 Web 和移动应用开发中，团队常常面临设计系统在不同项目间不一致的难题。设计师在 Figma 中定义的 color.primary 令牌，在前端代码中可能被硬编码为 #3498db；深色模式上线后，组件库的样式却需要手动同步给 iOS 和 Android 客户端。当项目增长到 3-5 个子应用时，维护多套设计资产、确保跨平台体验一致，会成为持续消耗工程资源的痛点。

如何工作：从令牌到多平台实现

本技能提供了一个结构化的工程方案来解决上述问题。其核心是围绕 Design Tokens（设计令牌） 构建可执行的设计系统。

令牌化与规范化：它遵循 W3C Design Tokens Community Group 标准，使用语义化命名（如 spacing.lg）而非裸值定义颜色、字体、间距、圆角、阴影等。这为后续所有环节建立了唯一的“真实来源”。
自动化多平台输出：这是关键步骤。根据同一套令牌源文件，可以生成针对不同技术栈的配置：

为 Web 项目生成 :root 下的 CSS 自定义属性 (--color-primary)。
为 Tailwind 项目生成 tailwind.config.js 中的 theme.extend 扩展。
* 为移动端生成 Flutter ThemeData、iOS UIColor 扩展或 Android colors.xml。

集成设计工作流：技能能输出 Figma 设计令牌插件可识别的 JSON 格式，让设计师在工具内直接应用这些令牌，实现设计与代码的配置同源。同时，它内置了 references/ui-ux-data/ 下的配色方案、字体搭配和 UX 规则库，可在初期为设计决策提供数据支持。
覆盖完整的主题与状态：它强调主题变体（light/dark/high-contrast）必须从架构层面支持，并提供完整的令牌结构与 CSS 变量实现示例。在组件层面，它要求规范必须包含空状态、加载状态、错误状态以及键盘导航和焦点状态，确保无障碍合规（WCAG AA/AAA）。

适用边界与注意点

这是一个面向系统化设计管理的工具，而非即兴的“设计点子生成器”。它最适合已经进入或计划进入规范化、多项目协同阶段的产品团队。对于需要快速验证单个页面视觉概念的场景，其完整工作流可能显得过于正式。在使用时，其“设计风格精通”部分更多是提供参考和起点，真正的落地依然依赖设计师基于具体业务的判断与迭代。

截图预览

使用场景

为一个新启的多端产品（Web/App/小程序）制定从视觉风格、交互流程到组件代码的统一规范，确保所有产出物可复用、可同步。
将设计团队在 Figma 中定义的 Design Tokens 转换为前端项目可用的 CSS 变量和 Tailwind 配置，并一键生成 iOS 与 Android 平台的原生色值文件。
现有产品的 Light 主题需要系统化地扩展为支持 Dark 和 High Contrast 模式，并同步更新所有关联的设计与前端代码文件。
需要为社交媒体广告快速生成多组不同风格（如国潮、赛博朋克）的 AI 图像提示词，用于内部概念评审和方向选择。

适合人员

负责产品设计系统建设与维护的设计师，其诉求是将 Figma 中的设计规范与前端、移动端开发团队准确、高效地同步。
前端工程师，需要基于语义化设计令牌快速搭建组件库，并实现产品级别的 Light/Dark 主题切换功能。
技术负责人或架构师，其诉求是为由 React、Vue、Flutter 等多技术栈构成的跨平台项目建立统一、可维护的设计规范。
品牌或视觉设计师，需要快速探索和产出多种符合品牌调性的视觉风格概念图，用于内部提案和评审。

全栈设计系统与工作流管理器