夜雨聆风
不会写代码也能做App!用 Cursor 零基础做一个待办清单(保姆级教程)
你朋友圈是不是也有人晒”我用 AI 做了个小程序”？别以为人家是程序员——其实他连一行代码都没写过。今天手把手教你，从安装到成品，30分钟做出一个能用的待办清单App。
什么是”氛围编程”？
2026年最火的一个词：Vibe Coding（氛围编程）。
简单说就是——你说人话，AI 写代码。
你不需要学 Python，不需要懂 JavaScript，你只需要会打字、会描述”我想要什么”。
而实现这一切的工具，就是今天的主角：Cursor。
🔗 官网：https://www.cursor.com
第一步：安装 Cursor（5分钟）
-
打开 Cursor 官网，点击 Download，选择你的系统版本（Windows / Mac 都支持） -
安装过程和装普通软件一样，一路点下一步就行 -
打开后会让你注册账号——用邮箱注册，选免费套餐（Hobby）就够用 -
进入主界面，你会看到一个类似 VS Code 的编辑器界面，别慌，你不需要看懂任何东西
小提示： Cursor 免费版每月有一定的 AI 对话额度，做这个教程的项目完全够用。
第二步：创建项目文件夹（1分钟）
-
在你电脑上随便建一个空文件夹，比如叫 my-todo-app -
回到 Cursor，点左上角 File → Open Folder，选中刚才那个文件夹 -
好了，你的”工作台”就搭好了
第三步：开始跟 AI 对话，做你的待办清单（15分钟）
这是最核心的部分。你只需要做一件事：告诉 AI 你想要什么。
3.1 打开 AI 对话框
按快捷键 Ctrl + I（Mac 是 Cmd + I），会弹出一个对话框，这就是你跟 AI 沟通的地方。
3.2 输入你的第一条指令
把下面这段话直接复制粘贴进去：
帮我创建一个待办清单网页应用，要求如下：1. 界面美观，使用现代化设计风格，背景用浅蓝色渐变2. 可以输入待办事项并添加3. 每条待办前面有复选框，点击可以标记为已完成（加删除线效果）4. 有删除按钮，可以删除单条待办5. 顶部显示"今日还剩 X 项未完成"6. 数据保存在浏览器本地，刷新页面不会丢失7. 适配手机屏幕8. 所有代码放在一个 index.html 文件里请直接生成完整代码。然后按回车，等 AI 输出。
3.3 接受代码
AI 会生成一个完整的 index.html 文件。你会看到代码在编辑器里自动出现。
点击 “Accept”（接受）按钮就行，不需要读懂任何代码。
3.4 预览效果
在文件列表中找到 index.html，右键 → 在浏览器中打开（或者直接双击这个文件）。
🎉 你会看到一个漂亮的待办清单页面已经出现在浏览器里了！
试试看：
-
输入一条待办，点”添加” -
点击复选框，看它划掉 -
点删除按钮，移除一条 -
关闭浏览器再打开，数据还在
第四步：不满意？继续改！（5分钟）
这才是”氛围编程”最爽的地方——你就像甲方一样提需求，AI 负责改到你满意。
再次按 Ctrl + I 打开对话框，试试这些指令：
想改颜色？
把整体配色改成暗黑风格，深色背景 + 白色文字，按钮用亮紫色想加功能？
给每条待办加一个优先级标签，分为"紧急""重要""普通"三个级别，用不同颜色区分想加动画？
添加待办时加一个从左滑入的动画效果，删除时加一个淡出效果想更好看？
参考苹果 iOS 提醒事项的设计风格，重新美化界面每次 AI 改完代码，你刷新浏览器就能看到效果。不满意就继续说，满意为止。
核心心法：你不需要知道”怎么实现”，你只需要说清”我要什么效果”。
第五步：遇到报错怎么办？
如果预览时页面显示不对，或者浏览器控制台有红色报错——
不要慌，直接把报错信息复制粘贴给 AI：
页面打开后按钮点了没反应，浏览器控制台报错信息如下：[粘贴报错内容]请帮我修复AI 会自动分析问题并修好。这就是你的免费调试工程师。
第六步：做完了，怎么用？
方案一：自己用（最简单）
直接双击 index.html 文件就能打开使用，跟打开一个网页一样。
可以在桌面创建一个快捷方式，每天打开就是你的待办清单。
方案二：部署上线，手机也能用
想在手机上也能打开？用 Vercel 免费部署：
-
注册 Vercel（https://vercel.com），用 GitHub 账号登录 -
把你的项目文件夹上传到 GitHub（不会的话，也可以问 Cursor 的 AI 帮你操作） -
在 Vercel 里导入这个项目，点 Deploy -
30秒后你会得到一个网址，手机浏览器打开就能用 -
还可以把它”添加到主屏幕”，跟原生App体验一样
方案三：发给朋友装X
把 Vercel 给你的网址发到朋友圈：”周末闲着没事，随手做了个小工具。”
不用解释，尽管装。
三个让效果翻倍的小技巧
1. 需求描述越具体，效果越好
|
❌ 模糊描述 |
✅ 具体描述 |
|
帮我做个好看的页面 |
用蓝白配色，圆角卡片设计，按钮带悬停阴影效果 |
|
加个功能 |
加一个按日期筛选的功能，点击日期可以只看当天的待办 |
|
改一下样式 |
把字体改成 16px，行间距 1.8，卡片之间间距 12px |
2. 可以给 AI 看参考
参考飞书的待办功能，帮我加一个"清单分组"功能，可以创建"工作""生活""学习"三个分组，每组下面有各自的待办3. 一次只改一个点
别一口气提10个修改。一次说一个需求，确认没问题再提下一个。 这样出错概率最低。
最后说两句
2026 年，编程真的不再是程序员的专利了。
你的想法 + AI 的执行力 = 你的产品。
今天是一个待办清单，明天你可以试试做一个记账工具、一个倒计时页面、一个个人主页……只要你能说清楚想要什么，AI 就能帮你做出来。
所以，你最想用 AI 做一个什么小工具？评论区告诉我，点赞最高的，下期教程我来安排！
关注我，每天一个 AI 实操技巧，让你比 90% 的人更早掌握 AI 红利。
