# 策展 · X (Twitter) 🔥

> 作者：Vaishnavi (@_vmlops) · 平台：X (Twitter) · 日期：2026-03-27

> 原始來源：https://x.com/_vmlops/status/2037537387639890219

## 中文摘要

這是一個利用 Claude Code 和 Chrome MCP 實現網站自動化複製的樣板專案，聲稱能達到「像素完美」級的還原度。

**核心功能與工作流程**

該工具的主要用途是將任何網站「逆向工程」並重建為精確複製品。使用者只需指向目標 URL，執行 `/clone-website` 指令，系統會自動完成整個流程：

- 透過 Chrome MCP 檢查目標網站，擷取設計 token 和資產
- 撰寫詳細的元件規格文件
- 分派並行的 Builder Agent，在隔離的 git worktree 中各自重建網站的不同區塊
- 自動合併 worktree 並進行視覺對比驗證

專案自稱已有展示影片，聲稱能做到「幾乎完全相同」的複製效果。

**技術堆棧與架構**

基礎技術選型包括：

- **前端框架** — Next.js 16（使用 App Router、React 19、TypeScript strict mode）
- **UI 元件庫** — shadcn/ui（基於 Radix 原始元件 + Tailwind CSS v4）
- **樣式系統** — Tailwind CSS v4 with oklch 設計 token
- **圖示** — Lucide React（複製過程中會被提取的 SVG 圖示替換）

執行流程分為五個階段：偵察（擷取螢幕截圖、設計 token、互動掃描）、基礎建設（更新字型和顏色、下載資產）、元件規格生成、並行構建、以及組裝與品質驗證。

**使用門檻與配置彈性**

快速啟動需要 Node.js 20+ 和 Claude Code，流程相對簡潔：克隆專案、安裝依賴、啟用 Chrome MCP、執行 `/clone-website <目標URL>`。系統預設會複製首頁的像素完美版本，但也允許透過編輯 `TARGET.md` 檔案進行精細控制——包括指定要複製的頁面、精確度等級（像素完美、高保真或結構化）、範圍界定，以及複製後的客製化修改計畫。

**關鍵設計考量**

每個 Builder Agent 在執行時會收到完整的元件規格，包括精確的 `getComputedStyle()` 值、互動模型、多狀態內容、響應式斷點，以及資產路徑——據稱「沒有猜測」。這個設計意圖是透過消除不確定性來確保複製品質。

專案已納入 Star History 追蹤，採用 MIT 許可證。該樣板聲稱可重複使用於任何網站，但實際的著作權風險、法律相容性，以及在複雜或動態網站上的真實表現仍未在文件中明確討論。

## 標籤

Claude Code, CLI, 開源專案, Web, Anthropic