🎯 课程目标
完成本课程后，你将能够：
- 使用 AI 编程工具创建第一个项目
- 掌握基本的 Vibe Coding 工作流程
- 学会与 AI 进行有效沟通
- 完成一个可运行的简单应用
🚀 项目介绍：待办事项列表
我们将创建一个待办事项列表（Todo List）应用。这是一个经典的入门项目，涵盖了：
- 用户界面设计
- 添加、删除功能
- 数据状态管理
- 基本的交互逻辑
💬 第一步：向 AI 描述需求
打开 Cursor 或你选择的 AI 编程工具
使用 AI 聊天功能，输入以下 Prompt：
"请帮我创建一个待办事项列表（Todo List）网页应用，
使用 HTML + CSS + JavaScript 实现。
功能需求：
1. 顶部有一个输入框和添加按钮
2. 下方显示待办事项列表
3. 每个待办事项有复选框、文本和删除按钮
4. 点击复选框可以标记完成/未完成
5. 点击删除按钮可以删除该项
设计要求：
- 简洁现代的设计风格
- 使用柔和的蓝色主题
- 响应式布局，适配手机和电脑
- 带有平滑的动画效果"
🎨 第二步：AI 生成代码
AI 会生成类似这样的代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待办事项列表</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>待办事项</h1>
<div class="input-container">
<input type="text" id="todoInput" placeholder="添加新的待办事项...">
<button id="addBtn">添加</button>
</div>
<ul id="todoList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
🧪 第三步：测试运行
✨ 运行方法
- 直接打开：双击 index.html 在浏览器中打开
- 使用 Live Server：在 VS Code/Cursor 中右键选择 "Open with Live Server"
- 检查功能：尝试添加、勾选、删除待办事项
🔄 第四步：迭代优化
如果发现问题或不满意的地方，继续告诉 AI：
"我想要修改几个地方：
1. 把蓝色主题改成绿色主题
2. 完成的待办事项显示删除线效果
3. 添加一个统计显示：共有 X 项，待完成 Y 项"
✅ 完整代码参考
HTML (index.html)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待办事项列表</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>待办事项列表</h1>
<div class="stats">
<span>共 <strong id="totalCount">0</strong> 项</span>
<span>待完成 <strong id="pendingCount">0</strong> 项</span>
</div>
<div class="input-container">
<input type="text" id="todoInput" placeholder="添加新的待办事项...">
<button id="addBtn">添加</button>
</div>
<ul id="todoList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
CSS (style.css)
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: system-ui, -apple-system, sans-serif;
background: linear-gradient(135deg, #667eea, #764ba2);
min-height: 100vh; padding: 20px;
}
.container {
max-width: 600px; margin: 0 auto; background: white;
border-radius: 15px; padding: 30px; box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
JavaScript (script.js)
const todoInput = document.getElementById('todoInput');
const addBtn = document.getElementById('addBtn');
const todoList = document.getElementById('todoList');
addBtn.addEventListener('click', addTodo);
todoInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') addTodo();
});
function addTodo() {
const text = todoInput.value.trim();
if (!text) return;
}
🎯 课后练习
完成以下挑战：
- 创建待办事项列表应用并成功运行
- 添加至少 5 个待办事项
- 尝试标记几个为"已完成"
- 删除 2 个不需要的待办事项
- （进阶）让 AI 添加"编辑待办事项"功能