不写代码，嘴喷AI6小时后，我也能建站了？！

非程序员用 Claude Code 6 小时完成 SEO 建站全流程：需求挖掘→产品文档→设计优化→SEO 布局→部署上线。

核心洞察

1. Vibe Coding 已可交付生产级产品 — 不写一行代码，靠聊天完成完整网站
2. 需求讨论是关键 — 让 AI 扮演用户挖掘真实需求，比直接写代码更重要
3. 设计参考驱动 — 从 Dribbble 找素材让 AI 分析，生成设计规范文档
4. SEO 是核心流量来源 — 关键词研究 + 博客系统 + 多语言是增长引擎

---

案例背景

产品：Dognames.vip（狗狗名字生成器）

目标：通过 SEO 建站获取流量

关键词：girl / boy dog names（搜索量大、KD 小）

结果：6 小时完成从需求到上线的全流程

---

工作流程

1. 需求讨论（双向费曼）

方法：

• 让 Claude Code 扮演用户，挖掘真实需求
• 互换位置提问，双向费曼
• 让 AI 想象：用户是谁？怎么选择狗狗名字？有哪些选择方式？

转化：

• 原始想法：单纯的信息聚合站点
• 最终方案：AI 测验名字生成器（通过测验创造沉默成本，提升情绪价值）

2. 产品文档

Claude Code 输出 prd.md，人工 Review 后继续对话调整。

3. 跑通主流程

先让 Claude Code 输出主要功能（Quiz 测试），跑通核心流程。

4. 设计优化

方法：

• 从 Dribbble 找设计参考
• 让 Claude Code 分析设计风格和色值
• 输出设计风格文档，人工审查

关键点：保持设计统一性，为后续迭代做指导

5. 主页设计

• 提供优秀主页的设计规范
• 让 Claude Code 分析图片原则内容
• 输出信息结构文档 + 每个模块文案

6. 补充细节

不断提要求，Claude Code 持续优化细节。

7. SEO Blog + i18n

• 提供关键词，让 Claude Code 写 SEO 文章
• 做 i18n 多语言（最难的部分，出错最多）

---

大白话回顾（15 步）

步骤	操作	说明
1	开 Claude Code 聊需求	脑暴、深度追问、模拟客户
2	让它写文档	人工 Review 后继续对话调整
3	一把梭	把主流程干出来
4	优化首页	没想法用 SuperDesign，有想法找参考
5	找参考	Dribbble 等设计素材网站
6	扔给 Claude	让它分析并写设计规范
7	找 Landing Page 参考	给 Claude 写首页信息结构文档
8	开工	参考文档干首页 + 搭博客系统
9	版本管理	用 Runyoyo 本地管理
10	优化细节	用 21st.dev 组件，复制 Prompt 给 Claude
11	精细化微调	用 Stagewise 圈出控件做微调
12	搞后端	连上 Supabase MCP
13	部署上线	推 Vercel，绑域名，设环境变量
14	SEO 运营	一个窗口整内容，一个窗口做页面
15	Show Me The Talk	用产品说话

---

工具清单

工具	用途
Claude Code	AI 编码、需求讨论、设计分析
Semrush	关键词研究
Dribbble	设计参考素材
SuperDesign	AI 生成 UI
21st.dev	UI 组件库
Stagewise	精细化 UI 微调
Supabase	后端数据库
Vercel	部署托管
Runyoyo	本地版本管理
GA/GSC	流量分析

---

关键经验

1. 需求讨论 > 写代码

"先开一个 Claude Code 聊需求、脑暴、深度追问，让对方模拟客户，互换位置提问，双向费曼。"

2. 设计规范先行

从 Dribbble 找参考 → 让 AI 分析 → 输出设计规范文档 → 人工审查 → 再开发

3. SEO 是核心

• 关键词研究（Semrush）
• 博客系统（SEO 文章）
• 多语言（i18n）

4. 工具组合

Claude Code（编码）+ SuperDesign（UI）+ Stagewise（微调）
+ Supabase（后端）+ Vercel（部署）+ GA/GSC（分析）

---

信息来源

来源	URL	访问时间
微信公众号 - 不写代码，嘴喷AI6小时后，我也能建站了？！	https://mp.weixin.qq.com/s/a7j9vyYuW4HvUN93VrJOrQ	2026-06-08