AI编程入门实战 - 直播分享

视频号直播分享

AI 编程入门实战

1.5 小时带你了解什么叫 AI 编程，如何上手

从 Vibe Coding 到 SDD

人人都能写代码

📋 今天的安排

时间	内容
00:00 - 00:10	开场 & 什么是程序
00:10 - 00:25	程序的架构：简单 vs 复杂
00:25 - 00:55	Vibe Coding：一句话编程 · 现场演示
00:55 - 01:25	SDD：规格驱动开发 · 现场演示
01:25 - 01:30	总结 & 问答

先聊聊：什么是程序？

输入 → 处理 → 输出

🧮 计算器

按数字 → 计算 → 显示结果

🍜 点餐系统

选菜 → 记录订单 → 打印小票

🌤️ 天气 App

定位 → 查 API → 展示天气

📊 记账软件

记一笔 → 存数据 → 汇总报表

💡 编程就是告诉计算机：什么数据 → 怎么处理 → 输出什么

程序的架构①：简单架构

所有代码写在一个文件里，一人搞定

界面

HTML

→

逻辑

JavaScript

→

数据

localStorage

✅ 适合

小工具、个人脚本、演示项目
快速原型、一次性任务

📦 例子

一个计算器 HTML 页面
一个数据清洗脚本
一个博客首页

程序的架构②：复杂架构

拆成多个模块，各司其职，团队协作

前端

用户界面

↔

后端

业务逻辑

↔

数据库

数据存储

📱 App

+

☁️ 服务器

+

🗄️ MySQL

✅ 适合

网站、App、企业系统
多人协作、需要长期维护

📦 例子

电商网站（前端+订单+支付+库存）
社交 App（用户+消息+推荐）

简单 vs 复杂，怎么选？

✅ 简单架构就够了

• 个人用的小工具

• 一次性脚本

• 快速验证想法

• 学习练手项目

🔵 需要复杂架构

• 多人协作的项目

• 需要长期维护

• 用户量大的产品

• 涉及支付/安全

💡 关键原则：需求决定架构，不是越复杂越好

AI 编程的两大类

🟢 Vibe Coding

简单编程

一句话到一段话
AI 直接生成代码

适合：小工具、原型、个人项目

🔵 SDD

规格驱动开发

先写规格文档
AI 按规格生成代码

适合：正式项目、团队协作

⚡ 类比：Vibe Coding = 跟 AI 说"帮我做个这个" · SDD = 先画蓝图再施工

什么是 Vibe Coding？

"帮我写一个……" → 🤖 → ✨ 代码生成

术语来源：Andrej Karpathy（OpenAI 联合创始人）

🎯 核心理念

你描述"要什么"
AI 负责"怎么做"

🙌 零门槛

不需要懂语法
只需要会说话

🔄 迭代式

不满意就说"改这里"
AI 会不断调整

⚡ 速度快

几分钟出一个原型
以前要写几小时

💡 一句话总结：Vibe Coding = 用对话写代码

Vibe Coding 工具推荐

⭐ Claude.ai

对话式 AI，理解力强

✅ 新手首选，网页版免安装

⭐ ChatGPT

零门槛，打开即用

✅ 新手首选，网页版免安装

Cursor

AI 编辑器

适合有基础的人

Claude Code

终端里的 AI 编程助手

适合开发者

GitHub Copilot

VS Code 插件

适合开发者

通义灵码

阿里出品，中文友好

国内可直接使用

💡 新手推荐：Claude.ai 或 ChatGPT，打开网页就能用，不需要装任何软件

提示词怎么写？万能公式

【角色】 + 【任务】 + 【细节】 + 【输出格式】

🔍 示例拆解

你是一个前端开发专家 ← 角色

帮我写一个排序工具的 HTML 页面 ← 任务

1. 输入数字用逗号分隔 2. 点击按钮排序 3. 结果显示在下方 ← 细节

生成完整 HTML 文件，双击能用 ← 输出格式

🚀 进阶技巧

给例子：输入 3,1,2 → 输出 1,2,3

说不要：不要用框架，纯 HTML

分步骤：先做界面，再加功能

迭代改：按钮再大一点，颜色改成红色

🎮 现场演示①：猜数字游戏

提示词示例：

你是一个网页开发专家，帮我写一个"猜数字"小游戏的 HTML 文件。

规则：
1. 系统随机生成 1-100 之间的一个数字
2. 用户在输入框猜数字，点击"猜"按钮提交
3. 猜大了提示"太大了"；猜小了提示"太小了"
4. 猜对了显示"恭喜你！"并显示猜了多少次
5. 有一个"重新开始"按钮

设计要求：
- 蓝色调，卡片式设计，界面居中干净简洁
- 生成一个完整的 HTML 文件，双击就能打开使用
            

💡 1 次对话，AI 直接生成一个可玩的游戏页面

🔢 现场演示②：排序工具

提示词示例：

你是一个前端开发专家，帮我写一个数字排序工具的 HTML 页面。

功能需求：
1. 一个文本输入框，用户输入多个数字用逗号分隔（如：3,1,4,1,5,9）
2. 一个"排序"按钮，点击后下方显示从小到大排序结果
3. 同时显示原始输入，方便对比
4. 增加一个"清空"按钮

设计要求：
- 蓝色渐变背景，白色卡片
- 输入框、按钮、结果区域布局清晰
- 生成一个完整的 HTML 文件，双击可用
            

👤 现场演示③：个人主页

提示词示例：

帮我生成一个个人简介页面的 HTML 文件。

