AI 编码技巧篇(内部分享)

演讲 PPT 也是 AI 生成的

还有个manus在线版:aicoding-ee5dej8g.manus.space

很久没发文章了,不知道还有没有人看

1. AI发展

AI 人工智能(artificial intelligence)

1.1. Transformer 架构

text 复制代码
输入: "LLM是什么"
    ↓
[Tokenization] → 切分成词元: ["LLM", "是", "什么"]
    ↓
[Embedding] → 转换为数字向量
    ↓
[Self-Attention] → 理解词与词之间的关系(关键!)
    ↓
[前馈网络] → 多层处理
    ↓
[输出层] → 预测下一个词的概率分布
    ↓
输出: "LLM是大语言模型..."

1.2. 5 大阶段

L1:聊天机器人,具有对话能力的AI,ChatGPT。

L2:推理者,像人类一样能够解决问题的AI,深度思考,DeepSeek。

L3:智能体,不仅能思考,还可以采取行动的AI系统,Agent。

L4:创新者,能够协助发明创造的AI。 AI医药发明

L5:组织者,可以完成组织工作的AI。钢铁侠贾维斯

对于我们开发者来说,目前主要接触的是 L1-L3 阶段。L1 就是日常问答,L2 是代码推理和debug,L3 就是 Cursor Agent、Warp Agent 这类能直接改代码跑命令的工具。

2. Prompt

2.1. 需不需要学习?

AI 提示词需要学习吗?总是说AI prompt很重要,然后要教学怎么写,我用ai的话,我直接问你需要哪些信息不就行了,为什么要专门去学这些,而且效果还不一定好

直接问 vs 主动学习的区别

1、被动 vs 主动的效率差异
◦ 你每次都需要我来引导你补充信息,这增加了交互轮次
◦ 如果你懂基本原理,可以一次把关键信息都给我,减少往返
2、质量差异
◦ 一个好 prompt 能让我理解你的真实需求,而不是表面需求
◦ 比如你说"帮我优化代码",我可能问半天------但如果你说"我的 API 响应时间 800ms,希望降到 200ms,瓶颈在数据库查询",我直接能给出有针对性的方案
3、你能做 AI 做不了的
◦ AI 可以回答问题,但只有你知道你真正的约束条件(时间、成本、技术栈限制等)
◦ 如果你能清楚地表达这些,结果会好得多

2.2. 套路实践

  • 我是谁,什么身份

  • 我要做什么,现状是什么

  • 我问题的相关上下文有哪些

  • 我希望能做到什么效果

  • 需求确认

eg:

我是一名前端开发,我现在要通过图片生成前端页面,现在只有一个模板页面。我的需求都写在当前目录的 prd.md中,我希望你能尽可能高的还原我的需求+图片设计。

评估下还有什么需要我补充的信息吗?如果没有,请直接开始

line 复制代码
prd.md

结合现有系统的规范和当前目录下的图片,实现如下需求

通用要求:
- UI 不用按照图片的,参考departureTask/index.tsx的实现
- 规范参考当前子应用的apps/stationSystem/CLAUDE.md
- 接口先本地 mock,后续和后端进行接口联调
- 不需要写项目说明,直接实现即可

评估下还有什么需要我补充的信息吗?如果没有,请直接开始

[列表页]
- 使用系统组件:GeneralPage,导出、新建按钮等

[删除]
- 需要二次确认弹窗

2.2.1. 我是谁

我是一名前端开发,我是一名资深前端开发,我是一名前端架构师

举个例子

line 复制代码
任务:实现一个用户列表

•  "前端开发" → 我给你一个完整的组件 + 详细注释
•  "资深前端开发" → 我给你代码 + 简单说明,假设你知道怎么集成
•  "前端架构师" → 我会先问你:
	◦  这个列表未来会复用吗?
	◦  数据层怎么设计?
	◦  要不要做虚拟滚动?
	◦  然后给你一个分层清晰的方案

2.2.2. 我要做什么

我现在要通过图片生成前端页面,现在只有一个模板页面。我的需求都写在当前目录的 prd.md中,我希望你能尽可能高的还原我的需求+图片设计。

优化后

我现在要根据设计图(./design.png)和需求文档(./prd.md)生成前端页面,实现模板参考(./departureTask/index.tsx)。我希望你能尽可能高的还原需求

