1小时,6个AI并行,从0到1搭建知识付费网站的全过程
你可能见过很多"我用 AI 做了 xxx"的故事,但大多数要么省略了关键细节,要么只展示了最终结果。这篇文章不一样——我会按分钟级时间线,还原 Claw101 知识付费网站从零到上线的完整过程。
全程 1 小时。6 个 AI agent 并行执行。一个人指挥。
背景:为什么要做知识付费网站
OpenClaw 社区积累了大量教程内容和实战案例,但一直散落在文档、群聊和 GitHub 仓库里。我们需要一个正式的入口,把这些内容结构化,同时验证一个假设:有人愿意为高质量的 AI 工具使用教程付费吗?
传统做法是招个前端、找个设计、慢慢磨。但我们决定用 OpenClaw 自己的能力来做这件事——用 AI agent 并行执行建站的每一个环节。
如果我们自己的工具都搞不定自己的官网,那还怎么说服别人用?
时间线复盘
0:00 — 0:05 明确目标和任务拆分
打开终端,先用 5 分钟理清楚要做什么:
- 目标:上线一个可访问、可付费的双语知识付费网站
- 技术栈:Next.js 15 + Tailwind CSS v4 + next-intl + MDX
- 核心页面:首页、教程列表、教程详情、博客、加入页面、FAQ
- 必须支持:中英双语、SEO 友好、移动端适配
任务拆解成 6 条线:
- 首页 & 导航:Hero、特性展示、CTA、导航栏、底部
- 支付 & 会员:定价页面、支付逻辑、权限控制
- 内容生产:教程 MDX 文件、博客 MDX 文件、翻译
- SEO & 元数据:sitemap、JSON-LD、Open Graph、canonical
- 部署 & 基建:Vercel 配置、域名、HTTPS、CI
- 测试 & QA:多端测试、链接检查、性能验证
0:05 — 0:15 六个 AI agent 并行启动
这是最关键的一步。我在 OpenClaw 里同时开了 6 个 agent 会话,每个分配一条任务线。
Agent 1(首页) 收到的指令:
"基于现有的 Next.js 项目结构,创建首页组件。要有 Hero 区域、特性卡片、社区数据展示、CTA 按钮。颜色用暗色系,支持 Tailwind v4 的 CSS 变量。"
Agent 2(支付) 收到的指令:
"设计定价页面的数据结构和 UI。三档定价:免费、基础、专业。暂时不接真实支付,先把页面和数据流跑通。"
Agent 3(内容) 收到的指令:
"根据 chapters.ts 的章节列表,生成 13 章教程的 MDX 文件。中英双语各一份。保持技术准确性。"
Agent 4(SEO) 收到的指令:
"为所有页面配置完整的 SEO 元数据:title、description、Open Graph、Twitter Card、JSON-LD、sitemap.xml。"
Agent 5(部署) 收到的指令:
"配置 Vercel 部署,确保 next.config.ts 正确、环境变量齐全、构建能通过。"
Agent 6(测试) 收到的指令:
"等其他线程产出后,逐一验证:页面渲染、链接有效性、响应式布局、TypeScript 类型检查。"
6 个 agent 几乎同时开始工作。终端里同时跳出 6 路输出,像一个异步调度中心。
0:15 — 0:30 各线程推进
这 15 分钟是产出最密集的阶段:
- 首页线:Hero 组件完成,特性卡片用了 grid 布局 + 渐变边框。导航栏带语言切换。移动端汉堡菜单写好了。
- 支付线:定价卡片三列布局完成,数据从 pricing.ts 配置文件读取。加入页面的 CTA 逻辑跑通。
- 内容线:13 章教程的中文版全部生成。英文版同步推进到第 8 章。博客 MDX 模板也出来了。
- SEO 线:sitemap.ts 写好了,覆盖所有页面和教程路由。JSON-LD 结构化数据注入到教程详情页。
- 部署线:Vercel 配置完成,next.config.ts 调好了 MDX 相关设置。
- 测试线:开始跑
npm run build,发现了 3 个 TypeScript 类型错误。
0:30 — 0:45 汇总和调试
进入 debug 阶段。这也是并行执行中最考验协调能力的环节。
遇到的问题:
- Next.js 15 的 params 是 Promise —— 有两个页面忘了 await,构建报错。让 Agent 6 统一修复。
- 中英文翻译 key 不对称 —— en.json 少了 3 个 key。Agent 3 补上。
- 教程 slug 和 chapters.ts 不匹配 —— 有一章的 slug 拼写不一致,导致 404。Agent 3 修正。
- 移动端导航栏遮挡内容 —— z-index 问题,Agent 1 调整。
每个修复都是几秒钟的事——告诉对应 agent 问题在哪,它立刻修。不需要来回对线、不需要排期。这就是 AI 并行执行的核心优势:修复速度和发现速度几乎同步。
0:45 — 1:00 上线和验证
最后 15 分钟:
npm run build通过,0 error 0 warningnpx tsc --noEmit类型检查全绿- Vercel 部署成功,HTTPS 正常
- 中文首页、英文首页、教程列表、教程详情、博客列表——全部可访问
- 移动端 Chrome、Safari 测试通过
- sitemap.xml 能被搜索引擎爬到
上线。
关键决策点
回头看,有几个决策对最终效率影响最大:
技术选型
选 Next.js 15 App Router + MDX 是对的。静态生成 + 服务端组件让部署极简,MDX 让内容和代码混排很自然。如果选 WordPress 或者 Notion 导出,速度不会更快,灵活性还差。
内容策略
教程内容不是从零写的——是从社区已有的文档和讨论里提炼结构化的。AI 最擅长的不是凭空创造,而是把散乱信息重新组织成可消费的格式。
定价
先做免费教程,博客全公开,付费部分后续叠加。不在第一个小时纠结商业模式。先把内容展示出来,看数据再说。
并行执行的核心收获
这次实践让我确认了几件事:
-
任务拆分质量决定并行效率。 如果 6 条线之间有大量依赖,并行就变成串行了。我们的 6 条线几乎互相独立,只在最后 debug 阶段才需要协调。
-
AI agent 的最佳用法是"有明确边界的子任务"。 不要给一个 agent 说"帮我做个网站"——要说"在这个目录下创建这个组件,用这种布局,颜色用这些变量"。
-
人的角色是架构师和调度员,不是执行者。 我全程没写一行代码,但每一行代码的方向都是我定的。
-
1 小时不是极限,而是这个模式的正常节奏。 如果任务再复杂 3 倍——比如加上真实支付、用户系统、后台管理——可能也就 3 小时。线性增长,不是指数增长。
给想复制这个流程的人的建议
第一,先花时间做任务拆分。 不要急着开干。5 分钟的任务拆分能省 30 分钟的返工。把每条任务线的输入、输出、边界写清楚。
第二,选对工具。 OpenClaw 的优势是可以同时管理多个 agent 会话,每个 agent 有独立的上下文和工具链。如果你用的工具不支持并行,那就只能串行跑。
第三,接受"不完美先上线"。 第一个版本不需要完美。定价可以后调,设计可以后改,内容可以后补。关键是先把骨架立起来,让用户能访问。
第四,debug 阶段不要慌。 6 条线并行一定会有冲突和遗漏。这不是问题,这是正常的。有一个专门做 QA 的 agent 线程会大大降低你的心智负担。
第五,记录过程。 你正在看的这篇博客,就是我用 AI 根据执行日志整理出来的。过程记录不仅帮自己复盘,也能变成内容资产。
这就是 Claw101 从 0 到 1 的完整故事。不是魔法,不是吹牛,就是把 AI 工具用到位后的正常效率。
如果你也想体验这种工作方式,从 免费教程 开始吧。


