CodeX 协同交付实验: 从设计稿到可运行界面
一个关于设计交付流程重构的实验项目。我尝试将 Figma 设计稿、Codex、Figma MCP、本地代码仓库和模拟器串联起来，让设计师可以基于真实设计稿直接推进界面还原、自测和 UI 验收，减少传统「设计 - 开发 - 设计走查 - 开发返工 - 上线」流程中的反复沟通与还原问题。
Section 1
业务背景
2026.05
传统流程设计交付效率较低
传统设计交付中，设计还原问题往往要等开发完成后才集中暴露，导致设计走查、开发修复和复验反复发生，整体交付链路被拉长。
Section 2
探索目标
验证设计交付提效方式
本次尝试主要为了验证设计师是否可以借助 Codex，把设计稿从静态文件推进到可运行界面，并在本地模拟器中完成初步 UI 验收。
Section 3
流程探索
步骤1: Codex通过Figma Mcp连接设计源
首先需要让 Codex 能够读取设计稿，而不是只依赖截图或口头描述。通过 Figma MCP 将 Figma 与 Codex 连接，使 Codex 可以基于具体设计节点理解页面结构、视觉层级和组件信息
步骤2: 将项目仓库代码下载到本地运行
在连接设计稿之后，Codex 需要进入真实代码仓库，识别页面对应的文件结构、已有组件和资源路径。
步骤3: 生成UI还原代码
将设计稿喂给Codex后，Codex进行本地代码修改，代码完成后，即可运行本地模拟器，查看真实代码还原的UI样式。
步骤4: 本地模拟器运行代码，UI自测
将设计稿喂给Codex后，Codex进行本地代码修改，代码完成后，即可运行本地模拟器，查看真实代码还原的UI样式。
步骤5: 设计反馈迭代
在模拟器中看到真实效果后，以设计走查的方式提出问题，例如字号、按钮尺寸、图标方向、边距位置等。Codex 根据反馈继续修改代码并重新构建。
步骤6：分支交付与设计验证
在完成 UI 还原和本地自测后，下一步是将修改分支交给开发同学检查。开发不需要从头处理大量视觉问题，而是重点检查代码逻辑、工程规范、性能风险和是否可以合并到正式仓库。
Section 4
实验回顾
实验反思
这次探索让我看到，AI 能够提升设计还原与走查前置的效率，但它并不是独立完成交付的工具。流程能否真正提效，仍取决于设计输入是否清晰、修改指令是否明确，以及开发 Review 是否能继续把控工程质量。
当前仍存在部分问题和一些限制
在初步验证中，Codex 已经可以帮助完成部分 UI 还原和本地自测，但在设计稿理解、复杂业务逻辑判断、生成代码质量和效率量化上，仍需要设计师与开发共同把关。
connect me via email :)
imZee@qq.com
© 2026 Zee. All rights reserved. / Last updated: 03.2026
|