从工作流的搭建开始，直至自动化集成，从架构的设计起始，到协作模式的优化，一系列进阶技巧现正使得Code 的潜能得以被充分挖掘，这些实战经验不但提升了 AI 编程的效率，而且更重塑了人与 AI 协同开发的逻辑。

现在，还有人用不好 Code 吗？

有没有人有需求一提，它计划弄得来繁琐缭乱，一执行就代码出现问题，好不容易把一个错误修复好，又带出三个新的错误呢？

历经了好几个月的实际战斗以及所谓的“被教育”，我归纳出了一种工作流程，它能够切实地“榨干”Code的潜能 。

从这一切起始，是因为我做出了决定，决定亲手搓弄出一个AI浏览器插件，这个插件旨在解决我出海时所遭遇的痛点 。

这个插件核心目标是简单的codejock 16，然而在实现的时候，每一步都对我与AI协作的默契进行着考验。

插件介绍：AI .0 发布｜AI 在出海社媒场景的落地实践

好了，废话不多说，咱们直接上干货！

我在开发这个插件期间，总结出了30个实战技巧，这些技巧能让Code从“玩具”转变为“武器”，是在开发此插件的进程中得出的 。

第一章：环境与心法——打好地基，事半功倍

1. 技术栈选型：只用AI最擅长的

缘于AI具备擅长的特质，这就表明社区当中与之相关的高质量代码数量众多，进而使得AI训练得更为充分，最终达成犯错率更低的结果。

譬如，在前端框架里，将 AI 应用于 Vue 时，会发现其使用体验欠佳，然而把 AI 用于 React 则效果颇佳，相较于 Vue，React 在 AI 编程方面更为普遍适用。

参考示例：网站/插件前端：Next.js +

后端服务：

样式：

CSS数据库： (或)

部署：

2. .md：给AI注入项目“灵魂”

这属于启动任何一个项目之前必然要去做的项目 我是在项目的根目录那里创建. md ，将所有插件所含应有的核心信息全部都填进去过 。编写浏览器插件时，其技术栈采用Next.js、CSS、V3 ，核心功能涵盖AI内容本地化、AI回复建议以及社区规则解读，目标平台为某些特定平台 。关于代码规范，组件使用时的名字要求遵循特定规则 ，API请求函数必须要用try - catch进行包裹 。所有跟API交互的代码 ，都得在特定的.js或者.js 里去处理 ，这是需要注意的事项 。

3. 全局提示词 (/)：为AI装上“审视之眼”

有的时候，并非是AI不具备相应能力，而是需求的一方没有考虑清楚自身究竟想要去做什么，进而使得效率变得低下。

这“自虐式”提示词是解决方案：要用中文回答。每次都得用审视目光，认真去看我输入的潜在问题，你需指出我的问题，还要给出明显处于我思考框架以外的建议。若你觉得我说得太离谱，那就骂回来，帮我立刻清醒。

它能够有效地防止我提出那些模糊不已或者不切实际的需求，使得 AI 从一个处于被动状态的执行者，转变成为一个主动积极的、具备批判性思维的协作伙伴。

4. Git版本控制：唯一“后悔药”

Code不存在内置版本管理，进行开箱即用实践时，git init要在项目开始之际马上初始化，每达成一个最小可用功能点，就要当即提交，git -m “feat: ”，git -b 。

开发新功能，比如说“AI回复建议”这个功能的时候，要去创建新分支。

当人工智能将代码改造得出现故障时，git重置至最难恢复的值，能使你瞬间回到还未开始所做之事的状态，。

第二章：核心工作流当中，存在着从需求到代码的丝滑闭环，在此闭环之内5. 会有交互模式切换，其切换方式为 (Shift + Tab)，针对此切换存在以三板斧应对不同场景的情况 。

这是我使用频率最为高的快捷键，开箱即可运用实践，规划的阶段进行切换，去到**计划模式 (Plan Mode)**，使得AI率先为“社区规则解读”功能给出详尽的实现步骤，执行阶段，在确认计划之后，切换至**自动接受编辑 (Auto- Edits)**，让其批量生成代码codejock 16，调试阶段，转换回**一般模式**，做出精细的手动确认以及修改。

按照任务阶段挑选恰当的模式，可大幅提高效率，防止在进行规划期间陷入代码细节之中，或者在执行进程里被反复确认所干扰，。

6. 探索-计划 (think 模式)：先谋后动，谋定后动

面对插件具备的复杂功能，像是“发帖建议分析”这样种，我不会径直让其去编写代码。

但是，困难的是：要为“发帖建议分析”这个功能着手拟定一份精细详尽的计划。这就要求去剖析当下的那些热门帖子，从中提取出主题以及标题的模式，并且还要结合用户所输入的产品名称，进而生成三个各不相同的发帖角度。之后把这份计划留存到。

/post-.md。

运用think，使出think hard等关键词，能够把控AI的“思考预算”。强行致使AI预先给出详尽计划，可保证其实现路径是正确无误的，借此防止一开始就偏离正轨，进而浪费大量的时间以及Token。

