从构建工作流程到实现自动化整合，从架构规划到协作方式的改进，诸多高级技巧正助力 Code 的潜力得到全面释放。这些宝贵的实践经验不仅显著提高了人工智能编程的效能，而且正在重塑人类与人工智能协同开发的思维模式。

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

有人提出这样的设想，它声称要实现得非常完美，可一旦付诸实践，代码却屡屡出现问题，好不容易修复了一个漏洞，却又引发了三个新的问题。

经过数月的实际操作与接受指导，我提炼了一套能够充分挖掘Code潜能的工作流程。

这一切，源于我作出抉择，着手研发一款旨在解决我出海时遇到困扰的AI浏览器插件。

该插件的核心宗旨相当明确，然而，在实施过程中，每一步都对我的与AI的协作默契提出了严格的考验。

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

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

在开发这款插件的过程中，我归纳整理出了30项实战技巧，这些技巧能将Code从单纯的娱乐工具转变为强大的武器。

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

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

由于AI技术卓越，社区中涌现了大量优质代码，这使得AI的训练更为全面，其错误率也因此显著降低。

在前端框架领域，将 AI 与 Vue 结合使用往往效果不佳，然而，若改为 React，则会显得相当出色，特别是在 AI 编程方面，React 的适用性更为广泛。

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

后端服务：

样式：

CSS数据库： (或)

部署：

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

启动任何项目之前，这一步骤是不可或缺的。我在项目的根目录下创建了一个名为.md的文件，并将插件的核心信息详细记录其中。项目涉及的基础信息包括：一款浏览器插件，其技术架构为Next.js、CSS，版本号为V3；核心功能涵盖AI内容的本地化处理、AI回复建议以及社区规则的解读；目标平台尚未明确指定。在开发过程中，需遵循以下规范：代码编写需遵循一定的规范，组件命名需清晰明确，API请求函数必须使用try-catch语句进行异常处理；同时，所有与API交互的代码必须在.js或.js文件中进行处理。

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

有时并非人工智能的能力有限，而是因为需求方在规划自身目标时缺乏明确，这才导致了工作效率的降低。

这解决方案便是所谓的“自虐式”提示词，即用中文进行回答。每次回答时，你需以审视的目光，细致地审视我输入的潜在问题。你不仅要指出我的问题所在，还需提供那些超脱我思考框架的建议。若你认为我的言论过于荒谬，不妨直言不讳，助我迅速恢复清醒。

此功能能有效避免我提出含糊不清或不符合实际的要求，使AI从单纯的执行者转变为一位主动参与、具备批判性思维的合作伙伴。

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

代码本身不具备版本控制功能。在项目启动阶段，直接执行“git init”进行初始化。每当实现一个基本的功能模块，便立即使用“git -m ‘feat:’”进行提交。创建分支时，使用“git -b”。

在开发新增功能，例如“AI回复建议”等，的过程中，需设立新的分支进行操作。

若AI误将代码弄乱，使用git reset –hard命令即可瞬间将状态回溯至最初。

第二章：核心工作流——实现需求至代码的无缝衔接5. 交互模式转换（按Shift + Tab键）：三招策略应对各种情境

这是我日常使用频率最高的快捷键。开箱即用的操作流程包括：在规划阶段，切换至**计划模式 (Plan Mode)**，让AI为“社区规则解读”功能提供详尽的实施步骤；进入执行阶段，确认计划后，再切换至**自动接受编辑 (Auto- Edits)**，以便批量生成代码。调试过程中：需切换至常规操作模式，并对细节进行细致的人工核对与调整。

依据项目进展的不同阶段，挑选恰当的工作方式，这不仅能显著提高工作效率，还能有效防止在制定计划时过度纠缠于代码的细节，或在实施过程中频繁中断以进行确认。

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

面对插件中那些较为复杂的特性，诸如“发帖建议分析”这类功能，我并不会让其直接生成代码。

而是，需为“发帖建议分析”功能编制一份周密的实施策略。首先，对现有的热门帖文进行深入剖析，挖掘其核心主题和标题构造规律；其次，依据用户提供的商品名称，构思出三种独特的发帖视角；最后，将此策略妥善保存。

/post-.md。

通过运用“思考”、“深思熟虑”等关键词，我们可以对AI的“思考资源”进行有效调控。迫使AI先提出详尽的计划，这样做能够保证其执行路径的正确性，从而避免一开始就误入歧途，造成时间和Token的浪费。

7. 测试驱动开发 (TDD)

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

在编写“”文本提取功能的测试代码时，我首先编写了如下测试用例：// utils/.test.(‘ title and from HTML’, => { … });目前我们正采用TDD（测试驱动开发）模式。请于 utils/.js 文件中实现该函数，确保其能够通过上述测试。请注意，不得对测试文件进行任何修改。

测试用例为AI设定了明确、公正、不二的标准。所有代码的调整都必须以“使测试通过”为目标，这一要求严格限制了AI的行为，从而确保了代码的优良品质。

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

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

在src目录中，请新建一个以$.tsx命名的文件，用于构建一个React组件。此组件应采用CSS进行样式设计，并最终导出一个基础的React函数组件。

使用：/-

将频繁且反复执行的任务流程整合为定制化的指令，从而将一系列步骤浓缩成单行命令，显著提高了编程的效率。

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

在需要执行具备版本控制功能的指令时，我通常会请求AI为我自动生成。这种开箱即用的操作方式，具体表现为：使用命令“gh:-pr ‘对提交请求进行审查及发表评论’”。

