前端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 后,就是虚竹,无崖子传你毕生功力,直接登顶武林。