figma-variables-tokens-generator
AI驱动的Figma设计变量与令牌自动化生成工具
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：figma-variables-tokens-generator。 它的用途是：AI驱动的Figma设计变量与令牌自动化生成工具 完整的 Skill 内容见：https://321skill.com/skills/figma-variables-tokens-generator/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我在Figma中创建一套设计令牌系统。” AI会通过一系列问题引导你定义品牌色、间距、字体等基础规范，然后自动生成一个包含所有层级令牌的ZIP文件。你只需将这个文件拖入指定的Figma插件，即可在变量面板中看到按正确依赖关系排列的所有颜色、间距等变量集合。
介绍
这个项目旨在解决设计师和前端开发者在Figma中手动创建和管理复杂设计令牌（Design Tokens）时效率低下、易出错且难以保持一致性这一核心痛点。它通过一个智能的AI技能和一个专用的Figma插件协同工作，将设计系统规范自动化地转化为Figma原生变量。
使用时，用户首先通过AI技能（一个结构化的提示词）进行交互。AI会像专家顾问一样，通过一系列下拉菜单和问题，引导用户定义品牌色彩、间距、排版等设计体系，并理解所需的架构层级（T1-T4）。随后，AI会调用内置的Python生成器脚本，自动创建符合W3C标准的JSON令牌文件，并按依赖关系打包成ZIP。最后，用户只需将生成的ZIP文件拖拽到配套的Figma插件中，即可一键将所有令牌集合按正确顺序导入Figma变量面板，并自动应用严格的变量作用域规则。
它非常适合UI/UX设计师、设计系统工程师以及需要紧密协作的前端开发团队。尤其适合那些正在从零开始构建设计系统，或希望将现有设计规范系统化、代码化并集成到Figma中的团队。
与同类手动配置令牌或使用通用JSON导入的工具相比，本工具的核心优势在于其“AI引导+自动化生成+精准导入”的全链路闭环。它不仅仅是生成JSON文件，更深度集成了Figma变量系统的特性（如作用域、隐藏发布等），并通过AI确保架构的合理性与合规性，避免了手动操作可能导致的依赖顺序错误或作用域设置不当问题。
核心特点
本工具通过AI引导的交互式问卷，确保生成的令牌架构符合最佳实践，并深度集成Figma变量系统的特性（如严格的变量作用域和隐藏发布逻辑），实现从设计规范到Figma原生变量的“一键式”精准、有序导入，避免了手动处理依赖和格式的麻烦。
注意事项
该工具主要面向在Figma中构建全新或大规模设计令牌系统的场景，对于仅需微调现有少量变量或使用非Figma设计软件的用户可能不适用。
常见问题
这个工具需要会编程吗？
不需要。整个过程由AI引导，用户只需回答设计相关的问题，生成和导入都是自动化的。
生成的令牌能用于前端代码吗？
可以。它生成的是符合W3C设计令牌社区组标准的JSON文件，可以被Style Dictionary等工具消费，生成多平台代码。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/figma-variables-tokens-generator/raw/index.md 读取 figma-variables-tokens-generator 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/figma-variables-tokens-generator/raw/index.md（查看排版版本）