AI导哈

Figma设计工作流工具

Figma Agent是一个基于OpenClaw的工作流驱动的Figma技能，支持直接检查设计并通过结构化工作流创建、审查和编辑屏幕。

  • by rasimme
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 rasimme/figma-agent

使用说明

Figma Agent

Workflow-driven Figma skill for OpenClaw — inspect designs directly, then create, review, and edit screens through structured Figma workflows.
Built on the official Figma Remote MCP server.

What this skill does • Core architecture • Supported workflows • Quick Start • Image Delivery • Limitations

这项技能有什么作用

Figma Agent不仅仅是一个原始的MCP包装器。这是一种结构化的OpenClaw技能，用于以两种模式使用Figma：

  • 直接读取/检查 用于屏幕截图、元数据、设计上下文、变量和代码连接检查
  • 结构化的写入/编辑工作流程 用于构建屏幕、审查现有工作、应用令牌以及通过ACP编码会话迭代设计

典型用例：

  • “显示此屏幕并告诉我关闭了什么”
  • “基于此现有屏幕构建下一步”
  • “用设计系统标记替换硬编码颜色”
  • “检查局部变量和代码连接映射”
  • “使用现有组件创建生产就绪屏幕”

核心架构

该技能有意分为四层：

  1. SKILL.md --用于决定直接读取与ACP写入/编辑的布线表面
  2. references/workflow-selection.md --工作流程与策略选择
  3. references/core-rules.md --全局执行规则和约束
  4. references/prompting-patterns.md +剧本 --快速结构和分步执行

运行期模型

  • 读取/检查 直接转到Figma MCP
  • 编写/创建/编辑 使用Figma MCP进行ACP编码会话

这种混合模型可以快速检查，同时为画布更改保留更强的执行路径。

执行模型

控制器应分三个阶段运行：

  1. 路线和简介 --选择工作流程，识别实际风险，并制定精益执行简报
  2. 执行 --执行直接读取或ACP写入/编辑任务
  3. 完成门 --在报告成功之前，需要先进行结构检查，然后进行屏幕截图确认

支持的工作流

读取/检查

  • 只读检查 --屏幕截图、元数据、设计上下文、变量、代码连接上下文
  • 变量发现 --在外部搜索之前检查本地令牌和样式
  • 设计审核评审 --审查已完成的设计，并确定问题或清理机会

创建/编辑

  • 原生屏幕生成 --生产就绪，设计系统对齐的屏幕创建
  • 屏幕回顾循环 --截图、隔离问题、应用有针对性的修复、验证
  • 颜色标记化 --用变量绑定替换硬编码值
  • HTML到Figma原型 --从HTML/CSS快速探索，然后清理
  • 缝线导入清理 --修复导入的缝合输出，以获得本地Figma质量
  • 状态变量/下一步 --更喜欢 复制+编辑 当大部分屏幕已经存在时，过度重建

执行原则

  • 先设计系统 --在创建任何原始内容之前，使用局部变量、样式、组件和代码连接
  • 组件实例优先 --如果存在合适的组件，请实例化它，而不是直观地重建它
  • 逐节 --构建经过验证的小步骤，而不是巨大的写调用
  • 每次写入后验证 --首先进行结构检查，其次进行截图

快速开始

先决条件

  • 开爪 安装
  • Node.js 可用的
  • Figma帐户已连接到受支持的MCP客户端
  • 全座位 在Figma中用于写入操作(use_figma)

安装

通过ClawHub（推荐）：

clawhub install figma-agent

手动安装：

cd ~/.openclaw/skills
git clone https://github.com/rasimme/figma-agent.git
cd figma-agent
npm install

Bootstrap身份验证

node ~/.openclaw/skills/figma-agent/scripts/bootstrap-token.mjs

引导脚本从支持的MCP客户端提取或刷新Figma MCP令牌，并将Figma服务器配置写入您的OpenClaw配置。

然后重新启动OpenClaw：

openclaw gateway restart

验证

检查Figma MCP是否已配置 ~/.openclaw/openclaw.json 在...之下 mcp.servers.figma，然后尝试一个简单的读取操作，例如 get_screenshot 或 get_metadata.

图像传递

对于聊天传递，截图应作为实际的图像附件发送，而不是内联base64 blob。

推荐图案

  1. 将屏幕截图保存到磁盘 --out
  2. 回复 MEDIA:<path>

例子：

node scripts/figma-mcp-cli.mjs get_screenshot \
  fileKey=<fileKey> nodeId=<nodeId> scale=2 \
  --out ~/workspace-dev-botti/screenshots/validate.png

然后在聊天中：

MEDIA:screenshots/validate.png

重要区别

  • image 工具=图像分析/视觉输入
  • MEDIA:<path> =实际聊天附件传递

这在Telegram上尤其重要，因为内联base64与原生图像附件不同。

工具覆盖范围

该技能支持官方的Figma Remote MCP工具集进行检查和画布操作。常用工具包括：

  • get_design_context
  • get_screenshot
  • get_metadata
  • get_variable_defs
  • search_design_system
  • get_code_connect_map
  • get_figjam
  • whoami
  • use_figma
  • create_new_file
  • generate_figma_design
  • generate_diagram
  • 代码连接映射助手

有关完整的工具级别详细信息，请参阅 references/figma-api.md.

局限性

当前已知约束：

  • 写入操作需要坐满 在Figma
  • 大型写调用很脆弱 --将工作分成更小的部分
  • 远程MCP写入行为仍然存在边缘情况 --每次更改后进行验证
  • 远程MCP中的某些插件API行为不同 --看 references/plugin-api-gotchas.md
  • 通过本地文件输出，图像传输效果最佳+ MEDIA:
  • 状态变量通常应复制和编辑现有屏幕，而不是从头开始重建
  • 剧本引导代理，而不是自动ACP --关键执行约束仍必须在相关时注入ACP提示中

项目结构

figma-agent/
├── SKILL.md
├── README.md
├── CHANGELOG.md
├── LICENSE
├── package.json
├── references/
│   ├── core-rules.md
│   ├── figma-api.md
│   ├── plugin-api-gotchas.md
│   ├── prompting-patterns.md
│   └── workflow-selection.md
└── scripts/
    ├── bootstrap-token.mjs
    ├── figma-mcp-cli.mjs
    ├── figma-mcp.mjs
    └── token-scanner.mjs

许可证

麻省理工学院——见 许可证.

相关 MCP