SuperAPI AI 工具集

design-tokens-system

设计与创作

查看项目

更新于 10-16 08:06

技能介绍

用途:为设计系统建立一致、可维护的设计令牌体系,把颜色、间距、字体等原子设计单位结构化,并在多平台间统一分发。

主要能力:采用四层令牌结构——基础令牌(Primitives)、语义令牌(Context-aware)、组件令牌(Component-specific)再到应用层。支持 W3C Design Tokens 格式、Figma Variables,以及 TypeScript、CSS 变量、Tailwind 配置、JSON 等导出格式。提供从 Figma Variables 导出、转换到多目标产物的流水线,并可借助 GitHub Actions 等 CI/CD 定时同步令牌、自动提交。支持 Web(TypeScript/CSS/Tailwind)、移动端(Swift)及 Storybook 文档的分发,并配有版本管理与变更日志策略:非破坏性值变更走补丁版本,令牌名变更走主版本并附迁移指南。

使用方式:按四层结构定义令牌,设计侧在 Figma 中维护 Variables,通过导出脚本读取并转为 tokens.json,再经转换生成各平台产物,最后分发到 npm 包、Git 仓库或 CI/CD。资料中给出相应命令示例,如 npm run tokens:export、npm run tokens:generate,以及定时同步的 workflow 配置。

适用场景:需要跨 Web、移动端与设计工具保持视觉一致的设计系统团队。

限制:资料未提供具体安装命令、授权或收费信息;示例中的令牌命名、颜色值与脚本仅为演示,实际使用需按项目调整。