我用了 AI 在 10 分钟内构建了一个 app —— 结果如何 🤖⚡
Source: Dev.to
起始
昨天早上，我泡了茶，心想—— “今天尝试点新东西吧。”
我通常使用 AI 工具来调试或获取代码建议。构建完整的应用？从未真正尝试过。我有那种典型的想法—— “是是，AI 没那么神奇。”
然而……我错了。
目标：一个简易习惯追踪应用
我有意想要构建一个既简单又实用的东西：一个习惯追踪器，用户可以：
- 标记每日习惯
- 查看连胜次数
- 获取励志名言
时间限制： 10 分钟。
计时器已启动。开始吧。
Timeline
Minutes 1–2: Idea & Setup
我打开了 AI 工具并给了它以下提示：
“我需要一个使用 HTML、CSS 和原生 JavaScript 编写的简易习惯追踪网页应用。用户应该能够标记每日习惯、查看连胜次数，并获得励志语录。保持界面简洁。”
2 秒后收到回复——完整的结构 + 代码片段。
Minutes 3–4: Copy‑Paste & First Run
ChatGPT 给了我下面的 HTML 骨架：
<!DOCTYPE html>
<html>
<head>
<title>Habit Hero</title>
<style>
body { font-family: Arial; max-width: 500px; margin: auto; padding: 20px; }
.habit { display: flex; justify-content: space-between; margin: 10px 0; }
.completed { text-decoration: line-through; color: gray; }
button { background: green; color: white; border: none; padding: 5px 10px; }
</style>
</head>
<body>
<h1>Habit Hero</h1>
<p>"Small steps every day"</p>
<!-- app content will be inserted here -->
</body>
</html>以及一个 app.js 文件，负责：
- Habits array (Exercise, Read, Meditate)
- Complete button clicks
- Streak counter
- Random quotes
首次运行结果
- ❌ 习惯没有显示
- ❌ 连胜计数没有更新
- ✅ 语录显示正常
Minutes 5–6: Debugging with AI
我复制了错误信息并询问：
“Habits aren’t showing. Console error: ‘Cannot read property
appendChildof null’”
ChatGPT 回答：
“Your script is running before the DOM loads. Move the script to the end of the body or use
DOMContentLoaded.”
我把 <script> 标签移到了 body 底部。
✅ 完美运行。
Minutes 7–8: UI Improvements
应用可以用了，但界面很单调。我说：
“Make the UI cleaner and more modern. Add gradient background, card design, and better fonts.”
AI 立刻提供了更新后的 CSS，包含：
- 线性渐变背景
- 带盒子阴影的习惯卡片
- 平滑的悬停效果
- 更好的排版
现在看起来真的 专业 多了。
Minutes 9–10: Local Storage & Polish
我发现刷新页面后连胜会重置。于是对 AI 说：
“Implement
localStorageso habits and streak persist.”
AI 给了我这段代码片段：
// Save to localStorage
localStorage.setItem('habits', JSON.stringify(habits));
// Load from localStorage
const saved = JSON.parse(localStorage.getItem('habits'));
if (saved) habits = saved;Source:
10 分钟后 — 最终结果
在 10 分钟 内，我完成了：
- ✅ 一个可运行的习惯追踪器
- ✅ 使用
localStorage的连胜计数器 - ✅ 每日励志名言
- ✅ 干净、现代的 UI
- ✅ 移动端响应式布局
我把它发给了一个朋友。他说：“你居然在 10 分钟内做出来了？这要我花两天时间。”
关键经验教训
-
AI 并未取代开发者——至少目前还没有
AI 编写了代码，但我负责调试、定义需求并进行验证。AI 完成了 80 % 的工作；关键的 20 % 仍然是人类的思考。 -
提示工程是一项真实的技能
不佳的提示: “Build me an app”
优秀的提示: “Build a habit tracker withlocalStorage, clean UI, and motivational quotes”
具体的输入 = 更好的输出。 -
AI 幻觉是真实存在的
有一次 AI 写了一个在 JavaScript 中不存在的函数，我只能自己发现并纠正。如果你不掌握基础，AI 可能会自信地误导你。 -
速度提升是真实的
通常需要 2–3 hours 的工作，我在 10 minutes 内完成。质量控制？仍然是人类的工作。
我的最终结论
AI 让我的效率提升了 10× 更快。它 没有抢走我的工作。如果我不是开发者，我就不会有：
- 知道错误发生的原因
- 理解
localStorage - 做出良好的 UI 决策
- 优化代码
AI 是 熟练开发者的超能力。对于初学者来说，它是 双刃剑 —— 有帮助，但会形成依赖。
额外奖励：我的提示模板
如果你想自己尝试，可以使用类似下面的方式：
I need a [app type] with [features].
Tech stack: [HTML/CSS/JS or others].
UI should be [clean / modern / fun].
Extra requirements: [localStorage, API, etc.].你怎么看？
你使用 AI 构建过任何东西吗？你用了哪款工具？你的体验如何？留下评论——我会阅读并回复每个人。