关于 Vibe-Coding 和 AI Agent 的 18 个使用技巧！

还是老话：vibe coding 是实践性极强的手艺，一切技巧全靠自己踩坑，非常考研技术！

在 2025 年我使用 vibe coding 和 后来的 AI agent 生成了有不下 100 套前端项目了，主要是 HTML 网页，我今晚就写点我自己的技巧。

使用 AI agent 前的基本功锻炼和准备工作：

第1点，保持代码短小精悍，单文件在 400 行之内。对于 LLM 来说，能瞬间以极高的效率读完且理解完成！

第2点，将 JS 和 CSS 内联到单个 HTML 里，麻烦少。不仅与 LLMs 对话修改方便，调试方便，省钱，而且给 github 托管和分发的压力也会更少。

第3点，避免使用 React ，避免 JSX 这个食之无味弃之可惜的鸡肋的多余的步骤。

第4点，依赖越少越好，如果避免不了，尽可能使用很知名很知名很知名的项目的 CDN 库。

第5点，使用 CDN 好，不建议使用 NPM ，生产效率会低，浪费钱，后续托管也会麻烦。尽量吧。我喜欢 CDN。

第6点，至于 CDN ，jsDelivr 比较好用，或者说 cdnjs 也可以。比较稳定。早年间 AI 直接输出 CDN URL 可能仍会出错（有阴影了），所以最好自行去官网找到可真实使用的 js 库 cdn URL。

第7点，最简单的托管是 GitHub Pages ，也可以选择 cloudflare pages 、vercel 、 netlify 。后面三个属于生产项目使用的。我四个都有在用。

第8点，很多前端项目，都没有后端服务器，因此可以将一些布局、表单状态，储存到 URL 中，容易让游客收藏和分享。较多的数据，则存在 localStorage 里，包括秘钥。因为服务器无法直接访问到localStorage 里的数据。（尤其是用户自己的 LLMs API 秘钥）

第9点，每个项目，都有一个 MVP（最小可行性项目），一开始，就使用 400 行左右的 html 单文件反复调试。等感觉差不多了，送到 coding agent ，让它们进一步处理。比如 Trea 或者 Trea solo、Claude Code for web 、 Codex Cloud 、Codex CLI..... 因为这些工具能自己测试、自己优化。

第10点，在网上逛时，多收集一些支持 CORS 访问的 API ，也就是支持跨域访问。这些很多时候能给你的新项目增加很多花样。比如 http://raw.githubusercontent.com 可以让你访问 github 里的任何公开仓库的任何内容， 无速率限制，Mastodon 的 API 也是可以 CORS 访问的。还有很多免费且无限制的 公共著名 API :

• Wikipedia API 维基百科 API
• OpenStreetMap Tile 地图查询 API
• Open Library API 书籍信息 API
• Random User API 数学数字类查询 API
• IPify API 用户 IP 信息
• 等等等（毕竟 API + CDN + JS = 产品 ）多问 AI，多找，多收藏
• github 上也有类似的库
• https://devdocs.io/ 这个网站也可以查询

第11点，善用 WebAssembly （让 AI 教你用），让一些桌面软件，在浏览器里运行！这个目前是蓝海市场，很容易提高 SEO 流量。有流量了，离挣钱就不远了。你看 https://squoosh.app/ 每月 200 万次的流量，哎呀羡慕死我了。他们就是把几个 python 里的顶级图片压缩包给带到了浏览器（用了 Pyodide 技术）。

第12点，闲着没事，就用 AI 做一些迷你小工具放到互联网上招呼 SEO，并放到本地。对于使用 AI agent 或 LLM assistants 来说，你可以把你制作的一大堆短短的小实力工具，给列一个目录txt，后续告诉 agent 有个这东西，让 AI 自己用到了就去读一下。这样，AI 生成的代码，可运行性将会很高！也省下很多 AI agent 反复调试的铺张浪费之金钱。 而且还能锻炼你用 AI 写代码的经验。（大概意思就是，这也算是【复利】的力量吧，不是玄学）

第13点，AI agent 还可以完美组合你之前写的小工具，说不定能蹦出新灵感（感兴趣，可以呼唤你的 agent 去试试）。

下面是使用 AI agent 的一些提示词案例（下面是基于 Codex CLI 搞的）：

第一步，让 AI 检查代码库，并生成自己想要的新项目的规范：

最终任务：创建一个 JavaScript 版本的  xxx 项目

该项目是一个 xxx 的 xxx 库。拥有 xxxx 的 API，但采用 JavaScript 实现。

除了原生 JavaScript 外，该库将不依赖任何其他组件，因此能在浏览器、node.js 及其他环境中完美运行。

请先阅读 xxx 目录，并为新库设计面向用户的 API

创建一份包含这个设计计划的plan.md 文件放到根目录。

第二步，咱们打开 plan.md ，审阅一下，然后修改。注意，是告诉 AI ，让 ai 修改，不是咱们手动修改。在 AI agent 模式，最好不要手动干预代码，动嘴就行了！

第三步，感觉不错，就告诉AI，现在开始实现！

第四步，如果有必要，让它自动实现 git 以及自动提交。让它一步一步来，一个功能实现，就提交一次。电脑设置成常亮不休眠模式，好，让 它 自己工作吧！出去逛逛，看看城市的风光！买个菜，吃个麻辣烫。

第五步，git 的最大意义是，能够让我们通过手机，就能监控当前的进度。毕竟一般让 AI 写个复杂的项目，需要好几个小时。ChatGPT 5.2 的话，大约每小时也就二十元左右人民币。

其实 AI agent 过程没有很难，毕竟也很难去干预它的运行。我们得知道，别一上来就让 AI 给你搞个大系统。你得先从最简单的 能够跑通的 一个小点开始，然后慢慢在这个基础上增加功能。我看过太多零基础的朋友，上来把几千字的需求文档甩给 AI，然后期待奇迹发生，结果得到的是一堆无法运行的垃圾。读读盖尔定律，你会明白为什么要小步快跑。

最好，要好好搞好，单次 LLMs 对话生成，这样你会有那个感觉，最后成品会更好。