我们如何逃出 AI 前端的紫色囚笼
欢迎来到 YouWare 技术博客，在这里我们坦白罪行，也分享秘密。
我在十里之外就能嗅出 AI 生成的前端
这不是玩笑，而是一声呐喊。我们都见过那铺天盖地的紫色与靛蓝渐变，早已把整个互联网淹没。
https://x.com/IamKyros69/status/1975153164300263533
每个人都在经历「紫色渐变疲劳症」。而我们知道该怪谁。五年前，Tailwind CSS 的作者——这个几乎撑起现代 AI 网页的框架——做出了一个命运性的决定：他把默认 UI 颜色设置成了 bg-indigo-500。这个当时看似无关紧要的选择，在他浑然不知的情况下，定义了整整一代 AI 的审美风格。
https://x.com/adamwathan/status/1953510802159219096
然后是 Anthropic，他们把这种紫色美学发扬光大。他们的旗舰模型 Claude Sonnet 似乎与这种颜色有着某种灵魂深处的羁绊。无论你的设计提示词写得多详细，无论你怎么苦苦哀求，它端上来的永远是又一个紫色渐变网站。
在 YouWare，我们大量使用 Sonnet，用得太多，以至于我们自己的网站开始像是一首献给紫色的颂歌。这就是我们如何挣脱枷锁的故事。
"Boost" 按钮——治标不治本的创可贴
我们的第一个逃脱计划，是一个叫做「Boost」的功能。
AI 智能体的系统提示词又长又讲究，你不能简单地告诉它「做得好看一点」然后期待一件艺术品。于是，我们打造了一个专属的「Boost」模式。当用户点击它时，智能体会切换到一套精心筛选的现代设计规范，给项目带来立竿见影的审美升级——最重要的是——一场驱除紫色瘟疫的仪式。
Boost 是个好功能，尤其对全新项目效果惊人。但随着用户使用，我们发现了两个问题：
- 改动幅度太大： 点击「Boost」就像一次性重新装修家里所有的房间，需要极大的信任感。由于用户无法预知结果，面对已经投入了心血的项目，很多人都不敢轻易按下这个按钮。
- 可能带来混乱： 对于结构更复杂的网站，全套设计系统的大换血可能会掀起一番动荡。虽然不会导致功能崩溃，但可能引入意料之外的布局偏移或样式不一致，需要手动收拾残局。
Boost 至今仍是我们工具箱里的利器，非常适合用非紫色的强势美学来启动新项目。但它也给了我们一个关键教训：仅靠提示词和后期处理能做的事是有限的。创可贴能盖住伤口，却治不好病。真正的战役，必须在底层模型上打响。
无法评估，便无法改进
但怎么在模型层面打这场仗？无法衡量的东西，就无法修复。要找到一个不会默认使用紫色渐变的更优底层模型，我们需要一套严谨的方法来客观比较各个模型。我们需要一个系统性的评估框架。
在 YouWare，我们对评估这件事怀有一种近乎崇敬的态度。我们构建了一套供内部使用的自动化评估平台，不算花哨，但很管用。
每当新模型发布，只需点击几下，就能针对它跑完全套测试用例。我们采用「以 LLM 作为裁判」的技术来打分，并建立了自己的内部排行榜，有点像 LMArena 那样。
为了解决 AI 裁判难以避免的偏见问题，我们也会亲自标注数据，让系统保持诚实。这套努力给了我们一个强大的自动化评估系统，覆盖网站生成的方方面面，并细分为以下维度：
- 视觉效果： 比如，它的设计风格像 2025 年还是 2015 年？
- 功能完整性： 比如，「联系我们」按钮能用吗？
- 需求还原度： 比如，系统还记得你要求的是「极简主义、粗野派风格的猫咪咖啡厅设计」吗？
很长一段时间里，Claude 都是我们内部榜单的霸主。
它的设计完整，而且拥有自己一套自洽的设计系统（虽然是紫色的），这是大多数其他模型所没有的。
新希望（与新麻烦）
2025 年 8 月 7 日，GPT-5 发布了。
我们立刻开始测试，结果却喜忧参半。它是第一个能真正接近 Sonnet 质量水准的模型。但那只是 gpt-5-high 版本。想象一下把游戏画质调到「极致」——画面令人窒息，但帧率直线下坠。它实在是太慢了。
Claude Sonnet：生成一个网站需要 5-6 分钟。 GPT-5-High：将近 20 分钟。
二十分钟，在互联网时代是一个永恒。这让 GPT-5-High 完全无法实用化。但到了九月，一个新的挑战者登场了：GPT-5-Codex。
全公司第一次在 CLI 里用上「Codex」模型时，就立刻爱上了它。它快、聪明，还能动态调整推理深度。但那时还没有 API。于是我们等待。一周后，API 上线，我们跑完了评估。
当结果出来时，我们以为系统坏掉了。史上第一次，有模型将 Claude 从王座上拉了下来。它更快、更便宜，最重要的是，它的视觉评分把 Sonnet 打得落花流水。
为了确认，我们把结果并排放在一起逐一手动复核。当时是晚上十点，办公室里此起彼伏地响着「哇哦」和「不可能吧」。Codex 生成的网站拥有现代、高端、品牌感优先的设计，看起来像出自人类之手。第二天，我们就把 Codex 推上了线上环境。紫色的统治，终于画上了句点。
最后一公里，总是最奇怪的
所以，我们迎来了大团圆结局？先别急。
Codex 是个天才，但它是个怪异的、迷幻风格的天才。X（前 Twitter）上的人们似乎深有同感。
https://x.com/willccbb/status/1973178973027967132
这是一个经过大量强化学习调优的模型，在编码方面登峰造极，但在其他方面却表现平平。
它调用工具的方式很奇怪。给它一个工具，它会找到最出人意料的使用方式。我们曾见过它试图用网页浏览工具向 Node.js 官方文档发起 HTTP 请求。
它对任何事都想太多。问它一个难题，它可能会花上一个小时把你项目里的每一个文件都翻一遍，才给你答案。
它会随机开始说西班牙语。这是最诡异的 bug。用户用英语输入，Codex 却用流利的西班牙语回复。我们为此排查了好几周。原因是什么？我们有一个内部工具命名为 todo_write。「Todo」在西班牙语里是「所有」的意思。模型被这个工具名搞混了。我们把它改成 to_do_write，问题就此消失。
在 GPT 眼中，'todo' 是一个单词，'to-do' 才是两个词。
正因为 Codex 既强大又古怪，我们不得不重新设计整套提示词和工具系统来配合它。OpenAI 的 GPT-5-Codex 提示词指南是救命稻草，它反复强调：Codex 并不是其他模型的直接替代品。
紫色之后的生活
经过数周的艰苦努力，我们针对 Codex 完成了全系统优化，在保持性能的同时，将生成时间缩短了 50%，成本降低了 70%。
这是一段漫长而奇异的旅程，但一切都值得。现在，我们的用户只需花几分钱，就能得到一个顶级的、非紫色设计的网站。我们认为，这意义重大。