7. 测试驱动开发 (TDD)

这是防止AI“自由发挥”的最强手段。

我在开展开发“”里的文本提取函数期间，首先撰写了测试：// utils/.test.(‘ 标题以及 源自 HTML’， => { … });我们此刻正进行着TDD。请于utils/.js里达成 函数，以便它能够通过这一测试。不要对测试文件作出修改。

用于测试的用例，给人工智能提供了一种相当清晰、特别客观、绝对唯一的达成标准，它的全部代码修改，都一定是为了达成“让测试呈现绿色”这一目的，极大程度地对其行为起到了约束作用，从而保证了代码品质。

8. 自定义Slash命令：封装你的重复工作

我把“创建新功能组件”这个流程封装成了一个命令。

给进行插件创建的一个全新的React组件，要在src这个目录之下，去创建一个名为$.tsx的崭新文件。此类组件需要利用CSS，然后导出一个具备基础性质的React函数组件 。

使用：/-

封把高频且重复的任务流弄成自定义命令，可把多步操作简化成一行指令，极大地提升开发效率 。

9. Meta-Slash-：让AI帮你写命令

当我有需求，就是那种需要一个带有版本管理属性的命令之际，我径直让人工智能帮我去完成生成的动作。有这样一种开箱就能够使用起来的实践情况：“/-- ‘gh:-pr “对PR予以审查并且评论” ’” 。

让“自动化”思想得到升华，工作流自身可以实现自动化也就算了，连创建自动化的那个过程竟然也能够达成自动化 。

10. v0.dev + Code：搞定UI

插件的设置面板的用户界面较为复杂，我没要 Code 勉强去写。开箱即用的实践情况是：在 v0.dev 里运用自然语言进行描述，内容为：“有一个侧边栏设置面板，其中含有一个 API Key 输入框，以及一个模型选择下拉菜单。”把从 v0 生成的 React 及代码复制粘贴出来。交给 Code 时如此表述：“这是设置面板的用户界面代码，请针对它接入状态管理，并且达成保存设置至 . 的逻辑。”。

v0.dev 擅长UI生成， Code 擅长逻辑实现。

两者结合，能以最高效率产出高质量的前端组件。

第三章：上下文跟交互——切中目标地给予，达成高效交流，11. 精确指令：摒弃多余话语，仅传递有用内容，。

模糊指令 : “修复一下回复建议的bug”

明确具体指令 ： “对组件存在的bug予以修复 ： 在点击‘获取回复建议’按钮这个情况时 ， 要是API请求出现失败状况 ， 当下界面会出现卡顿现象 。 需在catch块里面增添逻辑 ， 把状态设置为false ， 并且展示出一条错误提示 。”。

12. 刨根问底：别怕问“白痴”问题

当我搞不懂

的异步回调之际。开箱即用之实践哟：我身为一个对插件开发全然不懂的后端程序员。请借由一个着手寄快递的事例，阐释一下.js 与 -.js 之间缘何要运用通信，以及回调函数所扮演得出何种角色。

不要再装作你已然看懂了，将AI视作一个拥有耐心的老师，并反复进行追问，一直到你确实真正理解了才停止，好多深层次的bug均源自于对基础概念的那种模糊理解。

13. 关于上下文的管理，其中包括“/clear”以及“/”，其目的在于使得对话维持“干净”的状态。

在将“AI回复建议”功能予以完成之后，在筹备开启做“社区规则解读”之前，我会先行运用 /clear。

能够切实有效地避免以往的、毫无关联的上下文方面的信息，对AI针对新任务的理解造成干扰。

14. 多种数据输入方式：灵活投喂

将cat error.log进行管道输入，处理日志，在@/src/utils/api.js这个文件中，让AI阅读特定的该文件；输入/path/to/.png这个图片路径，让AI看UI设计稿，但其中存在“分析错误” 。

15. 回滚 (回滚, 撤销)：一键撤销AI的“骚操作”

当AI自作主张删掉了一个关键函数时，直接输入“回滚”。

这是一种撤销方式，它比git reset更为轻量级，它专门被用于回退文件修改，此修改是AI在当前会话当中所做出的 。

16. 历史消息 (ESC x 2)：快速复用指令

按两次ESC，能快速调出，还能重新编辑之前的指令。第四章说的是扩展与自动化，其内容是突破边界，解放双手 。

17. MCP集成：扩展能力

开发插件之际，我整合了两个核心MCP。开箱即用的实践呈现为：“请予以使用，告知我最新版react - query里的和选项存在怎样的区别。”以及“借助打开此帖子，截取整个评论区截图，剖析评论的情绪倾向。”。

MCP使得Code突破了它自己知识库的限制，能够去调用外部工具来获取实时信息，还能够执行浏览器操作，其能力边界得到了极大的扩展。

18. Bash模式 (!)：简单命令，无需动脑

