style-dictionary

Style Dictionary 是 Amazon 开源的跨平台设计令牌管理框架，支持将设计系统中的颜色、间距、字体等原子级样式定义编译为多种目标格式（CSS、SCSS、iOS、Android、JSON 等）。适用于中大型团队统一设计语言、实现设计与开发协同、保障多端样式一致性，显著提升 UI 工程化水平和主题切换能力。

# Style Dictionary — 跨平台设计令牌管理框架 ## 框架简介与定位 Style Dictionary 是由 Amazon 开源的**设计令牌（Design Tokens）管理与分发框架**，核心目标是将抽象的设计决策（如 `primary-color`、`spacing-md`）转化为可被前端、移动端、设计工具消费的多种工程化输出格式。它不绑定具体 UI 框架，而是作为设计系统底层的“翻译引擎”，实现设计规范到代码资产的可靠、可扩展、可复用的自动化映射。 ## 核心特性 - **多平台输出支持**：原生支持生成 CSS 变量、SCSS/Less 变量、iOS `.strings`/`.xcassets`、Android `dimens.xml`/`colors.xml`、React/Vue/JSX 常量、JSON/YAML 配置等数十种格式。 - **层级化配置体系**：通过 `properties`（原子值）、`transforms`（值转换逻辑）、`formats`（输出模板）三级抽象，支持主题、平台、环境等多维组合编译。 - **可扩展性设计**：支持自定义 Transform（如单位转换、颜色空间处理）、Format（自定义模板语法）、Action（构建后钩子），满足企业级定制需求。 - **零运行时依赖**：纯 Node.js 构建时工具，输出静态资源，不侵入应用运行时，对性能与兼容性无影响。 - **设计系统协作友好**：提供 `style-dictionary build --watch` 实时监听、CLI 验证与 lint 功能，并支持与 Figma 插件（如 Style Dictionary Sync）联动，打通设计→代码闭环。 ## 适用场景 - 多端（Web/iOS/Android）统一设计系统落地； - 主题化（Light/Dark/品牌变体）快速切换与维护； - 设计规范文档（如 Storybook）与代码资产自动同步； - 中大型团队设计与前端协作流程标准化； - 替代手写 CSS 变量或硬编码样式常量的低效方式。 ## 快速入门步骤 1. **安装**：`npm install style-dictionary --save-dev`（或全局安装 `npm install -g style-dictionary`） 2. **初始化配置**：创建 `style-dictionary.config.js`，定义源文件路径、平台输出格式及 transform 规则； 3. **定义设计令牌**：在 `tokens/color.json` 中声明 `{ "brand": { "primary": { "value": "#0073e6" } } }`； 4. **运行构建**：`style-dictionary build`，自动生成 `build/css/variables.css`、`build/android/colors.xml` 等目标文件； 5. **集成消费**：直接导入生成的 CSS 变量文件，或在 Android/iOS 工程中引用对应资源目录。 ## 生态与社区 Style Dictionary 由 Amazon 团队持续维护，GitHub 仓库（https://github.com/amzn/style-dictionary）拥有超 6.5k Stars，活跃 issue 与 PR 社区。官方提供完整文档、大量示例（包括主题、响应式、多品牌等模式），并被 Airbnb、Salesforce、Shopify 等公司用于生产级设计系统。社区贡献了插件（如 Webpack Loader、VS Code Token Highlighter）及配套工具链（如 token-validator、sd-cli-utils），生态成熟稳定。