Agent Skills
返回列表
💻

Figma 设计令牌提取器

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_3c6cb52e/figma-design-token-extractor-3。

技能介绍

要解决的问题

设计稿和代码之间的颜色、字号、间距往往靠人工对照 Figma 图层抄写，既慢又容易出错。@user_3c6cb52e/figma-design-token-extractor-3 直接走 Figma REST API 读取文件，再交给 style-dictionary 做转换，目标是让令牌从设计文件里自动流向前端与移动端的主题配置，减少手写常量和复制粘贴带来的偏差。

技能如何工作

  • 读取文件结构：获得授权后，通过 Figma API 拿到文件的 JSON 表示，图层和对象都对应文件里的一个 node（子树）。
  • 请求指定资源：例如调用 GET https://api.figma.com/v1/files/:key 拉取文件内容，也可获取 usage / analytics 数据。
  • 提取样式令牌：在节点树中定位组件的 fill、stroke、effect、text style 等属性，形成设计令牌集合。
  • 按目标平台输出：由 style-dictionary 把令牌编译成 CSS 自定义属性、Tailwind 配置，以及 Swift / Kotlin 的主题文件。

适用边界与注意点

  • 必须先完成 Figma 侧的授权，技能才能访问具体文件；不同产品（如文件、使用情况分析）对应不同的 API 能力范围。
  • 提取质量取决于图层命名与样式组织方式，结构混乱的文档会产生难用的令牌。
  • 输出格式由 style-dictionary 的配置决定，默认覆盖 Web 与移动端主题文件，不保证适配项目里自定义的命名约定。

更多接口细节见 https://developers.figma.com/docs/rest-api/。

使用场景

  • 设计稿定稿后，需要把 Figma 组件的颜色和字号转成 CSS 自定义属性并接进样式表。
  • 团队决定用 Tailwind 做主题，要把 Figma 图层里的颜色、间距导出为 Tailwind 配置。
  • 移动端要跟随设计稿换肤，需要从 Figma 抽取令牌生成 Swift 主题文件给 App 使用。
  • Kotlin 项目想统一深色与浅色配色，需要从 Figma 文档批量提取样式并输出主题文件。

适合人员

  • 前端工程师，想在设计交付后直接拿到可用的 CSS 变量，不再手工抄 Figma 数值。
  • 前端团队负责人，负责制定 Tailwind 主题规范并推动设计令牌在项目里落地。
  • iOS 开发工程师，需要把 Figma 配色和字号编译成 Swift 主题文件供 App 换肤。
  • Android 开发工程师，希望从 Figma 文档批量提取令牌生成 Kotlin 主题配置。