系列说明：

• 共10篇，每篇聚焦一个主题

• 核心理念：AI 70% + 人工 30%

• 适用人群：前端基础薄弱或刚入行的小白

• 工具：Cursor + Claude Code + GitHub Copilot

阅读建议：建议按顺序阅读，每篇都有实操环节，请务必跟着动手做一遍。

---

第1篇：认知篇 —— 前端开发已死？不，是重生了！

1.1 很多新人的困惑

我刚入行的时候，最怕三件事：

• 怕写代码：一个登录页面要写半天，API记不住，样式调不对。

• 怕接项目：产品给的需求文档像天书，不知道从哪里下手。

• 怕改Bug：别人的代码不敢动，自己的代码不敢看。

如果你也有这种感觉，你不是一个人。过去三年，前端技术栈从 Vue2 到 Vue3、React 到 Next.js、Webpack 到 Vite，还没学完新的又来了。

但现在，情况变了。

1.2 三个工具，让“小白”也能写项目

我们这一系列教程，只围绕三款工具展开：

工具	定位	一句话解释
Cursor	战略规划师	理解整个项目，帮你写多文件联动的代码
Claude Code	资深顾问	推理复杂逻辑，帮你分析Bug和技术选型
GitHub Copilot	贴身助理	自动补全代码，让你打字速度跟上思维速度

这三款工具组合使用，效果是 1+1+1 > 10。

1.3 核心认知：AI 70% + 人工 30%

这是整个系列最核心的理念，请你牢牢记住：

你不需要会写所有代码，你只需要会“指挥”AI写代码。

AI（70%）负责：

• 写样板代码（页面结构、表格、表单）

• 查资料查API（不用再翻文档了）

• 生成单元测试和注释

• 代码重构和优化建议

人工（30%）负责：

• 理解业务需求（AI不懂业务）

• 决定技术方案（用Vue还是React？用Pinia还是Redux？）

• 审查代码质量（AI会犯错，你要把关）

• 安全红线（不要把敏感数据喂给AI）

简单说：你是建筑师，AI是施工队。你画图纸、验收质量，施工队负责搬砖砌墙。

1.4 小白最关心的三个问题

Q1：我不会用AI怎么办？

就像你会用搜索引擎一样简单。你不需要学“AI语言”，你只需要学会“跟AI聊天”。本系列会手把手教你怎么写提示词。

Q2：AI写的代码能直接用吗？

不能。AI写的代码质量大概相当于一个“中级实习生”的水平——能用，但需要你检查。我们后面会专门讲“如何审查AI代码”。

Q3：用AI写代码，我还能学到东西吗？

恰恰相反，学得更快了。因为AI会给你解释每一行代码的作用，相当于有个私人导师24小时陪你编程。本系列每一篇都有大量的“反问AI”环节，教你怎么问、问什么。

1.5 本系列路线图

篇目	主题	核心内容
第1篇	认知篇	理念、工具、思维转变（本篇）
第2篇	工具安装篇	三款工具的安装、配置、环境搭建
第3篇	提示词基础篇	怎么跟AI说话才有效
第4篇	日常编码提效篇	用AI写页面、组件、样式
第5篇	Bug调试篇	用AI定位和修复问题
第6篇	需求分析篇	用AI拆解产品需求
第7篇	技术方案篇	用AI做技术选型和架构设计
第8篇	项目初始化篇	从0到1用AI搭建项目
第9篇	代码审查篇	怎么检查AI写的代码
第10篇	避坑与进阶篇	常见陷阱和下一步学习方向

1.6 本篇小结

• 前端开发的“门槛”已经被AI大幅降低了

• 核心能力从“写代码”变成“指挥AI写代码”

• AI 70%负责执行，人工30%负责决策和把关

• 本系列的目标：让你从一个会写代码的人，变成一个会“用AI写代码”的人

下篇预告：工欲善其事必先利其器，第2篇我们手把手教你安装和配置 Cursor、Claude Code 和 GitHub Copilot。