figma-mcp-downloader
将 Figma MCP 工具生成的设计代码或元数据保存到本地文件。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：figma-mcp-downloader。 它的用途是：将 Figma MCP 工具生成的设计代码或元数据保存到本地文件。 完整的 Skill 内容见：https://321skill.com/skills/figma-mcp-downloader/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“使用 Figma MCP 工具获取当前选中按钮组件的设计上下文，并保存为代码文件。”，它会调用 figma-mcp-downloader，执行 `get_design_context` 命令，将生成的 React 组件 JSX 代码保存到你指定的本地文件中，方便你直接集成到项目里。
介绍
figma-mcp-downloader 是一个命令行工具，解决了 AI 代理（如 Claude Desktop）使用 Figma MCP 工具时，无法直接保存生成结果到本地文件的问题。它充当一个桥梁，将 Figma MCP 工具的 API 调用结果（如设计上下文、组件元数据）持久化存储，方便开发者后续查看、编辑或集成到项目中。
使用方式非常简单，通过 npm 全局安装后，即可使用与 Figma MCP 工具同名的子命令（如 get_design_context）来执行操作，并指定输出文件路径。工具支持将完整的 JSON 响应或仅提取其中的核心代码（如 JSX）保存下来。
这个工具非常适合需要将 Figma 设计元素转化为前端代码或进行设计资产管理的开发者、设计师和产品经理。特别是那些在 AI 辅助下进行 UI 开发，并希望将 AI 生成的设计规范或代码片段离线保存以供团队协作或版本控制的场景。
使用时需注意，Figma 桌面应用必须正在运行以启动本地 MCP 服务器。此外，当前该 CLI 仅支持 get_design_context 和 get_metadata 两个 MCP 工具，其他工具（如截图）暂不支持。
核心特点
这是专为连接 Figma MCP 工具与本地文件系统设计的 CLI，能精准提取 AI 生成的设计代码（JSX/XML）并保存，而非仅仅调用 API；它强制设置 `forceCode: true` 以确保输出是可直接使用的代码，而非纯设计描述。
注意事项
目前仅支持 Figma MCP 工具中的 `get_design_context` 和 `get_metadata`，不支持截图、变量定义等其他工具。
常见问题
使用前需要启动 Figma 吗？
是的，必须启动 Figma 桌面应用以运行本地 MCP 服务器。
如何只保存生成的代码，不要 AI 的指导文本？
使用 `-c` 或 `--content-only` 选项，即可只保存响应中的第一个文本内容（通常是 JSX 或 XML 代码）。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/figma-mcp-downloader/raw/index.md 读取 figma-mcp-downloader 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/figma-mcp-downloader/raw/index.md（查看排版版本）