跳到主要内容
NOWUPDATING 时在科技
开始咨询
返回博客

用 Codex 设计网页，为什么总是在反复修改？

用 Codex 反复修改网页，页面仍然风格不稳、沟通成本很高？这篇网页设计工作流复盘对比直接对话、设计 Skill 和 Canvas 协作，说明怎样先定规范，再把设计与代码执行分开。

最近花了几天时间，一直在研究一个问题：

如何用 Codex 更高效地完成网页设计？

这应该也是很多人在用 AI 做网页时都会遇到的共同难点：

页面能生成出来，但很难一次达到想要的效果。

这两天，我主要尝试了三种方法。

1. 只靠和 Codex 反复对话，效率很低

我最开始用的方法没有任何策略，就是直接和 Codex 不停 chat。

页面生成后，哪里不满意就继续说：

  • 这里调整一下；

  • 那里重新排版；

  • 某个模块不够好看；

  • 再通过 Annotation 勾选评论，让 Codex 逐个修改。

这个方法看起来最直接，但实际效果并不好。

问题在于，每次修改都只是在修局部。

而网页设计不是一个个局部拼起来的，它需要整体的视觉风格、布局规则、内容层级和组件一致性。

如果前面没有把这些规则定义好，后面就只能不断靠对话修正。

结果就是：

  • 修改很多轮；

  • 消耗很多额度；

  • 页面还是很难达到最终效果。

2. 通过 Skill 纠正设计，能改善，但依然不够轻

后来我尝试了网上推荐的主流做法

给 Codex 增加设计相关的 Skill或者MCP

例如：

  • Product Creation（Codex 自带）；

  • Claude Frontend Design Skill；

  • 其他设计相关的 Skill。

这个方法是有效的。

它可以让 Codex 在设计上更接近你想要的方向，通过 Skill 不断纠正，页面可以做到一个初步可用的效果。

但问题是，它依然没有解决核心问题。

本质上，你还是在不断通过规则和反馈，让 Codex 理解你想要的网页效果。

它能解决一部分问题，但并不能替代前期的网站设计规范。

3. 我现在用的方法：先用 Gemini Canvas 完成设计，再交给 Codex 执行

目前我的流程是先用 Gemini Canvas。

整个过程是：

  1. 先规划网页内容；

  2. 把内容放进 Gemini Canvas；

  3. 根据想要的效果调整页面设计；

  4. 确认整体效果后导出 HTML；

  5. 再交给 Codex 去执行到项目里。

之所以选择 Gemini Canvas，并不是因为它代码生成能力更强。

而是它更适合完成页面设计这件事。

在开始之前，你可以先告诉它整个网站的设计规范，例如：

  • 页面风格；

  • 配色方案；

  • 字体；

  • 按钮样式；

  • 卡片样式；

  • 间距规则。

它会尽可能按照这些规范去完成整个页面，而不是每个模块各自发挥。

如果你看到一个喜欢的网页，也可以直接把页面发给 Gemini Canvas。

它会参考这个设计风格，对整个页面进行调整，而不是只修改某一个局部。

这一点对网页设计阶段帮助很大。

因为它能够从整体视觉的角度去优化页面，在一定程度上弥补了 Codex 在设计阶段容易出现风格不统一的问题。

另外，我完整试下来之后感觉：

用哪个 AI 模型做网页设计，本质差别没有想象中那么大。

真正影响效果的，还是：

  • 前期有没有清晰的设计规范；

  • 后期有没有人去判断页面效果。

但如果目标是尽快达到自己想要的效果，目前我个人还是更倾向于 Gemini Canvas。

一方面，它输出的页面整体比较规范。

另一方面，Gemini Pro 的额度相对宽松，更适合在设计阶段反复调整。

等整体设计确认以后，再导出 HTML，交给 Codex 去接入项目。

这样，页面设计和代码实现就分开了，整个流程也会顺畅很多。

4. 这两天实践下来，比较能输出结果的流程

我也看了一些设计师和开发者使用 Codex 做网页的流程，结合自己这两天的尝试，目前觉得下面这个流程，无论从费用，还是结果侧，都可以借鉴。

第一步：先定义网站的设计规范

这一部分可以写在 Agent.md，也可以是单独的设计规范文件。

例如：

  • 字体；

  • 页面风格；

  • 配色方案；

  • Button；

  • Card；

  • 间距；

  • 模块结构；

  • Don’t Rules。

这一步很重要。

因为后面无论是用 Codex、Claude，还是 Gemini，整体页面的设计风格都要受到这些规则的约束。

第二步：利用 Skill、MCP 或 Canvas 做规范化输出

有了设计规范之后，再利用 Skill、MCP 或 Canvas 去做页面输出。

理论上，这一步可以依赖现成的 Skill。

但我实际尝试下来发现，网上很多现成的设计 Skill，效果并没有想象中那么好。

所以现阶段，可能还是需要先参考别人已经验证过的方法，再逐渐形成适合自己项目的一套流程。

第三步：基于当前版本持续调整

到了这一步，还是需要不断调试。

例如：

  • 页面层级；

  • 模块结构；

  • 图片和视觉元素；

  • 留白；

  • 页面整体氛围。

这些部分，我暂时还没有找到完全交给 AI 的方法。

这也是为什么，我现在更倾向于把 AI 当作一个快速生成和执行的工具，而不是完全替代网页设计本身。

以上是我这两天完整尝试之后，目前实践下来效率比较高的一种方式。后面如果有新的尝试，我也会继续更新。

相关阅读

需要进一步判断？

如果你正在评估 AI 建站、WordPress、网页实现或后续技术维护，可以预约 Django Wong 做技术咨询。