一天学完三权分立 + Claude Code + 落地页实战：我的AI编程实践记录 从“只会复制粘贴”到“独立完成一个生产级落地页”，我用了8小时
阅读时间：约8分钟
一、写在前面：为什么要记录这一天 先交代一下我的背景：以前写代码，基本靠复制粘贴和瞎改。能看懂HTML和CSS的大概意思，但让我从0写一个页面，脑子是空的。
最近一直在尝试用AI辅助编程，但总感觉哪里不对——要么AI生成的代码我看不懂，要么出了问题不知道怎么修。
今天花了一天时间，把基础补了补，然后用Claude Code完整做了一个落地页。过程有点曲折，但收获很大。
这篇文章记录了我今天的完整学习路径，希望对和我情况差不多的朋友有点帮助。
二、上午：补基础——HTML/CSS/JS三权分立 2.1 我以前的理解 以前我看代码，就是一个文件里乱七八糟的全是东西。HTML里写style，标签上写onclick，能跑就行。
结果就是：想改个颜色要找半天，加个功能能把整个页面搞崩。
2.2 今天学到的核心概念 三权分立的本质（这是我自己的总结）：
角色 负责什么 比喻 文件位置 HTML 结构、内容、语义 房子的框架 .html CSS 样式、布局、动画 房子的装修 .css JS 行为、交互、数据 房子里的人的活动 .js 一个例子让我彻底明白了：
做一个时钟：
HTML管：放一个
CSS管：字体多大、什么颜色、要不要阴影、居中对齐
JS管：获取当前时间、每秒更新一次、把数据填到HTML里
代码各写各的，通过class和id连接。改样式不会影响功能，修功能不会搞乱样式。
2.3 一个小作业：时钟 跟着教程写了一个数字时钟：
html
我的体会：这个模式看着简单，但养成习惯之后，代码的可维护性提升了一个档次。
三、下午：实战——用Claude Code做落地页 学完基础，我想试试能不能直接用AI做一个完整的页面。目标是一个叫“Foodiez”的外卖App落地页。
3.1 选什么工具 我用的是Claude Code（VS Code插件版本）。选择理由：
可以直接在当前项目里生成/修改文件
上下文理解能力比较强
可以边问边改，不用反复复制粘贴
3.2 我的Prompt策略（踩坑总结） 一开始我犯了一个错误：让AI一次性生成整个页面。结果代码量巨大，出了问题不知道从哪里改。
后来调整了策略：分步构建，逐块实现。
完整需求文档（我先写好发给AI）：
做一个外卖App Foodiez的营销落地页。
技术栈：React + TypeScript + Tailwind CSS + Framer Motion
页面结构（9个区块）：
Navbar（Logo + 4个链接 + CTA按钮）
Hero（左侧文案+下载按钮+信任数据，右侧手机mockup+浮动元素）
合作餐厅Logo行
三步操作：浏览餐厅→下单→快速送达
功能亮点（实时追踪、个性化推荐、快速结账、独家餐厅）
App预览（横向滚动手机截图）
促销条幅：“首单免配送费”
最终CTA + App下载按钮
页脚
风格：橙色主色调(#FF6B35)，大圆角，柔和阴影，移动端优先。 动画：滚动触发淡入/上浮效果，按钮hover反馈。
3.3 实际执行顺序（按步骤喂给Claude） 第1步：项目初始化
创建一个Vite + React + TypeScript项目，安装Tailwind CSS和Framer Motion，配置好文件结构。
第2步：Navbar组件
实现Navbar：桌面端横排，移动端汉堡菜单。滚动后背景变白加阴影。用useState控制菜单开关。
第3步：Hero区域
左右两栏布局。左边是标题、描述、App Store/Google Play按钮、评分数据。右边是手机mockup占位和浮动食物卡片。浮动卡片用Framer Motion做上下漂浮动画。
第4步到第9步：逐个实现剩余区块，每做完一个检查一下效果再继续。
3.4 踩坑记录 坑1：AI一次生成的代码太复杂
有一次Claude直接给了我400行代码，里面还有重复的组件定义。我的解决办法：让它拆分成小组件，一个文件不超过150行。
“把Hero拆成HeroLeft、HeroRight、FloatingCard三个独立组件”
坑2：Tailwind类名没生效
排查了半天，发现是tailwind.config.js的content路径没包括组件文件夹。Claude帮我修正了：
js content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", // 这个路径要写对 ], 坑3：Framer Motion动画触发时机不对
我想让滚动到某个区块时才触发动画，Claude建议用whileInView：
tsx <motion.div initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} viewport={{ once: true }}
{/* 内容 */}
</motion.div> viewport={{ once: true }}的意思是只触发一次，不会反复播放。
3.5 最终成果 用时：约4小时（包括调试和修改）
代码量：AI生成约95%，我手动改的不到5%
可运行：一个完整的React + TypeScript项目，npm run dev直接看效果
响应式：手机/平板/桌面都适配
四、今天我学到的三个核心认知
- 基础不是用来背的，是用来“知道有这个东西” 我不需要背CSS所有属性，也不需要记住JS所有API。但我要知道：
布局问题去查Flex/Grid
动画效果用Framer Motion还是CSS？
状态管理用useState还是useReducer？
知道“有什么工具”和“去哪查”，比死记硬背重要得多。
- AI编程的正确姿势：分步走，别一口吃成胖子 我犯过最大的错误就是让AI一次做太多。正确的节奏是：
写一个Prompt → 看效果 → 发现问题 → 继续对话 → 迭代改进
每次只解决一个问题，AI就不会“乱发挥”。
- 三权分立是“能看懂别人代码”的前提 以前打开一个GitHub项目，文件一多我就懵了。现在我知道：
看.tsx文件找结构
看.css或Tailwind类名理解样式
看事件处理函数理解交互
这个知识本身不值钱，但它是一个“视角”，能让你快速定位问题。
五、给同样在学前端的朋友几点建议 先手写一个简单的时钟（HTML/CSS/JS分开），理解三权分立比看十遍教程有用
用AI但不依赖AI：让AI生成代码，但你自己要读懂每一行
从落地页开始练手：结构固定、反馈直观、成就感强
遇到bug先读报错信息：80%的问题报错信息已经告诉你怎么修了
别追求完美：第一版能跑起来就是胜利，后续再迭代
六、完整代码在哪 项目代码放在GitHub上，需要的朋友可以自取：
github.com/你的用户名/foodiez-landing
或者直接在评论区留言，我把核心组件的代码贴出来。
最后说两句：这篇文章不是教程，只是一个普通学习者的实践记录。如果你也在用AI学前端，欢迎交流。方法对了，这条路真的没有想象中那么难。