2.2.3. 需求确认

评估下还有什么需要我补充的信息吗?如果没有,请直接开始

优化后

版本 1:平衡型(推荐)

有缺少的关键信息吗?如果有请直接问,如果没有就开始吧。
• 更简洁
• "关键"二字暗示:别问可有可无的细节
• 语气更直接
版本 2:强制检查型
开始前确认:有什么信息缺失会影响实现?
• 强迫 AI 思考"会影响实现"的信息,威胁 AI,说一些严重的后果
• 适合复杂任务
版本 3:极简型
开始前确认:有什么信息缺失会影响实现?
• 最干脆,适合你已经很清楚自己提供的信息够不够的时候
版本 4:去掉小尾巴
直接不加,让 AI 自己判断问还是做
• 如果你的 prompt 已经很完整,AI 会直接开始
• 如果真的缺信息,AI 自然会问
• 风险:可能多一轮对话

3. Cost

用AI写代码最肉疼的就是token消耗,尤其是用 Claude 这类贵的模型。分享几个省钱的套路:

3.1. 分层策略

别什么问题都用最贵的模型。我的习惯是:

  • 简单问答、格式转换、写注释:用便宜的模型,DeepSeek、GPT-4o-mini、Claude Haiku 都行,各种 IDE 都有 Auto 模式

  • 复杂逻辑、架构设计、疑难debug:Claude Sonnet 4.5、Gemini 3 Pro

  • 特别复杂的问题:Claude Opus 4.5、Gpt 5.2、Gemini 3 Pro (thinking)

3.2. 减少上下文

上下文越长,消耗越大。几个技巧:

  • 新开会话处理新问题,别在一个对话里聊八百件事

  • 只贴相关代码,别把整个文件扔进去

  • @ 符号精确引用文件(Cursor里),而不是手动复制粘贴

  • 定期总结对话,让AI记住关键点后清理历史

  • 多次提交代码,避免幻觉混乱返工

3.3. 多种 IDE 结合

  • warp 目前用户较少,激活器模式无限 Token

  • 国际:Cursor、Windsurf、Antigravity、Kiro

  • 国内:Trae、Qoder

4. 模型

4.1. 代码场景推荐

4.1.1. 国际模型

场景 推荐模型 原因
高精度代码生成 / 疑难杂症 Opus 4.5 在 SWE-Bench 等代码基准上表现顶尖
分析大量设计文档 + 代码 + 图像原型 Gemini 3 Pro 超大上下文 + 多模态
持续 agent 工作流 / 长任务 Sonnet 4.5 连贯性、稳定推理
万能通用助手 / 成本敏感 GPT-5.x 性能与价格最优均衡
简单客服 / FAQ / 内容生成 较小模型足够 不需要用旗舰

4.1.2. 国内模型

  • DeepSeek:性价比之王,API价格是 OpenAI 的几十分之一,代码能力在线

  • 通义千问(Qwen):阿里出的,开源模型质量高,可以本地跑

  • Kimi:长上下文做得好,适合分析长文档

  • 豆包:便宜,日常够用

4.1.3. 结论

D 档走天下,Auto 超省心

  • 别迷信benchmark,实际用起来差别没那么大

  • 不同模型有不同的"性格",Claude 比较谨慎,GPT 比较敢写

  • 复杂项目建议固定一个模型,它会更好地理解你的代码风格

  • 遇到某个模型死活搞不定的问题,换一个模型试试 or 换一种 prompt,不要在幻觉中找方案

5. 项目开发技巧

5.1. 给AI建立项目上下文

在项目根目录创建 CLAUDE.mdREADME.md.cursorrules

line 复制代码
# 项目规范

## 技术栈
- React 18 + TypeScript
- Ant Design 5.x

## 代码规范
- 组件用函数式,不用 class
- 样式用 CSS Modules
- 接口类型定义放 types/ 目录

## 项目结构
- src/components 通用组件
- src/pages 页面
- src/services API 调用

有了这个文件,AI 生成的代码会更符合项目规范,省得每次都要说一遍。

5.2. 增量开发而不是一次性生成

别想着一句话让AI把整个功能写完。更好的方式:

  1. 先让AI写个骨架/伪代码

  2. review一下思路对不对

  3. 逐步填充具体实现

  4. 每一步都跑一下看看有没有问题

这样出问题容易定位,也不容易跑偏。

