StyleSnap
← 返回博客
工作流2026-05-25· 6 分钟阅读

从网站到设计系统：导出设计令牌

设计令牌是设计系统的原子构建块——颜色、间距、排版等。从现有网站提取它们曾是手动、易错的过程。StyleSnap 将其自动化。

什么是设计令牌？

设计令牌是存储视觉设计属性的命名实体。它们与平台无关，可被 CSS、iOS、Android 和设计工具共同消费。

导出流程

使用 StyleSnap，提取设计令牌只需一步：

  1. **选择** 要提取的元素
  2. **点击** 侧面板中的「导出设计令牌」
  3. **下载** 包含所有颜色、间距和排版值的 JSON 文件

令牌结构

导出的 JSON 遵循 W3C 设计令牌社区组格式，兼容 Style Dictionary、Figma Variables 和 Tokens Studio 等工具。

集成到工作流

- **Figma**：通过 Tokens Studio 插件导入

  • **Storybook**：与设计令牌插件配合使用
  • **Tailwind**：将令牌映射到 `tailwind.config.js` 主题
  • **CSS 自定义属性**：直接使用 `var(--token-name)`

设计令牌弥合了设计与工程之间的鸿沟。StyleSnap 让提取步骤消失。