代码生成项目bug，生成前端页面有一个顶部的元素标题，通过对话一直无法解决，最后还是claude code解决的

这个问题非常典型，暴露了 AI 代码生成的几个根本性局限。

解决方案

• 需要加上图片识别的模型
• 需要前端支持截图和框选
• 修改系统提示词但会较麻烦，无法预估问题出现可能性

为什么系统对话修不好这个 Bug

1. AI 看不到渲染结果

代码生成的 System Prompt 告诉 AI 怎么写代码，但 AI 从来没有看过页面渲染效果。它不知道导航栏里出现了一坨 JSON——它只知道：我写了 t('products')，这个调用是合法的 Vue/i18n 语法，不会编译报错。

▼
text
复制代码
AI 的认知:  t('products') → ✅ 语法正确，编译通过
真实的渲染: t('products') → 返回数组 → Vue dump 出整段 JSON

2. 这是一个"静默 Bug"，不是编译错误

AI 的工具都是基于文件操作的——FileWriteTool、FileReadTool、FileModifyTool——它们操作的是源码文本，不是运行时状态。这个 Bug 在每一层都不触发错误：

AI 的工具链到第 3 步就停了，它根本不知道第 4 步出事了。

3. AI 不理解自己的 i18n 键名冲突

根本问题在 System Prompt

这个 bug 的原因是 AI 在使用 i18n 键名时犯了同一个错误——把数据 key和导航 key起了同一个名字。如果经常出现这个问题，需要在 codegen 的 System Prompt 里加一条规则：

国际化键名规范：

• 导航/标签类用单个名词: "products", "about"
• 数据数组类用 Items 后缀: "productItems", "newsItems"
• 禁止数据数组和导航标签使用同名 key

当你告诉 AI "导航栏有长文字"，AI 会把 FileReadTool 读取 NavBar.vue，然后看到：

▼
html
复制代码
<router-link v-for="link in links" :key="link.path" :to="link.path">
  {{ t(link.key) }}
</router-link>

这行代码本身没有任何问题。t(link.key) 就是 t('products')，这是标准写法。AI 不会想到 t('products') 返回的是数组而不是字符串——它需要再去读 i18n.js，然后在同一文件里发现 products 被定义了两次，然后理解 JS 的对象字面量键名覆盖规则，然后意识到这是根本原因。

每一步的逻辑跳跃都成立，但把这些串起来是最难的——因为 AI 在每次工具调用之间是无记忆的，它不知道上一次读了 NavBar.vue 之后还需要去看 i18n.js 里的键名冲突。

4. FileModifyTool 做的是文本替换，不是语义重构

即使 AI 发现了根因，它的修改工具也有限：

▼
java
复制代码
// FileModifyTool — 这是 AI 唯一能用的修改工具
@Tool("修改文件内容，用新内容替换指定的旧内容")
public String modifyFile(String path, String oldContent, String newContent)

这个工具只能做精确的字符串替换。但修复这个 Bug 需要：

• 在 i18n.js 里把数组 key 从 products 改成 productItems
• 在 ProductGrid.vue 里改 t('products') 为 t('productItems')
• 在 Products.vue 里改 v-for="p in t('products')" 为 t('productItems')
• 但又不能改 NavBar.vue 和 Footer.vue 里的 t('products')（它们确实应该是字符串）

这相当于一次跨 4 个文件、有选择性的语义重构，AI 用文本替换工具做这件事，体验就是反复尝试反复失败。

根本矛盾：Vibe Coding 的调试盲区

▼
text
复制代码
代码生成的 AI          = 会写代码，但看不到渲染结果
对话修 Bug 的 AI       = 能看到代码，但看不到运行时
用户                   = 能看到 Bug 效果，但不一定清楚根因

三个人各掌握一段信息，谁都没有完整的"Bug → 根因 → 修复"链路。这和传统开发中"打开浏览器 DevTools → 看 Network 面板 → 定位到代码行 → 修改"的闭环完全不同。

这类问题怎么解决