5.3. 善用报错信息

遇到报错,直接把完整的错误信息贴给AI,比你自己描述"它报错了"有用100倍。包括:

  • 完整的 error stack
  • 相关的代码片段
  • 你做了什么操作触发的

5.4. Code Review 让AI来

写完代码可以让AI帮忙 review:

line 复制代码
帮我review一下这段代码,重点看:
1. 有没有潜在的bug
2. 性能有没有问题
3. 有没有更简洁的写法
4. 可维护性怎么样
5. 和其他模块通用部分抽离了没等等

5.5. 调试

与其问"为什么不工作",不如:

  • 描述期望的行为

  • 描述实际的行为

  • 贴上相关代码和报错

line 复制代码
期望:点击按钮后弹窗关闭
实际:弹窗没有关闭,控制台没有报错
代码:[贴代码]
我已经确认 handleClose 函数被调用了(加了console.log)

6. 各种 好玩的AI

  • comfyUI - 图像生成工作流,比直接用 SD 灵活

  • nano banana pro - 基于 Gemini 3 Pro 的图像生成

  • AI 医药

  • AI 显卡

  • AI 储能

    • 核能
    • AI 数据中心送上天,太阳能
  • AI 自动驾驶

  • Manus现状

    • 2025年3月,Manus一码难求;2025年7月,Manus在中国归于沉寂
  • 豆包手机

    • 首发搭载于努比亚M153工程样机,售价3499元
    • 微信封杀
    • 罗永浩力挺
  • AotuGLM

    • 开源,可以自己部署一个全自动化手机
  • AI 电影

    • 升级
    • 黑客帝国(1~3)
    • 我,机器人
    • 攻壳机动队
  • 本地大模型 / 推理框架(离线、隐私、可控)

    • Ollama - 一键拉取 + 本地运行模型
    • LM Studio - 本地模型 GUI + OpenAI 兼容接口
    • llama.cpp - 量化部署(CPU/GPU 都能跑)
    • vLLM - 高吞吐推理服务(适合自建 API)
  • RAG / 知识库(让 AI "查资料再回答")

    • LangChain / LlamaIndex - 快速搭建检索增强应用
    • 向量数据库:Milvus / Qdrant / Weaviate
    • Reranker:bge-reranker 等(提升检索排序质量)
  • Agent / 自动化(让 AI 真的去做事)

    • OpenHands / Aider - 让 AI 在仓库里改代码、跑命令、修 bug
    • Playwright + LLM - 自动化浏览器回归测试、抓取、脚本任务
    • Atlas 浏览器
  • 视频 / 音频(内容生产力工具链)

    • 视频生成:Runway / Pika / Luma / 可灵(Kling)
    • 语音转文字:Whisper / FunASR
    • 语音合成:TTS 工具(配合播客、旁白、客服)
  • Claude SKILLS

  • Vibe Coding

  • Gemini Opal gems

  • Trae Solo Dev

  • Qoder Quest


7. 最后

工具再好也只是工具。AI 能帮你提效,但不能替你思考架构、理解业务。最值得投入的还是自己的基本功:对语言特性的理解、对设计模式的掌握、对业务的熟悉程度。

AI 是放大器,你本身的能力决定了放大后的上限。

有问题欢迎交流

爱你的俊劫

相关推荐
Maxkim2 小时前
一文读懂 Chrome CRX📦:你需要了解的核心知识点
前端·前端工程化
JackJiang2 小时前
AI大模型爆火的SSE技术到底是什么?万字长文,一篇读懂SSE!
前端·websocket
Mr_chiu2 小时前
数据可视化大屏模板:前端开发的效率革命与架构艺术
前端
进击的野人2 小时前
一个基于 Vue 的 GitHub 用户搜索案例
前端·vue.js·前端框架
ZsTs1192 小时前
《2025 AI 自动化新高度:一套代码搞定 iOS、Android 双端,全平台 AutoGLM 部署实战》
前端·人工智能·全栈
命中水2 小时前
从怀疑到离不开:我第一个由 AI 深度参与完成的真实项目复盘
前端·openai
我是ed2 小时前
# Vue3 图片标注插件 AILabel
前端
心在飞扬2 小时前
AI 全栈--reactjs 基础总结
前端
七月十二2 小时前
【TS】虚拟列表无渲染逻辑内核
前端