多模态模型

零帧起手 Codex × Figma 双向工作流实操

2026 年 3 月 5 日

CodeX与Figma双向工作流实操指南，手把手带你突破工具链整合瓶颈。核心内容： 1. 软件安装与配置全流程详解 2. MCP服务器连接与多工具集成技巧 3. 从设计到代码生成的完整案例演示

前几天我发了一篇关于 Figma 着急了！Codex 和 Figma 双向构建前端 UIAgent的完美融合" data-itemshowtype="0" linktype="text" data-linktype="2">取代Figma的新神器？Paper：设计、代码与AI Agent的完美融合的文章。

很多人小伙伴忙于公司项目，没有及时上手体验，说卡在这些地方：

MCP 怎么添加
Figma 怎么连 CodeX
为什么我生成不了代码
CodeX 怎么让 Figma、Pencil 和 Paper 自动画图

所以这篇文章不讲其他，只按个人操作经验给大家提供一下大致步骤，其他软件后面感兴趣的话也会写一下，现在主要是 CodeX 每周都有免费额度，做简单的几个项目完全够用，也可以用来摸索，等熟悉后再看自己是否需要购买（PS：要买可以找我，百人拼车群🫣）。

全程需要掌握魔法，这个自己解决

目标只有一个：

带你从 0 到 1 跑通 Codex × Figma 的双向工作流。

Figma 和 CodeX 打通的流程，现在是：

Figma（设计结构）   ↓MCP Server   ↓Codex 读取 Layer / Token / Component   ↓生成结构化代码   ↓调用 MCP 工具   ↓修改设计稿（命名 / 间距 / 变量）

软件准备（一步一步）

1️⃣ 安装 Node

安装 Node.js LTS。可以先不装，有条件就自己搜下装

2️⃣ 安装 VS Code

安装 Visual Studio Code。https://code.visualstudio.com/

3️⃣ 安装 CodeX

安装官网下载 CodeX。https://openai.com/zh-Hans-CN/codex/

当然嫌麻烦的话，你直接先安装 CodeX，缺什么它会在使用过程中告诉你，你再按它给你的步骤装也一样。

安装好后进来首页，功能不多，自己大致看下就了解了，新版 CodeX 内置Figma MCP 了，无需自己再来回复制修改。

点击左下角设置-设置-MCP 服务器，可以看到推荐服务器里面就有 Figma，没下载的点下载即可。

如果你同时也想安装 Pencil、Paper 的 MCP，直接和它对话，或者手动点击添加。Pencil 的话建议直接在 VS Code 里面添加扩展，不下载客户端。

例：添加 Paper MCP

选择“Streamable HTTP”选项卡，输入paper名称和http://127.0.0.1:29979/mcpURL，然后单击“保存”。

连接成功后，您应该会在可用 MCP 列表中看到 Paper MCP 服务器。



Pencil 扩展安装

打开VS Code 选择侧边栏扩展 - 搜索pencil名称 - 安装扩展并登录即可。到此软件基本都安装好了。

案例测试（跑通流程）

点击左下角"+" ，MCP 快捷方式（当然你直接在对话框输入让它调 Figma MCP 也可以，但是要输入完整字段），当前 Figma MCP 有两个：

Pull Figma content：复制Figma Frame链接，它帮你转成代码
Generate Figma design：直接发指令，它帮你在Figma新建文件，画好界面，同时生成对应的代码。

我们先来试试用 CodeX 生成设计稿

2.1 Generate Figma design

这里我们先选择 Generate Figma Design，然后写你要生成的提示词，我这里也大概写了一个网页的提示词仅供参考，你可以先写的简单点，我是测试复制提示它能写到什么程度。

【全局基础规格】建立一个极高保真的响应式网页设计。核心原则： 绝对直角 (Border-radius: 0px)、1px 极细网格线 (#E2E8F0) 贯穿全站。所有区块必须精准对齐 4 栏或 8 栏网格。全站背景为纯白 (#FFFFFF)，仅在首屏使用局部氛围光晕。
【SECTION 1: 头部与氛围容器 (Hero & Header)】布局： 顶部 Navbar 保持 80px 高度，White/60 背景 + Backdrop-blur-xl，右侧放置直角国际橘 (#FF5F38) 按钮。局部背景： 在 Hero Section 内部最底层插入一个绝对定位层。使用两个径向渐变：左侧为极其微弱的暖白，右侧中心为 浅橘色 (#FFF7ED)。设置 Filter: blur(160px)，透明度 35%。确保渐变在 Hero 底部通过渐变遮罩完全消失，不溢出到下方。排版： 标题使用 900 字重黑体，全大写，行高 0.9，内容为 "DESIGNING INTELLIGENT PRODUCT ENGINE"。下方搭配一段 14px 的精密业务描述。
【SECTION 2: 交互排版样张区 (Specimen Bento Gallery)】创建一个 4 栏等高的复合网格区块，高度固定为 600px，内部细分：Column 1 (Typo): 背景为 White/80。展示大写的 "AaGg"、标题层级标注（Display/72px/900）、0-9 等宽字符集、以及一段两端对齐的微型说明文案。Column 2 (Actions & Palette): 上半部展示 UI 组件（国际橘色块主按钮、线框搜索框、带呼吸灯的状态标签）；下半部展示 2x3 的 Palette 网格，包含 #FF5F38、#0F172A 及灰阶色标。Column 3 (Hierarchy): 展示一个文件夹结构的树状图，标注节点：Project_Core、Data_Architecture、Efficiency_Logic。Column 4 (Status): 极小的 Monospace 字体列表，展示实时参数：SYSTEM_ONLINE、VER_2.4.0、LATENCY: 12ms。
【SECTION 3: 核心项目矩阵 (Portfolio Grid)】采用 1:1 或 4:3 的网格展示 5 个战略项目。每张图片需处理为 高对比度黑白灰阶。卡片左上角标注 01. 至 05. 的 Monospace 编号：某某数据平台： 标注 [Unified Interaction Framework]。数字孪生项目： 标注 [3D High-Precision Rendering]。品牌运营项目： 标注 [Info Architecture & De-noising]。动效视觉项目： 标注 [Dynamic Visual & Brand Innovation]。可视化探索项目： 标注 [Technical Aesthetic Standards]。
【SECTION 4: 效能驱动指标 (Efficiency Metrics)】设计一个横向全宽的 4 列数据带。每列包含一个巨大的橘色数字（如 +80%）和微小的 Monospace 说明。层级： 洞察层 (Insight)、探索层 (Explore)、交付层 (Delivery)、智能链路 (Vibecoding)。修饰： 每个单元格边角添加十字对齐线（Crosshair）图标。
【SECTION 5: 信任背书走马灯 (Trust Marquee)】在页脚上方添加一个无缝滚动的 Logos 横条。所有 Logo 处理为 40% 透明度的灰色。背景为极其浅淡的橘色底块 (#FFFBF5)，高度 120px，直角边框。
【全站技术细节修正】字体： 标题 Inter Variable，辅助信息强制使用 10px Monospace (等宽字体)，Tracking 0.2em。点缀色： 唯一强调色为 国际橘 (#FF5F38)，严禁出现蓝色。边距： 所有 Bento 单元格内部 Padding 统一为 40px，确保视觉呼吸感一致。