零代码用 AI 做官网

一个给完全不懂代码的人（市场、运营、产品）准备的方法：用 AI 从零做出一个能交付给开发上线的官网原型。

这是一个 Claude Skill，也是一份可以直接读的方法论文档。源自一次真实的官网改版项目：1 个非技术人员 + AI，约 2 周、100+ 轮迭代，把过去需要多人、多轮排期的工作大幅压缩，显著提升了出原型到交付的效率。

核心理念

人做决策，AI 做执行。

AI 负责生成代码、改样式、处理图片、记录版本；人负责审美判断、品牌把关、信息取舍、最终拍板。AI 没有真正的审美，容易过度设计，必须靠人来说「够了」。

这份方法覆盖什么

• 东西在哪运行 — 不懂代码也能看懂的环境说明
• 省 token 策略 — 先用便宜模型趟路调 prompt，贵模型攻坚
• 多 agent 备份 — 两个 agent 接管同一项目，一个崩了另一个救
• 实际协作流程 — 先知道自己要什么再下指令；大量调研定方向（国内外竞品+优秀 SaaS 实践+模板，给图给模板让 AI 抄）→ 分模块逐块微调 → 同步移动端；每做新页面都重新调研
• 避坑清单 — 8 个真实踩过的坑和红线规则
• 设计规范 — 间距/字号/颜色/圆角/移动端，让 AI 输出有体系感
• 图片处理 — AI 生成不了好图，怎么找现成的、怎么用画图工具单独做
• SEO 优化 — 哪些前端能做、哪些走后台配置、哪些要技术介入（结合实战）
• 交付开发 — 交付物清单、需求模板、排期、埋点
• 沟通方法 — 怎么和决策者对齐、减少反复推翻

文件结构

ai-website-building/
├── SKILL.md              # 主方法（先读这个）
└── references/
    ├── pitfalls.md        # 避坑清单，开始改动前必读
    ├── design-spec.md     # 设计规范：间距/字号/颜色/圆角/移动端
    ├── images.md          # 图片处理：配图从哪来、怎么处理
    ├── seo.md             # SEO 优化清单
    ├── handoff.md         # 交付开发：交付物 + 需求模板 + 排期 + 埋点
    └── communication.md   # 和决策者对齐

怎么用

作为 Skill 用：把整个文件夹作为 skill 安装到支持的 AI 工具里，之后让 AI 做官网时会自动套用这套方法。

当文档读：直接从 SKILL.md 读起，按需翻 references 里的细分文档。

谁适合用

• 没有现成设计资源、想快速出一版官网原型的团队
• 想用 AI 提效但不知道怎么管理 AI 的非技术人员
• 第一次尝试「AI 生成页面 → 交付开发上线」全流程的人

License

MIT