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

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

[图示已省略]

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

1 软件准备（一步一步）

提示

1️⃣ 安装 Node

安装 Node.js LTS。

2️⃣ 安装 VS Code

安装**🔗** Visual Studio Code。

3️⃣ 安装 CodeX

安装官网下载**🔗** CodeX。

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

[图示已省略]

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

例：添加 Paper MCP

选择“Streamable HTTP”选项卡，输入paper名称和**🔗**URL，然后单击“保存”。

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

[图示已省略]

Pencil 扩展安装

[图示已省略]

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

点击左下角"+" ，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，确保视觉呼吸感一致。

Codex-Pencil

这里就以 Pencil 为例，Figma 同理，都是自动新建，发送指令后不需要其他操作。

[图示已省略]

任务开始后，可以点击 CodeX 右上角，切换小窗，看它给你操作即可，中间会有一些MCP请求等，通过即可。

提示

它会分两到三批把页面搭起来： 先放整体结构和主要区块，再填卡片/头像图像与细节样式。现在先执行第一批骨架创建。可以看到它已经开始了，中间步骤我就跳过了。

Codex-Paper

用Paper的话要提前打开软件，新建好一个文件。

[图示已省略]

Codex-Figma

用 Figma 生成后它会自动帮你在新建文件和创建内容。

默认会打开网页版，可以选择整页或者局部进行保存，

打开后会直接在Figma里面看到生成的文件，有客户端会自动拉起。

[图示已省略]

左：Codex-Figma、右：Figma make

[图示已省略]

Google Stitch

又去对比了一下 Stitch ，在 Stitch 网页版生成的效果很细腻，局部放大了可以看出来，现在 Stitch 支持一键粘贴到 Figma。

选择生成的画板 - 导出选择 Figma - 点击转换 - 粘贴到 Figma 文件

[图示已省略]

这几个软件生成效果这里不展开讨论，大家根据自己需要和场景选择合适自己的就行，看你是想把它加在自己工作流的哪个阶段，适合自己最重要。

2.2 Pull Figma content

对生成的文件进行调整和修改，可以再反向发给 CodeX，让它根据新的设计图，更新代码。

选择修改后的画板 - 右键 - 复制/粘贴 - 复制到所选项的链接

[图示已省略]

回到CodeX，先在选择 MCP - **Pull Figma content ，再粘贴链接，**简单描述，不描述也可以，同一个session里面它会自动进行匹配和校对，然后修改，改完后让它给你生成一个本地的预览地址，就可以查看是否调整，再进行细节优化和调整。

📌 这样我们就可以基于运行中的产品界面来优化 UX，而不仅是静态 mockup。

[图示已省略]