从 AIGC 到 AI Agent：用 Claude Code 搭建产品级落地页的实战
引言
上篇文章我聊了"代码向后，业务向前"——AI 时代，写代码的主力变成了 LLM，程序员的核心价值转向了定义问题和架构设计。
但有一个细节我一直没展开说：AI 生成代码之后呢？
过去我用 AI 的工作流是这样的：在 ChatGPT/豆包里写 prompt → AI 生成代码 → 我手动复制 → 粘贴到编辑器 → 保存 → 切回浏览器看效果 → 不满意，再写 prompt → 再复制……循环往复。
这当然比手写代码快，但总觉得哪里不对。AI 只替代了"写"这个环节，但"搬运代码"这件事还是我在做。
直到我遇到了 Claude Code，才发现原来还有另一种可能。
一、从 Chat Bot 到 Agent：AI Coding Agent 的进化
先回顾一下 AI 辅助编程的进化路径：
第一阶段：AIGC + 复制粘贴
这是最原始的方式。LLM Chatbot（ChatGPT、豆包、Kimi 等）生成代码片段，你手动复制到项目中。优点是门槛极低，缺点也很明显——每次修改都要来回切换上下文，代码一多就手忙脚乱。
第二阶段：AI 编辑器
Cursor 是这个阶段的代表。它把 LLM 直接嵌入到编辑器里，你不需要离开 IDE 就能和 AI 对话。AI 可以直接修改光标所在位置的代码。相比复制粘贴，这已经是巨大的进步。
第三阶段：AI Coding Agent
Claude Code（还有 Codex）代表了这个阶段。它不是编辑器插件，而是一个真正有"手"有"脚"的 Agent。
什么叫有手有脚？就是它能：
- 读取文件——理解你的项目结构、现有代码
- 写入文件——直接创建和修改代码文件
- 运行命令——启动项目、安装依赖、运行测试
换句话说，给它一个任务，它能自己完成从理解需求到执行操作的整个闭环。 你只需要在终点验收结果，而不需要在每个环节手动搬运。
Claude Code 的安装也很简单：VS Code 里安装 Claude Code 插件，通过 cc switch 配置后端模型（我用的是 DeepSeek）。一切都在命令行或编辑器内完成。
使用 Claude Code 有一个很重要的最佳实践：在一个单独的 VS Code 窗口里打开项目目录。这样做的好处是，Agent 能专注于当前项目，不受其他文件或标签页的干扰。给它一个清晰的"边界"，它反而能更好地完成任务。
这个"有边界感"的思路很有意思——就像给一个员工分配独立的工位，而不是让他坐在嘈杂的大通铺里。
二、实战：用 Claude Code 搭建产品级落地页
概念说完了，直接上一个实战。
最近我在做一个叫 Foodiez 的外卖 App 项目，需要一个产品落地页。需求很明确：一个能促进下载转化的营销页面，包含导航栏、功能介绍、社交证明、应用预览等完整模块。
最开始我用豆包试了一下，生成的是纯 HTML/CSS/JS。对于快速原型来说没问题，但距离"生产级"还有差距——没有组件化、没有类型安全、动画交互也比较基础。
于是我决定：把技术栈升级到 React + TypeScript + Tailwind CSS + Framer Motion，交给 Claude Code 来完成。
这时候就体现出 Agent 和 Chatbot 的本质区别了：
- 用 Chatbot：我需要在对话里描述所有需求 → 拿到代码 → 手动创建每个文件 → 安装依赖 → 调试
- 用 Agent：我只需要描述需求和最终目标 → Agent 读取项目上下文 → 自动创建组件文件 → 安装依赖 → 全部搞定
对于这个落地页项目，我用的是一个六要素的结构化 Prompt（稍后会详细拆解）。Claude Code 基于这个 Prompt，直接生成了完整的 React 项目结构——9 个组件、动画系统、响应式布局，全部一次到位。
从"生成代码"到"交付项目"，这就是 Agent 带来的质变。
三、六要素 Prompt 框架
上篇文章我分享了写 3D 小世界时的"五块分割法"（体验目标 → 技术约束 → 视觉方向 → UI 风格 → 代码组织）。这次做落地页项目，我用了一个升级版的 六要素框架：
1. 任务描述（Task）
一句话说清楚要做什么："Build a modern, responsive landing page for a food delivery mobile app called Foodiez."
2. 最终目标（Goal）
"Create a high-conversion marketing landing page that promotes the app, communicates value instantly, and drives users to download."
目标是文章的"北极星"，告诉 AI 我们到底要达成什么效果。
3. 技术栈（Tech Stack）
React + TypeScript + Tailwind CSS + Framer Motion，面向组件的架构、移动优先、语义化 HTML。
这里有一个关键要求："The result must be production-ready."——不是 demo，而是能直接上线的东西。这个明确的期望值设定，对最终输出质量有决定性影响。
4. 风格和视觉方向（Style）
Clean, modern, premium UI。主色 #FF6B35（橙色），暖色系+食物感。柔和阴影、大圆角、流畅的微交互。
5. 页面结构（Layout）
这是最具体的部分——9 个模块的详细描述：
| 模块 | 一句话设计意图 |
|---|---|
| Navbar | 品牌展示 + 导航 + 下载 CTA，滚动固定 |
| Hero | 标题+副标题直击痛点，左侧文案右侧手机 Mockup |
| Social Proof | 合作品牌 + 用户评价，建立信任 |
| How It Works | 三步法解释流程，降低认知门槛 |
| Feature Highlights | 左图右文交替展示核心功能，滚动动画触发 |
| App Preview | 横向滑动展示 App 多屏界面 |
| Promo Banner | 首单免费强视觉 Banner，促进转化 |
| Final CTA | 大号文字 + 下载按钮，最后一道转化关卡 |
| Footer | 品牌 + 导航 + 社交 + 版权，完整收尾 |
6. 交付内容（Deliverable）
明确要求：结构化 React 组件、可复用的 UI 模块、Tailwind 样式、Framer Motion 动画、不要 Lorem Ipsum——全部使用真实营销文案。
这六个要素组合起来，就形成了一个完整的 Prompt：
Task + Goal + Tech Stack + Style + Layout + Deliverable
对比上篇文章吴恩达的 Goal + Input + Output + Layout + Features，你会发现本质相同但侧重点不同——当你的项目是"生产级代码"而非"一次性页面"时，技术栈和交付标准的描述变得格外重要。
四、Prompt 设计的进阶思考
写到这里，我想分享一个更深层的体会。
对比 v002 的 3D 小世界项目和这次的落地页项目，你会发现我的 Prompt 结构是不一样的：
3D 小世界 Prompt 强调：
- 体验目标（用户能做什么）
- 技术约束（零构建、CDN、无外部模型）
- 代码组织（数据结构、入口函数）
落地页 Prompt 强调：
- 技术栈（React + TypeScript + Tailwind）
- 页面结构（9 个模块的详细描述）
- 交付标准（生产级、动画、响应式、可访问性）
为什么不一样？因为项目类型不同。
3D 小世界是一个纯前端的互动体验，核心挑战是技术约束下的实现质量和交互流畅度。而落地页是一个营销导向的产品页面，核心挑战是视觉品质和代码的可维护性。
这就是 Prompt 设计的核心方法论：没有万能模板，只有适配思维。
你不需要记住"五块分割法"或"六要素框架"，你需要做的是：分析你的项目是什么类型，然后设计适合这个类型的 Prompt 结构。
这恰好呼应了上篇文章的结论——领域知识仍然是护城河。如果你不懂前端项目的工程化标准，你就不知道要在 Prompt 里强调 TypeScript 和组件化；如果你不懂营销页面的转化逻辑，你就不会去设计 Social Proof 和 Promo Banner 这样的模块。
AI 是你的代码主力，但你是 AI 的架构师。
结语：从"写代码"到"写 Prompt"再到"做架构"
回顾这三篇文章的旅程：
v001 聊了 OPC（一人公司）的概念框架——一个人借助 AI 身兼七个角色。
v002 通过 3D 小世界项目，深入讲了 Prompt 工程和 LLM 原理——理解了 y = fθ(x)，理解了为什么"代码向后，业务向前"。
v003 今天，我们看到 AI 编程从 Chatbot 进化到了 Agent——Claude Code 不仅有手有脚，还能独立完成从理解需求到交付项目的完整闭环。
这三个阶段，恰好对应了 AI 全栈工程师的能力进化路径：
写代码 → 写 Prompt → 做架构
第一阶段，你用手写代码。 第二阶段，你用 Prompt 生成代码。 第三阶段，你让 Agent 自主完成项目，你只负责定义目标和验收结果。
每一步，你的抽象层级都在提升，你的杠杆效应都在放大。
这也是 OPC 拼图中最核心的那块——Boss/Agent 角色。在 v001 里我只是概念性地提到了它，而今天，通过 Claude Code，这个角色真正落地了。
一人公司的时代，比你想象中来得更快。
Be AI Native.
