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质量
• 状态变量/下一步 --更喜欢 复制+编辑 当大部分屏幕已经存在时，过度重建

执行原则

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

______________________________________________________________________

快速开始

先决条件

• 开爪 安装
• 可用的
• 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:

`

例子：

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

然后在聊天中：

MEDIA:screenshots/validate.png

重要区别

• image 工具=图像分析/视觉输入
• `MEDIA:

` =实际聊天附件传递

这在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

______________________________________________________________________

许可证

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