AI编程实战：用Cursor开发一款Todo清单小程序
## 前言
很多人想学编程，但被"写代码"三个字吓退。实际上，2026年的AI编程工具已经非常强大，一个完全不懂编程的小白，也能在AI的帮助下开发出实用的小程序。
今天用一个真实的项目案例，带大家体验"AI编程"的魅力。
## 项目目标
开发一款个人 Todo 清单小程序，功能包括：
• 添加待办事项
• 标记完成状态
• 自动分类整理
• 数据本地保存
预计开发时间：2小时（纯AI辅助）
## 工具准备
• Cursor：AI代码编辑器（cursor.com 免费下载）
• Chrome：浏览器调试（系统自带）
## 开发步骤
### 第一步：创建项目
1. 打开 Cursor，点击"New Project"
2. 选择"Empty project"
3. 项目名称输入：my-todo
4. 点击创建
### 第二步：让AI写需求文档
在Cursor中打开AI对话（Ctrl+L），输入：请帮我设计一个Todo清单应用的需求文档，包含功能列表、用户界面设计、数据结构设计
### 第三步：让AI写代码
复制以下提示词给Cursor：请帮我用HTML+CSS+JavaScript开发一个Todo清单应用，要求：
• 界面简洁美观，使用蓝色主题
• 可以添加、删除、标记完成待办事项
• 数据保存到localStorage
• 支持按状态筛选（全部/待完成/已完成）
• 响应式设计，支持手机端访问
AI会直接生成完整的代码文件。你可以点击代码查看详细实现，对不理解的部分追问AI解释，让AI优化某个功能
### 第四步：测试运行
1. 点击Cursor右上角的"Preview"
2. 在浏览器中预览效果
3. 测试各项功能是否正常
测试清单：
• 添加一个新待办
• 标记为已完成
• 删除一个待办
• 刷新页面后数据是否保留
• 筛选功能是否正常
### 第五步：修复问题
如果发现bug，把问题描述给AI：添加待办时，如果内容为空，应该提示"请输入内容"，但现在没有提示
AI会自动定位问题并修复。
## 功能扩展
基础版完成后，可以让AI帮你添加更多功能：
1. 添加分类标签：请添加标签功能，每个待办可以添加"工作""生活""学习"等分类标签
2. 添加到期提醒：请添加到期日期功能，快到期时显示提醒
3. 添加数据导出：请添加导出功能，可以把数据导出为JSON或CSV格式
4. 添加主题切换：请添加深色/浅色主题切换功能
## 部署上线
开发完成后，可以让你的AI帮你部署到线上：请帮我把这个小项目部署到GitHub Pages
按照AI的指引操作，大约5分钟即可获得一个可以访问的网址。
## 学习建议
用AI编程不是让你完全不动脑，而是让你把精力放在：
1. 产品设计：想清楚要做什么
2. 需求表达：清晰描述给AI
3. 结果验证：测试功能是否正确
代码看不懂没关系，多问AI解释，逐步提升理解能力。
## 结语
AI编程让"写代码"这件事变得前所未有的简单。不要被"我不会编程"困住，拿起工具，现在就开始你的第一个项目吧！
记住：完成一个能用的项目，比学100小时理论更有价值。
今日行动：
1. 下载安装Cursor
2. 用AI生成一个Todo应用
3. 测试所有功能
4. 尝试添加一个新功能
你的第一个AI编程项目，就从Todo清单开始！
|
