mcpField
F
figma-canvas-editor

figma-canvas-editor

github.com/sergekostenchuk设计与 UI3250 次安装18 周前更新
代码仓库

关于 figma-canvas-editor

用于对 Figma 文件执行范围明确的修改,包括画布对象、样式、变量、FigJam 内容,以及条件具备时的 Slides。通过编辑前后的元数据检查和基于证据的报告,记录修改及其边界。

主要功能

  1. 01创建和更新 Figma 对象
  2. 02编辑 FigJam 内容
  3. 03条件具备时编辑 Slides
  4. 04编辑前后检查元数据
  5. 05报告证据与回滚路径

适用场景

  1. 01创建或修改画框与布局
  2. 02按范围调整样式或变量
  3. 03删除指定的过时对象
  4. 04记录 Figma 修改结果

MCP 相关

该 Skill 使用 Figma MCP 操作文件,并要求在调用 `use_figma` 前先调用 `figma:figma-use`。编辑 FigJam 和 Slides 时,也可能需要调用相应的 Figma Skill。

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill figma-canvas-editor

安装后在 Claude Code 中输入/figma-canvas-editor确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

agents/
openai.yaml
assets/
canvas-edit-report.md
evals/
evals.json

详细介绍

Figma Canvas 编辑器

将此技能用于直接修改 Figma。只读理解请使用 figma-context-reader;令牌/库治理请使用 figma-design-system-sync。

模式

  • create:添加画框、区段、组件、对象或布局。
  • update:更改选定节点、布局、样式、变量、文本或组件实例。
  • delete:仅在范围明确时移除效果、节点、变体或过时对象。
  • figjam:编辑 FigJam 对象、区段、连接线和形状。
  • slides:在 Slides 技能可用时编辑 Figma Slides 内容。

工作流

  1. 确认目标文件/页面/画框/节点及确切的修改范围。
  2. 进行大范围修改前,优先复制重要画框。
  3. 在进行任何 use_figma 调用前,先调用 figma:figma-use。对于 FigJam 或 Slides,也要调用相应的已安装 Figma 技能。
  4. 编辑前读取当前元数据。
  5. 尽可能使用 Figma 原生对象、自动布局、组件、变量和样式应用更改。
  6. 编辑后重新读取元数据,并在可用时截取屏幕截图/导出作为证据。
  7. 报告已更改的目标、证据、跳过的检查项和回滚路径。

修改边界

  • 未经明确批准,不得进行大范围破坏性修改。
  • 除非用户要求,否则不得分离实例、扁平化矢量、栅格化可编辑文本或移除变量/样式。
  • 不得臆造节点 ID,也不得在没有 MCP 证据的情况下声称选定节点存在。
  • 可见时,保持设计系统命名与现有文件一致。

输出格式

使用 assets/canvas-edit-report.md。

验证与评估

  • 验证每份修改报告都包含目标、范围、修改前证据、修改后证据和跳过的检查项。
  • 将缺少回读的情况标记为 Skipped 或 Blocked,不得视为成功修改的证据。
  • 使用 evals/evals.json 对限定范围的创建和破坏性删除提示进行前向测试。

评论

支持 Markdown