一行代码没手写，OpenClaw 前端 Agent 100 分钟做完一个站

大家好，我是孟健。

我让 OpenClaw 的一个 AI Agent 接管了前端做站全流程——从拿到设计稿到部署上线，中间一行代码没手写。

不是 Demo，是真的在跑的站。getchargen.com，AI 角色生成器，7 个页面 + SEO 矩阵 + 法律页 + 五件套分析埋点，全部由一个叫"墨界"的前端 Agent 自动完成。

今天完整拆解它的做站流程：怎么接收设计稿、怎么初始化项目、怎么落地代码、怎么自动埋点、怎么部署——以及你自己怎么搭一个一样的。

getchargen.com 线上首页：深色赛博风 + 角色生成器

01 前端 Agent 在整条流水线里的位置

先说全貌。一个站从 0 到上线，在我的 OpenClaw 系统里经过 8 个 Agent：

墨探（选词/机会发现）
  ↓
墨策（PRD/信息架构/域名）
  ↓
├→ 墨账（定价校准）    ← 并行
└→ 墨盾（合规审查）    ← 并行
  ↓
墨笔（Landing Page 文案）
  ↓
墨影（Stitch 出设计稿 + HTML/CSS）
  ↓
┌────────────────────────────┐
│ 🖥️ 墨界（前端）+ ⚙️ 墨枢（后端）│  ← 并行
└────────────────────────────┘
  ↓
墨运（持续运营/分发）

墨界只负责前端。 它拿到墨影的设计稿（HTML + Tailwind CSS + 配图），把它变成一个可以跑在 Cloudflare Pages 上的 Next.js 项目，加上所有交互、埋点、法律页、SEO 子页面，然后部署上线。

02 接收设计稿：验收 5 分钟

墨影（设计 Agent）用 Google Stitch 生成高保真设计稿，输出是这样一个包：

📦 设计交付包
├── *.html（每个页面的 Tailwind HTML）
├── *.png（每个页面的设计截图）
├── assets/（favicon、OG image、logo）
├── PRD.md（产品需求文档）
└── tailwind.config（Design System）

墨界拿到后做 5 项验收：

• 设计稿版本确认（Stitch 可能出多种风格，先让我选）
• HTML 文件齐全（Landing + SEO 页 + 法律页）
• 配图素材到位
• PRD 已读
• 和墨枢（后端）沟通好 API schema

5 分钟搞定。 以前这个环节要在 Figma 里来回确认半天。

03 项目初始化：15 分钟

# 创建 GitHub 仓库 + Next.js 项目
gh repo create mengjian-github/getchargen --private --clone
cd getchargen
npx create-next-app@latest . --typescript --tailwind --app --src-dir

# 配置 Cloudflare Pages 静态导出
# next.config.ts → output: "export"

关键一步：把设计稿的 Design System 提取到 Tailwind v4 配置里。

/* globals.css */
@import "tailwindcss";
@source "../../design-v3";  /* 扫描设计稿 HTML */

@theme {
  --color-primary: #71ffe8;
  --color-primary-container: #00e5cc;
  /* 完整 Design System 全部从设计稿提取 */
}

这样设计稿的配色、字体、间距全部变成 CSS 变量，后续代码直接引用，不用手动对齐。

04 代码落地：dangerouslySetInnerHTML 方案

这是整条链路里最反直觉的一步。

传统做法：把设计稿 HTML 手动转成 React 组件，一个页面至少 2 小时。 墨界的做法：构建时从 HTML 里提取 nav/content/footer，直接 dangerouslySetInnerHTML 渲染。

// 构建时提取设计稿
export async function getDesignPageSections(designFile: string) {
  const html = await readFile(path.join("design-v3", designFile), "utf8");
  const nav = html.match(/<nav[\s\S]*?<\/nav>/i)?.[0];
  const footer = html.match(/<footer[\s\S]*?<\/footer>/gi)?.at(-1)?.[0];
  const content = html.match(/<main[\s\S]*?<\/main>/i)?.[0];
  return { navigationHtml: nav, contentHtml: content, footerHtml: footer };
}

优点：设计稿 100% 保留，墨影更新 HTML 直接替换，零翻译成本。 缺点：交互要用原生 HTML（<details> 做 FAQ 手风琴），不能用 React state。

但对 SEO 工具站来说，这个方案性价比最高。 因为页面主要是展示，交互很少。

05 必须全部做完的页面清单

v2 的血泪教训：只做了 Landing + 3 个 SEO 页就上线，结果全站死链、没有法律页、子页面互相不通。

