大家好，我是孟健。
我让 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 项验收：
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(/
?/i)?.[0]; const footer = html.match(/
?/gi)?.at(-1)?.[0]; const content = html.match(/
?/i)?.[0]; return { navigationHtml: nav, contentHtml: content, footerHtml: footer }; }
优点：设计稿 100% 保留，墨影更新 HTML 直接替换，零翻译成本。 缺点：交互要用原生 HTML（
做 FAQ 手风琴），不能用 React state。
但对 SEO 工具站来说，这个方案性价比最高。 因为页面主要是展示，交互很少。
05 必须全部做完的页面清单
v2 的血泪教训：只做了 Landing + 3 个 SEO 页就上线，结果全站死链、没有法律页、子页面互相不通。
v3 之后强制执行——所有页面首次上线必须全部完成：
两个强制规则：
- 所有
href="#" 必须替换。设计稿里占位链接不能上线。开工第一件事就是全局替换。
- 交叉导航必须有。每个子页面底部加 "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
- SOCIAL PROOF → "Trusted by X+ users"
- PROBLEM → 用用户的话描述痛点
- AGITATION → 为什么问题会越来越严重
- SOLUTION → 3-5 个好处（不是功能！）
- MECHANICS → "How it works" 三步流程
- TESTIMONIALS → 3 条真实评价
- OFFER → 你得到什么
- RISK REVERSAL→ 免费试用 / 无需信用卡
- 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）：
进阶版（8 个 Agent 流水线）：
8 个 Agent 之间通过 sessions_send 通信，上游产出自动传给下游。我实际跑下来，一个完整站从选词到上线大约 1 天。
📍 最后一个判断。
以前做一个站，最累的不是写代码，是那些"手动但必须做"的事——初始化项目、配域名、接埋点、写法律页、检查死链、提交 GSC。每件事都不难，但加起来就是两三天。
现在这些全部可以交给 Agent。 你需要做的只剩一件事：想清楚做什么站、给谁用、怎么赚钱。剩下的，它帮你跑完。
一个人 + 8 个 Agent = 以前至少 5 个人的产出。这不是未来。这是我现在每天在跑的东西。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/262519.html