---
description: "Codex 与 Figma MCP 案例，说明如何读取设计稿、理解布局与组件，并辅助前端实现或文档整理。"
---

::: tip 最后核对
公开资料最后核对日期：2026-06-29。本文参考 [Model Context Protocol](https://modelcontextprotocol.io/) 与 [Figma](https://www.figma.com/)。Figma MCP、Dev Mode、授权入口和可读取的设计信息会随 Figma 与 Codex 客户端更新变化，请以当前产品界面为准。
:::

# Codex × Figma MCP：让 AI 读懂你的设计稿

**Figma MCP** 能让 Codex 直接读取设计稿、截图分析节点、生成页面、修改组件、绘制流程图。安装之后，你只需要用自然语言下达设计需求，剩下的交给 Codex 去完成。

---

## 1. 安装

在 Codex 桌面 App 的插件市场搜索 **Figma**，点击安装。

安装后会跳转到浏览器页面完成授权（流程和 Notion MCP 类似，按提示操作即可）。

![figma-mcp-plugin-permissions](https://cdn.canghecode.com/codexguide/docs/images/figma-mcp-plugin-permissions.png)

---

## 2. 如何使用

新建对话，用 `@` 符号调用 Figma MCP，然后直接描述你的需求。

**示例一：生成流程图**

让它生成一个包含基本操作步骤的用户登录流程图：

![figma-mcp-generate-flowchart-prompt](https://cdn.canghecode.com/codexguide/docs/images/figma-mcp-generate-flowchart-prompt.png)

点击返回的链接，在浏览器里查看生成的登录注册流程图效果：

![figma-mcp-user-login-flowchart](https://cdn.canghecode.com/codexguide/docs/images/figma-mcp-user-login-flowchart.png)

**示例二：生成高保真 UI 设计图**

如果你觉得流程图太偏技术，可以让它设计产品功能架构图，或者生成海报式的高保真 UI。直接发提示词即可：

![figma-mcp-high-fidelity-ui-prompt](https://cdn.canghecode.com/codexguide/docs/images/figma-mcp-high-fidelity-ui-prompt.png)

点击链接查看效果，整体呈现非常不错：

![figma-mcp-ai-product-ui-design](https://cdn.canghecode.com/codexguide/docs/images/figma-mcp-ai-product-ui-design.png)

---

## 总结

Figma MCP 特别适合有设计需求的朋友。在 Codex 里装上这个插件，就可以用对话的方式完成以前需要专业设计技能才能做的事情。

当画图的门槛被 AI 拉低之后，我们真正需要培养的能力是：

1. **产品思维** — 知道要做什么
2. **业务理解** — 知道为什么这样做
3. **审美标准** — 知道什么是好的

让 Codex 当执行者，借助 Figma MCP 去放大你的想法，设计出属于自己的作品。