glmv-web-replication

Web サイトのフロントエンドのビジュアル再現

前提条件

このワークフローを実行するには、Playwright MCP または agent-browser スキルが必要です。どちらか一方がインストールされ、利用可能であれば、ワークフローを通常どおり実行できます。どちらも環境で利用できない場合は、ユーザーにいずれかのインストールを案内してください。

認可ゲート（最初に必ず実行）

作業を進める前に、エージェントは必ずユーザーに次の質問をしてください。

「この Web サイトの所有者ですか？ それとも、所有者から複製する明示的な書面での許可を得ていますか？ 無許可での複製は、著作権、利用規約、または適用される法律に違反する可能性があります。」

• ユーザーが許可を得ていることを確認した場合 → 続行します。
• ユーザーが確認できない場合 → 停止します。複製を進めないでください。代替案（例：一般的なレイアウトパターンを参考に、独自のデザインを作成する）を提案してください。

対象範囲と制限事項

このスキルが複製するのは、フロントエンドのビジュアル表現のみです。 具体的には次のとおりです。

対象に含まれるもの	対象に含まれないもの
ページレイアウトとビジュアルスタイル	バックエンド／サーバー側のロジック
ナビゲーション構造	データベースとデータストア
公開されているテキストと画像	認証システム／セッション
CSS／デザイントークン	API のビジネスロジック
クライアント側のインタラクションパターン	非公開のコンテンツやログイン後のコンテンツ
静的アセットファイル（画像、フォント）	認証情報、シークレット、API キー

データの取り扱いに関するルール：

1. ログインの壁の先をスクレイピングしないでください。 公開アクセス可能なページのみを取得してください。
2. 認証情報、API キー、セッショントークン、個人データ（PII）は収集または保存しないでください。
3. ユーザーが権利を保有していない限り、著作権で保護されたコンテンツ（記事、本文テキスト）をそのまま複製しないでください。
4. robots.txt とレート制限を遵守してください。 サイトがクロールを制限している場合は、その指示に従ってください。
5. ユーザーがすべての権利を保有していることを確認していない限り、出力は参照およびモックアップの目的で使用してください。

基本的な考え方

1. 対象 Web サイトの公開されているすべてのページを再帰的に調査し、ビジュアルコンテンツ、クライアント側のインタラクションロジック、公開されているアセットファイルを体系的に記録して、「Web サイト複製ブループリント」として整理します。このブループリントには、各ページの詳細情報を漏れなく含め、フォルダー階層を通じてサイトのナビゲーション関係を自然に表現します。具体的には、調査中に入れ子になったフォルダーを使って、収集したページ情報を整理・記録します。現在のページをフォルダーとして表し、そこから移動できるすべてのページを子フォルダーとして表します。同時に、そのページのスクリーンショット、コンポーネントのインタラクション記録、関連するアセットファイルをページフォルダー内に保存します。この構造により、最終的なブループリントには各ページのコンテンツとインタラクションの詳細が明確に示されるとともに、Web サイト全体の情報アーキテクチャとナビゲーション経路も暗黙的に反映されます。

ブループリントのフォルダー構造の例：

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. 上記のブループリント作成を完了したら、そのブループリントに基づいて対象 Web サイトのフロントエンドのビジュアルレプリカを作成します。元の Web サイトのページ間ナビゲーション、ビジュアルレイアウト、クライアント側のインタラクションパターンを再現します。これはフロントエンドのみの再現であり、バックエンドの動作の再現は含みません。

複製ワークフロー

プロセス全体は、初期化 → ページを再帰的に収集してサイトマップを作成 → 要約を出力 → フロントエンドのビジュアル再現 → ビジュアル比較と修正、の5つのフェーズに分かれています。

最初の3つのフェーズでは調査と記録を行い、最後の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：インタラクション状態を確認する

ページ上のインタラクティブ要素の一覧を取得し、すべて操作して UI の変化を撮影し、新たに検出されたページをすべて記録します。

# === 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 に移動できる場合、ページ 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
8. スクリーンショットは実際のサイトから取得してください。見た目に関する情報を記憶に基づいて記述しないでください。視覚的な詳細はすべて実際のスクリーンショットに基づいて記録してください。
9. ホバー、クリック、フォーカスなどのインタラクションは、1つずつ実際に発生させて記録してください。
10. 可能な限りアセットをダウンロードしてください。画像のダウンロードには curl を使用し、SVG のソースコードの抽出と保存には agent-browser eval または Playwright MCP を使用してください。ダウンロードに失敗した場合は、その理由とともにすべて記録してください。
11. 記録のみを行い、評価はしないでください。観察した結果を、品質に関する判断を加えず正確に記録してください。
12. ファイルをリアルタイムで更新してください。各ページのウィンドウの調査を終えたら、サイトマップと _page.md、_interactions.md などの関連する設計図ファイルをすべて更新し、出力が常に現在の調査状況と同期するようにしてください。
13. 要素が見える状態にしてください。ページ要素を操作する前に、対象の要素が表示中のビューポート内にあることを確認してください。必要に応じてページをスクロールするか、ビューポートの位置を調整してください。
14. agent-browser の各呼び出しでは、スクリーンショットの撮影、要素一覧の取得、1つのインタラクションの実行など、1つのコマンドのみを実行できます。1回の呼び出しに複数のコマンドを組み合わせないでください。例にある連続したコマンドはワークフローの説明用です。実際に実行する際は、別々の呼び出しに分けてください。
15. ウェブページの要素を操作した結果、外部ドメインに移動する場合、その外部ページを詳しく調査したり、引き続きスクレイピングしたりする必要はありません。ただし、外部 URL、リンクを発生させたページ要素（テキスト／ボタン名／セレクターまたは ref）、トリガー方法（クリックなど）を含む、その外部リンクの主要な情報を記録してください。複製したウェブサイトでも、該当するページ要素が同じトリガー方法と外部リンク先を維持する必要があります。
16. _full.png はページ全体の視覚的な概要の記録に使用し、スクロールスクリーンショットの連番（_scroll_00.png ～ _scroll_N.png）は各セグメントの詳細の記録に使用します。ウェブサイトを複製する際は、正確な視覚的再現と詳細の完全な復元のために、ページ全体のスクリーンショットから得られる概要と、スクロールスクリーンショットの連番から得られる詳細の両方を参照してください。