我的第一次「Claude Code」实战：用 AI 敲出一个外卖 App 落地页
摘要
从零上手 Claude Code VS Code 插件，用自然语言 10 分钟写出完整外卖 App 落地页，记录我的第一次 AI 开发初体验和踩坑心得。
标签
#Claude Code #AI编程 #前端开发 #学习记录 #React
目录
- [前言：终于轮到我体验 AI 写代码了](#前言：终于轮到我体验 AI 写代码了 "#1-%E5%89%8D%E8%A8%80%E7%BB%88%E4%BA%8E%E8%BD%AE%E5%88%B0%E6%88%91%E4%BD%93%E9%AA%8Cai%E5%86%99%E4%BB%A3%E7%A0%81%E4%BA%86")
- [什么是 Claude Code？我的初印象](#什么是 Claude Code？我的初印象 "#2-%E4%BB%80%E4%B9%88%E6%98%AFclaude-code%E6%88%91%E7%9A%84%E5%88%9D%E5%8D%B0%E8%B1%A1")
- [我的第一个 AI 项目：Foodiez 外卖落地页](#我的第一个 AI 项目：Foodiez 外卖落地页 "#3-%E6%88%91%E7%9A%84%E7%AC%AC%E4%B8%80%E4%B8%AAai%E9%A1%B9%E7%9B%AEfoodiez%E5%A4%96%E5%8D%96%E8%90%BD%E5%9C%B0%E9%A1%B5")
- [VS Code 插件上手全流程](#VS Code 插件上手全流程 "#4-vs-code%E6%8F%92%E4%BB%B6%E4%B8%8A%E6%89%8B%E5%85%A8%E6%B5%81%E7%A8%8B")
- [效果展示：这真的是 AI 写的？](#效果展示：这真的是 AI 写的？ "#5-%E6%95%88%E6%9E%9C%E5%B1%95%E7%A4%BA%E8%BF%99%E7%9C%9F%E7%9A%84%E6%98%AFai%E5%86%99%E7%9A%84")
- [踩坑 & 心得：原来 AI 开发是这么玩的](#踩坑 & 心得：原来 AI 开发是这么玩的 "#6-%E8%B8%A9%E5%9D%91%E5%BF%83%E5%BE%97%E5%8E%9F%E6%9D%A5ai%E5%BC%80%E5%8F%91%E6%98%AF%E8%BF%99%E4%B9%88%E7%8E%A9%E7%9A%84")
- [写在最后：AI 不是替代，是放大](#写在最后：AI 不是替代，是放大 "#7-%E5%86%99%E5%9C%A8%E6%9C%80%E5%90%8Eai%E4%B8%8D%E6%98%AF%E6%9B%BF%E4%BB%A3%E6%98%AF%E6%94%BE%E5%A4%A7")
1. 前言：体验 claude code 生成代码
这段时间刷掘金，总能刷到大家用各种 AI 工具 "一键生成项目" 的帖子，看着大家晒出的漂亮页面和飞快的开发速度，我心里一直痒痒的。
作为一个前端小白，平时写个简单页面都要折腾半天，这次我终于下定决心，用Claude Code VS Code 插件，试试用 AI 写一个完整的外卖 App 落地页。
没有什么复杂的目标，就是想记录一下我的第一次 AI 开发初体验，看看传说中的 "自然语言生成代码" 到底有多香。
2. 什么是 Claude Code？我的初印象
先给和我一样刚接触的小伙伴简单介绍一下：Claude Code 是 Anthropic 推出的 AI 编程助手，它最大的特点就是能直接在 VS Code 里和你对话，帮你写代码、改 bug、生成整个项目。
不用切换窗口，不用复制粘贴，你直接用自然语言告诉它 "我想要个什么东西"，它就能帮你搞定从创建文件到写代码的全流程。对我这种手残党来说，简直是打开了新世界的大门。
3. 我的第一个 AI 项目：Foodiez 外卖落地页
我这次想做一个叫「Foodiez」的外卖 App 落地页，目标很简单：
- 风格要清新好看，主色调用橙色，看着就很有食欲；
- 要包含首页、优惠区、功能介绍、用户评价这些模块；
- 技术栈就用 React+Tailwind，我比较熟；
- 最好能有点简单的动画，别太死板。
我把这些需求整理成了一段提示词，直接丢给 Claude Code：
plaintext
帮我做一个叫Foodiez的外卖App落地页，用React+TypeScript+Tailwind写，主色调用橙色。
页面要有：导航栏、首屏介绍、优惠活动、App功能展示、用户评价、下载区、页脚。
要加一点滚动动画和悬浮效果，整体风格简洁现代，像一个真实的产品官网。4. VS Code 插件上手全流程
整个过程比我想象的简单太多，几步就搞定了：
- 安装插件：在 VS Code 扩展商店搜「Claude Code」，点一下安装就好；
- 新建项目文件夹：创建一个空文件夹，用 VS Code 打开；
- 和 AI 对话：打开 Claude Code 侧边栏，把我写好的提示词粘进去，点击发送；
- 等待生成：Claude Code 会自动帮我创建文件、写代码、安装依赖，我全程就在旁边看着；
- 运行项目 ：它写完后直接给我启动命令，终端跑一下
npm run dev，项目就跑起来了。
整个过程我几乎没写一行代码，只是同意Claude Code的授权申请，这种感觉真的太奇妙了。
5. 效果展示：这就是Claude Code吗？
跑起来的那一刻我真的被惊艳到了，给你们看看成品👇
- 首屏的橙色渐变背景和 App 展示，完全就是我想要的感觉；
- 优惠区、功能区、用户评价这些模块，AI 都帮我安排得明明白白；
- 滚动的时候还有平滑的动画，甚至连手机模型的悬浮效果都加上了；
- 响应式也做得很好，缩小窗口看，页面也不会乱掉。
说真的，这比我自己写的第一个页面好看多了...
6. 踩坑 & 心得：原来 AI 开发是这么玩的
当然，过程也不是一帆风顺，我也踩了几个小坑：
- 提示词一定要说清楚：一开始我写得太笼统，AI 生成的页面很空；后来把需求写得越具体，效果就越好；
- 别当甩手掌柜：AI 写的代码不是完美的，有个地方的样式我不满意，直接告诉它 "把这个按钮的颜色改成深一点的橙色"，它就帮我改好了；
- 适合快速出原型：像这种简单的落地页，AI 生成的速度和质量都很顶，但是复杂的业务逻辑，还是需要自己把控。
7. 最后：AI 不是替代，是放大
这次体验下来，我最大的感受是：AI 真的不是来抢饭碗的，而是来帮我们放大能力的。
以前我写一个这样的页面，可能要花大半天时间折腾样式和布局；现在用 Claude Code，十几分钟就出了一个效果不错的版本。剩下的时间，我可以用来优化细节、思考逻辑，而不是对着 CSS 挠头。
对我这种前端小白来说，它更像一个耐心的 "编程搭子"，我有什么想法，都可以先丢给它试试，快速验证，不用再怕 "写不出来" 了。
互动交流
- 你有没有试过用 Claude Code 写项目？体验怎么样？
- 下次想让我用 AI 试试写个什么项目？评论区告诉我呀～