三款旗舰AI前端实战评测：Gemini 3.5 vs Opus 4.6 vs DeepSeek V4 Pro

zoro_mushi

2026年06月02日 20:58

AI自动化

Google 前阵子发布了 Gemini 3.5 Flash，我一直很好奇它的实际编程水平。平时用 Claude 4.6 Opus 和 DeepSeek-V4-Pro 比较多，趁着周末干脆让三个模型做同一道题——写一个纯前端的个人记账系统，技术栈要求是 React 19 + TypeScript + Vite + Tailwind CSS + localStorage，然后来一次真刀真枪的代码走读。

以下是我的测评过程和结论，比较主观，仅供参考。

一、量化评测矩阵总览

我从 5 大维度给三款模型打了分，满分 100，权重分配如下：

最终评分

🏆 推荐：个人财务记账器 (DeepSeek V4 Pro)：UI 视觉上略显朴素，但它是唯一一个没有运行时 Crash、功能完整且细节最稳的版本。
⚠️ 有条件推荐：轻记账 (Opus)：界面漂亮、编译速度快，但有切换类型导致白屏崩溃的致命 Bug。
❌ 暂不推荐：Antigravity Finance (Gemini 3.5)：动效不错，但 PC 端有几处让人难以接受的布局问题（搜索框不可见、按钮挤压、分类溢出）。

二、开发过程：省心的代价与惊人的账单

说实话，测评结果出来之前我以为 Opus 4.6 会稳拿第一，因为整个开发过程它是三者里最省心的。

1. Claude Opus 4.6：给个方向，它自己跑完全程

Opus 4.6 这次的表现真的让我印象很深。基本上给它一个需求描述，它就能自己理清楚上下文、规划步骤、跑测试，全程不需要我盯着：

Opus 提示词与自动化流程

测试跑完后，它还自己把审查结果和截图一一对应，整合在文档里交给我：

Opus 自动生成的图文审查报告

当时我觉得这已经完全碾压另外两个了。结果写文章的时候我自己把每个功能过了一遍，发现了那个切换"收入"类型导致白屏的 Bug。翻了翻它自己出的审查报告，测试用例恰好没覆盖这个场景——所以 AI 再自动化，人工的 Code Review 还是绕不开。

2. DeepSeek V4 Pro：得"推一把"才会动

DeepSeek 这次的态度比较佛系，不会主动帮你想方案，第一反应是先推辞：

DeepSeek 初次提示词反馈

要稍微施加点压力它才开始认真干（手动狗头）：

PUA 调教 DeepSeek

最终截图功能倒是实现了，但没有像 Opus 那样把截图和审查文档合并在一起。不过最后交付的代码在运行期是三者里最稳的。

3. 账单：6 毛 vs 72 元

最让我直接清醒的是最后看账单：

Claude Opus 4.6：整个开发过程花了 10+ 美元（约 72 元人民币）
DeepSeek-V4 Pro：同样的任务，总共花了 0.6 元人民币

差了整整 120 倍。

Opus 的那种"全自动省心"确实值钱，但值 120 倍吗？对于个人开发者来说，这是个值得认真想想的问题。

三、工程架构与组件规范对比

React 项目的可维护性，很大程度上取决于目录划分和类型系统是否合理。

1. 目录结构与组件设计

Claude 4.6 Opus 的架构最漂亮。用了 Vite 8 + Tailwind CSS v4，Rolldown 打包，冷启动 632ms，组件划分也很清晰。
Gemini 3.5 结构同样规范，smart/dumb 组件拆分完整（ChartsDashboard、TransactionForm、TransactionList 等），不过为了动效引入了 framer-motion，依赖稍多。
DeepSeek V4 Pro 没用 TypeScript，纯 JavaScript，在中大型团队里这会是个隐患。

2. TypeScript 类型覆盖

Opus 和 Gemini 3.5 都提供了完整的类型文件（types/transaction.ts），Transaction、TransactionType、CategoryType 都有，编译阶段能挡掉大多数问题。
DeepSeek 没有 TypeScript，如果要长期维护，这块要自己补。

四、核心业务逻辑与 useTransactions

记账 App 最核心的就是增删改查和数据持久化，这部分出问题直接用不了。

1. useTransactions Hook 封装

