实现 Codex + Figma 双向工作流实操

Figma 和 CodeX 打通的流程​

​

代码块​

Python

Figma（设计结构）​

↓​

MCP Server​

↓​

Codex 读取 Layer / Token / Component​

↓​

生成结构化代码​

↓​

调用 MCP 工具​

↓​

修改设计稿（命名 / 间距 / 变量）​

​

​

​

1 软件准备（一步一步）​

Pencil 扩展安装​

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

​

​

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

​

​

Generate Figma design​

​

代码块​

SQL

【全局基础规格】​

​

建立一个极高保真的响应式网页设计。核心原则： 绝对直角 (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，内部细分：​

​

​

​

​

Codex-Pencil ​

​

​

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

​

▫️

它会分两到三批把页面搭起来：​

​

Codex-Paper​

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

​

​

​

​

50%

​

​

​

​

50%

​

​

Codex-Figma​

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

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

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

​

​

​

​

51%

​

​

​

​

49%

​

​

左：Codex-Figma、右：Figma make​

Google Stitch​

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

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

​

​

​

​

48%

​

​

​

​

52%

​

​

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

2.2 Pull Figma content​

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

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

​

​

​

​

44%

​

​

​

​

56%

​

​

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

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

​