name: glmv-web-replication
description: |-
    前端视觉复制技能。通过 Playwright MCP 或 agent-browser 探索目标网站的公开可见页面，捕获屏幕截图和布局信息，然后生成一个静态或客户端前端副本，近似还原原版的视觉效果和页面结构。此技能仅复制前端展示内容——不复制后端逻辑、服务器端行为、数据库或任何非公开内容。用户需自行确保在复制任何网站前已获得适当授权（所有权、许可或明确许可）。
    ⚠️ 授权门禁：开始前，代理必须与用户确认其拥有复制目标网站的合法权利。若用户无法确认，则技能必须拒绝继续。
read_when:
    - When the user wants to create a frontend visual replica of a website they own or have explicit permission to replicate
    - When the user needs a static/HTML approximation of a website’s visual design and layout
    - When the user wants to study and reproduce a website’s frontend page structure and styling
allowed-tools: Bash(glmv-web-replication:*)

网站前端视觉复制

前提条件

本工作流依赖于 Playwright MCP 或 agent-browser 技能。只要至少其中一项已安装且可用，工作流即可正常运行。如果您的环境中两者均不可用，请提醒用户安装其中之一。

授权门禁（必须先执行）

在继续之前，Agent 必须询问用户：

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

• 如果用户确认授权 → 继续。
• 如果用户无法确认 → 停止。不要进行复制。建议替代方案（例如，基于通用布局模式构建原创设计）。

范围与限制

本技能仅复制前端视觉呈现。具体而言：

数据处理规则：

1. 绝不抓取登录墙后的内容。 仅捕获可公开访问的页面。
2. 绝不收集或存储 凭据、API 密钥、会话令牌或个人数据（PII）。
3. 绝不逐字复制受版权保护的内容（文章、文案），除非用户拥有相应权利。
4. 尊重 robots.txt 和速率限制。 如果网站表明爬取限制，请遵守。
5. 输出仅供参考与原型设计用途，除非用户已确认完全权利。

核心思路

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

示例蓝图文件夹结构：

blueprint/
├── _meta.md                      # 站点级元数据
├── _sitemap.md                   # 站点地图
├── _assets/                      # 全局资源（字体、favicon 等）
├── home/                         # 首页
│   ├── _page.md                  # 页面蓝图（区块、组件、交互摘要）
│   ├── _full.png                 # 全页截图
│   ├── _scroll_00.png ~ N.png    # 滚动截图序列
│   ├── _interactions.md          # 所有交互的记录
│   ├── _interactions/            # 交互状态截图（按交互类型组织）
│   ├── _assets/                  # 此页面的资源（图片、视频等）
│   ├── products/                 # 从首页可到达的“产品列表”
│   │   ├── _page.md
│   │   ├── _full.png
│   │   ├── _scroll_00.png ~ N.png 
│   │   ├── _interactions.md
│   │   ├── _interactions/
│   │   ├── _assets/
│   │   ├── product-detail/       # 从产品列表可到达的“产品详情”
│   │   │   ├── _page.md
│   │   │   └── ...
│   │   └── category/             # 从产品列表可到达的“分类筛选”
│   │       └── ...
│   ├── about/                    # 从首页可到达的“关于我们”
│   │   └── ...
│   ├── blog/                     # 从首页可到达的“博客”
│   │   └── ...
│   └── login/                    # 从首页可到达的“登录”
│       └── ...
└── _navigation_graph.md          # 站点级导航图（Mermaid）

1. 完成上述蓝图构建后，基于该蓝图构建目标网站的前端视觉复制品，尽可能接近原版的页面间导航、视觉布局和客户端交互模式。这仅是一个前端复现，不包括后端行为的复制。

复制工作流

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

前三个阶段专注于探索和文档编制，最后两个阶段专注于基于收集到的蓝图实现前端副本并进行视觉验证。下面以 agent-browser 工作流为例；如果使用 Playwright MCP，整体流程和用法基本相同，可参照执行。

步骤 1：初始化项目

# 创建蓝图根目录
mkdir -p blueprint/_assets
# 打开浏览器并访问目标站点
agent-browser open <目标 URL>
agent-browser set viewport 1920 1080
agent-browser wait --load networkidle

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

# 网站复制蓝图
- 目标网站：<URL>
- 探索日期：<日期>
- 视口大小：1920×1080

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

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

首先截取全页截图 → 下载资源 → 遍历交互状态 → 向下滚动 → 再次下载资源 → 再次遍历交互状态 → 再次向下滚动 → ... → 继续直到页面底部。

#### 2.1：资源下载

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

#### 2.2：遍历交互状态

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

