SuperAPI AI 工具集

code-to-figma

设计与创作

查看项目

更新于 10-16 00:21

技能介绍

用途:把代码库中的设计令牌和页面结构单向同步到 Figma。它生成项目专属的导出流水线:walker 读取编译后的 HTML 与 CSS,解析 class 到 token 的绑定,生成结构化 JSON 并推送到 GitHub Gist,由 tokens-sync-to-figma 插件在 Figma 侧消费。流水线为单向、以 CI 为锚点,配置完成后每次涉及令牌或模板的推送会自动更新 Gist,无需 agent、无需 Figma API key。

主要能力:提供 setup、sync、update、status 四个命令。setup 首次评估项目(读取 package.json 等清单、编译后的 CSS 与令牌文件、构建后的 HTML、令牌命名约定、区块结构),生成 walker、DTCG 2025.10 令牌转换器、通用 Gist 推送器、figma-sync.config.json、package 脚本、GitHub Actions 工作流、Gist、secrets 并完成首次同步。sync 构建并推送 figma-export.json。update 在技术栈或令牌命名变化时重新生成脚本与配置。status 检查 Gist 新鲜度、CI 状态、脚本存在性与配置有效性。

使用方式:无 figma-sync.config.json 或 walker 脚本时默认执行 setup。本地校验命令包括 node scripts/tokens-to-figma/convert-to-dtcg.mjs、git status --short -- scripts/tokens-to-figma/*.w3c.json、node scripts/figma-export/walk-<site>.mjs | jq '.sections | length'。sync 时运行 node <walker> > figma-export.tmp.json,用 jq 校验后执行 node scripts/tokens-to-figma/push-to-figma.mjs < figma-export.tmp.json。CI 中必须用 node 而非 pnpm 调用 walker,因为 pnpm 会向 stdout 写脚本头,破坏重定向。

适用场景:需要把代码中的设计令牌与页面结构同步到 Figma 的前端项目,支持 Next.js、Eleventy、SolidJS、纯 HTML 等。Next.js 需 output: 'export' 才能产出 out/index.html,否则应停止并告知用户。

限制:本技能不编辑 Figma 文件,Figma 侧由插件消费产物。必须读取编译输出而非源码。tokenPath() 与显式 $type 映射是契约,不得从原始 CSS 值推断 $type。DTCG JSON 应提交到仓库。若无法产出静态 HTML 产物,应停止而非猜测路径。