用 AI 一周写完企业官网
案例背景
公司：某 B2B SaaS 创业公司 需求：企业官网（首页 + 产品介绍 + 博客 + 联系页） 传统报价：8-15 万，工期 4-6 周 AI 方案：人力成本约 1.5 万，工期 7 天
工具组合
| 阶段 | 工具 | 用途 |
|---|---|---|
| 设计 | Figma AI | 自动生成设计稿 |
| 前端 | Cursor + Claude Code | 写 Next.js 代码 |
| 内容 | ChatGPT | 文案、SEO |
| 部署 | Vercel | 一键上线 |
7 天工作流
Day 1：需求与设计稿
Prompt：你是 B2B SaaS 产品的资深设计师。
公司主营 HR 系统，目标客户是 500 人以上企业。
请生成 3 版首页设计稿，风格偏专业、科技感。
Figma AI 输出 3 版方案，团队投票选定，再让 AI 优化细节。
Day 2-3：前端开发
在 Cursor 中打开项目，用自然语言描述：
请按 /designs/home.fig 设计稿实现首页，
技术栈：Next.js 14 + Tailwind + shadcn/ui
要求：响应式、暗色模式、SEO 友好
Claude Code 协助处理复杂逻辑（动画、表单、API 调用）。
Day 4：内容填充
Prompt：你是 ToB 营销文案专家。
请为以下 3 个产品功能写官网介绍：
1. 智能招聘
2. 员工档案
3. 薪资计算
每段 150 字，专业但不晦涩
Day 5：博客系统
让 Claude Code 写 MDX 博客系统：
请实现一个 MDX 博客模块：
- /blog 列表页（分页、标签筛选）
- /blog/[slug] 详情页（TOC、阅读进度）
- RSS、sitemap 自动生成
Day 6：性能与 SEO
请检查项目并优化：
1. Lighthouse 跑分到 90+
2. 补全 meta、OG 图、JSON-LD
3. 图片懒加载、字体优化
4. 配置 sitemap.xml 和 robots.txt
Day 7：部署上线
Vercel 一键部署，绑定域名，配置 CDN。
关键 Prompt 集合
设计稿转代码
你是资深前端工程师。
请将附件的设计稿转为 Next.js 代码：
1. 用 Tailwind CSS，不要写自定义 CSS
2. 组件化，每个区块独立文件
3. 添加 dark mode 支持
4. 图片用 next/image
5. 添加微交互动画
文案生成
你是 ToB 营销专家。
我们的产品是【HR 系统】，目标客户是【HR 总监】。
请按 AIDA 模型写首页 hero 文案：
- Attention：用数据点抓眼球
- Interest：3 个核心痛点
- Desire：差异化优势
- Action：明确 CTA
成果数据
| 指标 | 传统外包 | AI 方案 |
|---|---|---|
| 成本 | 8-15 万 | 1.5 万 |
| 工期 | 4-6 周 | 7 天 |
| 修改灵活度 | 低 | 高 |
| 后续维护 | 依赖外包 | 自主可控 |
| Lighthouse | 70-80 | 95+ |
经验总结
- Prompt 越具体越好：抽象描述产出平庸，详细约束才能产出可用代码
- 分阶段验收：每天 review 一次，避免最后一周才发现方向跑偏
- 保留人工 review：法律条款、品牌调性等需要人审
- 建立 Prompt 库：把有效的 Prompt 沉淀下来，下次复用