大家好，我是刘luck。
今天这篇文章，我想从一个反省开始。在动手做这个AI插件之前，我曾断断续续花了三个月的时间，去看生财的深海圈的教程（idea to business：内容超级多）、Nextjs官方文档、刷技术教程。
我以为自己学了不少，感觉脑子充满了知识，感觉像是在一片知识的海洋里瞎学，什么都懂一点，但心里还是发虚，为什么呢？因为没有做出东西来，光在学了。
这也是自己一直以来的毛病，总喜欢准备好了再行动，总喜欢学会了再行动，最后发现就是一点都没动。
我决定不再看，而是直接干。刚好最近看到生财有个垂直小号的项目，交了999的押金，要在40天更新20篇文章以上才能退押金，报名就是想通过输出倒逼输入。
而且因为要写AI编程相关的文章，这就要求我用AI编程去做东西，而这个过程就需要去学习、做东西、复盘、迭代，才能写出一点有价值的东西。
这7天，尤其是其中一个推倒重来的关键3天，让我学到的东西，真比过去那3个月强多了。
这篇文章，就是想分享我在这场实践中，悟出来的东西。
一、开篇的坦白：上次的作业，我没完成
前面我写的文章其实结尾也说了这个插件没做出来，还有不少bug。我爆肝3天，给自己做了个AI对话同步工具（附5000块学来的实操方法论）
今天我来交一份特殊的作业：那个Bug，我放弃了。
这次来补上上次结尾挖的坑，我花了7天时间，与AI深度结对，从零开始做这个插件。
没错，在让Claude code、codex改了好几天后，我发现旧的代码库已经成了一个无底洞。每修复一个问题，就会冒出三个新的问题。整个项目在AI一次次的缝缝补补下，已经变成了一座我自己都看不懂的屎山。
在又一次插件的核心功能同步失败后，我做出了那个艰难但正确的决定：我把整个项目文件夹，拖进了回收站。
发现已经开了四个AI对话工具的项目
二、顿悟时刻：问题不是Bug，而是地基
删除代码的那一刻，我无比解脱。有时候发现改来改去改不好的时候，应该直接放弃。
我发现：我一直在试图抢救一栋地基就歪了的危楼。问题根本不是出在哪一块砖，而是出在最开始的建造方式上。
我犯了和AI协作最大的忌讳：把AI当成了一个无所不能的魔法师，期待它能根据我一个大致具体的需求（当时其实也写了一个很长的需求文档prd，但是还不够具体），一次性变出整个产品。
结果，AI用它强大的能力，以最快的速度，胡乱堆砌出了一座看起来能用的房子。但只有我自己知道，这房子的内里，全是坑。在这样的地基上做任何修复，都是徒劳。
三、推倒重来：从积木开始，重建一切
刚好那几天GPT专门写代码的Gpt-5-Codex发布了，群里都推荐用用看。所以，我选择用codex推倒重来。
这一次，我的角色彻底变了。我不再是那个只提需求的甲方，而是掌控全局的总工程师。我的AI，也不再是大包大揽的建筑师，而被我降级成了一组各司其职的专业施工队。
我的核心思路，从一次性让AI生成变成了模块化让AI构建。
我不再笼统地要求AI给我盖个房子，而是把指令拆解成如下部分：
你是资深前端/UI 工程师。请根据下面 PRD 与线框，为“AI Chat Sync”生成可运行的前端界面（仅 UI 与本地假数据），技术选型：React + Tailwind + shadcn/ui。必须包含：1) Side Panel（右侧并列侧栏，宽 380–560 可拖拽）- 顶部指标：总对话数/今日新增 + 搜索 + 平台筛选- 列表卡片：左下平台徽标；右上 复制/导出/删除 三连按钮；点击展开详情- 底栏：批量勾选 + 导出（JSON/MD/PDF/ZIP）+「一键同步全部」主按钮（显示进度）2) Popup（快速入口）- 顶部标题 + 设置按钮- 检测到平台提示 +「一键同步全部」按钮- 搜索最近会话；卡片支持 复制/导出/展开- 展开后 Dialog：时间线气泡消息（每条有时间戳与复制键）；顶部 复制摘要/导出3) Options（设置页）- 自动增量同步开关、最大并发数- 导出样式（气泡式/块状）、图片处理（内嵌/外放）- 主题切换（浅/深）规范与美术：- 色板：主 #E91E63、辅 #2196F3、成功 #10B981、警告 #F59E0B、背景 #F8FAFC、文本 #1F2937- 圆角：按钮 8、卡片 12、输入 6；阴影柔和；动画 <300ms- 组件优先用 shadcn/ui；列表虚拟滚动可先不做- 所有中文文案就按 PRD 写；日期用 toLocaleString('zh-CN')输出要求：- 单一可运行项目（含 package.json、tailwind 配置）- 目录建议：src/components、src/pages/popup、src/pages/options、src/panel- 用假数据渲染（见 PRD 的字段），保留 TODO 注释以便后续接入逻辑你是资深 Chrome 扩展工程师。请在现有 UI 基础上接入完整逻辑，技术栈 MV3 + TypeScript + React（WXT 或 Plasmo 均可），数据用 Dexie(IndexedDB)。ai-chat-sync/├─ src/│ ├─ panel/ # Side Panel 页面│ ├─ pages/│ │ ├─ popup/│ │ └─ options/│ ├─ components/ # Card、Drawer、Toolbar 等│ ├─ data/│ │ ├─ db.ts # Dexie 初始化与表│ │ └─ models.ts # 类型定义│ ├─ providers/ # chatgpt.ts / claude.ts / gemini.ts│ ├─ background/ # orchestrator.ts 队列/并发/进度│ ├─ exports/ # toJson.ts / toMarkdown.ts / toPdf.ts / zip.ts│ └─ utils/├─ public/├─ manifest.json└─ _locales/zh_CN/messages.json任务清单（逐步提交）：A. 脚手架 & Manifest- manifest.json：permissions（downloads、storage、scripting）、host_permissions（chat.openai.com、claude.ai、gemini.google.com）、sidePanel（如可用）- 入口：popup.html、options.html、side panel（不可用时注入右侧容器）- _locales/zh_CN/messages.json（中文）B. 数据仓库（Dexie）- conversations 表结构：见 PRD（id、platform、title、model、createdAt、updatedAt、messages[]、tags[]）- 读写 API：list、get、upsertMany、remove、search（全文可先粗略包含 title+message）C. 同步 Orchestrator（background）- 队列并发 2、指数退避、进度事件广播（chrome.runtime.sendMessage）- 隐身后台 tab 或 offscreen 方案抓取；幂等：platform+conversationId+updatedAt- Settings：自动增量同步（默认关）D. Provider 适配器（content scripts）- 接口：type Provider = {key: 'chatgpt'|'claude'|'gemini',detect(): Promise<boolean>,listConversations(): Promise<ConvMeta[]>,fetchConversation(id: string): Promise<Conversation>}- ChatGPT 先实现：列表页抓会话元信息；详情页抽 messages（文本、代码块、图片 src）- 图片 fetch→blob→dataURL 存储；Canvas/Artifacts 截图兜底（html2canvas）E. 导出引擎- JSON 直出；Markdown 用 remark；PDF 用 html2canvas + jsPDF（中文字体内置）- 批量导出 ZIP（JSZip）- 文件命名：{platform}_{slug(title)}_{yyyyMMdd_HHmm}.{ext}F. 事件打通- UI：同步按钮→发消息给 background；进度→显示进度条- 列表：勾选→导出所选（多文件/ZIP）- 详情：复制摘要/全文、单条导出按里程碑提交，每步附可运行命令、测试要点和 TODO。你是资深 MV3+TS+React 工程师。请严格遵守以下规则：- 按给定目录结构输出完整可运行代码（包含新增/修改文件的路径）。- 所有模块必须显式类型，避免 any。- UI 只做展示与交互，数据读写统一走 data/repo。- 并发=2、指数退避、幂等指纹=platform+conversationId+updatedAt。- 文案中文，日期 toLocaleString('zh-CN')，按钮含 aria-label。- 输出后自检（见“交付自检清单”），若未通过请自我修正后再给最终答案。交付自检清单：[ ] TypeScript 严格无报错[ ] Popup/SidePanel/Options 3 页面可运行[ ] Dexie 表结构/仓库 API 可用[ ] 同步编排（队列/进度事件）可跑通（假数据模拟也可）[ ] 导出 JSON/MD/PDF/ZIP 命名规范正确[ ] providers/chatgpt.ts 有基本 DOM 解析函数（含兜底截图占位）[ ] UI 统一样式，组件使用 shadcn/ui，动画 <300ms[ ] i18n 钩子可替换，日期 zh-CN[ ] 无任何 any/unused/console 未处理
这个过程，就是我用到了小排老师说的积木化开发工作流。像搭积木一样，把产品的功能一件一件放上去。
结果呢？我只用了不到3天的时间，不仅100%重建了之前所有的功能，而且代码结构清晰、运行稳定，后续迭代变得无比轻松。
口说无凭，直接上图：（能够直接同步GPT的所有对话，支持txt、md、json格式导出）
这张图，就是最终搭建出来的插件。虽然还是MVP，但它核心功能已经完成，后续的功能只需要在上面进行优化和添加即可。
四、真正的心法，才刚刚开始
1、我最大的时间黑洞：无休止的UI迭代
第二个大坑，也是我浪费时间最多的地方，就是和AI反复拉扯UI细节。
痛点： “这个卡片间距再大一点”、“那个同步按钮换个颜色”、“弹窗的动画效果我不喜欢”……相信我，如果你没有一个明确的设计稿，这些对话会占据你开发时间的70%。你会陷入一个可怕的循环：让AI修改 -> 不满意 -> 再修改 -> 还是不满意。
顿悟：设计先行，事半功倍。AI是出色的工程师，但不是懂你的设计师。在和AI因为审美问题大战三百回合后，我终于明白，在动手写代码前，哪怕是用手在纸上画一个粗糙的草图，明确界面的布局、信息结构和核心交互流程，都能避免90%的无效沟通。
2、驯服AI实习生的秘籍之一
在上一篇文章中，我把AI比作一个天才实习生。这次深度合作后，我有了更深的体会：管理一个天才实习生，最难的不是教他做什么，而是让他记住昨天做到了哪里。
决战上下文遗忘：
gpt-codex的上下文超了
痛点： 相信用过AI进行长线开发的朋友都有体会，AI因为上下文窗口限制，你得重开一个对话，这样你得把之前的背景重新给AI阐述一下。
我的解决方案： 我建立了一个外部的项目大脑——一个放在项目根目录下的BACKLOG.md文件。当时分成了五个阶段，stage a-e，有5个文件。
这个文件里记录了：
项目目标和技术栈约定。
所有被拆解好的微小任务清单（To-Do, In-Progress, Done）。
当前正在开发的任务是什么，以及遇到了什么问题。
每次开启新的对话，或者感觉AI开始犯糊涂”时，我都会先把这个文档的核心部分发给AI，对它说：这是我们项目的当前状态和下一步计划，请先阅读并理解。这能帮它恢复记忆，继续我们前面的开发。
结论：别试图挑战上下文限制，要去主动管理它。 这个简单的BACKLOG.md文件，解决了对话老是超过上下文的问题。
3、从做中学到学中觉
这次项目对我最大的冲击，其实是对学习这件事的重新认知。这个过程，我称之为从做中学到学中觉。
（1）学习闭环的完成： 上次我说每一次Debug都是一次宝贵的学习，现在我可以更有底气地说：
我可以负责任地告诉大家，我解决那个同步Bug以及后续重建项目所花的时间，让我学到的东西，远比之前看两个月文档要深刻得多。
（2）知识的内化： 之前从社群里学来的“方法论”是别人的，是知识。只有当你亲手用它去解决了一个真实且棘手的问题，踩过了那些理论中没提到的坑，
这些知识才会真正长在自己身上，变成自己的能力和智慧。这个过程，就是从知道到做到的飞跃，也是学中觉——在学习和实践中，觉悟和成长。
五、写在最后：这只是一个开始
未来规划： 目前，AI Chat Sync还只是一个MVP，但它已经稳定可用。后续，我会继续为它添加更强大的功能，比如导出为PDF、支持更多AI平台、甚至考虑上架Chrome商店。
回归初心： 这个从0到1的完整经历，就是我希望分享给所有同路人的内容——真实、不加掩饰、充满挑战但终有回报。这也正是我做这个垂直小号的初衷。
如果你也一直在学习、在观望，希望我的这两篇文章能给你一点动手的勇气。不要怕Bug，Bug是你最好的老师。
关注我——刘luck（公众号：刘辣可AI出海），让我们一起，把想法变成现实。
关注我—刘辣可AI出海，带你解锁更多AI神器。