🚀 认识 Vibe Coding

第1课 · 理论入门
⏱ 120分钟📖 理论入门🔥 焚诀①:角色扮演法

🎯 本课目标

💬

能说出VC是什么

用一句话说出"Vibe Coding是什么"

⚖️

知道VC与传统编程区别

能说出至少2个核心区别

🔧

知道VC能做什么

了解VC能做出什么类型的作品

📝

理解"提示词"概念

初步理解Prompt的含义

💪

建立信心

建立"我也能做出东西"的信心

🤔 提到"编程",你想到什么?

💻

写代码

黑底白字的屏幕

📚

很难

只有程序员才会

🔢

数学好才行

需要很强的逻辑

如果我跟大家说,上完今天的课之后——
你不需要背任何代码、不需要记任何语法,
只要会说话、会打字,就能做出一个网页……
你们信不信?

💡 什么是 Vibe Coding?

Vibe Coding = 氛围编程

你不需要写具体的代码,
只需要描述你想要什么——
就像你给朋友描述你想吃什么菜一样

"大家来说需求,AI来写代码。"
你的角色从"码农"变成了"产品经理" —— 提出需求的人

🎯 大一新生的迷茫与痛点

刚步入大学,想要大展拳脚,却处处碰壁?

🚧

心有余而力不足

想做个社团招新网页或个人博客装装酷,但一看发现要学完C语言、Java等一堆课才能动手,遥遥无期。

遇到难题无人问

大学课程难度大,遇到晦涩的专业名词、看不懂的代码报错,不好意思一直问老师和学长,进度停滞。

🏆

参加比赛没底气

想参加大创、互联网+等比赛,但自己只是个“小白”,除了能画几页干巴巴的PPT,拿不出任何实在的作品。

✨ Vibe Coding 给大一新生的“超能力”

🚀

跨越技能壁垒,即刻产出

不需要等大三大四学完专业课!今晚你就能用自然语言让AI帮你搭出一套社团招新系统或个人主页,直接惊艳全场。

🧠

24小时超级私人导师

AI是最有耐心的学长。遇到微积分、线代或晦涩的专业名词,直接让AI用“小学生都能听懂的大白话”给你解释。

⚔️

校园比赛秒杀全场

当其他大一队伍还在用PPT画大饼路演时,你直接掏出一个跑得通的“真实产品Demo”,这就是对比赛的降维打击!

⚖️ Vibe Coding vs 传统编程

对比维度传统编程Vibe Coding
你需要会什么语法、数据结构、算法用自然语言描述需求
入门需要多久数月甚至一年几分钟就能跑起第一个网页
出错了怎么办逐行排查,需要经验把报错信息丢给AI,它帮你修
最核心的能力记住语法规则清晰地描述自己的想法
适合谁计算机专业学生每一个人

🧠 VC不是"不用动脑"

常见误解:"哇,那岂不是什么都不用学就能做程序员了?"
真相:VC不是"不用动脑"的编程方式,而是换了一种动脑的方式

❌ 传统编程动脑在想

这段语法怎么写?
这个函数的参数顺序是什么?
这个变量类型对不对?

✅ VC动脑在想

用户需要什么功能?
我应该怎么描述这个需求让AI能理解?
这个交互逻辑对不对?

🎯 VC时代的四种核心能力

🧠

逻辑思维

能把大问题拆成小步骤

"做管理系统"→先添加、再展示、再搜索…

💬

沟通表达

能把想法说清楚、说具体

不是说"做好看点",而是说"背景用浅蓝渐变色"

🔍

问题定位

出问题了知道大概是哪的毛病

网页显示不对→是CSS还是JS的问题?

🎨

产品审美

知道什么好用、什么好看

按钮太小不好点、颜色太刺眼不舒服

你是来学"怎么指挥AI做出好东西"的,不是来学语法和公式的。

基础越好,AI用得越溜

同一个AI工具,不同的人,完全不同的效果

👥 同一个AI工具,不同的效果

👤 小明(零基础)

提示词:"帮我做一个学生管理系统"

  • 看不懂AI生成了什么 → 不知道对不对
  • 页面能显示但功能不全 → 不知道怎么描述缺什么
  • 报错了 → 完全不知道哪里出问题
  • 想加搜索功能 → 跟AI说了半天AI没理解

结果:2小时,半成品,体验很差 😞

👤 小红(懂基础术语)

提示词:"你是一个全栈工程师,请帮我做一个学生管理SPA。用HTML+CSS+JS+localStorage,实现CRUD操作……"

  • 看得懂HTML/CSS/JS的分工 → 知道检查哪里
  • 看到function不完整 → 精准描述让AI补全
  • 控制台报错了 → 把报错信息+代码片段一起发给AI
  • 想加数据持久化 → "请给这个系统加上localStorage存储"

结果:40分钟,功能完整,还能自己优化 🎉

🏗️ 基础赋能AI的四个层次

层次4:创造层 ← 设计AI做不到的架构和方案(需要深厚基础)
层次3:优化层 ← 能指出AI代码的问题,精准改进(需要扎实基础)
层次2:理解层 ← 能看懂AI生成了什么,判断对不对 🎯 本课程目标
层次1:描述层 ← 能把需求说清楚(只需要自然语言)📍 你在第1课的位置
整个这门课的核心目标:帮大家从"描述层"爬到"理解层"

📐 VC能力公式

🎯 VC能力 = 提示词技巧 + 基础知识 + 迭代耐心
🔥

提示词技巧

焚诀12条

📖

基础知识

第4课内容

🔄

迭代耐心

每节课练习

