关于 figma-variables-tokens-generator
为设计师和前端工程师提供 Figma Variables JSON ZIP 生成指导的技能,强调变量路径、别名和作用域的一致性校验。适用于需要可导入令牌集合的设计系统工作。
主要功能
- 01生成 Figma Variables JSON ZIP
- 02保持变量路径规范一致
- 03校验别名目标与导出结构
- 04验证变量作用域
- 05按层级规划令牌集合
适用场景
- 01为设计系统生成令牌文件
- 02检查变量别名路径是否有效
- 03按规范组织颜色与排版令牌
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ shanmus4/ figma-variables-tokens-generator --skill figma-variables-tokens-generator安装后在 Claude Code 中输入/figma-variables-tokens-generator确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
LICENSEevals/evals.jsoninstructions/01-interview-setup.md02-questionnaire-and-generation.md03-import-and-handoff.mdreferences/01-architecture.md02-scoping-rules.md03-json-format.md04-primitives.md05a-collections-core.md05b-collections-semantic-components.md06-generator-utility.md07-custom-collections.mdscripts/generator_core.pytoken-extractor.jsvalidate_generator_core.py详细介绍
Figma Variables 令牌生成器
生成可投入生产使用的 Figma Variables JSON ZIP,导入时零错误。 从资深产品设计师和资深前端工程师的双重视角构建每个系统。 确保各模式间的 ID 保持稳定,并始终规范化绝对路径。
不可妥协的生成不变量
这些规则适用于所有架构、所有集合、所有命名风格,以及所有用户输入组合。
-
每个变量只有一个规范令牌路径
- 令牌路径在以下各处必须只有一种规范表示:
- 规划/数据映射
prebuild_ids()create_token()- 输出 JSON 的嵌套键
aliasData.targetVariableName- 验证注册表
- 绝不能在 JSON 中保留一种大小写,而在注册表中使用另一种。
- 绝不能让别名目标的规范化方式与输出的变量名不同。
- 令牌路径在以下各处必须只有一种规范表示:
-
变量路径是架构数据,不是代码语法
com.figma.codeSyntax可以使用 camelCase、kebab-case、CSS 自定义属性、Android 或 iOS 格式。- 令牌路径本身必须保持为稳定的集合路径。
- 不要将令牌路径转换为符合代码语法规范的形式。
- 必须按参考内容的要求保留语义分隔符:例如
link-hover、on-brand、on-surface-variant、lineHeight、letterSpacing、borderWidth、minWidth、maxWidth。
-
按字面保留路径
- 如果参考文件按字面定义了路径,就按字面输出该路径。
- 不要悄悄将 kebab-case 改写为 camelCase,也不要从语义名称中删除连字符。
- 组件集合和自定义集合可以引入新路径,但一旦选定拼写,就必须在整个流程中保持一致。
-
必须进行产物级验证
- 不要只信任内部注册表。
- 构建完所有文件后,从每个集合中展平实际输出的 JSON 键,并针对这些输出路径验证每个别名目标。
- 只有输出的 JSON 图与内部注册表完全一致,构建才安全。
-
必须确保作用域正确
- 应从输出产物验证作用域,而不只是依赖辅助函数的意图。
text/*及所有文本角色的后代路径都必须解析为TEXT_FILL。border/*及边框角色的后代路径都必须解析为STROKE。icon/*必须解析为SHAPE_FILL+STROKE。shadow/*/color必须解析为EFFECT_COLOR。- 数值型排版路径必须解析为
FONT_SIZE、LINE_HEIGHT、LETTER_SPACING。 - 如果路径含义不明确,生成前必须添加明确规则。绝不能依赖宽泛的填充回退规则来处理语义明确的文本或边框令牌。
-
覆盖量下限是硬性要求
- 如果用户选择了 Lean、Standard 或 Enterprise,生成的令牌清单必须达到相关参考内容规定的密度下限。
- 不要因为手动数据映射提前结束,就生成不足。
- Theme/Semantic/Component 输出必须先根据所需路径清单生成,再按需扩展。
-
回填用于补齐缺失项,不用于纠正身份偏差
- 保存父集合前,先回填缺失的父级值。
- 但不要认为回填能解决路径大小写、路径拼写或别名名称不匹配的问题。
- 缺失令牌与令牌不匹配属于不同的故障类型,必须分别验证。
**输出格式:**仅交付包含 JSON 令牌的 .zip 文件。不要输出 .skill 文件,也不要粘贴原始 Python 脚本——用户需要的是可直接导入的 ZIP,而不是代码;在聊天中粘贴脚本会导致上下文被截断,从而破坏生成结果。
本地 IDE / CLI 输出规则
在本地 IDE 或 CLI 工作区中运行时:
- 如果
exports/文件夹不存在,始终创建它 - 将最终的 token ZIP 保存到
exports/中 - 不要将生成的文件散落在项目根目录中
- 除非用户明确要求,或需要通过它们从生成失败中恢复,否则不要创建额外的清单、调试 JSON 文件、辅助报告或生成脚本
默认预期:
- 在
exports/中放置一个最终 ZIP - 尽量少创建额外文件
读取顺序 — 分阶段加载
为避免上下文受到干扰,只读取当前加载阶段所需的文件:
加载阶段 1:探索与策略(第 1 轮读取)
| # | 文件 | 用途 |
|---|---|---|
| 1 | instructions/01-interview-setup.md | 初始设置和第 1–3 轮 |
| 2 | instructions/02-questionnaire-and-generation.md | 第 4–10 轮问卷、生成 |
| 3 | references/01-architecture.md | **必备策略:**理解层级和别名规则。 |
加载阶段 2:确认架构(第 2 阶段前读取)
| # | 文件 | 用途 |
|---|---|---|
| 4 | references/05a-collections-core.md | Core 集合的设计规范 |
| 5 | references/05b-collections-semantic-components.md | Semantic / Component 集合的设计规范 |
加载阶段 3:生成逻辑(第 3 阶段前读取)
| # | 文件 | 用途 |
|---|---|---|
| 6 | references/02-scoping-rules.md | 技术范围规则表 |
| 7 | references/03-json-format.md | 精确的 W3C JSON 结构 |
| 8 | references/04-primitives.md | 原始十六进制值、间距和字体数据 |
| 9 | references/06-generator-utility.md | Python 生成脚本模式 |
| 10 | scripts/generator_core.py | 可执行的 Python 引擎(适用于本地 / IDE 环境) |
加载阶段 4:交付与移交(ZIP 交付和 token 数量报告完成后读取)
| # | 文件 | 用途 |
|---|---|---|
| 11 | instructions/03-import-and-handoff.md | 导入指南和 ZIP 参考表 |
在问卷 100% 完成之前,不要读取加载阶段 3 的实现文件(范围规则、JSON 格式、生成器工具)。过早读取会让上下文充斥当前不需要的技术数据。
评论
支持 Markdown