AI+UI 实战：从绘图到代码的高质工作流

为何先出图能显著提升效果

当前 AI 前端开发中，首先生成图像再转化为代码或设计稿，是最高效且质量最优的路径。核心原因在于：

1. 图像模型在“审美表现”上远超文本模型

若直接指令 Codex 或 GPT 编写代码，结果往往“功能无误但外观平庸、缺乏创意或过于模板化”。

反观 GPT 的图像生成能力（Images 2.0），能直接呈现极具创意、精致且现代的 UI 布局、排版、视觉特效、光影质感及色彩搭配。这些要素仅靠纯文本提示词很难精准传达（特别是“氛围感”“冲击力”等抽象概念）。

2. 视觉作为“中间媒介”效率更高

图片提供了更精准的参照，Codex 可“看图说话”，直接复刻布局、间距与风格。此外，基于图片的迭代速度更快，通过描述修改代码的效率也显著提升。

具体实施步骤（实战演示）

以下将以【故宫藏品展示 APP】项目为例，完整演示该工作流。

1. GPT 生成图像

启动 GPT 并进入生图模式，输入如下提示词：

稍作等待，即可获取三张界面图，视觉水准直接超越 70 分：

当然，若对 GPT 生成的图像不满意，可在对话框中持续优化调整：

待图片效果满意后，将其下载至本地，并归入项目文件夹。

2. Codex 编写代码

备好图片与项目文件夹后，打开 Codex 并新建项目，选择前述文件夹：

随后即可在项目中指令 Codex 开始构建：

随即呈现第一版效果：

可观察到与目标图片仍有明显差距，需与 Codex 持续交流，引导其继续调整。

经过数轮对话打磨，还原度逐渐逼近：

此时仍存在较多瑕疵，主要因该界面装饰细节繁杂，Codex 难以完美处理。因此，下一步可将其导入 Figma 进行人工微调。

注：其实对于较简单的网站或 APP，至此阶段已能完全还原，无需额外人工调整。

3. Figma 人工精修

指令 Codex 将最新版设计发送至 Figma 画板（需预先配置 Figma MCP 链接）：

发送成功后，Codex 自动创建新 Figma 文件，将最新界面转化为设计稿，随即我们即可介入操作。经快速调整，还原度已接近可接受标准：

人工调整完毕后，可反向依据设计稿优化 Codex 生成的代码，最终直接提交代码即可。