企业官网建设流程全解析

Figma MCP Server 3分钟接入指南：VS Code、Cursor一次配好，AI直接读你的设计稿

【免费下载链接】mcp-server-guideA guide on how to use the Figma MCP server项目地址: https://gitcode.com/GitHub_Trending/mc/mcp-server-guide

你在 Figma 里画完页面，复制一个 Frame 的链接粘给 AI 助手，它就能读出布局、字号、色值，直接产出可运行的代码——这就是 Figma MCP Server 的核心用途。注意它不是本地 Node 服务，而是 Figma 官方托管的远程 MCP 服务器，所以没有 npm install、没有 localhost:3000，全部工作就是让你的编程客户端连上它并授权。

三分钟接入：从拉取到验证

这一步只需要做两件事：拿仓库里的配置参考，然后在你的编辑器里注册远程服务器。

git clone https://gitcode.com/GitHub_Trending/mc/mcp-server-guide

仓库本身不运行任何东西，价值在于 server.json 这类现成配置和 skills/ 里一整套设计工作流技能，可以直接抄到你自己的客户端里。以 VS Code 为例：按⌘ Shift P输入MCP:Add Server，选 HTTP，粘入https://mcp.figma.com/mcp，服务器 ID 填figma。完成后在聊天框输入#get_design_context，能列出工具列表就算接入成功；一个工具都没有，先重启编辑器再检查账号是否启用了 Copilot，否则 MCP 不会加载。

Cursor 用户更省事，在 Agent 对话框输入一行：

/add-plugin figma

插件会把服务器配置、设计实现技能和资产处理规则一次装齐，不用手写 JSON。Claude Code 同样一行：

claude plugin install figma@claude-plugins-official

Gemini CLI 走扩展安装，随后单独认证：

/mcp auth figma

关键配置项详解：URL、协议与授权

配置真正影响结果的就三个点，抄错任何一个都连不上。

• type 必须是http。仓库里 figma-power/mcp.json 和 .mcp.json 都写死了"type": "http"，因为服务端跑在 Figma 云上；填成stdio等于让客户端去本地找进程，启动即失败。
• URL 固定为https://mcp.figma.com/mcp。gemini-extension.json 里还多了一个oauth: enabled，意味着首次调用会弹出 Figma 网页登录，完成授权前所有读取工具都会返回未登录——这不是 bug，是安全门槛。
• 隐性成本是配额。Figma 对读取类工具限流：Starter 计划或 View/Collab 席位每月只给 6 次调用，Dev/Full 席位才是按分钟限额。批量跑任务前先确认自己的套餐，否则前几次用着正常、后面突然全挂。

跑通之后做什么：两个典型操作

接好之后，最有价值的就是这两件事。

操作一：设计稿转代码。在 Figma 里选中一个 Frame，右键复制链接，粘给 AI 并补一句你的要求，比如"用项目现有的组件库实现这个设计"。MCP 会从链接里的node-id参数定位图层，拉取结构化的 React+Tailwind 表示加截图参考，再按你的要求翻译成代码。提示词越具体，产出越贴你的技术栈：指定目录、指定布局系统、指定复用的组件名。

操作二：抽取设计 Token。把选区链接发给 AI，让它"列出这个 Frame 用到的颜色和间距变量"。之后写代码直接引用项目 Token，而不是把色值硬编码散落在各个文件里。

卡住了怎么办：速查排错

按现象对照处理，基本两条内解决。

• 输入 # 看不到 Figma 工具→ Copilot 没启用或注册失败，重启编辑器，再确认 mcp.json 里有 figma 条目。
• 调用报未授权→ 在弹出的 Figma 网页完成登录；Gemini CLI 可单独执行/mcp auth figma。
• 返回截断、内容不全→ 选区太大，先让 AI 用get_metadata拿节点大纲，再逐个组件生成。
• 代码里出现占位图或自行 import 图标包→ 直接用服务器返回的 localhost 资源地址，这是官方规则，别另起炉灶。

下一步

这套配置的本质，是给 AI 编程工具接上了一条直读 Figma 设计数据的通道，一次配好，VS Code、Cursor、Claude Code 都能复用。建议你明天就挑一个真实页面里的按钮组件走一遍"复制 Frame 链接→生成代码→对照设计稿校验"的完整流程，把 Code Connect 映射也顺手建上，生成质量会立刻不一样。深入工具清单可以看仓库 README.md 指向的 Figma 开发者文档，工作流技能的源码都在 skills/ 目录。

【免费下载链接】mcp-server-guideA guide on how to use the Figma MCP server项目地址: https://gitcode.com/GitHub_Trending/mc/mcp-server-guide