v3 之后强制执行——所有页面首次上线必须全部完成：

getchargen.com anime 子页面

两个强制规则：

1. 所有 href="#" 必须替换。设计稿里占位链接不能上线。开工第一件事就是全局替换。
2. 交叉导航必须有。每个子页面底部加 "Browse All Generators" 区块，让用户能在页面之间跳转。

06 分析埋点：五件套一键接入

这是我觉得最有价值的部分。墨界搞了一套自动化脚本，5 个分析平台一次全接好：

踩坑记录（别人花时间你就不用花了）：

• Plausible 社区版没有 Sites API → 只能走浏览器自动化
• Clarity 用 Fluent UI，Puppeteer 点不到 → 改用 Codex + Chrome DevTools MCP
• GA4 Angular Material 下拉框 → 标准 click 不生效，要用 CDP DOM.focus + Input.insertText
• Ahrefs Web Analytics 入口不在主导航里 → 要用 snippet 精确匹配 data-key

结论：复杂 SPA 的自动化，Codex + Chrome DevTools MCP + --yolo 是目前最可靠的方案。 Puppeteer 在 Angular Material 和 Fluent UI 面前全面失败。

07 设计质量检查：反 AI 味 7 检

墨界从 ClawhHub 上的 anti-slop-design、landing-page-converter 等 Skill 里提炼了一套检查清单。

部署前必查 7 项：

命中任何一个就退回重做。

getchargen.com 第一版就踩了好几个——虽然用了赛博朋克风格，但很多地方仍然"一眼 AI"。加了这套检查后，v3 的设计质量明显上了一个台阶。

08 转化率框架：10 个 Section 的固定顺序

页面 Section 的排列不是随便来的。墨界用的是 landing-page-converter 的 10-section 框架：

1. HERO         → 标题 + 副标题 + 主CTA
2. SOCIAL PROOF → "Trusted by X+ users"
3. PROBLEM      → 用用户的话描述痛点
4. AGITATION    → 为什么问题会越来越严重
5. SOLUTION     → 3-5 个好处（不是功能！）
6. MECHANICS    → "How it works" 三步流程
7. TESTIMONIALS → 3 条真实评价
8. OFFER        → 你得到什么
9. RISK REVERSAL→ 免费试用 / 无需信用卡
10. FINAL CTA   → 重复标题变体 + 紧迫感

CTA 按钮公式：动作动词 + 好处。

• ✅ Create My Character — Free
• ❌ Get Started（太泛）

09 性能检查清单

部署前跑 5 项：

□ 无顺序 await waterfall（独立请求 Promise.all）
□ 无 barrel import（直接路径 import）
□ LCP 图片有 priority
□ "use client" 只用在真正需要交互的组件
□ 传给 client 的数据最小化

这些都是从 Vercel 的 57 条 React 性能规则里提炼出来的。做 SEO 站最怕的就是 LCP 太慢被 Google 降权。

10 从需求到上线的完整时间线

以 getchargen.com 为例：

传统方式：一个前端开发者至少需要 2-3 天。 Agent 方式：100 分钟，且质量更稳定——因为有检查清单兜底。

11 你自己怎么搭

最小版（1 个 Agent）：

1. 写一个前端 Playbook（参考上面的流程）
2. 配一个 Next.js + Tailwind + CF Pages 的项目模板
3. 给 Agent 一套 Skill：anti-slop-design（设计检查）+ react-perf（性能检查）
4. 把分析埋点脚本准备好

进阶版（8 个 Agent 流水线）：

• 墨探：DataForSEO 选词
• 墨策：PRD + 信息架构
• 墨账：定价审查
• 墨盾：合规审查
• 墨笔：Landing Page 文案
• 墨影：Stitch 出设计稿
• 墨界：前端落地
• 墨枢：后端 API

8 个 Agent 之间通过 sessions_send 通信，上游产出自动传给下游。我实际跑下来，一个完整站从选词到上线大约 1 天。

📍 最后一个判断。

以前做一个站，最累的不是写代码，是那些"手动但必须做"的事——初始化项目、配域名、接埋点、写法律页、检查死链、提交 GSC。每件事都不难，但加起来就是两三天。

现在这些全部可以交给 Agent。 你需要做的只剩一件事：想清楚做什么站、给谁用、怎么赚钱。剩下的，它帮你跑完。

一个人 + 8 个 Agent = 以前至少 5 个人的产出。这不是未来。这是我现在每天在跑的东西。