三个缺一不可。只学提示词不学基础,上限就是"能做简单网页"。加上基础,才能做真正的项目。
📺

VC 能做什么?

这些全都是零基础的人用AI做出来的

📺 VC真实作品案例

🪪

个人介绍网页

5分钟做出简洁大方的个人网页——只需要告诉AI你的姓名、爱好、喜欢的颜色

待办事项清单

可交互的Todo List——添加、勾选完成、删除。但做的人一行JavaScript都没写过

🔢

简易计算器

加减乘除完整交互——只需要描述每个按钮点下去应该发生什么

📋

学生管理系统

添加、展示、编辑删除、搜索筛选。刷新页面数据还在——用到了localStorage

🎮

小游戏

贪吃蛇、2048——连游戏逻辑都能描述出来让AI写

📊

数据可视化

表格变图表——"帮我把这些成绩做成柱状图",它就能做

💎

为什么 VC 值得学?

三个核心理由

💎 VC值得学的三个理由

🔄

第一:改变了学编程的方式

以前:先学理论 → 再做项目(很多人学理论就放弃了)
VC:先做项目 → 在做的过程中自然学会理论
你不需要先学HTML是什么才能做网页——做网页做多了,自然就理解HTML了。

🚪

第二:把门槛降到了口语水平

不需要数学好,不需要逻辑特别强。只要会说话,就能写代码。
文科生、设计师、产品经理、创业者——全都可以进入这个世界。

🚀

第三:它是未来趋势

不管你将来做不做程序员,AI工具都会越来越普及。
学会"怎么让AI帮你做事"——这个能力在未来5-10年会越来越值钱。
你们现在学的,不只是编程课,而是怎么和AI协作

💬

初识提示词

Prompt — 你对AI说的话

📝 提示词质量对比

❌ 低质量提示词

"帮我做个网页"

→ 一个很简陋的、可能什么内容都没有的页面

✅ 高质量提示词

"你是一个前端开发专家,请帮我做一个个人介绍网页。包含: ① 我的名字'小明'在页面正中间 ② 名字下方写'热爱编程的初学者' ③ 背景用浅蓝色到白色的渐变色 ④ 整体简洁大方"

→ 一个像模像样的、可以直接用的个人网页

💡 整个VC的核心秘密:会问问题。说清楚 > 说得多 > 说得快。
🔥 焚诀①

角色扮演法

核心心法:给AI一个明确的专家身份,能大幅提升输出质量。
❌ 普通说法
"帮我写个网页"
✅ 焚诀说法
"你是一个有10年经验的前端开发工程师
请帮我写一个个人介绍网页……"
口诀:开口先定角色,AI立刻进入状态。

📋 常用角色速查表

你的需求推荐角色
🪪 做网页前端开发专家 / UI设计师
📋 做管理系统全栈工程师
📊 做数据分析数据分析师 / Python工程师
📝 写技术文档技术文档写手
📖 解释代码编程老师
🎮 做小游戏游戏前端开发者
为什么有效?就像看病——找"全科医生"和找"心内科专家",给你的建议深度是不一样的。

💭 互动讨论

如果有一个AI能帮你写代码,
你最想做出一个什么东西?
📒 帮妈妈记账的工具 📇 班级通讯录 🐾 宠物日记 🎮 游戏攻略收集站 📚 读书笔记工具 🎵 音乐分享页
不限范围——任何你能想到的,用VC大概率都能做!

⚠️ 新手常见避坑指南

🕳️ 坑1:太笼统

"帮我做一个很酷的网站"

AI不知道什么是"酷"。必须具体:要暗黑模式?要霓虹灯文字?要3D旋转效果?

🕳️ 坑2:一次说太多

把10个页面的需求一次说完

AI很容易遗漏细节。正确做法:先做核心页面,再逐步增加其他功能,分而治之。

🕳️ 坑3:害怕报错

遇到Error就放弃

报错是编程的一部分。把红色的报错信息直接复制发给AI:"报错了,这是信息... 帮我修好",AI是最好的修虫能手。

⚔️ 焚诀①:场景演练

❌ 未使用角色扮演

"写一段关于太阳系的介绍文本,要有吸引力。"

结果:AI可能输出一篇干巴巴的维基百科式介绍,虽然正确但毫无阅读乐趣。

✅ 叠加角色扮演

"你是一个充满激情的【科普频道金牌主持人】,面向【10岁的儿童】写一段太阳系的介绍,语气要幽默、充满好奇心。"

结果:AI会用比喻、设问、儿童易懂的词汇,产出一篇极具吸引力的讲稿。

实操建议:下次写提示词前,先停顿3秒问自己:"如果这是一项任务,谁是做这件事的最顶尖专家?"

📋 本课总结

1

Vibe Coding

大家来说需求,AI来写代码

2

VC不是不用动脑

是换了一种动脑方式——从记语法变成说清楚需求

3

基础越扎实,AI用得越好

懂基础概念的人用AI效率是零基础的好几倍

4

VC能做的事情非常多

网页、工具、计算器、管理系统、小游戏……

5

提示词

就是你跟AI说的话,说得好结果就好,说得模糊结果就模糊

🔥

焚诀①:角色扮演法

开口先定角色,AI立刻进入状态

📅 下节课预告

第2课:VC工具安装与第一条提示词

🔧 亲手安装 Trae CN(国内免费AI编程工具)
✍️ 发出你们人生中的第一条提示词
🔥 学习焚诀②:三要素公式
不需要提前准备任何东西,带电脑来就行!

🙋 有问题吗?

下节课见!记得带电脑 🖥️