使用 goose 接入 Figma Dev Mode MCP Server：把 Figma 设计稿一键转换为前端代码
【免费下载链接】goosean open source, extensible AI agent that goes beyond code suggestions - install, execute, edit, and test with any LLM项目地址: https://gitcode.com/GitHub_Trending/goose3/goose
这篇技术指南围绕 goose 项目的官方扩展教程（documentation/docs/mcp/figma-mcp.md）展开，讲解如何把 Figma 桌面客户端内置的Dev Mode MCP Server注册为 goose 的streamable_http远程扩展，让 goose 直接"看见"你在 Figma 中打开的图层与画板，并把设计稿转换为 React、Vue、HTML/CSS 等生产可用的前端代码。读完本文，你将掌握在 goose Desktop 与 goose CLI 两种界面下完成配置、理解其底层扩展配置格式，并能够用一句自然语言 Prompt 完成"设计稿转代码"的真实工作流。
前置条件：Figma 订阅与桌面客户端
在开始配置之前，需要先确认两个硬性前提：
- Figma 订阅席位：Dev Mode MCP Server 要求你在 Professional、Organization 或 Enterprise 版 Figma 计划中拥有Dev 或 Full 席位，免费版与普通 Viewer 席位无法启用。
- Figma 桌面应用：MCP Server 内置于桌面客户端中，因此必须安装并登录 Figma desktop app（官方文档中提供的下载渠道），浏览器版无法启动本地 MCP Server。
从架构上看，整个流程是典型的"本地 MCP 中转"模式：Figma 桌面应用在本机127.0.0.1:3845端口启动一个 MCP over Streamable HTTP 服务，goose 通过添加远程扩展的方式连接该端口，从而在会话中获得 Figma 提供的工具能力。goose 一侧并不需要安装任何 Figma 专用 SDK 或插件包。
快速安装（Quick Install）
如果你已经启用好 MCP Server，最快的方式是走一键安装：
- goose Desktop：直接使用安装器深链
goose://extension?type=streamable_http&url=http%3A%2F%2F127.0.0.1%3A3845%2Fmcp&id=figma&name=Figma&description=Convert%20Figma%20designs%20into%20code%20and%20extract%20design%20context，goose Desktop 会弹出确认对话框，点击确认即可把名为figma、类型为streamable_http、指向http://127.0.0.1:3845/mcp的扩展写入配置。 - goose CLI：执行
goose configure，在扩展类型列表中选择Remote Extension (Streamable HTTP)，然后填入 Endpoint URL：
http://127.0.0.1:3845/mcp这个goose://extension深链的 URL 拼装逻辑可以在文档站组件 documentation/src/components/GooseDesktopInstaller.tsx 中看到：当扩展类型为http时，组件会追加type=streamable_http参数，随后拼接url（经过 URL 编码）、id、name、description等参数，并支持通过header=追加自定义请求头。也就是说，"Launch the installer" 本质上只是一次把"扩展 ID + 类型 + 端点地址 + 描述"打包成深链的快捷操作，后续落地到配置文件的仍然是标准的 Streamable HTTP 扩展记录。
完整配置步骤
第 1 步：在 Figma 桌面应用中启用 MCP Server
请先遵循 Figma 官方提供的 Guide to the Dev Mode MCP Server 完成启用。启用成功后，goose 所需的 MCP 服务会运行在：
http://127.0.0.1:3845/mcp备选启用方式：如果按官方说明操作后在桌面应用中找不到
Preferences菜单，可以尝试以下路径：
- 点击设计文件底部的
</>切换按钮（打开开发者模式 / Dev Mode）；- 在右侧面板中找到并打开
Enable MCP server开关。
这一步非常关键：Figma MCP Server 是随桌面应用进程运行的本地服务，它绑定在回环地址 3845 端口。goose 之所以能获取到你当前打开的文件上下文，正是因为连接的是这台本机服务，而不是云端 API。
第 2 步：把 Figma 添加为 goose 扩展
goose Desktop 图形界面
在 goose Desktop 中打开扩展管理界面，按以下参数填写并添加：
| 配置项 | 值 |
|---|---|
| Extension ID | figma |
| Extension Name | Figma |
| Type | http（即 Streamable HTTP） |
| URL | http://127.0.0.1:3845/mcp |
| Description | Convert Figma designs into code and extract design context |
goose CLI 交互式配置
在终端中运行goose configure，交互流程如下（与文档组件 documentation/src/components/CLIExtensionInstructions.tsx 渲染的向导一致）：
- 选择要配置的内容：
Add Extension； - 选择扩展类型：
Remote Extension (Streamable HTTP)（官方界面描述为 "Connect to a remote extension via MCP Streamable HTTP"）； - 为扩展命名，例如
figma； - 输入 Streamable HTTP endpoint URI：
http://127.0.0.1:3845/mcp； - 设置工具超时（单位：秒），默认
300秒，即示例中使用的timeout={300}； - 输入扩展描述：
Convert Figma designs into code and extract design context； - 当询问
Would you like to add custom headers?时选择No（本地 Figma 服务默认无需鉴权头）。
深链一键安装（Desktop）
也可以直接复用快速安装小节中的goose://extension?...深链，一步完成注册，效果与手工添加等价。
第 3 步：理解"Streamable HTTP"扩展到底在配置什么
从 goose 源码来看，Figma 这类"连到本地 HTTP 端点"的扩展统一建模为ExtensionConfig::StreamableHttp，定义见 crates/goose/src/agents/extension.rs。该变体在序列化时的类型标识为streamable_http，核心字段包括：
name：扩展唯一名称，用于会话中区分工具来源；description：对模型可见的能力说明；uri：MCP 端点地址，即http://127.0.0.1:3845/mcp；envs/env_keys：注入的环境变量（用于服务端需要凭据的场景）；headers：随 HTTP 请求携带的自定义头（用于 Bearer Token 等鉴权场景）；timeout：工具调用超时（秒），config/extensions.rs中定义了默认常量DEFAULT_EXTENSION_TIMEOUT = 300（见 crates/goose/src/config/extensions.rs）；socket：可选的 Unix domain socket 路径，用于 HTTP-over-UDS 传输（本地 Figma 服务默认走 TCP，无需配置）；client_id/client_secret_key/scopes：OAuth 相关字段，供需要走授权流程的远程服务使用。
goose configure与 Desktop 安装器最终都会把上述信息写入 goose 全局配置的extensions键下。写入后的 YAML 形如：
extensions: figma: type: streamable_http name: figma description: Convert Figma designs into code and extract design context uri: http://127.0.0.1:3845/mcp timeout: 300配置的解析与持久化逻辑集中在 crates/goose/src/config/extensions.rs：扩展记录逐条反序列化为ExtensionEntry（包含enabled标志与扁平化的ExtensionConfig），解析失败或对当前平台不可用的条目会被跳过并记录日志；扩展名在写入时还会经name_to_key归一化（见 crates/goose/src/config/extensions.rs），保留字母、数字、_、-，空白被剔除，其余字符转为_并统一小写。另外值得注意的是，goose 已不再支持旧的sse类型——配置加载时若发现type: sse，会输出警告'{}': SSE is unsupported, migrate to streamable_http（见 crates/goose/src/config/extensions.rs），因此 Figma 这类新接入的 MCP 一律应使用streamable_http。
示例使用：把 Figma 设计稿转换成 React 代码
Figma 扩展是与 Figma 桌面应用协同工作的：它读取的是你桌面端当前打开的设计文件。典型用法包括：
- 把 Figma 设计稿转换为生产可用的前端代码（React、Vue、HTML/CSS 等）；
- 提取设计令牌（design tokens）、变量，并生成设计系统规则；
- 抓取设计的视觉参考（图层面板截图），用于多模态模型理解版式。
准备要转换的设计
- 在已启用 MCP Server 的 Figma 桌面应用中打开目标设计文件；
- 在图层面板（layers panel）中，右键点击任意 Frame 或 Component，选择
Copy link to selection，得到形如https://www.figma.com/design/<FILE>/<NAME>?node-id=<NODE>&m=dev的深链。
提示：既可以把上面复制的 Figma 链接直接提供给 goose，也可以什么都不复制，只要 goose 会话运行时你在 Figma 桌面应用中选中了对应元素即可——MCP Server 能直接感知当前选区。
向 goose 发起 Prompt
Convert this to React: https://www.figma.com/design/B6IFM1qjwxJw5fOYJYKRl5/Buttons-?node-id=351-8&m=devgoose 的执行过程与输出
下面是在 goose Desktop 中一次真实会话的示意（节选自官方文档）：goose 先确认已有 Figma 扩展可用，再解析 URL 中的node-id，随后依次调用 Figma MCP Server 暴露的get_code（按节点、目标语言与框架生成代码）与get_image（抓取节点视觉参考）两个工具，最后基于两者的结果产出代码：
manage_extensions action, extension_name get_code nodeId, clientLanguages, clientFrameworks get_image nodeId, clientLanguages, clientFrameworksgoose 生成的 React + Tailwind 组件如下：
const imgImage1 = "http://localhost:3845/assets/e0e0f6accb741cb6cacec2697cef047a7eea7e30.png"; function Component1() { return ( <div className="relative size-full" contenteditable="false">【免费下载链接】goosean open source, extensible AI agent that goes beyond code suggestions - install, execute, edit, and test with any LLM![]()
项目地址: https://gitcode.com/GitHub_Trending/goose3/goose创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
