glmv-web-replication

网站前端视觉复刻

前提条件

此工作流依赖 Playwright MCP 或 agent-browser 技能。只要至少安装并启用了其中一种，工作流就能正常运行。如果你的环境中两者都不可用，请提醒用户安装其中一种。

授权关卡（必须首先执行）

开始前，Agent 必须询问用户：

“你是否拥有此网站，或者是否获得了网站所有者明确的书面许可来复刻此网站？未经授权的复刻可能违反版权、服务条款或适用法律。”

• 如果用户确认已获授权 → 继续。
• 如果用户无法确认 → 停止。不要继续复刻。建议其他方案（例如，基于通用布局模式创建原创设计）。

范围与限制

**此技能仅复刻前端视觉呈现。**具体包括：

包含	不包含
页面布局与视觉样式	后端／服务器端逻辑
导航结构	数据库与数据存储
公开可见的文本与图片	身份验证系统／会话
CSS／设计令牌	API 业务逻辑
客户端交互模式	非公开或登录后才能访问的内容
静态资源文件（图片、字体）	凭据、机密或 API 密钥

数据处理规则：

1. **绝不抓取登录墙后的内容。**仅采集可公开访问的页面。
2. 绝不收集或存储凭据、API 密钥、会话令牌或个人数据（PII）。
3. 除非用户拥有相关权利，否则绝不逐字复现受版权保护的内容（文章、文案）。
4. **遵守 robots.txt 和速率限制。**如果网站明确限制爬取，请遵守。
5. 除非用户已确认拥有完整权利，否则输出仅用于参考和模型图制作。

核心思路

1. 递归探索目标网站的每个公开页面，系统地记录页面的视觉内容、客户端交互逻辑和公开可用的资源文件，并将所有内容整理成结构化的“网站复刻蓝图”。此蓝图应详细涵盖每个页面的信息，并通过文件夹层级自然映射网站的导航关系。具体来说，在探索过程中，使用嵌套文件夹整理和记录采集到的页面信息：将当前页面表示为一个文件夹，将所有可从该页面访问的页面表示为其子文件夹。同时，将该页面的屏幕截图、组件交互记录和相关资源文件保存在对应的页面文件夹中。通过这种结构，最终蓝图将清晰呈现每个页面的内容和交互细节，同时也隐式反映网站整体的信息架构和导航路径。

蓝图文件夹结构示例：

blueprint/
├── _meta.md                      # Site-wide metadata
├── _sitemap.md                   # Sitemap
├── _assets/                      # Global assets (fonts, favicon, etc.)
├── home/                         # Homepage
│   ├── _page.md                  # Page blueprint (sections, components, interaction summary)
│   ├── _full.png                 # Full-page screenshot
│   ├── _scroll_00.png ~ N.png    # Scrolling screenshot sequence
│   ├── _interactions.md          # Record of all interactions
│   ├── _interactions/            # Interaction state screenshots (organized by interaction type)
│   ├── _assets/                  # Assets for this page (images, videos, etc.)
│   ├── products/                 # "Product list" reachable from homepage
│   │   ├── _page.md
│   │   ├── _full.png
│   │   ├── _scroll_00.png ~ N.png 
│   │   ├── _interactions.md
│   │   ├── _interactions/
│   │   ├── _assets/
│   │   ├── product-detail/       # "Product detail" reachable from product list
│   │   │   ├── _page.md
│   │   │   └── ...
│   │   └── category/             # "Category filter" reachable from product list
│   │       └── ...
│   ├── about/                    # "About us" reachable from homepage
│   │   └── ...
│   ├── blog/                     # "Blog" reachable from homepage
│   │   └── ...
│   └── login/                    # "Login" reachable from homepage
│       └── ...
└── _navigation_graph.md          # Site-wide navigation graph (Mermaid)

