Vibe Coding 番外篇｜MCP：让 AI 直接读懂你的设计稿

原本第四篇要写完整工作流，但发现一个前置问题没解决——很多人还没把 MCP 跑通。所以这篇插播，专门讲 MCP 的配置。技术向，讲完概念直接上手。

MCP 是什么

MCP（Model Context Protocol），Anthropic 2024 年 11 月发布的开放协议，用于标准化 AI 模型与外部工具之间的通信。OpenAI 和 Google 随后采纳，现在是事实标准。

它解决的问题很具体：以前每个 AI 工具连每个外部服务都要写独立的集成代码，N 个 AI × M 个工具就是 N×M 个连接器。MCP 让每个 AI 客户端实现一次协议、每个工具实现一次 Server，变成 N+M。

架构三个角色：

Host —— AI 应用本身（Claude Code、Cursor、Codex）

Client —— Host 内部与 Server 通信的模块

Server —— 外部服务暴露的端点（比如 Figma MCP Server）

实际发生的事：你在 Claude Code 里贴一个 Figma 链接说"帮我实现这个设计"，AI 通过 MCP 调用 Figma Server 的 get_design_context 工具，拿回结构化的布局、颜色、字体、组件层级数据，然后基于这些数据写代码。拿到的是数据，不是截图。

MCP Server 暴露三类东西：Tools（可调用的函数）、Resources（可读取的数据）、Prompts（预设任务模板）。

Visual Guide to Model Context Protocol (MCP)

Figma MCP Server 两种模式

远程模式

端点：https://mcp.figma.com/mcp

基于链接。复制 Figma URL 发给 AI，Server 通过 URL 中的 node-id 定位设计节点。OAuth 认证。适合浏览器版 Figma。

独占能力：generate_figma_design——把本地运行的 Web UI 反向捕获到 Figma 画布（目前仅 Claude Code 和 Codex 支持）。

桌面模式

地址：http://127.0.0.1:3845/mcp

基于选区。在 Figma 桌面端选中 Frame，AI 直接读取选区，不用复制链接。

启用：Figma 桌面端 → Dev Mode → Inspect 面板 → MCP Server → Enable desktop MCP server。

两种可以同时配，不冲突。我日常用桌面模式居多，选区操作更快。

配置：Cursor

打开 Settings → Cursor Settings → MCP → "+ Add new global MCP server"。

远程模式：

{  "mcpServers": {    "figma": {      "url": "<https://mcp.figma.com/mcp&gt;"    }  }}

桌面模式：

{  "mcpServers": {    "figma-desktop": {      "url": "<http://127.0.0.1:3845/mcp>"    }  }}

保存 → Connect → 完成 OAuth → 状态 enabled。

使用：Figma 里右键 Frame → Copy as → Copy link to selection → 粘贴到 Agent Chat + Prompt。

配置：Claude Code

远程模式：

claude mcp add --transport http figma-remote-mcp <https://mcp.figma.com/mcp>

重启后 /mcp 检查状态，disconnected 就按 Enter 跳浏览器做 OAuth。

桌面模式，编辑项目目录下 .mcp.json：

{  "mcpServers": {    "figma-desktop": {      "url": "<http://127.0.0.1:3845/mcp>"    }  }}

推荐做法——装官方 Plugin，一步到位：

claude plugin install figma@claude-plugins-official

这个 Plugin 包含 MCP 配置 + Agent Skills（设计稿转代码、Code Connect 映射、设计系统规则生成）。后面讲 Skills 时会展开。

Claude Code 的反向能力：在终端里说 "Start a local server for my app and capture the UI in a new Figma file"，可以把本地页面捕获回 Figma。代码先行、设计后补的流程用得上。

配置：Codex

App：左上角 Skills → Figma "+" → Settings → MCP servers → Figma → Install and authenticate。

CLI：

codex mcp add figma --url <https://mcp.figma.com/mcp>

配置存在 ~/.codex/config.toml（全局）或项目下 .codex/config.toml。CLI 和 IDE 扩展共享配置。

避坑

代理环境：远程模式要能访问 mcp.figma.com。桌面模式走 localhost，但如果代理工具开了全局模式，127.0.0.1 的请求也可能被转发。把 127.0.0.1 和 localhost 加进直连规则。我在 Stash 上栽过这个坑，排查了很久。

Rate Limit：Starter 计划 / View / Collab 席位每月只有 6 次工具调用，只够试水。Professional 以上的 Dev/Full 席位才有正常频率。

Figma 端的设计规范直接影响代码质量：

复用元素必须是 Component，不然 AI 生成的是一堆散装 div
Auto Layout 规范使用，AI 会转成 Flexbox；全是绝对定位的 Frame 就只能生成绝对定位的代码
生成前先 Resize Frame 测试响应式行为
有设计系统的项目用 Code Connect 映射 Figma 组件到代码组件，AI 会直接引用而非重写

Prompt 至少明确：框架（React/Vue/SwiftUI）、样式方案（Tailwind/UnoCSS）、文件路径、新建还是改已有文件。

How to Add a New MCP Server to Cursor | Snyk

Skills 是什么

MCP 解决连接——AI 能拿到设计数据了。Skills 解决流程——拿到数据后怎么用。

Skills 是一个包含 SKILL.md 指令文件的目录包，可以附带脚本和参考资源。AI 接到任务时先读元数据判断是否需要某个 Skill，需要就加载完整指令，按定义好的工作流执行。

简单说：MCP 是工具箱，Skills 是操作手册。MCP 提供原子能力（"获取设计数据""写入文件"），Skills 编排工作流（"先提取 Token → 生成变量文件 → 按组件拆分代码"）。两者互补。

三个 IDE 的叫法不同，本质一样：

Claude Code —— Skills（通过 Plugin 系统安装和分发，Plugin 是容器，Skills 是内容）

Codex —— Agent Skills（SKILL.md + 脚本 + agents/openai.yaml）

Cursor —— Rules（.cursor/rules/ 目录下的指令文件）

Skills 配置

Claude Code

# Figma 官方 Plugin（含 MCP + Skills）claude plugin install figma@claude-plugins-official# 前端设计质量 Plugin（改善 AI 生成 UI 的视觉层级）claude plugin install frontend-design@claude-plugins-official

Figma Plugin 内置的 Skills：

implement-design
：设计稿转代码
create-design-system-rules
：分析 Figma 设计系统生成项目规则文件
code-connect
：Figma 组件与代码组件的映射

自定义 Skill 放在项目目录 .claude/skills/ 下，每个子目录一个 SKILL.md。

Codex

自定义 Skill 目录结构：

my-skill/├── SKILL.md          # 必需├── scripts/          # 可选├── references/       # 可选└── agents/    └── openai.yaml   # 可选

SKILL.md 示例：

---name: design-to-reactdescription: Convert Figma designs to React components with token extraction---## Instructions1. Use Figma MCP `get_design_context` to retrieve design data2. Extract color, typography, and spacing tokens3. Generate tokens.ts with all design variables4. Create React components using extracted tokens5. Ensure responsive layout matching original design