三者都用了自定义 Hook 把业务逻辑从 UI 层抽离出去，Gemini 3.5 和 Opus 的 Hook 接口设计更规范一些，把过滤、计算、持久化都收拢在一个 Hook 里，Page 层代码很干净。

2. LocalStorage 防崩溃设计

DeepSeek 在这里做得最稳，初始化读取有完整的 try-catch，遇到脏数据不会直接崩。
Opus 的初始化解析缺少错误处理，如果 localStorage 里有非标准 JSON，会直接报错。

五、Recharts 图表：Opus 的致命崩溃藏在这里

这个问题我测试时差点忽略，但它直接给 Opus 判了出局。

1. 崩溃复现

在主界面切换"收入"类型时，页面瞬间白屏，React 渲染树崩掉了。

定位到 [Charts.tsx](file:///a:/idea-projects-practice/ai-compare/personal-finance-opus/src/components/Charts.tsx) 的饼图渲染逻辑，找到了问题所在——一个数组越界：

 代码块
TypeScript
自动换行
复制代码
// Charts.tsx L71-78
<Pie
  data={categoryData}
  ...
  label={({ cx, cy, midAngle, innerRadius, outerRadius, index }) => {
    // ⚠️ 切换"收入"后，categoryData 长度骤减（甚至变成 0）
    // 但 Recharts 传进来的 index 可能还是旧的
    const item = categoryData[index];
    // 💥 item 是 undefined，读属性直接 TypeError，页面崩掉
    return PieLabelRender({
      cx, cy, midAngle, innerRadius, outerRadius,
      percentage: item.percentage,
      category: item.category,
    });
  }}
>
复制成功

2. 另外两家是怎么绕开这个坑的

DeepSeek 在 [Charts.jsx](file:///a:/idea-projects-practice/ai-compare/personal-finance-tracker/src/components/Charts.jsx#L11-L21) 里直接解构了 Recharts 传回的 percent 和 name，根本不用 index 去原数组取值，所以不存在越界：

 代码块
JavaScript
自动换行
复制代码
function renderPieLabel({ cx, cy, midAngle, innerRadius, outerRadius, percent, name }) {
   // 用 Recharts 算好的值，不手动索引，稳
}
复制成功

Gemini 3.5 的饼图压根没加 Pie Label，用的是外部 Legend，所以这个场景直接跳过去了。

3. DeepSeek 月份硬编码的小问题

DeepSeek 运行稳，但月份过滤有个偷懒的地方，[App.jsx](file:///a:/idea-projects-practice/ai-compare/personal-finance-tracker/src/App.jsx#L97) 里直接写死了：

 代码块
JavaScript
自动换行
复制代码
const months = ['2026-01', '2026-02', '2026-03', '2026-04', '2026-05']
复制成功

6 月之后的数据在趋势图里就看不到了，算是个小缺陷。

六、UI 细节：差距藏在"有没有人测过"

1. Gemini 3.5 的几个 PC 端问题

动效是三者里最好的，但 PC 端有几个问题真的难以接受：

搜索框消失了：CSS 宽度和定位有问题，PC 端搜索框 input 直接不见了，就剩个放大镜，根本没法输入。
"记一笔"按钮挤压：内边距配置有问题，字贴着边框，看着很难受。
分类溢出：分类项多了之后直接溢出外层 Card，布局破了。
ESC 无反应：表单弹窗没有监听键盘事件，按 ESC 关不掉，体验不好。

2. DeepSeek 的防闪烁方案

深色模式下，页面刷新会有一下闪白屏，这是个很常见的问题，很多项目都没处理。

DeepSeek 是三者里唯一在 index.html 里加了阻塞式内联脚本的，页面渲染前先读 localStorage 设 classList.add('dark')，完全解决了闪屏问题。配色虽然没 Opus 精致，但功能上确实做全了，ESC 关表单也支持。

七、加分项诚意对比

1. CSV 导出中文兼容性

三者都加了 UTF-8 BOM，Excel 打开不会乱码，这点都过关了。

Gemini 3.5 多做了一步，把日期格式从 ISO 字符串转成了中文格式：

 代码块
TypeScript
自动换行
复制代码
export const formatChineseDate = (dateStr: string): string => {
  const parts = dateStr.split('-');
  return `${parts[0]}年${parts[1]}月${parts[2]}日`;
};
复制成功