2. 完成上述蓝图构建后，根据该蓝图构建目标网站的前端视觉复刻，尽可能还原原网站的页面间导航、视觉布局和客户端交互模式。这是仅限前端的复现，不包括后端行为的复现。

复刻工作流

整个流程分为五个阶段：初始化 → 递归采集页面并构建站点地图 → 生成摘要输出 → 前端视觉复刻 → 视觉对比与修订。

前三个阶段侧重探索和文档整理，最后两个阶段则侧重根据采集到的蓝图实现前端复刻，并进行视觉验证。以下以 agent-browser 工作流为例；如果使用 Playwright MCP，整体流程和用法基本相同，可以采用同样的方法。

步骤 1：初始化项目

# Create the blueprint root directory
mkdir -p blueprint/_assets
# Open the browser and visit the target site
agent-browser open <target URL>
agent-browser set viewport 1920 1080
agent-browser wait --load networkidle

将以下内容写入 blueprint/_meta.md：

# Website Replication Blueprint
- Target website: <URL>
- Exploration date: <date>
- Viewport size: 1920×1080

步骤 2：递归收集页面并构建站点地图

对于递归发现的每个页面，执行以下标准流程：

先截取全页截图 → 下载资源 → 遍历交互状态 → 向下滚动 → 再次下载资源 → 再次遍历交互状态 → 再次向下滚动 →……→ 持续执行，直到到达页面底部。

2.1：下载资源

打开页面并等待其完全加载后，收集页面上的所有资源链接（图片、视频、字体等），并尽可能将其下载到该页面的 _assets/ 目录中。记录所有下载失败的资源及失败原因。

2.2：遍历交互状态

获取页面上交互元素的列表，与所有元素进行交互，捕获界面变化，并记录所有新发现的页面。

# === Example using a product list page before any downward scrolling ===
agent-browser open <Product List URL>
agent-browser screenshot blueprint/home/products/_scroll_00.png
agent-browser wait --load networkidle
agent-browser snapshot -i 
# Suppose the output is:
# button "All" [ref=e1]                ← filter tab
# button "Electronics" [ref=e2]
# card "Product A" [ref=e3]            ← product card
# select "Sort" [ref=e4]               ← sort dropdown
# link "Home" [ref=e5]                 ← breadcrumb link
# button "Learn More" [ref=e6]         ← button inside product card
# --- Interaction 1: hover over product card ---
agent-browser hover @e3
agent-browser screenshot blueprint/home/products/_interactions/card_hover.png
# --- Interaction 2: click filter tab ---
agent-browser click @e2
agent-browser wait --load networkidle
agent-browser screenshot blueprint/home/products/_interactions/filter_electronics.png
# --- Interaction 3: change sorting ---
agent-browser select @e4 "Price: Low to High"
agent-browser wait --load networkidle
agent-browser screenshot blueprint/home/products/_interactions/sort_price_asc.png
# --- Interaction 4: click product card (triggers navigation) ---
agent-browser click @e3
agent-browser wait --load networkidle
agent-browser get url    # → /products/123
agent-browser screenshot blueprint/home/products/product-detail/_full.png --full
agent-browser back
# --- Interaction 5: click breadcrumb "Home" ---
agent-browser click @e5
agent-browser wait --load networkidle
agent-browser get url    # → /
agent-browser screenshot blueprint/home/_full.png --full
agent-browser back
# --- Interaction 6: click "Learn More" button (external navigation) ---
agent-browser click @e6
agent-browser wait --load networkidle
agent-browser get url    # → https://www.angelokeirsebilck.be/
agent-browser screenshot blueprint/home/products/_interactions/learn_more_external.png --full
agent-browser back

将更新后的站点地图写入 blueprint/_sitemap.md。

将更新后的页面收集结果写入 blueprint/home/products/_page.md：

# Product List Page
- URL: /products
- Source: Homepage main navigation "Products" link

