前端AI编程小记

　　传统的古法编程，用的最多的是搜索引擎，浏览各类博文、StackOverflow的帖子等。

　　

　　经常会遇到的场景是，搜到的解决方案无法直接使用，或者搜到的是错误的，或者是搜不到，只能去浏览官方文档。

　　种种壁垒让古法编程的效率变得很低，从去年开始，我借助 AI 来辅助编程，效率是直接起飞。

　　在此，记录下 AI 辅助编程的两个阶段。

一、在线免费网页

　　替代搜索引擎，去千问、deepseek的网页版中提问。描述各类问题，然后让 AI 回答。

　　之前的《大批量图优化》就是这么一句一句的问答，慢慢做的优化。

　　这类在线问答比之前的搜索引擎，准确性要高很多，尤其是各类开源库的使用，可以给我准确的答复。

　　自己去消化在线文档，费时费力，有些文档细节处还有缺失，都会拖慢开发进度。

　　不过，这类 AI 与我本地的项目有点割裂，当需求比较复杂，无法修改大量的本地代码。

　　期间，还用过国外的 lovable、v0 去生成官网，具体过程记录在《AI生成官网》，这两个都是付费的，但有免费额度。

二、付费客户端

　　最先用的客户端是 Cursor，就试用了一下，但也要付费，后面就没继续使用。

　　在生成官网的时候，组员推荐了 Antigravity，登录就搞了蛮久，后面将免费额度也用完了。

　　由此可见，若要用 AI，就得付费，Claude 封号太厉害，有个组件付费一个月，结果还没用一周就被封号了。

　　自己之前有 ChatGPT 的账号，就想着继续用了，也费了老大劲才订阅成功，一开始每个月 $20，后面公司报销升级到 $100。

　　升级完以后，用起来才舒服，不然 5 小时的额度，很快就没了。

　　用了 Codex 后，让它直接读本地代码，公司用的飞书，也加了 cli 可以在 AI 中直接读文档，甚至聊天记录。

　　每个项目创建了一个 AGENTS.md 文件，在网上还浏览到了 AI 工作流的概念，就也让 AI 生成并维护了一份。

　　工作流就是为 AI 提供研发步骤、编码约定、检查规则和评测能力，各类约束集合，省得 AI 太发散影响结果。

ai-workflows/
├── ENTRY.md                         # AI 默认入口：识别任务、选择流程
├── README.md                        # 项目介绍和使用导航
├── workflows/                       # 研发流程
│   ├── feature-development.md       # 功能开发
│   ├── bug-fix.md                   # 普通缺陷修复
│   ├── hotfix.md                    # 生产紧急修复
│   ├── refactor.md                  # 保持行为不变的重构
│   ├── review-and-merge.md          # 评审、提交与合入
├── skills/                          # 按需加载的专项能力
├── hooks/                           # 各阶段的检查约定
│   ├── config.yaml                  # Hook 配置
│   ├── before-message/              # 上下文保护、流程选择
│   ├── skill-loaded/                # Skill 上下文与契约检查
│   ├── after-edit/                  # 修改范围检查、质量门禁
│   └── after-message/               # 完成度审计、交付总结
├── references/                      # 共享参考规范
│   ├── error-handling.md            # 异常处理、try-catch 约定
│   └── related-projects.md          # 关联项目职责和路径
├── templates/                       # 实现模板
│   ├── react/admin-list-page.md     # React 管理后台列表页
│   └── vue/activity-page.md 　　　　 # 活动页
├── schemas/                         # 结构化输出的 JSON Schema
└── evals/                           # 工作流评测体系

　　现在每次要做需求，还会配合使用 OpenSpec，创建和管理软件规范，它会在本地生成几种规划文件。

　　这些文件就是让 AI 读的，下次让 AI 重新读，就能马上知道上下文了。

　　OpenSpec 定义 AI 做什么，AGENTS.md 和 AI 工作流会自动的去指导 AI 怎么做。

　　这套组合拳下来，在我对文档进行细致的审核后，生成的代码又快又准，还能自带测试。

　　有了 AI 后，之前很耗人工的操作都能迎刃而解，例如 Node 环境升级，我现在是 16 想升级到 24。

　　版本跨度比较大，让 AI 去分析后，发现只要升级依赖的两个库就行了。如果自己来，还得一个个的去确认。

　　AI 就是一句话的时间。不仅如此，还能借助 AI 去完成各种创新工作，例如在项目中与飞书交互。

　　原先需要浏览官方文档，慢慢调试，现在几句话就行了。

　　还可以跨端工作，运维的配置，问 AI 就能给出相关的答案，还很准。

　　现在自己做的很多是决策、校验的工作，以及挖掘创新。

　　手写的场景的确越来越少，和 AI 比不了写代码的速度。

　　最后，以金庸武侠剧作个类比。

　　有 AI 之前走的是郭靖的路，一步一步来，慢慢积累学习；有 AI 后，就是虚竹，无崖子传你毕生功力，直接登顶武林。