项目背景与工具选择
本次项目为一家B2B制造企业搭建官网，需求包括：产品展示、案例库、联系表单、多语言支持。技术栈选择：Next.js + Tailwind CSS + Vercel部署，Claude 3.5 Sonnet负责代码生成。
第一步：用Claude生成项目骨架
提示词模板：你是一个资深前端工程师，请用Next.js 14 App Router生成一个企业官网项目，包含导航、Hero区域、产品网格、案例展示、页脚。要求响应式设计，使用Tailwind CSS，代码注释完整。Claude会生成完整的page.tsx、layout.tsx和组件文件。
第二步：迭代优化页面组件
将生成的代码复制到VS Code，运行后截图反馈给Claude：导航在移动端没有折叠菜单，请添加Hamburger菜单和Slide-out抽屉效果。通过3-4轮对话，组件质量接近生产级别。
第三步：接入真实数据与CMS
产品数据使用Sanity CMS管理。提示词：为上述项目添加Sanity Client，创建产品查询函数，在ProductGrid组件中使用GROQ获取数据。Claude会正确配置@sanity/client并编写类型安全的查询。
部署与性能优化
Vercel一键部署后，用PageSpeed Insights检测。针对Claude生成代码常见的性能问题（未优化图片、未使用next/link），继续用AI修复。最终得分：移动端92，桌面端98。