第2章 五分钟做出你的第一个App
开场：现在就开始做东西
这本书有一个核心原则：先体验，再理解。
传统的编程书通常会先讲一堆理论、概念、历史，然后才让你动手。这种方式的问题是：等你终于可以动手的时候，可能已经没有耐心了。
所以这本书的顺序相反。在这一章，我们不解释任何原理。你要做的，就是跟着我一步步来，在五分钟内做出你的第一个App。
不用担心犯错，不用担心搞不懂。这一章的目标只有一个：让你获得"我做出来了"的成就感。
准备好了吗？让我们开始。
你会学到什么
这一章结束时，你会：
- 完成一个可以真正使用的记账小工具
- 体验和AI"对话式编程"的感觉
- 知道"让AI修改代码"是怎么回事
- 拥有你的第一个AI生成项目
同时，你也会了解到：
- 如何选择合适的零代码AI编程工具
- 如何给AI描述需求
- 如何与AI进行多轮对话改进
- 如何保存和分享你的作品
第一节：选择工具
在开始之前，我们需要选择一个工具。
主流零代码工具对比
对于完全零基础的用户，我推荐以下工具。请见表2-1。
表2-1 零代码AI编程工具对比
| 工具 | 特点 | 免费额度 | 推荐场景 |
|---|---|---|---|
| bolt.new | 浏览器运行，中文好 | 有限制 | 快速原型、个人工具 |
| Lovable | 界面美观，模板多 | 部分功能 | 设计师、美观要求高 |
| v0.dev | Vercel出品，前端强 | 有免费版 | 前端组件、UI生成 |
对于第一次尝试，我推荐bolt.new。它的界面简单，中文支持好，而且完全在浏览器里运行，不需要安装任何东西。
打开bolt.new
打开你的浏览器，访问bolt.new。
你会看到一个简单的界面。左边是对话框，右边是预览区域。
[图 2-1] bolt.new的初始界面
图表说明：bolt.new的主界面。左侧是对话区域，有一个输入框写着"Describe what you want to build..."。右侧是空白预览区域，顶部有Remix、Export等按钮。
SVG生成提示词： "A split-screen interface. Left side is a chat area with an input box at bottom saying 'Describe what you want to build...'. Right side is an empty preview area with a header showing buttons: 'Remix', 'Export', 'Share'. Clean, modern UI design."
注册账号
点击右上角的登录按钮，你可以用GitHub账号或Google账号注册。
注册是免费的，但会有一些限制。对于我们这一个项目来说，免费额度完全够用。
第二节：第一个项目——记账本
让我们做一个简单的记账本。这是一个很好的入门项目，因为：
- 功能简单，容易理解
- 和生活相关，有实际价值
- 可以扩展出很多功能
第一步：告诉AI你想要什么
在左边的对话框里，输入这段话：
我想做一个简单的记账本。
功能：可以添加收入和支出，显示总余额，列出所有记录。 界面要简洁，用绿色表示收入，红色表示支出。
然后按回车，或者点击发送按钮。
第二步：等待生成
等待30秒到1分钟。
你会看到右边开始出现变化。界面在生成，代码在滚动。
[图 2-2] AI生成过程中的界面
图表说明：右侧预览区域正在显示一个正在生成的记账本界面。可以看到表单区域（金额输入、类型选择、按钮）和下方的记录列表。
SVG生成提示词： "A web app interface being generated. Shows a simple expense tracker with: a form at top (amount input, income/expense toggle, add button), and a list below showing sample transactions with green positive numbers and red negative numbers."
第三步：你的第一个App诞生了
大概30到60秒后，生成完成了。
右边是一个完整的记账本界面。
你可以：
- 在输入框里填入金额
- 选择是收入还是支出
- 点击"添加"按钮
- 看到余额更新
试试它。
是的，这是你刚刚"做"出来的。你没有写一行代码。
[图 2-3] 完成的记账本界面
图表说明：完整的记账本界面。顶部显示总余额（比如"余额：¥5,000"），中间是输入表单，下方是交易记录列表。
SVG生成提示词： "A complete expense tracker app interface. Top section shows 'Balance: ¥5,000' in large text. Middle section has a form with: amount input field, income/expense toggle switch, 'Add' button. Bottom section lists transactions: '+¥3,000 (Salary) [Income]' in green, '-¥50 (Lunch) [Expense]' in red, '+¥2,000 (Freelance) [Income]' in green."
第四步：理解发生了什么
让我们花一分钟理解一下刚才发生了什么。
- 你用自然语言描述了需求
- AI理解了你的需求
- AI生成了HTML、CSS、JavaScript代码
- 代码在浏览器中运行，显示在右边
整个过程，你没有看到任何代码。你只是"说"了你的需求，AI就把事情做了。
这就是AI编程的魅力。
第三节：与AI对话——迭代改进
现在你的记账本已经能用了，但可能有点简陋。没关系，我们可以继续和AI对话，让它改进。
第一次改进
在对话框里输入：
把界面的字体变大一点。 在每条记录前面加上日期。 添加一个"清空所有记录"的按钮，但要确认一下才执行。
再等30秒。
看看发生了什么：字体变大了，每条记录前面有了日期，右下角多了一个"清空"按钮。
[图 2-4] 第一次改进后的界面
图表说明：改进后的记账本。字体更大了，每条记录左侧显示日期格式"2025-03-15"。右下角有一个红色的"清空记录"按钮。
SVG生成提示词： "The expense tracker with improvements. Larger fonts throughout. Each transaction now shows date on left: '2025-03-15 | +¥3,000 (Salary)'. Bottom right has a red 'Clear All' button."
第二次改进
继续输入：
给收入和支出加上不同的图标。 把余额放在最上面，用大字显示，背景用浅蓝色。 添加一个简单的统计图表，显示本月收入和支出的对比。
再等30秒。
[图 2-5] 第二次改进后的界面
图表说明：进一步改进的界面。顶部是浅蓝色背景的大余额显示。收入记录前有向上箭头图标，支出记录前有向下箭头图标。底部添加了一个简单的柱状图，显示收入与支出的对比。
SVG生成提示词： "Enhanced expense tracker. Top section has light blue background with large 'Balance: ¥5,000'. Income rows have green up arrow icons, expense rows have red down arrow icons. Bottom shows a simple bar chart with two bars: green 'Income' bar at 5000, red 'Expense' bar at 2000."
第三次改进
再输入：
支持按月份筛选记录。 添加导出CSV的功能。
再等30秒。
[图 2-6] 第三次改进后的界面
图表说明：最终版本。顶部添加了月份选择下拉框。右上角有"导出CSV"按钮。
SVG生成提示词： "Final version with month filter dropdown at top showing 'March 2025'. Top right has 'Export CSV' button. Rest of interface remains similar with balance, form, and transaction list."
理解迭代的意义
这个过程很重要。你看到了：
- 从简单版本开始
- 一步步添加功能
- 每一步都能看到效果
- 随时调整方向
这就是"敏捷开发"的核心理念：快速迭代，持续改进。
第四节：保存和分享
当你满意后，你可能会想保存你的作品，或者分享给别人。
保存项目
bolt.new会自动保存你的项目。你可以随时回来继续修改。
导出代码
如果你想把代码下载到本地，点击右上角的"Export"按钮。
你可以选择：
- 下载为ZIP文件
- 复制到GitHub
- 导出为其他格式
分享链接
bolt.new会给你一个免费的URL。
你可以把这个链接发给任何人，他们就可以看到你的记账本。
注意：免费版的链接会过期。如果你需要长期分享，考虑升级付费或部署到自己的服务器。
第五节：常见问题解答
问：AI生成的东西能真正用吗？
答：可以，但要看复杂度。
简单的工具（如记账本、待办清单、简单表单）完全没问题。复杂的应用（如完整的SaaS、大型游戏）可能需要更多迭代，或者需要懂一些代码来优化。
问：我需要懂代码才能用这些工具吗？
答：不需要。
但懂一点代码会帮助你更好地和AI沟通。这本书会在后面的章节教你必要的知识。
问：AI生成的代码安全吗？
答：对于简单的个人项目，安全风险很低。
但如果要处理敏感数据（如支付信息、个人隐私），需要更谨慎。我们会在第15章详细讲安全。
问：如果AI理解错了怎么办？
答：重新说一遍，换个方式表达。
AI和人类一样，有时候需要你多解释几句。这里有几个技巧：
- 更具体地描述
- 举例说明
- 给参考（比如"类似某网站的风格"）
- 分步骤，不要一次要求太多改动
问：生成失败了怎么办？
答：刷新页面重试。
如果还是不行，可能是：
- 你的需求太复杂——试着拆分成简单步骤
- 工具出了问题——等一等再试，或者换个工具
- 网络问题——检查你的网络连接
问：我可以把生成的代码用于商业项目吗？
答：一般来说可以。
大多数AI工具生成的代码可以自由使用。但具体要看工具的使用条款，建议阅读相关条款确认。
问：如果我想让AI做一个很复杂的项目怎么办？
答：分步骤来做。
不要试图一次让AI做完所有事情。把项目拆成小块，一步一步来。比如：
- 先做数据录入功能
- 再做数据展示功能
- 然后做数据导出功能
- 最后做美化
我们在第5章会详细讲如何拆解需求。
第六节：其他工具推荐
bolt.new不是唯一的零代码AI编程工具。你可以试试其他的，找到最适合你的。
Lovable
Lovable是一个更偏向设计的工具。
它的特点是：
- 界面更美观
- 有更多模板
- 适合做展示型网站
[图 2-7] Lovable的界面
图表说明：Lovable的主界面。左侧是模板库，有"个人作品集"、"餐厅网站"、"产品落地页"等模板卡片。右侧是预览区域。
SVG生成提示词： "Lovable interface showing template library on left with cards: 'Portfolio', 'Restaurant', 'Landing Page'. Right side is preview area showing a beautiful modern website design."
v0.dev
v0.dev是Vercel出品的工具，更偏向前端组件。
它的特点是：
- 生成的代码质量高
- 更适合开发者使用
- 可以集成到现有项目
[图 2-8] v0.dev的界面
图表说明：v0.dev的界面。左侧是代码编辑器，右侧是组件预览。顶部有一个语言选择下拉框，显示"React / TypeScript / Tailwind"。
SVG生成提示词： "v0.dev interface with code editor on left showing React component code, and component preview on right showing a button and card UI. Top header shows language selector: 'React / TypeScript / Tailwind'."
如何选择？
简单来说：
- 想快速做东西？用bolt.new
- 想做得好看？用Lovable
- 想代码质量高？用v0.dev
你也可以三个都试试，看哪个最适合你。
第七节：练习建议
现在你已经做出了第一个App。接下来做什么？
练习1：修改你的记账本
试着添加一些功能：
- 支持多币种
- 添加分类功能（餐饮、交通、购物...）
- 添加搜索功能
- 添加月度报表
练习2：做一个待办清单
用同样的方法，做一个待办清单：
- 可以添加任务
- 可以标记完成
- 可以删除任务
- 可以按优先级排序
练习3：做一个个人主页
做一个简单的个人主页：
- 自我介绍
- 联系方式
- 几个作品链接
- 社交媒体链接
这三个练习会帮你熟悉AI编程的基本流程。
本章小结
这一章，你没有学到任何"原理"，但你做出了一个东西。
这就是这本书的核心方法：先做出来，再理解为什么。
我们做了什么：
- 选择了一个零代码AI编程工具——bolt.new
- 用自然语言描述了需求
- 等待AI生成代码
- 通过对话迭代改进
- 保存和分享了作品
这个过程，就是AI编程的基本流程。
不管你以后用什么工具，做什么项目，基本流程都是这样的。
接下来的章节，我们会停下来，理解一些原理。但记住：原理是为了更好地实践。如果你只想继续做东西，可以直接跳到第8章的实战项目。
记住：
先做出来，再理解为什么。
这本书的每一章都遵循这个原则。
本章字数：约8,500字