# === 示例：使用向下滚动前的产品列表页面 ===
agent-browser open <产品列表 URL>
agent-browser screenshot blueprint/home/products/_scroll_00.png
agent-browser wait --load networkidle
agent-browser snapshot -i 
# 假设输出为：
# button "全部" [ref=e1]                ← 筛选标签
# button "电子产品" [ref=e2]
# card "产品 A" [ref=e3]                ← 产品卡片
# select "排序" [ref=e4]                ← 排序下拉框
# link "首页" [ref=e5]                  ← 面包屑链接
# button "了解更多" [ref=e6]            ← 产品卡片内的按钮
# --- 交互 1：悬停产品卡片 ---
agent-browser hover @e3
agent-browser screenshot blueprint/home/products/_interactions/card_hover.png
# --- 交互 2：点击筛选标签 ---
agent-browser click @e2
agent-browser wait --load networkidle
agent-browser screenshot blueprint/home/products/_interactions/filter_electronics.png
# --- 交互 3：更改排序 ---
agent-browser select @e4 "价格：从低到高"
agent-browser wait --load networkidle
agent-browser screenshot blueprint/home/products/_interactions/sort_price_asc.png
# --- 交互 4：点击产品卡片（触发导航） ---
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
# --- 交互 5：点击面包屑“首页” ---
agent-browser click @e5
agent-browser wait --load networkidle
agent-browser get url    # → /
agent-browser screenshot blueprint/home/_full.png --full
agent-browser back
# --- 交互 6：点击“了解更多”按钮（外部导航） ---
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：

# 产品列表页面
- URL：/products
- 来源：首页主导航“产品”链接

## 区块结构
| 编号 | 区块名称 | 布局模式 | 内容类型 |
|------|----------|----------|----------|
| 1 | 页面头部 | 全宽单列 | H1 标题 + 描述性文本 |
| 2 | 筛选栏 | 水平布局 | 分类标签 + 排序下拉框 |
| 3 | 产品网格 | 3 列网格 | 产品卡片 × N |
| 4 | 分页 | 居中单列 | 分页按钮组 |

## 截图
- 全页：![全页截图](./_full.png)
- 滚动序列：![屏幕 1](./_scroll_00.png) ![屏幕 2](./_scroll_01.png)

## 出站导航
| 触发元素 | 触发方式 | 目标 | 子文件夹 |
|----------|----------|------|----------|
| 产品卡片 | 点击 | /products/:id | ./product-detail/ |
| 分类标签 | 点击 | /products/category/:slug | ./category/ |
| 面包屑“首页” | 点击 | / | （返回父级） |
| 了解更多按钮 | 点击 | https://www.angelokeirsebilck.be/ | 无 |

## 页面资源
| 文件 | 用途 |
|------|------|
| _assets/product-01.jpg | 产品卡片缩略图 |
| _assets/product-02.jpg | 产品卡片缩略图 |

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

# 产品列表页面 - 交互行为

## 交互列表
| 元素 | 触发方式 | 行为 | 导航 | 截图 |
|------|----------|------|------|------|
| 产品卡片 | 悬停 | 卡片抬起 + 阴影加深 | 否 | ![](./_interactions/card_hover.png) |
| 产品卡片 | 点击 | 导航至产品详情 | 是 → ./product-detail/ | — |
| 筛选标签“电子产品” | 点击 | 列表刷新为电子产品分类 | 否（AJAX） | ![](./_interactions/filter_electronics.png) |
| 排序下拉框 | 选择 | 产品列表重新排序 | 否（AJAX） | ![](./_interactions/sort_price_asc.png) |
| 面包屑“首页” | 点击 | 导航至首页 | 是 → ../ | — |
| 了解更多按钮 | 点击 | 打开外部链接 | 是 → https://www.angelokeirsebilck.be/ | — |

## 状态转换
默认列表 --[点击筛选标签]--> 筛选后列表
默认列表 --[更改排序]--> 排序后列表
产品卡片（默认） --[悬停]--> 产品卡片（悬停状态）
产品卡片 --[点击]--> /products/:id（导航）
了解更多按钮 --[点击]--> 外部链接（导航至 https://www.angelokeirsebilck.be/）

步骤 3：生成摘要输出

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

#### blueprint/_sitemap.md

# 站点地图
home/                          # /（首页）
├── products/                  # /products（产品列表）
│   ├── product-detail/        # /products/:id（产品详情）
│   └── category/              # /products/category/:slug（分类）
├── about/                     # /about（关于我们）
├── blog/                      # /blog（博客列表）
│   └── blog-post/             # /blog/:slug（博客文章）
├── contact/                   # /contact（联系我们）
└── login/                     # /auth/login（登录）
    └── register/              # /auth/register（注册）

#### blueprint/_navigation_graph.md