需要包含：
1. 一个圆形头像占位（灰色）
2. 我的名字：张三
3. 一句话简介：一个热爱生活的程序员
4. 三个技能标签：Python / 数据分析 / AI
5. 页脚：Copyright 2026

设计要求：
- 蓝色调，干净清爽
- 居中布局，自适应屏幕
- 生成完整 HTML 文件，双击可用
            

Vibe Coding 注意事项

✅ 适合的场景

• 一次性脚本、小工具

• 个人项目、快速原型

• 快速验证想法

• UI 界面原型

❌ 不适合的场景

• 大型企业项目

• 需要多人协作

• 高性能/高安全要求

• 复杂算法/底层系统

⚡ 核心原则：Vibe Coding 负责"快"，不负责"稳"

为什么要 SDD？

Vibe Coding 的局限：

📁 文件一多就乱

一个文件还好
10个文件 AI 就"迷路"了

🧠 记不住上下文

AI 容易"忘记"
之前说了什么

💥 改 A 坏 B

修一个功能
另一个功能出问题

📝 没有文档

过两周自己都看不懂
别人更没法接手

⚡ 小项目靠感觉，大项目靠规格

什么是 SDD？

SDD = Specification-Driven Development（规格驱动开发）

① 人做

✍️ 写规格文档

→

② AI 读

🤖 理解需求

→

③ 生成

💻 AI 写代码

→

④ 验证

✅ 人 + AI 确认

💡 核心理念：人负责"做什么"，AI 负责"怎么做"

规格文档包含什么？

📄 规格说明书
├── 1. 项目概述 —— 一句话讲清做什么
├── 2. 功能列表 —— 一条一条的功能
├── 3. 界面描述 —— 长什么样
├── 4. 数据说明 —— 用什么数据、什么格式
├── 5. 技术约束 —— 用什么技术、有什么限制
└── 6. 文件结构 —— 代码怎么组织

💡 规格文档 = 建筑蓝图，AI = 施工队

🛠️ 现场演示：SDD 实战

规格文档示例 —— 个人记账本

# 个人记账本 - 规格说明书

## 项目概述
一个在浏览器中运行的记账工具，记录每日收支。

## 功能列表
1. 添加一笔记录（金额、类别、日期、备注）
2. 查看所有记录列表
3. 删除记录
4. 查看本月总收支

## 界面描述
- 上方：本月统计（总收入/总支出/结余）
- 中间：添加表单
- 下方：记录列表

## 数据说明
每笔记录：{金额, 类别, 日期, 备注}
数据保存在 localStorage

## 技术约束
- 纯 HTML + CSS + JavaScript
- 不依赖任何第三方库
- 生成一个完整 HTML 文件
            

SDD 四步流程

第一步

✍️
写规格文档

→

第二步

🤖
把规格给 AI

→

第三步

✅
验证修改

→

第四步

📝
持续维护

② 把规格给 AI

"请根据以上规格说明，生成完整的 HTML 文件"

④ 持续维护

规格文档就是项目的"说明书"
要加功能，先在规格里加，再让 AI 改

SDD 的进阶用法

📂 多文件项目

规格里写明文件结构
AI 生成多个文件

👥 多人协作

规格文档就是团队共识
大家按同一份蓝图走

🔄 交接维护

新人看规格就懂项目
不用问东问西

🔀 换 AI 模型

规格不变
换哪个 AI 都能继续干

🧪 自动测试

规格可以转成测试用例
AI 自己测自己写的代码

📋 进度追踪

每条功能就是一个任务
完成一条勾一条

Vibe Coding vs SDD 对比

对比维度	🟢 Vibe Coding	🔵 SDD
适用场景	小工具、原型	正式项目、产品
文件数量	1-3 个文件	任意多个
需求明确度	边做边想	先想清楚再做
可维护性	低	高
上手难度	零门槛	需要写文档
适合新手？	✅ 推荐入门	⭐ 进阶必学

💡 学习路径：Vibe Coding 入门 → SDD 进阶

今天的核心收获

🎯 AI 编程学习路径
└── 第一步：了解程序架构
     └── 简单 vs 复杂，按需选择
└── 第二步：Vibe Coding 入门
     ├── 用对话写代码
     ├── 万能提示词公式
     └── 从小游戏/小工具开始
└── 第三步：SDD 规格驱动开发
     ├── 先写规格，再让 AI 实现
     ├── 规格文档 = 项目说明书
     └── 适合正式项目和协作

给新手的行动建议

1

今晚就试

打开 ChatGPT / Claude
让 AI 帮你写一个网页

2

从小做起

计算器 → 猜数字 → 个人主页
逐步增加难度

3

学会描述

练习写提示词
越具体，AI 越懂你

4

进阶 SDD

做过 3-5 个小项目后
开始写规格文档

Q&A 问答环节

🤔 常见问题 1

不懂英文能学吗？

完全没问题！用中文描述需求，AI 都懂

🤔 常见问题 2

做出来的东西能用吗？

小工具完全够用，大项目需要 SDD 规范

🤔 常见问题 3

AI 会取代程序员吗？

AI 是工具，不是替代。会 AI 的程序员取代不会的

🤔 常见问题 4

从哪开始？

打开 Claude.ai，输入：帮我写一个……

💡 有任何问题欢迎评论区留言

🎉

感谢观看

AI 编程入门实战

✅ 程序的简单 vs 复杂架构

✅ Vibe Coding：一句话编程

✅ SDD 规格驱动开发

✅ 从今天开始，你也能用 AI 写代码

📢 关注我，持续分享 AI 编程干货