用 Claude Code 建站

非程序员用 AI 编码工具（Claude Code）从零到一完成 SEO 建站的完整流程与方法论。

一句话定义

用 Claude Code 建站 是指非程序员通过自然语言与 AI 编码工具（Claude Code）协作，完成从需求挖掘、产品设计、UI 开发、SEO 优化到部署上线的全流程，核心是"不写一行代码，靠聊天做出产品"。

核心流程

需求讨论（双向费曼）
    ↓
产品文档（prd.md）
    ↓
跑通主流程
    ↓
设计优化（Dribbble 参考）
    ↓
主页设计（设计规范文档）
    ↓
补充细节
    ↓
SEO Blog + i18n
    ↓
部署上线（Vercel）

关键步骤详解

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

方法	说明
角色互换	让 AI 扮演用户，挖掘真实需求
深度追问	不断追问"为什么"，找到核心痛点
双向费曼	用简单语言解释复杂概念，确保理解一致

产出：需求从"信息聚合站"转化为"AI 测验名字生成器"

2. 产品文档

Claude Code 输出 prd.md
人工 Review 后继续对话调整
保持文档与代码同步更新

3. 设计优化

流程：

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

关键点：设计规范先行，保证后续迭代统一性

4. SEO 布局

环节	说明
关键词研究	用 Semrush 找搜索量大、KD 小的关键词
博客系统	让 Claude Code 生成 SEO 文章
多语言	i18n 国际化（最难部分）

工具组合

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

关键经验

1. 需求讨论 > 写代码

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

为什么重要：需求错了，代码再好也没用。AI 可以帮你挖掘出你自己都没想到的需求。

2. 设计规范先行

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

为什么重要：没有设计规范，UI 会越做越乱。先定调子，再填内容。

3. SEO 是核心流量来源

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

为什么重要：没有流量，产品再好也没人用。SEO 是最低成本的获客方式。

4. 工具组合 > 单一工具

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

为什么重要：每个工具都有专长，组合使用效率最高。

适用场景

场景	适用度	说明
SEO 信息站	⭐⭐⭐⭐⭐	关键词研究 + 内容生成 + 多语言
Landing Page	⭐⭐⭐⭐⭐	快速原型 + 设计优化
SaaS MVP	⭐⭐⭐⭐	前端 + 后端 + 部署
复杂 Web App	⭐⭐⭐	需要更多人工干预
移动端 App	⭐⭐	需要原生开发

局限性

局限	说明
i18n 复杂度	多语言是出错最多的部分
设计上限	AI 生成的设计有天花板
后端能力	复杂后端逻辑仍需人工
调试成本	AI 写的代码可能有隐藏 bug

信息来源

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

用 Claude Code 建站 ​

一句话定义 ​

核心流程 ​

关键步骤详解 ​

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

2. 产品文档 ​

3. 设计优化 ​

4. SEO 布局 ​

工具组合 ​

关键经验 ​

1. 需求讨论 > 写代码 ​

2. 设计规范先行 ​

3. SEO 是核心流量来源 ​

4. 工具组合 > 单一工具 ​

适用场景 ​

局限性 ​

相关页面 ​

信息来源 ​