# 站点级导航图
graph LR
    Home["home /"] -->|导航 - 产品| Products["products /products"]
    Home -->|导航 - 关于| About["about /about"]
    Home -->|导航 - 博客| Blog["blog /blog"]
    Home -->|页头 - 登录| Login["login /auth/login"]
    Products -->|卡片点击| Detail["product-detail /products/:id"]
    Products -->|筛选标签| Category["category /products/category/:slug"]
    Blog -->|文章卡片| Post["blog-post /blog/:slug"]
    Login -->|注册链接| Register["register /auth/register"]

## 导航详情
| 编号 | 源文件夹 | 触发元素 | 目标文件夹 | 导航类型 |
|------|----------|----------|------------|----------|
| N001 | home/ | 主导航“产品” | home/products/ | 内部 |
| N002 | home/ | 英雄区 CTA 按钮 | home/products/ | 内部 |
| N003 | home/products/ | 产品卡片 | home/products/product-detail/ | 内部 |
| N004 | home/products/ | 分类标签“电子产品” | home/products/category/ | 内部 |
| N005 | home/products/ | 面包屑“首页” | home/ | 内部 |
| N006 | home/products/ | 了解更多按钮 | 外部链接 https://www.angelokeirsebilck.be/ | 外部 |
| ... | ... | ... | ... | ... |

#### 关闭浏览器

agent-browser close

步骤 4：前端视觉复制

完成网站探索和蓝图生成后，基于所收集的蓝图构建前端视觉复制品。在复制过程中，参考蓝图中的页面结构、视觉样式和公开可用的资源，使用您偏好的前端工具和框架重建网站的客户端呈现。目标是接近原版的视觉设计和导航——而不是复现后端行为或非公开功能。

步骤 5：视觉比较与修正

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

关键规则

1. 授权优先。 未得到用户确认拥有合法复制权之前，绝不开始复制。
2. 仅限公开页面。 仅探索和捕获可公开访问的页面。不要尝试访问受登录保护的区域、管理面板或经过身份验证的端点。
3. 不处理凭据/PII。 如果任何捕获内容包含凭据、令牌或个人数据，立即进行编辑或排除。
4. 仅限前端。 绝不声称或尝试复制后端业务逻辑、数据库模式或服务器端行为。
5. 文件夹代表导航关系。如果页面 A 可以导航到页面 B，那么页面 B 应作为页面 A 文件夹内的子文件夹创建。
6. 如果多个页面可以导航到同一目标页面，您可以跳过对该页面的冗余探索，仅在最自然的父级下创建一次其文件夹。但是，所有导航来源仍必须在 _sitemap.md、_navigation_graph.md 以及相关页面的 _page.md 文件中记录。
7. 每个文件夹必须包含：

• _page.md — 页面蓝图（区块、组件、出站导航）
• _full.png — 全页截图
• _interactions.md — 交互行为记录
• _interactions/ — 交互状态截图目录
• _assets/ — 页面特定资源
• 滚动截图序列 _scroll_00.png ~ _scroll_N.png

1. 截图必须来自真实网站。不要凭记忆描述视觉信息；所有视觉细节必须基于实际截图。
2. 交互必须逐一真实触发并记录，包括悬停、点击、聚焦等。
3. 尽可能下载资源。使用 curl 下载图片，使用 agent-browser eval 或 Playwright MCP 提取 SVG 源代码并保存。所有失败的下载必须连同失败原因一起记录。
4. 仅记录，不评估。准确记录观察到的结果，不做质量判断。
5. 实时更新文件。完成每个页面窗口的探索后，更新站点地图以及所有相关的蓝图文件，如 _page.md 和 _interactions.md，使输出始终保持与当前探索状态同步。
6. 确保元素可见。在与任何页面元素交互之前，确保目标元素在可见视口内。必要时滚动页面或调整视口位置。
7. 每次对 agent-browser 的调用只能执行一个命令，例如截取截图、获取元素列表或执行一次交互。不要在一次调用中组合多个命令。示例中的连续命令仅用于说明工作流；实际执行时必须拆分为独立的调用。
8. 如果与网页元素的交互触发了对外部域的导航，则无需深度探索或继续抓取该外部页面。但是，必须记录该外部链接的关键信息，包括外部 URL、触发链接的页面元素（文本/按钮名称/选择器或 ref）以及触发方式（如点击）。在复制的网站中，相应的页面元素应保留相同的触发方式和外部目标。
9. _full.png 用于记录页面的整体视觉概览，而滚动截图序列（_scroll_00.png ~ _scroll_N.png）可以记录每个片段的细节。在网站复制过程中，应同时参考全页截图的整体信息和滚动截图序列的详细信息，以确保视觉再现准确且细节恢复完整。