## Section Structure
| No. | Section Name | Layout Pattern | Content Type |
|------|--------------|----------------|--------------|
| 1 | Page header | Full-width single column | H1 heading + descriptive text |
| 2 | Filter bar | Horizontal layout | Category tabs + sorting dropdown |
| 3 | Product grid | 3-column grid | Product cards × N |
| 4 | Pagination | Centered single column | Pagination button group |

## Screenshots
- Full page: ![Full page screenshot](./_full.png)
- Scroll sequence: ![Screen 1](./_scroll_00.png) ![Screen 2](./_scroll_01.png)

## Outbound Navigation
| Trigger Element | Trigger Method | Target | Child Folder |
|----------------|----------------|--------|--------------|
| Product card | Click | /products/:id | ./product-detail/ |
| Category tab | Click | /products/category/:slug | ./category/ |
| Breadcrumb "Home" | Click | / | (return to parent) |
| Learn More button | Click | https://www.angelokeirsebilck.be/ | None |

## Page Assets
| File | Purpose |
|------|---------|
| _assets/product-01.jpg | Product card thumbnail |
| _assets/product-02.jpg | Product card thumbnail |

将所有更新后的交互记录写入 blueprint/home/products/_interactions.md：

# Product List Page - Interaction Behavior

## Interaction List
| Element | Trigger Method | Behavior | Navigation | Screenshot |
|---------|----------------|----------|------------|------------|
| Product card | hover | Card rises + shadow deepens | No | ![](./_interactions/card_hover.png) |
| Product card | click | Navigates to product detail | Yes → ./product-detail/ | — |
| Filter tab "Electronics" | click | List refreshes to electronics category | No (AJAX) | ![](./_interactions/filter_electronics.png) |
| Sort dropdown | select | Product list reorders | No (AJAX) | ![](./_interactions/sort_price_asc.png) |
| Breadcrumb "Home" | click | Navigates to homepage | Yes → ../ | — |
| Learn More button | click | Opens external link | Yes → https://www.angelokeirsebilck.be/ | — |

