😀 过去1个月，我靠AI把Chrome币价插件迭代了5次，新增徽章显价、币种详情页，也踩过“AI改代码越改越乱”“重构删光核心逻辑”的坑。今天把「AI不跑偏、不踩坑」的实战方法拆给你——不管你是想开发插件，还是刚用AI写代码，都能少走我走过的弯路,对我上一篇感兴趣的可以看着从开发到上架的chrome插件全流程指南
写在前面:先放爆论 ——会做“AI的产品经理”，才是 AI编程的关键
嗨嗨嗨大家好，又是我一乐小哥！先跟大家同步下插件进度：从0.0.3到0.1.0，AI帮我写了 80% 的代码（包括模块化重构、API限流处理），但最开始我也踩过坑:让AI“加个收藏按钮”，它把按钮放错位置还加多余边框；让AI“整理缓存逻辑”，它直接删光原有代码 —— 后来才发现，不是 AI 不行，是我没把 “需求讲清楚” 。 先来看看这1个月AI帮我做的插件更新
## 版本 0.1.0 (2025-09-21)
### 🎉 新功能
- **币种详情页面**：新增全面的币种详情视图，包含价格图表、市场数据和历史信息
- **扩展徽章**：实现动态徽章功能，在扩展图标上显示实时价格更新
### 🔧 重大重构
- **模块化架构**：使用专用lib模块重构代码库
- **服务层**：引入专用服务类
- **客户端分离**：改进API客户端架构，提供更好的错误处理和速率限制
- ****代码组织****：遵循SOLID原则，通过单一职责模块增强文件结构
### 🚀 改进
- **性能优化**：通过智能缓存和请求调度优化数据获取
- **用户体验**：在所有视图中实现更流畅的过渡和加载状态
- **错误处理**：全面的错误处理，提供用户友好的错误消息
- **代码质量**：通过更好的关注点分离和模块化设计降低复杂性
### 🐛 错误修复
- **API速率限制**：改进CoinGecko API速率限制处理，提供适当的重试机制
- **内存管理**：修复图表渲染和数据更新中的潜在内存泄漏
- **跨浏览器兼容性**：增强不同浏览器环境下的兼容性
## 版本 0.0.4 (2025-09-05)
### 新功能
- 一键查看币种详情：在 CoinGecko 新标签页中打开币种页面，自动匹配您的语言设置。
### 改进
- 更快的添加体验：点击添加后立即显示"已添加"状态，列表无需刷新即可更新。
- 更好的语言体验：语言切换立即生效，您的偏好设置会被记住。
- 更流畅的日常使用：保存和加载速度更快，减少卡顿现象。
### 修复
- 修复了添加按钮在刷新前不更新的问题。
- 修复了偶发的设置同步问题，避免显示不一致。
### 兼容性
- 您保存的币种和设置保持完整。无需任何操作。
## 版本 0.0.3 (2025-08-31)
### 错误修复
- 修复了处理 API 返回空值时的错误，提升应用稳定性
- 优化价格变化显示逻辑，防止"无法读取 null 的属性"错误
### 改进
- 统一反馈页面按钮样式和大小，与主页保持一致
- 增强 UI 组件的视觉一致性
没错，这些功能 AI 都能写，但前提是 —— 你得知道怎么 “指挥” 它。
二、别走极端,这3个结论是我自身经历总结
现在网上对AI编程有两个极端：要么就是很多自媒体说的“0代码做完APP”、“我用AI三天做完了一个XXX”;要么就是“AI只能写写小玩具”、“一到迭代优化AI就拉跨”.那我用自身的插件开发经历验证了:两种说法都对,但是都有前提.
1.写初版宛如战神,写迭代恰似免费外包
初版插件我就说了一句话：“做一个 Chrome 币价插件，支持添加币种、看实时价格，用 CoinGecko API”——AI IDE（Trae）直接生成了完整代码，包括 UI、API 请求、存储逻辑。但在迭代到0.1.0 的过程中，AI 经常 “掉链子”：比如我让它“加收藏按钮”,它默认把按钮放左边，还加了多余边框 —— 因为我只能输入一句话需求而做不到提供完整的需求PRD(这一问题后面有解决方案),另一方面AI像你免费薅来的外包伙伴,也认不出自己之前写的代码（上下文中因为多次编辑很容易产生让AI误解的信息，综合下来AI 就做不到写初版的全知全能),对于这种情况我会自己去看一部分代码,然后引导着AI去修改迭代。
2.AI做不了“无指导重构”,但能做 “有规划的执行”
我试过直接让AI“把代码中所有用到缓存的地方汇总到一个文件中管理”,这么简单的重构,结果它把原来使用缓存的文件直接全覆盖,在覆盖中删除了大量原有的但是和缓存无关的代码。导致功能崩溃
—— 因为AI没有 “架构全局观”，只会按 “当前对话” 生成代码。后来我换了方式：先让AI “重构规则”（比如 “沿用 SOLID 原则，不修改现有 API，只拆模块”），再让它生成 “模块拆分清单”，最后按清单写代码 —— 重构反而比手动快。
这里表扬下TRAE的回退功能,可以省很多事情.
3. “超强 prompt”没用,不如 “具体需求+约束条件”
我试过用 “让 AI 扮演 Linus（Linux 创始人）” 的 prompt，结果 AI 输出除了多了些似是而非的“架构理论”，该有的BUG是一点也没少。现在我在prompt里面只会填写一些简单的约束条件,类似修改任何代码前需要经过我的同意,完成代码开发后必须自己完成自测流程类似这些,后面我会通过实例给大家讲解这些约束的作用
三、AI 协作的 “三步法”：以徽章功能为例，教你让 AI 不跑偏
这是我最核心的经验 —— 用 AI 迭代功能时，别让它 “直接写代码”，而是先 “定方案”，再 “验方案”，最后 “写代码”。以 “徽章功能” 为例，一步一步说：
第一步：需求转方案（让 AI 把你的话拆成 “可执行清单”）
我最初的需求很模糊：“加个收藏按钮，点了能在插件图标显价格”—— 直接让 AI 写代码肯定错，所以我先让它 “出方案不写代码”：
💡我的输入：“我希望在币价区域加收藏按钮，鼠标悬停显示，点击后收藏币种的价格显在 Chrome 插件图标上。把这个需求转成‘实现要求 + 步骤方案’，先不写代码。”
AI 的输出（精简版）：
-- 实现要求
1. UI：收藏按钮（星星图标）放币价变动区域右侧，无border，仅悬停显示；
2. 逻辑：同一时间仅收藏1个币种，收藏状态存chrome.storage；
3. 徽章：显收藏币种价格，涨绿跌红，取消收藏则清空徽章。
--- 步骤方案
Step1：改popup.html，在.crypto-price里加<button class="pin-button">⭐</button>；
Step2：改style.css，写“默认隐藏+悬停显示+无border”样式；
Step3：改popup.js，加“收藏状态管理+徽章更新”逻辑（用chrome.action.setBadgeText）。
这一步的核心是让 AI 把模糊需求 “落地” ，这时AI的响应相比我自己干巴巴的一句话就具体很多了,这么做的原因是在代码修改过程中很多时候AI会误解使用者的需求,而当这种误解被注入代码之后,再让它删掉重新修改又会带来更多误解（callback为什么上面我要加那两个约束条件)
第二步：方案验真（确认逻辑无漏洞）
让AI先出完方案的另一个好处是你可以先对方案进行提问：“1. 徽章价格怎么格式化？2. 切换币种时怎么清旧徽章？”——AI 补充了细节：“价格保留两位小数，切换时先调用 chrome.action.setBadgeText ({text:''})”。这里就能看到AI做事的明显问题,它明显没有考虑徽章区域能展示的数字有限,需要针对性的调整价格的格式化方案。
这样确认方案没问题后，再让 AI 写代码 —— 这一步能避免 “代码写一半发现逻辑错”，减少返工。
第三步：迭代优化（一定要让AI找到原因再改代码）
我让AI去除当前收藏按钮的边框时,它给的原因是大概什么地方有全局配置,所以他打算直接!important粗暴覆盖,如果直接让他写代码,功能也能实现,但是代码就很难看,也不利于后期迭代,所以我给出新的输入
💡不 你应该找到现在显示边框和边界的原因 并调整 所以重新输出需求和方案
AI 的输出（精准版）：
--- 原因
style.css里有全局button:hover样式：button:hover { border: 1px solid #667eea; }，.pin-button继承了这个样式。
--- 修复方案
给.pin-button:hover加更具体的样式（提高CSS优先级）：
.pin-button:hover {
border: none; /* 覆盖全局border */
background: transparent;
}
按这个方案改，边框问题解决，还没留技术债 —— 这一步的核心是不让 AI“自由发挥” ，而是 “先定位问题，再给精准方案”。
四、AI编程工具实测：3 款工具对比，哪款适合你？
主流的AI编程工具我都用过，最后留下3款常用的，顺便说下我的看法：
| 工具 | 核心优势 | 是否国内支持 | 免费版限制 | 付费成本 | 我的使用频率 |
|---|---|---|---|---|---|
| Claude Code | 支持子Agent、编程能力很强 | 否 | 每日 10 次请求，无多文件支持 | 月付 20 美元 | 0% |
| CodeBuddy | 命令行集成、编程能力强 | 是 | 每日 50 次请求，无调试功能 | 按 token 付费（可白嫖） | 70% |
| Trae（字节） | 可视化界面、新手友好、MCP集成齐全 | 是 | 每日 3 次项目创建，无高级功能 | 年付 99 美元 | 30% |
我的工具选择逻辑：
- 代码开发：用 CodeBuddy,最开始也是用Claude Code,但是实在限制太多加上排华言论,实在不想用了
- 文本输出,代码调试：用Trae（快速出初版，验证需求是否可行）。
- 关键提醒：别死守一款工具，AI的更新换代真的日新月异,比如这两天火起来的codeX,一乐就打算之后去试试,不过这一期就先不点评了。
五、插件体验：为什么不试试？（非广告，是我的实战成果）
听了我说了这么多,总得验证下我说得是真的吧,这是我插件的地址：Crypto Price Viewer,看看AI写的代码质量怎样.
最后总结：AI 编程的核心经验
回到我最开始的爆论,其实可以看出来无论是让AI先输出方案,还是反复校对方案、调整实现方案,这些都是之前产品做的事情,所以所谓AI编程,其实就是做AI的产品经理,把需求跟我们自己的研发(AI)讲清楚并让他开发.
最后谢谢大家 本次的分享都是基于我个人使用过程中的经验总结，可能不是最顶尖的 但是每一条内容都是我真实的使用感悟，希望能给也在使用AI编程的你有所帮助
