Claude Code 与 Codex 设计对比测试

# 我对比测试了 Claude Code 与 Codex 的设计能力，结果差距悬殊。

我向 Claude Code 和 Codex 提供了相同的提示词、品牌指南、文案、Logo 及源数据，让它们各自构建八个网站。

随后我并排审查了所有结果，并记录了每次构建背后涉及的代理数量、耗时、输出 Token 数以及估算的 API 费用。

在主观设计评分中，Codex 赢得了大多数开放式轮次，但我撰写提示词的方式会影响双方差距的大小。

**简要结论**

→ Codex 赢得六轮开放式设计中的五轮，Claude Code 赢得一轮。

→ Codex 使用了九个代理，约耗时五小时；Claude Code 使用了 25 个代理，约耗时 14 小时。

→ Codex 约使用了 550,000 个输出 Token；Claude Code 使用了近三百万个。

→ 等效 API 费用：Codex 约 100 美元，Claude Code 约 444 美元。

→ 当我详细指定几乎所有设计决策后，两者的输出结果几乎相同。

## **测试设置**

我希望尽可能消除变量干扰。

前五次构建中，两款工具收到了相同的业务概念、文案、Logo、品牌指南和网站设计技能说明。

Claude Code 运行的是 Opus 5，Codex 运行的是 GPT-5.6 Sol。

响应式表现也是测试内容之一，因为一个网站在全宽下可能看起来很好，但在窗口缩小时就会崩溃。

我对体验进行了主观评判，同时也记录了幕后发生的情况：

→ 代理数量

→ 构建耗时

→ 输出 Token 数

→ 估算 API 费用

设计品味因人而异，时间、Token 和费用则为比较提供了另一个维度。

## **五组正面对决：落地页**

## **1. Bowl and Bloom**

Bowl and Bloom 是一家产后送餐业务。

两个版本使用了相同的配色、故事、四种核心口味和关怀礼盒概念，但传达产品信息的方式截然不同。

Claude Code 以大量文字开场，将页面打造成了章节式叙事。

Codex 将产品图片置于首位，添加了清晰的导航和行动号召按钮，并使用了带有横向滚动区域的进度指示器。

Codex 版本让用户在页面加载时就能更快理解产品。

两款工具都构建了关怀礼盒配置器。

Claude Code 在半屏视图下存在布局问题，Codex 对较小视口的处理更好，尽管其已选数量未能正确更新可见的碗数显示。

此轮仍由 Codex 胜出。

→ Claude Code：四个子代理，约两小时，近 500,000 个输出 Token，约 53 美元

→ Codex：一个代理，约 50 分钟，约 100,000 个输出 Token，略低于 20 美元

## **2. MinuteCraft**

MinuteCraft 是一款 AI 会议记录工具，可将通话内容转化为决策和行动项。

两个版本都更像软件仪表盘，而非为转化率而设计的落地页。

Claude Code 让问题更加严重，堆砌了更多文案、更多步骤和更多技术风格的区块。

Codex 将来源、摘要、转录、笔记和分配的行动项整理得更为清晰。

在二级页面上，差距进一步拉大。

Claude Code 的引导页布局即使在全屏下也已损坏，其定价页和集成页内容密集，让人不知从何看起。

Codex 使用了更少的文字、更整洁的列布局和更简洁的试用流程。

→ Claude Code：约两小时三十分钟，近 500,000 个输出 Token，约 65 美元

→ Codex：约一小时十二分钟，约 100,000 个输出 Token，约 20 美元

Codex 进入 2 比 0 领先。

## **3. Trail Latch**

Trail Latch 是一款用于露营的便携式厨房。

Claude Code 在此前的测试中打造了最强的产品体验。

页面展示了厨房展开的过程，介绍了备餐台、炉架、餐具挂轨、洗涤槽、干货储物箱、提灯臂和侧台板，并让我自行搭配配置、查看报价。

交互式锁扣操作让用户无需阅读大量文字，就能轻松理解产品。

Codex 采用了一种更具实验性的方式。

开篇的排版可读性较差，滚动浏览时视觉焦点也过于分散。

不过它的二级页面表现好得多。搭配构建器、车型适配页、产品页和常见问题页，整体感觉都比主页更为简洁。

由于大多数访客首先看到的是主页，这一轮 Claude Code 胜出。

→ Claude Code：四个 Agent，近两小时，近 400,000 个输出 Token，约 42 美元

→ Codex：一个 Agent，约一小时，约 100,000 个输出 Token，略低于 20 美元