深化“自动化”理念：不仅工作流程本身能够实现自动化，而且构建自动化流程的整个过程亦能被自动化处理。

10. v0.dev + Code：搞定UI

插件配置界面的设计相当繁琐，因此我并未强迫Code勉为其难地完成编写。在v0.dev的实际操作中，我以自然语言进行了如下描述：“该侧边栏配置面板内含一个API密钥输入区域，以及一个可供选择的模型下拉菜单。”随后，我将v0生成的React代码进行了复制。将代码交付：“该代码为设置面板的用户界面部分，需为其添加状态管理功能，并确保能够将设置信息保存至相应的文件。”

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

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

第三章：上下文与交互——精准投喂，高效沟通11. 指令明确：摒弃冗言，仅传递有用信息

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

在进行组件bug修复时，需注意：点击“获取回复建议”按钮后，若API请求出现故障，当前界面将出现停滞现象。为此，建议在catch块中加入相应逻辑，将状态调整为false，同时弹出一条错误信息提示用户。

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

当我搞不懂

在处理异步回调的情况下，作为一个对插件开发一窍不通的后端程序员，我尝试用寄快递的实例来阐述为何在 .js 和 -.js 之间需要通过某种方式实现通信，并探讨回调函数在其中所扮演的关键角色。

别装作你已领会。将人工智能视作一位有耐心的导师，不断提问，直至你真正掌握。众多深藏的缺陷，往往源自对基础知识的模糊认知。

确保对话内容清晰，避免杂乱无章。

在成功开发出“AI回复建议”这一功能之后，在着手进行“社区规则解读”项目之前，我打算先执行一次/clear操作。

此措施能有力避免过往的、无关的背景资料对AI对当前任务的认知造成干扰。

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

执行命令，将错误日志文件传递至分析程序，进行错误信息的处理。在文件路径/@/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-目录下添加脚本，该脚本会在每次代码提交之前自动执行，用以确保存入仓库的代码质量得到保障。

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

我设立了一个触发器，该触发器会在每次对.tsx文件进行编辑操作后自动执行。该功能支持即装即用，具体配置文件位于（./.json）中，其中事件类型被设置为空字符串。

hooks.

= “” =

“src/**/*.tsx”

= “ –write $”

Hooks赋予用户在代码执行过程中插入自定义逻辑的权限，从而实现了更为深入的自动化。在第五章中，我们将探讨架构与重构，旨在编写出易于维护的高质量代码。

22. Roo Code + Code：架构先行

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

直接开箱使用体验：于系统中安装Roo Code插件，挑选使用模式。与Roo Code进行沟通，清晰了解其模块的划分，包括用户界面、内容脚本、后台服务以及API交互。将Roo Code生成的系统架构图和详细文档发送给开发团队，依据这些资料进行编程工作。

Roo Code在架构设计与可视化方面表现出色，而Code则在编程实现上技艺高超。他们相互协作，共同确保项目从启动阶段起便拥有明确且合理的架构布局。

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

当发现-.js文件中的逻辑变得过于庞大时，请对-.js文件进行深入分析。目前，该文件正同时负责处理DOM操作、API请求以及状态缓存，导致逻辑显得杂乱无章。为此，建议制定一个重构方案，将原有功能拆分成三个独立的模块：dom-.js、api-.js和state-.js。在着手实施之前，请先提供一份详细的重构计划。

经过多次修改，AI系统往往会面临“代码熵增”的问题。为了确保代码库的健壮性和易于维护，定期且主动地对AI进行重构变得尤为关键。

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

若“发帖建议分析”这一功能变得极其繁杂，涉及众多数据来源的收集、自然语言处理技术的应用以及模型的调用等多个环节，我计划将其独立出来。

若一个文件或模块的逻辑复杂性超出了人工智能稳定处理的范围codejock 17，那么将其拆分成若干独立的、通过HTTP进行交互的服务，便成为了消除“AI幻觉”的关键策略。

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

这是对您提出的要求。您需要掌握一些基础的设计理念。您之前为我创建了api-.js文件。请您分析一下，这一实现是否采用了诸如工厂模式、单例模式等设计模式？同时，它是否遵循了《代码简洁之道》中倡导的单一职责原则？

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

第六章：性能与协作——深挖潜在价值至极致26. 编码模式：并行协同

我常常同时开启两个终端窗口，一个用于编写代码，另一个则用于进行审查。具体操作如下：在终端1中，我执行的是“构建AI回复建议的UI界面”的任务；而在终端2中，我则需要审查之前所实现的.tsx组件，仔细检查其代码的规范性以及可重复使用的程度。

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

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

Git为并行开发创造了理想且独立的作业空间，使得你可以并行操控多个代码版本，分别执行不同的工作，从而显著提高了开发效率。

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

我将Code整合进VS Code的终端之中，得以继续利用集成开发环境自带的文件管理、代码高亮显示以及调试等特性，实现优势互补。

29. CLI快捷键（Emacs模式）

开箱即用功能体验：使用快捷键Ctrl + Acodejock 17，可快速定位至行首；使用Ctrl + E，则可便捷地跳转至行尾。若需删除整行或行尾内容，请按Ctrl + U或Ctrl + K。

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

持续执行更新指令，以保证你所使用的Code始终处于最新状态。概括而言，关键在于一点：唯有你，一位卓越的架构师兼项目经理，才能将这位才华横溢却缺乏经验的“新手”，培养成为你最为信赖的编程助手。

如有侵权请联系删除！