AI 编程实战课
从想法
到上线
软件开发 × AI 编程 × 设计师转型
少讲概念，多给可复制流程。
💡
想法
→
📄
文档
→
⌨️
代码
→
🚀
上线
一句话：把“我想要什么”讲清楚，再让 AI 稳定执行。
完整版 V2｜含讲课节奏、案例、练习、提示词、上线检查表
AI 编程实战课
从想法
到上线
软件开发 × AI 编程 × 设计师转型
少讲概念，多给可复制流程。
💡
想法
→
📄
文档
→
⌨️
代码
→
🚀
上线
一句话：把“我想要什么”讲清楚，再让 AI 稳定执行。
完整版 V2｜含讲课节奏、案例、练习、提示词、上线检查表
00 / 课程定位
这不是传统编程课
它更像一门“AI 指挥课”：你负责判断和验收，AI 负责大量执行。
02
AI 编程课件 · 完整版 V2
😵 学员常见状态
会用 AI，但一写项目就：
不知道从哪开始
代码越改越乱
页面能看但跑不起来
🎯 本课目标
听懂软件骨架
会拆项目需求
会让 AI 生成文档和代码
会运行、调试、上线
📦 课后能复用
作品集/宣传页
小工具/计算器
恋爱日记/任务管理
动态管理后台原型
核心变化：不是你一个字一个字写代码，而是你把 AI 管得像一个听话的实习生。
00 / 破冰
先把 4 个误区打掉
不纠偏，后面很容易学着学着就跑偏。
03
AI 编程课件 · 完整版 V2
误区 1｜AI 能一次做完
现实：好项目是 20~100 次“提需求—看结果—再修正”磨出来的。
误区 2｜不用懂技术
现实：不用精通，但要知道前端、后端、数据库分别管什么。
误区 3｜报错 = 完蛋
现实：报错是下一条指令的素材，复制给 AI 才能进入调试闭环。
误区 4｜页面好看就完事
现实：能保存数据、能多人访问、能上线，才算一个真正项目。
课堂语气可以轻松一点：AI 不是神灯，是一位很能干但需要你写清任务的同事。
🗺️
第一部分：先看懂软件地图
不懂地图就直接开车，AI 也会把你带沟里。
先建立地图，再进入实操
04
01 / 软件三件套
任何软件，都先拆成三块
先别问“用什么工具”，先看清软件的骨架。
05
AI 编程课件 · 完整版 V2
前端
用户看见的界面
HTML / CSS / JS
React / Vue / 小程序
像店面：负责展示和交互
→
后端
真正处理业务逻辑
Python / Java / Go
接口 / 权限 / 规则
像店员：负责判断和处理
→
数据库
保存真实数据
MySQL / PostgreSQL
用户 / 订单 / 日记
像仓库：负责存取和记录
记忆口诀：前端像店面，后端像店员，数据库像仓库。
01 / 静态 vs 动态
先判断：这东西到底要不要“活起来”？
这一页决定项目复杂度，也决定要不要后端和数据库。
06
AI 编程课件 · 完整版 V2
🖼️
静态网站｜像电子海报
适合：作品集、简历、活动页、公司介绍
特点：内容写死或很少变化
优点：快、简单、容易上线
风险：不能真正保存用户数据
→
⚙️
动态应用｜像收银系统
适合：订单、库存、日记、计算器、管理后台
特点：数据实时变化，需要保存
优点：更像真正的软件
风险：多了后端、数据库、部署联调
判断句：用户操作后的数据，要不要保存？要不要让别人看到？
01 / 路线选择
3 秒钟判断你的项目该怎么做
用这个判断表，避免一上来就把项目做复杂。
07
AI 编程课件 · 完整版 V2
项目类型
建议路线
需要什么
适合目标
作品集 / 简历 / 活动页
静态路线
HTML / React 静态页
1~2 天可出效果
奶茶热量计算器
轻动态路线
前端计算 + 本地数据
先跑通，再加保存
恋爱日记 / 任务管理
动态路线
前端 + 后端 + 数据库
适合作为训练项目
订单 / 库存 / 客户管理
真实业务路线
权限 + 数据库 + 部署
需要测试和备份
先把路线选对，后面技术栈、提示词、部署方式才不会乱。
01 / Web 为什么优先学
会 Web，很多东西都能迁移
会议里反复强调：Web 是一个很适合新手入门的入口。
08
AI 编程课件 · 完整版 V2
🌐
浏览器能打开
不用安装 App，链接发出去就能看。
作品集、工具页、管理后台都适合。
📦
能封装成更多形态
Web 应用后续可以封装成桌面软件、小程序、App 原型。
🤖
AI 更熟悉主流 Web
React / Vue / JS / Python 这些资料多，AI 更稳定。
学习顺序建议：先做 Web 页面，再做动态应用，最后再考虑小程序 / App / 桌面端。
🧭
第二部分：AI 编程的标准流程
AI 编程不是许愿，是把任务拆清楚、管起来。
先建立地图，再进入实操
09
02 / 总流程
AI 编程 6 步闭环
每次做项目，都按这条线走。
10
AI 编程课件 · 完整版 V2
1｜讲清需求
目标 / 用户 / 页面 / 数据
→
2｜生成文档
需求 / 技术栈 / 目录 / 规范
→
3｜搭建骨架
页面结构 / 路由 / 组件
4｜跑通项目
安装依赖 / 启动 / 预览
→
5｜小步迭代
加功能 / 修 Bug / 看变更
→
6｜上线展示
服务器 / 域名 / 证书 / 日志
一句话：先想清楚，再标准化，再交给 AI 执行。
02 / 第一步
别让 AI 猜：先讲清需求
越像给人分配任务，AI 越能做对。
11
AI 编程课件 · 完整版 V2
❌ 不好的说法
帮我做一个网站。
问题：
不知道给谁用
不知道有哪些页面
不知道数据是否保存
不知道做到什么算完成
✅ 好的说法
我要做一个恋爱日记 Web 应用。
给情侣记录纪念日和日记。
需要登录、日记列表、新增日记、照片上传、纪念日倒计时。
🎁 更好的说法
请先不要写代码。
先输出需求分析、页面结构、数据结构、技术栈、开发步骤、测试清单。
开局关键：先让 AI “理清楚”，不要一上来就“开始写”。
02 / 第二步
给 AI 一份“考试大纲”
这就是上下文工程 / Harness 思维：先立规矩，再写代码。
12
AI 编程课件 · 完整版 V2
😵
不加文档
AI 像临场做新题：
容易忘记前面约定
容易乱改原有结构
代码风格不统一
Token 消耗更大
→
📄
加文档 / Harness
AI 像提前刷过原题：
知道项目目标
知道文件怎么放
知道哪些能改、哪些别碰
更容易小步稳定迭代
文档不是给老板看的，是给 AI 当记忆和规矩用的。
02 / 文档包
最小可用 5 份文档
不用写成论文，关键是让 AI 有章可循。
13
AI 编程课件 · 完整版 V2
01 需求说明
做什么、给谁用、完成标准
02 技术栈
前端、后端、数据库、依赖
03 目录结构
每类文件放哪里，命名规则
04 代码规范
风格、注释、禁止乱改范围
05 测试清单
如何验证功能真的可用
最小动作：让 AI 先生成这 5 份，再让它“根据文档执行代码”。
02 / 开局提示词
这段可以直接复制使用
适合零基础、设计师、产品、运营等非程序员。
14
AI 编程课件 · 完整版 V2
我是【零基础/设计师/产品】。
想做一个【真实可用的 Web 应用】。
主题是【作品集/恋爱日记/热量计算器】。
请先不要写代码，先输出：
1. 需求分析
2. 页面结构
3. 数据结构
4. 技术栈建议
5. 开发步骤
6. 测试清单
要求：语言简单、少废话、适合 AI IDE 执行。
下一句
请用 Harness 工程理念，整理成项目文档。
再下一句
请根据这些文档，先搭建最小可运行版本，不要一次做太复杂。
先让 AI 给你“搭骨架”，再让它装修细节。
02 / 第三步
选技术栈：别追最强，先选最稳
AI 最擅长主流技术。越主流，越不容易翻车。
15
AI 编程课件 · 完整版 V2
🧰
入门稳定版
前端：React + TS
样式：Tailwind / Radix UI
后端：Python / FastAPI
数据库：MySQL / PostgreSQL
包管理：NPM / PNPM
✅
选择原则
✅ 主流、资料多
✅ AI 训练得多
✅ 依赖容易安装
✅ 出错容易搜索
✅ 部署路径成熟
⚠️
避坑原则
不要一上来就追冷门框架
不要中途频繁换技术栈
不要前后端数据库一起乱改
没有最好的语言，只有最适合当前项目、当前水平、当前目标的组合。
02 / 第四步
MVP：先跑通一口气
别一上来做大而全，先做一个能运行的最小版本。
16
AI 编程课件 · 完整版 V2
先做
一个首页
能打开、有标题、有按钮
→
再做
一个核心功能
比如新增日记 / 上传作品
→
然后
一个保存逻辑
本地保存或数据库保存
→
最后
一个展示结果
列表 / 详情 / 统计
先让项目“活着”，再让它“好看”，最后让它“强大”。
🛠️
第三部分：工具怎么用才不乱
工具很多，但底层动作几乎一样。
先建立地图，再进入实操
17
03 / 工具地图
AI 编程工具长得不一样，本质差不多
Trae / Cursor / Codex / VS Code 都围绕同一套工作区。
18
AI 编程课件 · 完整版 V2
📁 文件区
看项目目录
新建/打开文件
📝 编辑区
看代码/预览
审查变更
⌨️ 终端区
安装依赖
启动项目
💬 对话区
给 AI 下任务
修 bug / 加功能
会一个 AI IDE，基本就能迁移到其他 AI IDE。
03 / 操作顺序
第一次打开项目，不要乱点
新手最稳操作：建文件夹、打开、进入长任务模式。
19
AI 编程课件 · 完整版 V2
1｜新建一个能找到的文件夹
项目文件不要散在桌面
2｜把文件夹拖进 AI IDE
让工具知道项目根目录
3｜进入 Agent / Solo 模式
适合长任务，不容易中途断
4｜先让 AI 生成文档
不要直接生成一堆代码
5｜运行后看预览和终端
用结果判断下一步怎么提问
长任务用 Agent / Solo；短问题用普通对话。
03 / 审查变更
OK 工程师的关键动作：看它改了什么
你可以不懂每一行代码，但要知道文件有没有被乱改。
20
AI 编程课件 · 完整版 V2
➕
看新增
新增了哪些文件？
是不是符合目录结构？
有没有多出奇怪文件？
🔍
看修改
核心文件改了哪里？
功能是否对应需求？
有没有顺手改坏别的？
🗑️
看删除
有没有删掉原功能？
有没有删除配置？
不确定就先别确认。
提示词：请列出本次改动的文件、改动原因、如何验证。
03 / 并行思维
等待时别干等：让 AI 多线推进
安装依赖、下载组件很慢，学员容易焦虑；可以安排并行任务。
21
AI 编程课件 · 完整版 V2
⏳
正在安装依赖
可以让它继续整理 README、测试清单、部署说明。
🐞
正在修 Bug
可以让它先解释错误原因，列出可能影响的文件。
🎨
正在做 UI
可以另开一个对话让 AI 生成风格词、参考组件、页面文案。
AI 编程不是等机器跑完，而是持续把“下一步”准备好。
🧪
第四部分：从案例学会拆项目
用学员听得懂的例子，把流程跑一遍。
先建立地图，再进入实操
22
04 / 案例 A
作品集：最适合新手的第一个项目
静态路线，能很快看到成果，也适合设计师展示。
23
AI 编程课件 · 完整版 V2
🖼️
项目目标
做一个个人作品集网页，包含简介、作品列表、项目详情、联系方式。
⚡
技术路线
纯 HTML / CSS / JS 或 React 静态页。
数据可以先写死。
✅
最小验收标准
页面能打开
作品图片能展示
点击能跳转/弹窗
手机端不乱版
能上传到服务器访问
作品集重点不是功能复杂，而是结构清楚、视觉统一、能发链接。
04 / 案例 B
热量计算器：轻动态工具
它有交互，但不一定一开始就要数据库。
24
AI 编程课件 · 完整版 V2
🧮
第一版：前端计算
输入：香蕉 + 牛奶 + 数量
处理：前端计算热量
输出：总热量和建议
特点：快，适合练交互
→
📊
第二版：加数据保存
保存用户历史记录
支持食材库维护
支持分享结果
这时再加后端和数据库
先别把“有交互”都理解成“大型动态项目”，很多工具前端就能先跑起来。
04 / 案例 C
恋爱日记：完整动态项目训练
适合练前端、后端、数据库、登录、部署。
25
AI 编程课件 · 完整版 V2
页面
登录页
日记列表
新增/编辑日记
纪念日倒计时
数据
用户
日记
照片
纪念日
接口
注册登录
新增日记
查询列表
上传图片
验收
能登录
能保存
刷新不丢
换设备能看
动态项目的核心不是页面多，而是“数据真实保存、多人访问一致”。
04 / 案例拆解法
任何项目都用这 5 个问题拆
讲课时可以现场让学员填。
26
AI 编程课件 · 完整版 V2
1｜谁用？
用户是谁，为什么要用？
2｜做什么？
核心功能最多先列 3 个
3｜看什么？
需要哪些页面？
4｜存什么？
哪些数据必须保存？
5｜怎么算完成？
验收标准是什么？
拆项目不是为了写文档好看，是为了减少 AI 猜错。
🚀
第五部分：调试、变美、上线
从“能生成”走到“能用、好看、能访问”。
先建立地图，再进入实操
27
05 / 调试闭环
不要怕报错，怕的是乱改
错误信息就是给 AI 的下一条线索。
28
AI 编程课件 · 完整版 V2
运行项目
npm install
npm run dev
→
复制报错
终端红字
浏览器报错
接口返回
→
让 AI 定位
先解释原因
再给修复方案
→
小步修复
一次只改
一个问题
提示词：请不要重写整个项目，先定位问题，给最小修改方案。
05 / 报错提示词
把报错变成高质量指令
直接丢一句“报错了”不够，要把上下文补齐。
29
AI 编程课件 · 完整版 V2
我在运行项目时遇到错误。
当前操作：【npm run dev / 登录 / 新增日记】
错误信息如下：
【粘贴完整终端红字或浏览器报错】
请按以下格式回答：
1. 这是什么原因
2. 最可能出错的文件
3. 最小修改方案
4. 修改后如何验证
要求：不要重写整个项目。
关键点 1
报错要完整，不要只截最后一行。
关键点 2
一次只修一个问题，先跑通再优化。
关键点 3
修完必须让 AI 说“如何验证”。
05 / UI 变好看
前端变美，不只靠“审美感觉”
给 AI 设计语言、组件库、参考风格，它才更容易做出统一页面。
30
AI 编程课件 · 完整版 V2
🎨
Figma / 设计稿
已有页面或要像素级还原时使用。
适合设计师把自己的审美转成代码。
🧱
开源组件库
Radix / shadcn / Tailwind 主题。
好处：统一圆角、按钮、表单、弹窗。
✨
风格关键词
米色极简 / 黑白高级 / 明亮活泼 / 科技蓝绿。
越具体，越稳定。
指令：请统一圆角、留白、层级、字体大小，不改变核心功能。
05 / UI 美化提示词
可以直接复制给 AI
适合把“能跑但丑”的页面变得更统一。
31
AI 编程课件 · 完整版 V2
请在不改变核心功能和数据逻辑的前提下，重新优化 UI。
风格：【年轻活泼 / 简约高级 / 米色极简 / 蓝绿色科技感】
要求：
1. 统一字体大小、按钮样式、圆角和间距
2. 页面层级更清楚，重要操作更突出
3. 移动端不乱版
4. 不要删除已有功能
5. 改完后列出修改了哪些文件
先让它“统一”，再让它“惊艳”。
05 / 部署上线
最后一步：让别人真的能访问
项目不部署，就只是你电脑里的半成品。
32
AI 编程课件 · 完整版 V2
🖼️
静态网页上线
HTML / CSS / JS
上传到服务器站点目录
绑定域名
配置 SSL 证书
→
⚙️
动态应用上线
前端构建
后端启动
数据库连接
反向代理 / 端口 / 日志
端口记忆点：80 是网页默认入口；一个端口同一时间只能被一个程序占用。
05 / 静态部署卡
作品集上线：照这张卡走
适合个人作品集、公司介绍页、活动宣传页。
33
AI 编程课件 · 完整版 V2
1｜准备文件
index.html
assets 图片/样式
2｜买/借服务器
腾讯云轻量服务器等
3｜装管理面板
如宝塔，方便建站点
4｜上传文件
站点目录覆盖上传
5｜绑定域名
二级域名或正式域名
6｜开证书
SSL 后不再显示不安全
上线的意义：从“我电脑能看”变成“别人打开链接也能看”。
05 / 动态部署卡
动态项目上线：多了 4 个麻烦点
动态项目不是不能上，是要把链路想完整。
34
AI 编程课件 · 完整版 V2
前端
打包后放到服务器
或通过 Nginx 访问
后端
服务要一直运行
端口不要冲突
数据库
连接地址、账号、权限
备份和初始化数据
反向代理
把域名请求转发到后端
处理跨域和证书
动态部署的目标：前端能访问，后端能处理，数据库能保存，日志能排错。
05 / 常见坑
翻车不可怕，怕的是不知道坑在哪
这页作为排查清单使用。
35
AI 编程课件 · 完整版 V2
端口冲突
80 / 8080 被占用
处理：换端口或关掉旧服务
依赖装不上
npm install 很慢或失败
处理：换源 / 检查 Node 版本
页面空白
构建路径或路由问题
处理：看控制台报错
接口失败
后端没启动或地址错
处理：检查 API 地址和端口
数据库连不上
账号/密码/权限/表不存在
处理：检查连接串和初始化 SQL
证书不安全
未配置 SSL
处理：申请并绑定证书
排查顺序：先看终端，再看浏览器控制台，再看接口和数据库。
🎤
第六部分：讲课怎么讲得生动
把知识点变成节奏、互动和练习。
先建立地图，再进入实操
36
06 / 60 分钟讲法
一节课不要贪多：先让学员跑通
适合入门分享、社群公开课、内部培训。
37
AI 编程课件 · 完整版 V2
0-5 分钟
破冰：AI 不是神灯，是实习生
5-15 分钟
软件三件套：店面/店员/仓库
15-25 分钟
静态 vs 动态：作品集 vs 库存
25-40 分钟
AI 编程 SOP：需求→文档→代码
40-55 分钟
现场练习：生成一个静态作品集
55-60 分钟
总结：能上线才算完成
60 分钟目标：让学员建立地图 + 拿到第一个可运行页面。
06 / 90 分钟讲法
加上动态项目和调试，就更像训练营
适合小班课、工作坊、公司内部实操。
38
AI 编程课件 · 完整版 V2
0-10 分钟
定位与误区
10-25 分钟
软件地图 + 静态/动态
25-40 分钟
AI 文档/Harness
40-60 分钟
生成代码 + 运行项目
60-75 分钟
报错调试 + UI 美化
75-88 分钟
部署路线 + 检查表
88-90 分钟
作业和下一步
90 分钟目标：不只知道概念，还要完成一次“需求—生成—调试—美化”的闭环。
06 / 互动设计
把死板概念讲活一点
每个概念都配一个生活比喻。
39
AI 编程课件 · 完整版 V2
前端 / 后端 / 数据库
开店：店面 / 店员 / 仓库
静态 / 动态
海报 / 收银系统
Harness 文档
考试大纲 / 公司规章制度
报错调试
医生看检查报告
部署上线
把店从样板间搬到商业街
AI IDE
一个带聊天窗口的施工现场
讲得生动不等于讲段子，而是让抽象概念有画面。
06 / 课堂练习
30 分钟做一个可运行原型
让学员带着自己的小项目当场跑一遍。
40
AI 编程课件 · 完整版 V2
5 分钟
写一句话需求
判断静态/动态
10 分钟
让 AI 生成项目文档
确定页面和数据
10 分钟
生成前端原型
运行 + 截图验收
5 分钟
列出 bug
给下一轮优化指令
交付物：一个能打开的页面 + 一份项目文档 + 一张下一步迭代清单。
06 / 学员作业
课后不要只说“回去练”
给一个明确、可检查、能复盘的作业。
41
AI 编程课件 · 完整版 V2
A
作业 1｜静态作品集
用 AI 生成一个个人作品集首页。
要求：3 个作品卡片、联系方式、移动端适配。
B
作业 2｜轻动态工具
做一个小计算器。
要求：输入、计算、输出、错误提示。
C
作业 3｜复盘文档
写清：需求、技术栈、AI 提示词、遇到的 3 个问题、下一步。
作业验收不要只看截图，要看链接、文档和迭代记录。
📚
第七部分：可复用模板合集
讲完课还能直接拿去做项目。
先建立地图，再进入实操
42
07 / 项目启动模板
每次新项目先填这张表
这张表填不清楚，就先别让 AI 写代码。
43
AI 编程课件 · 完整版 V2
项目一句话
我要做一个____，给____使用，解决____问题。
项目类型
静态网站 / 轻动态工具 / 动态应用 / 管理后台
核心页面
首页、列表页、详情页、表单页、登录页……
核心数据
用户、作品、订单、日记、图片、日志……
完成标准
能打开、能保存、能搜索、能分享、能上线……
技术栈
前端____，后端____，数据库____。
项目启动不靠灵感，靠一张清楚的启动表。
07 / 需求文档模板
让 AI 输出的文档别太虚
文档要能指导开发，不是写漂亮废话。
44
AI 编程课件 · 完整版 V2
请输出一份简洁但可执行的需求文档，包含：
1. 项目背景：一句话说明为什么做
2. 用户角色：谁会使用
3. 核心功能：按优先级排序，最多先列 5 个
4. 页面清单：每个页面的作用
5. 数据清单：每类数据包含哪些字段
6. 验收标准：做到什么才算完成
7. 暂不做范围：明确第一版不做什么
“暂不做范围”很重要，它能防止项目无限膨胀。
07 / 执行提示词模板
让 AI 根据文档小步执行
这段适合放在 AI IDE 里。
45
AI 编程课件 · 完整版 V2
请根据当前项目文档，先实现最小可运行版本。
要求：
1. 不要一次性实现所有功能
2. 先搭建项目结构和核心页面
3. 每完成一步，说明修改了哪些文件
4. 如果需要安装依赖，先说明原因
5. 不确定的地方先问我，不要擅自假设
6. 最后告诉我如何运行和验证
好指令 = 目标 + 边界 + 步骤 + 验收。
07 / 复盘模板
每次做完，都沉淀成下一次的经验
复盘不是写总结，而是让下一次更快。
46
AI 编程课件 · 完整版 V2
这次做了什么
项目目标、完成了哪些功能
用了什么技术
前端、后端、数据库、组件库
哪些提示词有效
可以复制的好指令
踩了哪些坑
报错、依赖、接口、部署问题
下次怎么优化
结构、UI、性能、上线方式
可复用资产
文档、代码片段、组件、检查表
一次项目不是一次性消耗，而是积累一套自己的 AI 编程模板库。
07 / 设计师升级路径
从“交图”到“交可用产品”
AI 让设计和开发之间的边界变薄。
47
AI 编程课件 · 完整版 V2
过去
过去：交付链条长
设计师交图
前端切图
后端联调
测试上线
中间来回沟通
→
现在
现在：设计师能多走一步
设计师懂 AI Coding
能出页面
能做交互
能上线 Demo
能更清楚地和技术沟通
核心竞争力 = 审美判断 + 需求拆解 + AI 指挥 + 基础技术常识。
07 / 结课三句话
最后只需要记住这三件事
让学员带着清晰的行动方向离开。
48
AI 编程课件 · 完整版 V2
1. 先把需求讲清楚，再让 AI 写代码。
2. 文档就是 AI 的记忆和规矩。
3. 能上线，才算真正完成。
把一次经验，变成下一次的模板。
附录 / 素材来源
本课件整理依据
根据两份视频会议转录内容提炼，已做口语化、结构化和课件化处理。
49
AI 编程课件 · 完整版 V2
📄
会议记录 1
主题：AI 编程实操、前后端数据库、静态/动态、技术栈、Harness 文档、AI IDE 操作、UI 组件等。
🚀
会议记录 2
主题：服务器、宝塔、文件上传、域名、80 端口、SSL 证书、静态网页部署、动态部署预告等。
已删去闲聊和重复表达，保留可讲、可练、可复用的方法。