最近掘金热榜上又在吵"哪家 AI 写页面最强"，评论区直接变成粉丝对线现场 😂
作为一个搞了大半年 Vibe Coding 的独立开发者，我实在忍不了了——你们光吵有什么用？跑个实测不就完了？
这篇文章我拿同一个需求，让 5 个主流模型分别生成代码，直接看结果。剧透一下：没有一个模型是"全场最佳"，但组合起来用确实香。
测试规则
为了公平起见，我给每个模型完全相同的 prompt：
用 React + Tailwind CSS 写一个天气 Dashboard 组件，要求：
- 显示当前天气、温度、湿度、风速
- 有未来 5 天的预报卡片
- 深色主题，渐变背景
- 响应式布局，手机端自适应
- 用 mock 数据，不需要真实 API
测试的 5 个模型：
- Claude Sonnet 4.5（Anthropic 最新）
- GPT-4.1（OpenAI 主力）
- Gemini 2.5 Pro（Google 最强推理）
- DeepSeek V3（国产之光）
- Qwen3 235B（阿里最新大杯）
所有模型我都是通过同一个 API 平台调的（后面说为什么），temperature 统一 0.7，max_tokens 4096。
Round 1：Claude Sonnet 4.5
第一印象：代码质量最高，开箱即用
Claude 生成的代码直接能跑，而且有几个让我眼前一亮的点：
// Claude 生成的天气卡片组件（节选）
const WeatherCard = ({ day, temp, icon, description }) => (
<div className="group relative overflow-hidden rounded-2xl
bg-white/10 backdrop-blur-md border border-white/20
p-4 transition-all duration-300 hover:bg-white/20
hover:scale-105 hover:-translate-y-1">
<div className="absolute inset-0 bg-gradient-to-br
from-blue-500/10 to-purple-500/10 opacity-0
group-hover:opacity-100 transition-opacity" />
<p className="text-sm text-gray-300">{day}</p>
<span className="text-3xl my-2 block">{icon}</span>
<p className="text-xl font-bold">{temp}°</p>
<p className="text-xs text-gray-400">{description}</p>
</div>
);
亮点：
- ✅
backdrop-blur+bg-white/10玻璃拟态效果，视觉很高级 - ✅ hover 动画丝滑，
group-hover用得很巧 - ✅ 组件拆分合理，直接能集成到项目里
- ✅ 响应式完美，
grid-cols-2 md:grid-cols-5一步到位
槽点：代码偏"保守"，不会搞花活，但胜在不出错。
评分：设计感 9/10 | 可用性 10/10 | 代码质量 9/10
Round 2：GPT-4.1
第一印象：最"全面"，但有点啰嗦
GPT-4.1 生成了一个功能更完整的版本，甚至自作主张加了搜索框和城市切换功能 😅
// GPT-4.1 生成的主组件（节选）
const WeatherDashboard = () => {
const [selectedCity, setSelectedCity] = useState('Beijing');
const [unit, setUnit] = useState('celsius');
// 它甚至生成了单位切换逻辑
const convertTemp = (temp) =>
unit === 'fahrenheit' ? Math.round(temp * 9/5 + 32) : temp;
return (
<div className="min-h-screen bg-gradient-to-br
from-slate-900 via-blue-950 to-indigo-900">
{/* 顶部搜索栏 - 我没要求的功能 */}
<div className="flex items-center gap-4 p-6">
<input
className="bg-white/10 rounded-xl px-4 py-2
text-white placeholder-gray-400
focus:ring-2 focus:ring-blue-400"
placeholder="搜索城市..."
/>
{/* 华氏/摄氏切换 */}
<button onClick={() => setUnit(u =>
u === 'celsius' ? 'fahrenheit' : 'celsius'
)}>°C / °F</button>
</div>
...
</div>
);
};
亮点：
- ✅ 功能最完整，"过度交付"选手
- ✅ 状态管理写得清晰
- ✅ 单位换算这种小功能确实实用
槽点：
- ❌ 代码量是 Claude 的 1.5 倍，很多我没要求的东西
- ❌ CSS 样式不如 Claude 精致，渐变配色偏暗
- ❌ 有几处冗余的
useState
评分：设计感 7/10 | 可用性 8/10 | 代码质量 7/10
Round 3：Gemini 2.5 Pro
第一印象：最"聪明"，但有时太聪明了
Gemini 的代码风格明显不同——它用了更多现代 CSS 特性，甚至上了 @container 查询：
// Gemini 2.5 Pro 生成（节选）
const ForecastSection = ({ forecasts }) => (
<div className="@container">
<div className="grid grid-cols-2 @md:grid-cols-3
@lg:grid-cols-5 gap-3">
{forecasts.map((f, i) => (
<div key={i} className="relative rounded-xl p-4
bg-gradient-to-b from-sky-500/20 to-transparent
border border-sky-400/10">
{/* 温度趋势 mini 图表 */}
<svg viewBox="0 0 60 30" className="w-full h-8 mt-2">
<polyline
points={f.hourlyTemps.map((t, j) =>
`${j * 10},${30 - t}`).join(' ')}
fill="none" stroke="currentColor"
strokeWidth="1.5" className="text-sky-400"
/>
</svg>
</div>
))}
</div>
</div>
);
亮点：
- ✅ 用了
@container查询，容器响应式比媒体查询更灵活 - ✅ 自己画了个 SVG mini 温度趋势图，这谁教它的 🤯
- ✅ 渐变色搭配很专业
槽点：
- ❌
@container在某些旧版浏览器跑不了 - ❌ mock 数据需要
hourlyTemps数组，自己加的字段，整合时要改 - ❌ 代码有些地方过度抽象
评分：设计感 9/10 | 可用性 7/10 | 代码质量 8/10
Round 4：DeepSeek V3
第一印象：朴实无华，但意外好用
// DeepSeek V3 生成（节选）
export default function WeatherDashboard() {
const currentWeather = {
city: '北京',
temp: 22,
humidity: 65,
windSpeed: 12,
description: '多云',
icon: '⛅'
};
return (
<div className="min-h-screen bg-gradient-to-br
from-gray-900 to-blue-900 text-white p-4 md:p-8">
{/* 当前天气 */}
<div className="max-w-4xl mx-auto">
<div className="text-center mb-8">
<h1 className="text-5xl mb-2">
{currentWeather.icon}
</h1>
<p className="text-6xl font-light">
{currentWeather.temp}°C
</p>
<p className="text-gray-400 mt-1">
{currentWeather.city} · {currentWeather.description}
</p>
</div>
{/* 指标网格 */}
<div className="grid grid-cols-3 gap-4 mb-8">
{[
{ label: '湿度', value: `${currentWeather.humidity}%`, icon: '💧' },
{ label: '风速', value: `${currentWeather.windSpeed}km/h`, icon: '💨' },
{ label: '体感', value: '20°C', icon: '🌡️' },
].map(item => (
<div key={item.label}
className="bg-white/5 rounded-xl p-4 text-center">
<span className="text-2xl">{item.icon}</span>
<p className="text-lg font-medium mt-1">{item.value}</p>
<p className="text-sm text-gray-400">{item.label}</p>
</div>
))}
</div>
</div>
</div>
);
}
亮点：
- ✅ 最简洁，没有多余代码，直接能用
- ✅ 中文 mock 数据（其他模型默认都是英文）
- ✅ Emoji 作图标，简单粗暴但有效
- ✅ 布局很干净，Apple 风格
槽点：
- ❌ 没有 hover 动画，静态感强
- ❌ 颜色搭配比较单一
- ❌ 没有额外的创意加分项
评分：设计感 6/10 | 可用性 9/10 | 代码质量 8/10
Round 5：Qwen3 235B
第一印象：国产模型进步很大，但细节差点意思
// Qwen3 235B 生成（节选）
const WeatherDashboard = () => {
const forecast = [
{ day: '周四', temp: 24, low: 16, weather: '晴', icon: '☀️' },
{ day: '周五', temp: 21, low: 14, weather: '多云', icon: '⛅' },
{ day: '周六', temp: 18, low: 11, weather: '小雨', icon: '🌧️' },
{ day: '周日', temp: 20, low: 13, weather: '阴', icon: '☁️' },
{ day: '周一', temp: 23, low: 15, weather: '晴', icon: '☀️' },
];
return (
<div className="min-h-screen bg-[#0f172a] text-white">
<div className="max-w-5xl mx-auto px-4 py-8">
{/* 主天气卡片 */}
<div className="bg-gradient-to-r from-blue-600 to-purple-600
rounded-3xl p-8 mb-6 shadow-2xl">
<div className="flex justify-between items-center">
<div>
<h2 className="text-lg opacity-80">北京市</h2>
<p className="text-7xl font-extralight my-2">22°</p>
<p className="opacity-70">多云 | 体感 20°</p>
</div>
<span className="text-8xl">⛅</span>
</div>
</div>
{/* 预报卡片 */}
<div className="grid grid-cols-5 gap-3">
{forecast.map(f => (
<div key={f.day}
className="bg-white/5 rounded-2xl p-4 text-center
hover:bg-white/10 transition-colors">
<p className="text-sm opacity-60">{f.day}</p>
<span className="text-3xl block my-3">{f.icon}</span>
<p className="font-medium">{f.temp}°</p>
<p className="text-xs opacity-50">{f.low}°</p>
</div>
))}
</div>
</div>
</div>
);
};
亮点：
- ✅ 渐变主卡片视觉效果不错
- ✅ 中文数据 + 最高/最低温分开显示
- ✅
font-extralight大字体温度显示，有设计感
槽点：
- ❌ 手机端
grid-cols-5没做响应式，会挤成一团 - ❌ 没有
backdrop-blur等高级效果 - ❌ hardcode 了
bg-[#0f172a]，Tailwind 有现成的slate-900
评分：设计感 7/10 | 可用性 7/10 | 代码质量 6/10
横评总结
| 模型 | 设计感 | 可用性 | 代码质量 | 总分 | 适合场景 |
|---|---|---|---|---|---|
| Claude Sonnet 4.5 | 9 | 10 | 9 | ⭐⭐⭐⭐⭐ | 生产级组件，直接集成 |
| GPT-4.1 | 7 | 8 | 7 | ⭐⭐⭐⭐ | 需要完整功能的原型 |
| Gemini 2.5 Pro | 9 | 7 | 8 | ⭐⭐⭐⭐ | 创意探索，技术前沿 |
| DeepSeek V3 | 6 | 9 | 8 | ⭐⭐⭐⭐ | 快速出活，MVP 开发 |
| Qwen3 235B | 7 | 7 | 6 | ⭐⭐⭐ | 中文场景，基础组件 |
我的实际工作流
测完这一圈，我现在日常 Vibe Coding 的策略是混合用：
- 需求分析/架构设计 → Gemini 2.5 Pro（推理能力强，能帮你想清楚）
- 写核心组件 → Claude Sonnet 4.5（代码质量最稳，设计感最好）
- 快速原型/小功能 → DeepSeek V3（便宜快速，够用就行）
- Debug/代码审查 → GPT-4.1（解释能力强，善于找问题）
这个组合下来效率确实比只用一个模型高不少。
有同学可能要问了：你怎么同时用这么多模型的？注册 5 个平台也太麻烦了吧？
说实话一开始我确实是各个平台分别注册的，光管 API Key 就头大。后来发现了 ofox.ai 这个聚合平台——一个 Key 就能调上面测的所有模型，而且在国内直连不用梯子，延迟也还行。关键是按量付费，测试的时候随便切模型不心疼。
像我这种需要频繁横评对比的场景，聚合平台确实比单独注册方便太多。当然你如果只用一个模型，直接走官方也没问题。
写在最后
2026 年的 Vibe Coding 已经不是"能不能用"的问题了，而是"怎么用得更好"。
我的建议是：别当某个模型的死忠粉，多试试混合策略。每个模型都有自己的强项，搞清楚它们各自擅长什么，然后在对的场景用对的模型。
如果你也在做类似的横评，欢迎评论区聊聊你的体验 👇 特别想听听大家用 Gemini 和 DeepSeek 做前端的感受，我感觉这俩进步速度最快。
本文代码均来自实际测试，prompt 完全一致，模型版本为 2026 年 3 月最新。因为模型更新很快，半年后结论可能完全不同，仅供参考。
