大家好，我是孟健。
我让 OpenClaw 的一个 AI Agent 接管了前端做站全流程——从拿到设计稿到部署上线，中间一行代码没手写。
不是 Demo，是真的在跑的站。getchargen.com，AI 角色生成器，7 个页面 + SEO 矩阵 + 法律页 + 五件套分析埋点，全部由一个叫"墨界"的前端 Agent 自动完成。
今天完整拆解它的做站流程：怎么接收设计稿、怎么初始化项目、怎么落地代码、怎么自动埋点、怎么部署——以及你自己怎么搭一个一样的。
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 之后强制执行——所有页面首次上线必须全部完成：
| 类别 | 页面 | 优先级 |
|---|---|---|
| Landing | / | P0 |
| SEO 矩阵 | /anime-character-generator 等 6 个 | P1 |
| 法律 | /privacy-policy | P0 |
| 法律 | /terms-of-service | P0 |
| 博客 | /blog/best-ai-character-generators | P2 |
两个强制规则：
- 所有
href="#"必须替换。设计稿里占位链接不能上线。开工第一件事就是全局替换。 - 交叉导航必须有。每个子页面底部加 "Browse All Generators" 区块，让用户能在页面之间跳转。
06 分析埋点：五件套一键接入
这是我觉得最有价值的部分。墨界搞了一套自动化脚本，5 个分析平台一次全接好：
| 平台 | 用途 | 接入方式 |
|---|---|---|
| Plausible | 隐私友好的流量统计 | 自动建站 + 配 Goals |
| GA4 | Google 生态流量分析 | OAuth API 自动创建 |
| Clarity | 热力图 + 会话录制 | Codex + Chrome MCP 自动化 |
| Ahrefs | SEO 排名 + 外链 | Web Analytics 脚本 |
| GSC | Google 索引 + 搜索表现 | DNS 验证 |
踩坑记录（别人花时间你就不用花了）：
- 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 项：
| # | AI 设计死亡征兆 | 怎么查 |
|---|---|---|
| 1 | Inter / Roboto / Arial 做标题 | 搜代码里的 font-family |
| 2 | 紫色渐变 on 白色背景 | 肉眼 + 搜色值 |
| 3 | 所有元素统一 border-radius | 看 rounded-xl 是否全站一样 |
| 4 | 纯居中布局，无非对称元素 | 有没有 text-left / 偏移 grid |
| 5 | 千篇一律的 hero + 3 列 features | 对比竞品 |
| 6 | 所有卡片同款阴影 | 检查 shadow class |
| 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 为例：
| 步骤 | 耗时 | 负责 |
|---|---|---|
| 接收 + 验收设计稿 | 5 min | 墨界 |
| 项目初始化 | 15 min | 墨界 |
| HTML 提取 + 代码落地 | 30 min | 墨界 |
| 法律页 + 交叉导航 | 15 min | 墨界 |
| 五件套分析埋点 | 20 min | 墨界（自动化脚本） |
| 设计质量检查 | 10 min | 墨界 |
| 部署 + 验证 | 5 min | 墨界 |
| 总计 | ~100 min |
传统方式：一个前端开发者至少需要 2-3 天。 Agent 方式：100 分钟，且质量更稳定——因为有检查清单兜底。
11 你自己怎么搭
最小版（1 个 Agent）：
- 写一个前端 Playbook（参考上面的流程）
- 配一个 Next.js + Tailwind + CF Pages 的项目模板
- 给 Agent 一套 Skill：anti-slop-design（设计检查）+ react-perf（性能检查）
- 把分析埋点脚本准备好
进阶版（8 个 Agent 流水线）：
- 墨探：DataForSEO 选词
- 墨策：PRD + 信息架构
- 墨账：定价审查
- 墨盾：合规审查
- 墨笔：Landing Page 文案
- 墨影：Stitch 出设计稿
- 墨界：前端落地
- 墨枢：后端 API
8 个 Agent 之间通过 sessions_send 通信，上游产出自动传给下游。我实际跑下来，一个完整站从选词到上线大约 1 天。
📍 最后一个判断。
以前做一个站，最累的不是写代码，是那些"手动但必须做"的事——初始化项目、配域名、接埋点、写法律页、检查死链、提交 GSC。每件事都不难，但加起来就是两三天。
现在这些全部可以交给 Agent。 你需要做的只剩一件事：想清楚做什么站、给谁用、怎么赚钱。剩下的，它帮你跑完。
一个人 + 8 个 Agent = 以前至少 5 个人的产出。这不是未来。这是我现在每天在跑的东西。
👋 我是孟健，前腾讯 T11 / 前字节技术 Leader，现在全职做 AI 编程。
🔥 更多 AI 编程实战：
- GitHub：@mengjian-github
- 专栏：AI编程实战
觉得有用？点赞+收藏 就是最大支持 🙏
