一行代碼沒手寫，OpenClaw 前端 Agent 100 分鐘做完一個站

大家好，我係孟健。

我俾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之後強制執行——所有頁面首次上線必須全部完成：

兩個強制規則：

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個人嘅產出。呢個唔係未來。呢個係我而家每日喺度行緊嘅嘢。

🚀 想同更多AI愛好者交流，共同成長嗎？

同一班志同道合嘅人，持續精進AI嘅每一日

大家好，我是孟健。

我讓 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 之後強制執行——所有頁面首次上線必須全部完成：

兩個強制規則：

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 個人的產出。這不是未來。這是我現在每天在跑的東西。

🚀 想要與更多AI愛好者交流，共同成長嗎？

和一羣志同道合的人，持續精進 AI 的每一天