使用 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?typestreamable_httpurlhttp%3A%2F%2F127.0.0.1%3A3845%2FmcpidfigmanameFigmadescriptionConvert%20Figma%20designs%20into%20code%20and%20extract%20design%20contextgoose Desktop 会弹出确认对话框点击确认即可把名为figma、类型为streamable_http、指向http://127.0.0.1:3845/mcp的扩展写入配置。goose CLI执行goose configure在扩展类型列表中选择Remote Extension (Streamable HTTP)然后填入 Endpoint URLhttp://127.0.0.1:3845/mcp这个goose://extension深链的 URL 拼装逻辑可以在文档站组件 documentation/src/components/GooseDesktopInstaller.tsx 中看到当扩展类型为http时组件会追加typestreamable_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 IDfigmaExtension NameFigmaTypehttp即 Streamable HTTPURLhttp://127.0.0.1:3845/mcpDescriptionConvert Figma designs into code and extract design contextgoose 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 URIhttp://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对模型可见的能力说明uriMCP 端点地址即http://127.0.0.1:3845/mcpenvs/env_keys注入的环境变量用于服务端需要凭据的场景headers随 HTTP 请求携带的自定义头用于 Bearer Token 等鉴权场景timeout工具调用超时秒config/extensions.rs中定义了默认常量DEFAULT_EXTENSION_TIMEOUT 300见 crates/goose/src/config/extensions.rssocket可选的 Unix domain socket 路径用于 HTTP-over-UDS 传输本地 Figma 服务默认走 TCP无需配置client_id/client_secret_key/scopesOAuth 相关字段供需要走授权流程的远程服务使用。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-idNODEmdev的深链。提示既可以把上面复制的 Figma 链接直接提供给 goose也可以什么都不复制只要 goose 会话运行时你在 Figma 桌面应用中选中了对应元素即可——MCP Server 能直接感知当前选区。向 goose 发起 PromptConvert this to React: https://www.figma.com/design/B6IFM1qjwxJw5fOYJYKRl5/Buttons-?node-id351-8mdevgoose 的执行过程与输出下面是在 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 classNamerelative 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），仅供参考