🏋️ 14 个练习 Vibe Coding
Vibe 体操
动手是学 AI 编程最快的方式。14 个独立练习,用一句提示词就能开始。每完成一个,你都有看得见的作品。
为什么要做体操
编程是门手艺。看再多教程不动手,就像看了 100 集健身视频但不去健身房。Vibe 体操就是让你——
🔄 形成肌肉记忆 反复练习"提需求 → AI生成 → 检查验证",变成第二本能
🎯 聚焦一个场景 每个练习只做一件事,不贪多,做完一个就有一个成果
💪 建立信心 从"我不会"变成"这个我做过",信心来自真实的完成经历
🧩 积累组件库 练完 14 个,你就有了自己的代码片段库,以后直接复用
四大练习方向
页面搭建 4 个练习
从个人主页到产品落地页,学会用 AI 搭出好看又专业的前端页面
交互组件 4 个练习
AI对话窗口、搜索补全、拖拽排序——日常开发中最常用的交互模式
数据玩法 3 个练习
调用API获取数据、表格筛选排序、用图表展示——让数据"活"起来
实用工具 3 个练习
Markdown编辑器、倒计时、颜色提取——拿来就能用的生活小工具
一个典型的练习长什么样
1
看看要做什么
阅读练习说明,了解你要实现的效果
2
复制提示词
文章里准备了现成的 AI 提示词,直接复制到 Cursor
3
看 AI 生成代码
看着 AI 一行行写出代码,不理解的地方随时问它
4
跑通,庆祝 🎉
在浏览器里看到你的作品,截图发朋友圈
练习建议
✅ 每个练习独立自治,选感兴趣的就开始,不用按顺序
✅ 做完一个之后,试着改改颜色、换换内容,加深理解
✅ 遇到问题就把报错信息发给 AI,这是最好的学习机会
✅ 把做好的作品截图保存,这些是你的作品集
选一个感兴趣的,开始你的第一个练习
做个个人主页 →