## State Transitions
Default list --[click filter tab]--> Filtered list
Default list --[change sorting]--> Sorted list
Product card (default) --[hover]--> Product card (hover state)
Product card --[click]--> /products/:id (navigation)
Learn More button --[click]--> External link (navigation to https://www.angelokeirsebilck.be/)

步骤 3：生成摘要输出

完成所有页面收集后，生成全局摘要文件。

blueprint/_sitemap.md

# Sitemap
home/                          # / (homepage)
├── products/                  # /products (product list)
│   ├── product-detail/        # /products/:id (product detail)
│   └── category/              # /products/category/:slug (category)
├── about/                     # /about (about us)
├── blog/                      # /blog (blog list)
│   └── blog-post/             # /blog/:slug (blog post)
├── contact/                   # /contact (contact us)
└── login/                     # /auth/login (login)
    └── register/              # /auth/register (register)

blueprint/_navigation_graph.md

# Site-wide Navigation Graph
graph LR
    Home["home /"] -->|Nav - Products| Products["products /products"]
    Home -->|Nav - About| About["about /about"]
    Home -->|Nav - Blog| Blog["blog /blog"]
    Home -->|Header - Login| Login["login /auth/login"]
    Products -->|Card click| Detail["product-detail /products/:id"]
    Products -->|Filter tab| Category["category /products/category/:slug"]
    Blog -->|Post card| Post["blog-post /blog/:slug"]
    Login -->|Register link| Register["register /auth/register"]

## Navigation Details
| ID | Source Folder | Trigger Element | Target Folder | Navigation Type |
|----|---------------|----------------|---------------|-----------------|
| N001 | home/ | Main nav "Products" | home/products/ | Internal |
| N002 | home/ | Hero CTA button | home/products/ | Internal |
| N003 | home/products/ | Product card | home/products/product-detail/ | Internal |
| N004 | home/products/ | Category tab "Electronics" | home/products/category/ | Internal |
| N005 | home/products/ | Breadcrumb "Home" | home/ | Internal |
| N006 | home/products/ | Learn More button | External link https://www.angelokeirsebilck.be/ | External |
| ... | ... | ... | ... | ... |

关闭浏览器

agent-browser close

步骤 4：前端视觉复刻

完成网站探索和蓝图生成后，基于收集到的蓝图构建前端视觉复刻。复刻过程中，参考蓝图中的页面结构、视觉样式和公开可用资源，并使用你偏好的前端工具和框架重建网站的客户端展示效果。目标是尽可能还原原网站的视觉设计和导航，而不是复现后端行为或非公开功能。

步骤 5：视觉对比与修订

完成前端复刻后，使用 Playwright MCP 或 agent-browser 技能渲染原网站和复刻版本，系统地比较它们在布局、颜色、排版和导航结构上的视觉一致性，逐页验证视觉近似程度，并根据对比结果进行调整。

关键规则

1. 先获得授权。 未获得用户确认其拥有合法复制权之前，绝不开始复制。
2. 仅限公开页面。 仅浏览和采集可公开访问的页面。不得尝试访问需要登录的区域、管理面板或经过身份验证的端点。
3. 不得处理凭据／个人身份信息。 如果采集的内容中包含凭据、令牌或个人数据，立即将其删去或排除。
4. 仅限前端。 绝不声称或尝试复制后端业务逻辑、数据库架构或服务端行为。
5. 文件夹表示导航关系。如果页面 A 可以导航至页面 B，则应在页面 A 的文件夹内创建页面 B 的子文件夹。
6. 如果多个页面都可以导航至同一个目标页面，可以跳过对该页面的重复探索，并仅在最自然的父页面下创建一次其文件夹。但仍须在 _sitemap.md、_navigation_graph.md 和相关页面的 _page.md 文件中记录所有导航来源。
7. 每个文件夹必须包含：
   • _page.md — 页面蓝图（分区、组件、出站导航）
   • _full.png — 整页截图
   • _interactions.md — 交互行为记录
   • _interactions/ — 交互状态截图目录
   • _assets/ — 页面专属资源
   • 滚动截图序列 _scroll_00.png ~ _scroll_N.png
8. 截图必须从真实网站采集。不得凭记忆描述视觉信息；所有视觉细节都必须以实际截图为依据。
9. 必须逐一实际触发并记录交互，包括悬停、点击、聚焦等。
10. 尽可能下载资源。使用 curl 下载图片，并使用 agent-browser eval 或 Playwright MCP 提取 SVG 源代码并保存。所有下载失败的情况都必须连同失败原因一并记录。
11. 只记录，不评价。准确记录观察到的结果，不做质量评判。
12. 实时更新文件。完成对每个页面窗口的探索后，更新站点地图及所有相关蓝图文件，例如 _page.md 和 _interactions.md，确保输出始终与当前探索进度同步。
13. 确保元素可见。与任何页面元素交互前，确保目标元素位于可视窗口内。如有需要，滚动页面或调整视口位置。
14. 每次调用 agent-browser 只能执行一条命令，例如截图、获取元素列表或执行一次交互。示例中连续的命令仅用于说明工作流；实际执行时必须拆分为独立调用。
15. 如果与网页元素交互会导航至外部域名，则无需深入探索或继续抓取该外部页面。但必须记录该外部链接的关键信息，包括外部 URL、触发链接的页面元素（文本／按钮名称／选择器或 ref）以及触发方式（例如点击）。在复制的网站中，相应页面元素应保留相同的触发方式和外部目标。
16. _full.png 用于记录页面的整体视觉概览，滚动截图序列（_scroll_00.png ~ _scroll_N.png）则可记录各区段的细节。复制网站时，必须结合参考整页截图中的整体信息和滚动截图序列中的详细信息，以确保视觉还原准确、细节完整。