Agent Skills
返回列表
Figma 设计分析与导出

Figma 设计分析与导出

设计多媒体 更新于 2026.08.30

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

请根据 https://skillhub.cn/install/skillhub.md，安装 @zcwl/figma。

技能介绍

要解决什么问题

设计稿在 Figma 里，工程侧却常常卡在几件事：拿不到结构化的组件与样式清单、切图规格不统一、设计系统里有没有未使用的组件或颜色用法漂移，也很难在交付前系统性地过一遍 WCAG 对比度与触控尺寸。本技能通过 Figma REST API 做只读集成：拉取文件 JSON、审计样式与组件、批量导出资源并生成可落地的报告，而不是在 Figma 里改图层或做实时协作。

核心能力与典型流程

文件与分析

  • 文件检视：获取完整文件 JSON，列出组件、样式与设计 token
  • 资源导出：按 frame / 组件 / 节点批量导出 PNG、SVG、PDF（亦支持 WEBP）
  • 版本信息：访问指定版本与分支元数据

设计系统管理

  • 颜色、 typography、间距的一致性审计；识别未使用组件与使用模式
  • 从 Figma 样式生成 CSS / JSON design tokens；品牌规范一致性检查

批量导出与质量

  • 多格式导出，可按 iOS / Android 生成 @1x / @2x / @3x 等平台尺寸
  • 按格式或平台组织输出目录，便于交付包与文档一并打包

可访问性

  • 对比度（WCAG）、字号尺度、触控目标、焦点状态等检查，并可生成 accessibility 报告

仓库内脚本分工明确：figma_client.py 封装 REST 端点，export_manager.py 负责导出与缩放，style_auditor.py 做设计系统审计，accessibility_checker.py 做 WCAG 校验。常见工作流可以是：提取文件数据 → 分析一致性 → 生成报告 → 人工改稿；或 选定导出目标 → 配置格式与命名 → 批量导出 → 整理交付目录。

适用边界

技能不能修改现有文件、新建设计、批量更新多文件，也不提供 Plugin API 级别的实时协作。需要改稿时仍应走 Figma 插件 或其它编辑路径。API 侧内置限速与重试，适合审计、文档化与开发交接，而非替代设计师在画布上的操作。

使用场景

  • 设计系统文件更新后，需要列出全部组件与颜色样式并导出为 CSS 自定义属性供前端接入
  • 移动端交付前，按 frame 批量导出 PNG 与 SVG，并生成 @2x、@3x 切图目录
  • 跨多个 Figma 文件核对品牌色与 typography 是否一致，并找出长期未引用的组件
  • 应用界面定稿前，对关键屏幕做 WCAG 对比度与触控目标尺寸检查并输出报告

适合人员

  • 负责把 Figma 样式同步到代码库的前端，需要从文件中提取 design tokens 并发现样式不一致
  • 接外包或客户稿的 UI 工程师，要把指定组件批量导出为多格式并按平台尺寸整理交付包
  • 维护公司组件库的设计系统负责人，要审计未使用组件与 spacing 用法并写改进清单
  • 在发布前做设计 QA 的产品设计师，需要可访问性报告而不是手工逐屏查对比度