Claude Code 的一次性设计更胜一筹，但 Codex 在高效迭代方面仍留有更大空间。

## 4. Present and Clear

Present and Clear 是一个围绕更清晰表达而构建的公众演讲培训项目。

Claude Code 运用了对比的创意手法，并加入了能标注演讲问题的交互式注释。

这个概念很实用，但页面文字过多，视觉层次感也不够丰富。

Codex 将"魅力"一词划掉，强调"一条更清晰的路径"。

页面在各板块之间切换了色彩，并以更强的层级结构搭配更精简的文案。

→ Claude Code：四个 Agent，约两小时，约 440,000 个输出 Token，约 42 美元

→ Codex：一个 Agent，近一小时，约 92,000 个输出 Token，略低于 20 美元

这一轮设计，Codex 胜出。

## 5. North Ledger Studio

North Ledger Studio 为创始人主导的创意代理公司提供兼职 CFO 顾问服务。

Claude Code 的版本读起来像一份冗长的报告。文字大量堆砌，视觉元素寥寥无几，滚动浏览时几乎感受不到任何节奏变化。

Codex 则更像一个真实的品牌。

它加入了导航栏、贯穿页面的引导路径、具体的代理商指标，以及更多的色彩变化。

它还清晰呈现了三种合作方式，并引导用户聚焦到一个明确的行动号召。

Claude 的页面则是戛然而止。

→ Claude Code：约两小时，约 500,000 个输出 Token，约 52 美元

→ Codex：约一小时，约 100,000 个输出 Token，约 18 美元

## 开放性测试

第六个提示几乎去除了所有创意限制。

我让每款工具自主构思业务、搭建网站，充分展示其设计能力。

Claude Code 围绕"Your room has a note."这句话，创作了一个声学空间概念。

它使用了涟漪效果，提供了地板、墙壁和天花板的材质控件，并在侧边设置了进度指示器。

这个概念颇具创意，但有些元素拉伸变形，页面也重蹈此前几轮的覆辙：文字依然过多。

Codex 创作了"We Heard Tomorrow"。

它采用了深色动态背景、鼠标跟随效果和大字号排版。

该网站将一个信号接收器打造成了交互式采集体验。

设计更简洁、更清晰、更统一。

这也是整个实验中资源消耗差距最大的一次。

→ Claude Code：近三小时，约 330,000 个输出 Token，约 50 美元

→ Codex：约八分钟，约 1.50 美元

开放性提示会暴露模型与框架内部的默认设定。

Claude Code 倾向于添加更多说明和结构。Codex 倾向于精简文案，并在视觉上做出更强烈的第一决策。

## 具体提示词改变了结果

越具体的提示词，越能消弭设计上的差距。

在第七次构建中，我几乎描述了网站的每一个细节，并明确告诉两个工具我想要什么。

输出结果几乎如出一辙。布局、文案、各个版块以及整体体验高度吻合，仅在图标之类的细节上存在微小差异。

我用一份 HTML 报告重复了这一测试。

结果相同。

你看着这两对作品，不会认为哪一方在设计上明显优于另一方。

Codex 依然更快、更便宜、token 使用效率也更高。

设计智能体在最需要填补缺失决策的时候，才最能发挥其价值。一旦提示词明确定义了这些决策，有能力的工具往往会殊途同归。

## 最终数据

纵观全部八次构建：

→ Claude Code 共调用了 25 个智能体，Codex 调用了 9 个。

→ Claude Code 耗时约 14 小时，Codex 约 5 小时。

→ Claude Code 使用了近 300 万个输出 token，Codex 约使用了 55 万个。

→ 等效 API 费用约为：Claude Code 444 美元，Codex 100 美元。

在六轮主观设计评比中，Codex 赢得了五轮，Claude Code 赢得了 Trail Latch 那一轮。两次高度具体的构建实际上打成了平手。

我不会将此视为一个永久性的结论。

我为两个工具都付费订阅，也每天都在使用两者。模型在迭代，运行框架在变化，当我再做一次真实对比时，我的看法也可能随之改变。

真正有价值的问题是：哪个工具更适合你手头的工作，以及你愿意为其提供多少方向性指引。

## 总结

开放式提示词考验的是工具的判断力，详细提示词考验的是工具的执行力。

这次实验让 Codex 在设计效率和资源效率两方面都显得更为出色，而 Claude Code 仍然产出了我个人最喜欢的单页作品之一。

我在完整视频中逐一拆解了全部八次构建，链接在第一条回复里。