当需要去查看处于当前目录之下的文件列表之时，我乃是径直去运用！ls - l 。而为何会更具好用之处呢：针对于那些较为简单的 shell 命令而言，运用 ！前缀能够直接于 bash 之中去予以执行，并不需要历经大模型的思考过程，速度是比较快的，并且不需要花费钱财。

19. 无头模式 ( -p “…”)：CI/CD集成

码的格式化检查被我加进了CI流程之中。开箱即用的实践（.json）：””：{“lint：”：“-p‘对所有暂存文件予以检查，并就不符合规范之处进行报告。’” }。

没有头部的模式使得Code能够作为自动化脚本的一部分被调用，达成代码的自动化检查，完成代码的修复，实现代码的部署。

20. Pre- Hooks：提交前的最后一道防线

往.git/hooks/pre- 里头加入脚本，促使 Code 在每一次提交之前自动去检查代码，以此确保入库代码的质量 。

21. Code Hooks：生命周期内的精细控制

我弄好了一个钩子，于每一次把.tsx文件编完之后自动去运行，拿出就用实践 (./.json)：事件等于空字符串 。

hooks.

= “” =

“src/**/*.tsx”

= “ –write $”

Hooks具备在Code执行流程当中注入自定义逻辑的那种能力，达成了更深程度上的自动化。第五章：架构与重构——写出能够维护的良好代码 。

22. Roo Code + Code：架构先行

在设计插件的整体架构时，我先用了Roo Code。

按开箱即用实践要求，于其中安装Roo Code插件，接着选择模式，之后与Roo Code对话，要明确该插件里的模块划分（涵盖UI、内容脚本、背景服务、API通信这些方面），最后把Roo Code所生成的架构图以及文档，发送给Code，让其依据这些来进行编码。

擅长架构设计以及可视化的是Roo Code，擅长代码实现的是Code，因为分工合作，所以能确保项目从一开始就拥有清晰且合理的结构，真是这样的。

23. 持续重构：别让AI的“代码屎山”埋了你

假使察觉到-.js之中的逻辑正日益变得臃肿起来的时候：那就对-.js文件予以剖析。它当下同时处理着DOM操作、API请求以及状态缓存，逻辑呈现出混乱的情形。请给出一项重构的方案，把它拆分成三个相互独立的模块：dom-.js、api-.js、state-.js。先给我一份重构的计划，不要直接去动手。

将AI反复修改之后，极易生出“代码熵增”这种状况。要想让代码库维持健康且具备可维护性，定期、主动地促使AI去实现重构，是一项必不可少的操作。

24. 复杂逻辑拆分为微服务

要是“发帖建议分析”此项功能变得特别复杂，涵盖了多源数据采集，还有NLP处理以及模型调用等方面，那我会把它剥离掉。

要是单个文件或者模块的逻辑复杂度超出了AI能够稳住处理的范围，把它拆分成独立的，借助HTTP通信的服务，这是解决“AI幻觉”的根本办法。

25. 学习设计模式和代码简洁之道

将这视为对于使用者的要求，对于此要求而言，你需要知晓一些基本的设计原则，你适才为我生成了api-.js，那就这一产出请进行分析，分析此产出符合哪些设计模式（像是工厂模式、单例模式），并且判断其是否遵循了《代码简洁之道》里的单一职责原则 。

你对软件工程的理解深度，决定了AI 编程效果的上限。

第六章：性能跟协作——用尽最后的那点滴价值，26. Code模式：双重协作。

我时常开启俩终端窗口，其一用以编码，另一用来审查。开箱即用之实践：终端一：“达成AI回复建议的UI界面”，终端二：“请去审视适才所实现的.tsx组件，核查其代码风格以及可复用性。”，。

利用AI的“左右互搏”，能从不同角度发现代码中的潜在问题。

27. 并行开发 (git )：多个AI同时干活

当我非得同时去运作“UI美化”以及“性能优化”这两项功能之际。开箱即可运用的实践便是：git add -b /ui- ../-uigit add -b / ../-perf，要分别于两个全新的目录当中启动Code 。

git给并行开发供给了堪称完美的、能相互隔离的环境，使得你能够在同一时间发动多个Code实例去处理不一样的任务，从而大幅度提高开发吞吐量。

28. IDE集成：在熟悉的环境中实践

我将Code集成于或VS Code的终端里面，能够持续运用IDE原生的文件管理功能，还要运用代码高亮功能，以及调试等功能，以此做到扬长补短，。

29. CLI快捷键（Emacs模式）

开启箱子就可以直接使用的实践是，按下Ctrl + A /Ctrl + E ，能够实现跳转到行的开头或者行的末尾。按下Ctrl + U /Ctrl + K ，能够去删除整行的内容，或者删除行末尾的内容。

30. 版本升级 (npm -g …)：永远使用最新版

要定期去运行升级命令，以此来确保你所使用的是最新版本的 Code。归结起来，核心之处就在于一句话：你务必让自己成为一名优秀的架构师以及项目经理，如此才能够将 Code 这个虽然能力极为出众，但却丝毫没有经验的“实习生”，调教转变成为你最为得力的编程伙伴 。

如有侵权请联系删除！