mcpField
F
figma-variables-tokens-generator

figma-variables-tokens-generator

github.com/shanmus4设计与 UI1156 次安装28 周前更新
代码仓库

关于 figma-variables-tokens-generator

为设计师和前端工程师提供 Figma Variables JSON ZIP 生成指导的技能,强调变量路径、别名和作用域的一致性校验。适用于需要可导入令牌集合的设计系统工作。

主要功能

  1. 01生成 Figma Variables JSON ZIP
  2. 02保持变量路径规范一致
  3. 03校验别名目标与导出结构
  4. 04验证变量作用域
  5. 05按层级规划令牌集合

适用场景

  1. 01为设计系统生成令牌文件
  2. 02检查变量别名路径是否有效
  3. 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 外,安装时一起下载的参考资料和脚本。

LICENSE
evals/
evals.json
instructions/
01-interview-setup.md
02-questionnaire-and-generation.md
03-import-and-handoff.md
references/
01-architecture.md
02-scoping-rules.md
03-json-format.md
04-primitives.md
05a-collections-core.md
05b-collections-semantic-components.md
06-generator-utility.md
07-custom-collections.md
scripts/
generator_core.py
token-extractor.js
validate_generator_core.py

详细介绍

Figma Variables 令牌生成器

生成可投入生产使用的 Figma Variables JSON ZIP,导入时零错误。 从资深产品设计师和资深前端工程师的双重视角构建每个系统。 确保各模式间的 ID 保持稳定,并始终规范化绝对路径。

不可妥协的生成不变量

这些规则适用于所有架构、所有集合、所有命名风格,以及所有用户输入组合。

  1. 每个变量只有一个规范令牌路径

    • 令牌路径在以下各处必须只有一种规范表示:
      • 规划/数据映射
      • prebuild_ids()
      • create_token()
      • 输出 JSON 的嵌套键
      • aliasData.targetVariableName
      • 验证注册表
    • 绝不能在 JSON 中保留一种大小写,而在注册表中使用另一种。
    • 绝不能让别名目标的规范化方式与输出的变量名不同。
  2. 变量路径是架构数据,不是代码语法

    • com.figma.codeSyntax 可以使用 camelCase、kebab-case、CSS 自定义属性、Android 或 iOS 格式。
    • 令牌路径本身必须保持为稳定的集合路径。
    • 不要将令牌路径转换为符合代码语法规范的形式。
    • 必须按参考内容的要求保留语义分隔符:例如 link-hover、on-brand、on-surface-variant、lineHeight、letterSpacing、borderWidth、minWidth、maxWidth。
  3. 按字面保留路径

    • 如果参考文件按字面定义了路径,就按字面输出该路径。
    • 不要悄悄将 kebab-case 改写为 camelCase,也不要从语义名称中删除连字符。
    • 组件集合和自定义集合可以引入新路径,但一旦选定拼写,就必须在整个流程中保持一致。
  4. 必须进行产物级验证

    • 不要只信任内部注册表。
    • 构建完所有文件后,从每个集合中展平实际输出的 JSON 键,并针对这些输出路径验证每个别名目标。
    • 只有输出的 JSON 图与内部注册表完全一致,构建才安全。
  5. 必须确保作用域正确

    • 应从输出产物验证作用域,而不只是依赖辅助函数的意图。
    • text/* 及所有文本角色的后代路径都必须解析为 TEXT_FILL。
    • border/* 及边框角色的后代路径都必须解析为 STROKE。
    • icon/* 必须解析为 SHAPE_FILL + STROKE。
    • shadow/*/color 必须解析为 EFFECT_COLOR。
    • 数值型排版路径必须解析为 FONT_SIZE、LINE_HEIGHT、LETTER_SPACING。
    • 如果路径含义不明确,生成前必须添加明确规则。绝不能依赖宽泛的填充回退规则来处理语义明确的文本或边框令牌。
  6. 覆盖量下限是硬性要求

    • 如果用户选择了 Lean、Standard 或 Enterprise,生成的令牌清单必须达到相关参考内容规定的密度下限。
    • 不要因为手动数据映射提前结束,就生成不足。
    • Theme/Semantic/Component 输出必须先根据所需路径清单生成,再按需扩展。
  7. 回填用于补齐缺失项,不用于纠正身份偏差

    • 保存父集合前,先回填缺失的父级值。
    • 但不要认为回填能解决路径大小写、路径拼写或别名名称不匹配的问题。
    • 缺失令牌与令牌不匹配属于不同的故障类型,必须分别验证。

**输出格式:**仅交付包含 JSON 令牌的 .zip 文件。不要输出 .skill 文件,也不要粘贴原始 Python 脚本——用户需要的是可直接导入的 ZIP,而不是代码;在聊天中粘贴脚本会导致上下文被截断,从而破坏生成结果。

本地 IDE / CLI 输出规则

在本地 IDE 或 CLI 工作区中运行时:

  • 如果 exports/ 文件夹不存在,始终创建它
  • 将最终的 token ZIP 保存到 exports/ 中
  • 不要将生成的文件散落在项目根目录中
  • 除非用户明确要求,或需要通过它们从生成失败中恢复,否则不要创建额外的清单、调试 JSON 文件、辅助报告或生成脚本

默认预期:

  • 在 exports/ 中放置一个最终 ZIP
  • 尽量少创建额外文件

读取顺序 — 分阶段加载

为避免上下文受到干扰,只读取当前加载阶段所需的文件:

加载阶段 1:探索与策略(第 1 轮读取)
#文件用途
1instructions/01-interview-setup.md初始设置和第 1–3 轮
2instructions/02-questionnaire-and-generation.md第 4–10 轮问卷、生成
3references/01-architecture.md**必备策略:**理解层级和别名规则。
加载阶段 2:确认架构(第 2 阶段前读取)
#文件用途
4references/05a-collections-core.mdCore 集合的设计规范
5references/05b-collections-semantic-components.mdSemantic / Component 集合的设计规范
加载阶段 3:生成逻辑(第 3 阶段前读取)
#文件用途
6references/02-scoping-rules.md技术范围规则表
7references/03-json-format.md精确的 W3C JSON 结构
8references/04-primitives.md原始十六进制值、间距和字体数据
9references/06-generator-utility.mdPython 生成脚本模式
10scripts/generator_core.py可执行的 Python 引擎(适用于本地 / IDE 环境)
加载阶段 4:交付与移交(ZIP 交付和 token 数量报告完成后读取)
#文件用途
11instructions/03-import-and-handoff.md导入指南和 ZIP 参考表

在问卷 100% 完成之前,不要读取加载阶段 3 的实现文件(范围规则、JSON 格式、生成器工具)。过早读取会让上下文充斥当前不需要的技术数据。

评论

支持 Markdown