推荐语
CodeX与Figma双向工作流实操指南，手把手带你突破工具链整合瓶颈。
核心内容：
1. 软件安装与配置全流程详解
2. MCP服务器连接与多工具集成技巧
3. 从设计到代码生成的完整案例演示
杨芳贤
53AI创始人/腾讯云(TVP)最具价值专家
前几天我发了一篇关于 Figma 着急了！Codex 和 Figma 双向构建前端 UIAgent的完美融合" data-itemshowtype="0" linktype="text" data-linktype="2">取代Figma的新神器？Paper：设计、代码与AI Agent的完美融合的文章。
很多人小伙伴忙于公司项目，没有及时上手体验，说卡在这些地方：
所以这篇文章不讲其他，只按个人操作经验给大家提供一下大致步骤，其他软件后面感兴趣的话也会写一下，现在主要是 CodeX 每周都有免费额度，做简单的几个项目完全够用，也可以用来摸索，等熟悉后再看自己是否需要购买（PS：要买可以找我，百人拼车群🫣）。
全程需要掌握魔法，这个自己解决
目标只有一个：
带你从 0 到 1 跑通 Codex × Figma 的双向工作流。
Figma 和 CodeX 打通的流程，现在是：
Figma（设计结构） ↓MCP Server ↓Codex 读取 Layer / Token / Component ↓生成结构化代码 ↓调用 MCP 工具 ↓修改设计稿（命名 / 间距 / 变量）
1
软件准备（一步一步）
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 服务器。
打开VS Code 选择侧边栏扩展 - 搜索pencil名称 - 安装扩展并登录即可。到此软件基本都安装好了。
2
案例测试（跑通流程）
点击左下角"+" ，MCP 快捷方式（当然你直接在对话框输入让它调 Figma MCP 也可以，但是要输入完整字段 ），当前 Figma MCP 有两个：
我们先来试试用 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，确保视觉呼吸感一致。
Codex-Pencil
我这里就以 Pencil 为例，Figma 同理，都是自动给你新建，发送指令后，你不需要其他操作。对应的软件提前打开，不打开任务中暂停，它会提示你去打开软件，回复后再继续任务。
任务开始后，可以点击 CodeX 右上角，切换小窗，看它给你操作即可，中间会有一些MCP请求等，通过即可。
它会分两到三批把页面搭起来：先放整体结构和主要区块，再填卡片/头像图像与细节样式。现在先执行第一批骨架创建。可以看到它已经开始了，中间步骤我就跳过了。
生成的效果就不放了，得让你们自己去试了！
🫣 实际是我的魔方不稳定中间断了两次，我就去调别的MCP了。
Codex-Paper
于是我转头就去调用 Paper ，如果要调用 Paper 要把 Paper MCP 写完整，否则有可能无法调用，转而自行调用 Figma 或其他可用 MCP ，下面是 Paper生成的效果。
用Paper的话要提前打开软件，新建好一个文件。
整体来说效果不错，跟预期的在 AIStudio 生成的效果差了一点，图片也没有填充，但是整体布局和内容是没有缺失的，但是细节的边框写和部分icon没有生成出来。
Codex-Figma
用 Figma 生成后它会自动帮你在新建文件和创建内容。
默认会打开网页版，可以选择整页或者局部进行保存，
打开后会直接在Figma里面看到生成的文件，有客户端会自动拉起。
生成的界面效果比较好，细节相比处理比较到位，如局部的小icon，边框线等都没有错位，同时我也在Figma make试了一下，如下图：
左：Codex-Figma、右：Figma make
Make 生成的效果相比较而言就比较粗糙一点，但是内容是完整的，布局也都是正确的，只是细节像一个初级设计师。
Google Stitch
又去对比了一下 Stitch ，在 Stitch 网页版生成的效果很细腻，局部放大了可以看出来，现在 Stitch 支持一键粘贴到 Figma。
选择生成的画板 - 导出选择 Figma - 点击转换 - 粘贴到 Figma 文件
这几个软件生成效果这里不展开讨论，大家根据自己需要和场景选择合适自己的就行，看你是想把它加在自己工作流的哪个阶段，适合自己最重要。
2.2 Pull Figma content
对生成的文件进行调整和修改，可以再反向发给 CodeX，让它根据新的设计图，更新代码。
选择修改后的画板 - 右键 - 复制/粘贴 - 复制到所选项的链接
回到CodeX，先在选择 MCP - Pull Figma content ，再粘贴链接，简单描述，不描述也可以，同一个session里面它会自动进行匹配和校对，然后修改，改完后让它给你生成一个本地的预览地址，就可以查看是否调整，再进行细节优化和调整。
📌 这样我们就可以基于运行中的产品界面来优化 UX，而不仅是静态 mockup。
🎉 到此基本流程已完成。
当然文中涉及的案例、软件、模型都是单向的，只展示基础流程，至于不同模型（CC、GLM......）的效果，不同复杂程度的项目的效果，期待大家尝试后反馈~
粤ICP备14082021号
免费POC，
零成本试错
