extract-page-data

ページデータの抽出

デザイン分析、ページの再構築、コンテンツのレビューに向けて、あらゆるウェブページから構造化データを抽出します。スクリプトが依存関係のインストールを自動で処理するので、URLを指定するだけです。

使用する場面

• ユーザーがウェブページのURLを共有し、スクリーンショットの撮影を希望している
• ページからデザイントークン、CSSテーマ、またはカラーパレットを抽出したい
• ページのコンテンツをMarkdownテキストとして取得したい
• ページにあるリンク、ボタン、インタラクティブな要素を確認したい
• あらゆるウェブページの構造をエクスポートまたは分析したい
• ページ上の特定の要素のスクリーンショットを撮影したい（--selectorを使用）

Axureのプロトタイプには使用しないでください。代わりにextract-axure-dataを使用してください。

クイックスタート

このスキルのディレクトリからの相対パスで、scripts/extract.mjsにある抽出スクリプトを実行します。

# Full page screenshot
node scripts/extract.mjs https://example.com --screenshot

# Screenshot of a specific element
node scripts/extract.mjs https://example.com --screenshot --selector "#hero"

# Extract design tokens (colors, typography, spacing, etc.)
node scripts/extract.mjs https://example.com --theme

# Extract page content as Markdown
node scripts/extract.mjs https://example.com --markdown

# Collect all links and interactive elements
node scripts/extract.mjs https://example.com --links

# Extract everything
node scripts/extract.mjs https://example.com --all

# Export full data pack (screenshot + theme + markdown + links as zip)
node scripts/extract.mjs https://example.com --pack

初回実行時に、PlaywrightとChromiumが~/.cache/page-extractor/に自動インストールされます。これには1～2分かかり、インストールは一度だけです。

パラメーター

フラグ	説明	デフォルト
<url>	ウェブページのURL（必須）	—
--screenshot	ページのスクリーンショットを撮影	オフ
--theme	デザイントークンを抽出	オフ
--markdown	ページをMarkdownに変換	オフ
--links	インタラクティブな要素を収集	オフ
--pack	データ一式をエクスポート（zip）	オフ
--all	すべての抽出を実行	オフ
--selector SEL	抽出対象を指定するCSSセレクター	ページ全体
-o DIR	出力ディレクトリ	./page-export
--viewport WxH	ビューポートのサイズ	1280x720
--wait MS	ページ読み込み後の追加待機時間（ms）	0
--scroll	ページをスクロールして遅延読み込みコンテンツを表示	オフ
--scroll-step PX	スクロール1回あたりのピクセル数	800
--scroll-delay MS	スクロール間の遅延時間（ms）	200
--no-headless	ブラウザーウィンドウを表示	ヘッドレス
--connect-cdp URL	実行中のChromeに接続（認証用）	—
--format FMT	スクリーンショット形式：pngまたはjpeg	png
--verbose	詳細なログを表示	オフ

出力構造

page-export/
├── screenshot.png       # Page or element screenshot    (--screenshot)
├── theme.json           # Design tokens                 (--theme)
├── content.md           # Page text as Markdown          (--markdown)
├── links.json           # Links and interactive elements (--links)
└── page-data.zip        # Full data pack                 (--pack)
    ├── screenshot.png
    ├── theme.json
    ├── content.md
    ├── links.json
    └── meta.json        # Page metadata (title, url, viewport)

セレクターのサポート

すべての抽出モードで--selectorを指定し、特定の要素に対象を絞れます。

# Screenshot only the header
node scripts/extract.mjs https://example.com --screenshot --selector "header"

# Extract design tokens from a card component
node scripts/extract.mjs https://example.com --theme --selector ".card"

# Get Markdown from the main content area
node scripts/extract.mjs https://example.com --markdown --selector "main"

# Collect links from the navigation
node scripts/extract.mjs https://example.com --links --selector "nav"

認証が必要なページ

ページによってはログインが必要です。方法は2つあります。

既存のChromeセッションに接続する（推奨 — Cookieを再利用します）：

macOS：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Windows：

start chrome --remote-debugging-port=9222

その後、そのChromeウィンドウからログインして、次を実行します。

node scripts/extract.mjs https://example.com --all --connect-cdp http://localhost:9222

ブラウザーウィンドウを表示する（抽出中に手動でログイン）：

node scripts/extract.mjs https://example.com --all --no-headless

依存関係のインストール

初回実行時にスクリプトが自動インストールします。失敗した場合：

# Manual install
cd ~/.cache/page-extractor
npm install playwright
npx playwright install chromium

# If Chromium download is slow (e.g. behind GFW):
PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright npx playwright install chromium

出力データ形式

theme.json

計算済みCSSスタイルから抽出されたデザインシステムのトークン：

{
  "colors": {
    "background": [{"value": "rgb(255,255,255)", "count": 42, "tags": ["div"]}],
    "text": [{"value": "rgb(51,51,51)", "count": 28, "tags": ["p","span"]}],
    "border": [{"value": "rgb(221,221,221)", "count": 12}]
  },
  "typography": {
    "families": [{"value": "\"Inter\", sans-serif", "count": 56}],
    "textStyles": [{"size": "14px", "lineHeight": "22px", "weight": "400", "count": 20}]
  },
  "spacing": [{"value": "16px", "count": 15}],
  "radius": [{"value": "4px", "count": 8}],
  "lineWidth": [{"value": "1px", "count": 10}],
  "shadow": {
    "box": [{"value": "0 2px 8px rgba(0,0,0,0.1)", "count": 5}],
    "text": []
  },
  "transitions": [{"value": "all 0.2s ease", "count": 38, "tags": ["button","a"]}],
  "animations": [{"value": "fadeIn|0.3s|ease", "count": 5, "tags": ["div"]}],
  "cssVariables": {
    "--color-primary": "#6366f1",
    "--radius": "0.5rem",
    "--font-sans": "Inter, sans-serif"
  },
  "assets": {
    "backgroundImages": [{"value": "url(hero.webp)", "count": 1, "tags": ["section"]}],
    "images": [
      {"src": "https://example.com/logo.svg", "alt": "Logo", "position": "static", "zIndex": "auto", "siblingImgCount": 1},
      {"src": "https://example.com/hero.png", "alt": "", "position": "absolute", "zIndex": "2", "siblingImgCount": 2}
    ],
    "svgCount": 12
  }
}

links.json

ページ上のインタラクティブな要素：

{
  "pageUrl": "https://example.com",
  "pageTitle": "Example",
  "links": [
    {"type": "a", "text": "Home", "href": "https://example.com/", "visible": true},
    {"type": "button", "text": "Sign Up", "visible": true},
    {"type": "form", "href": "https://example.com/login", "visible": true}
  ],
  "totalLinks": 3,
  "visibleLinks": 3
}

カスタマイズ

抽出ロジックはモジュール式です。各機能はScripts/の下にある個別のファイルに実装されています。

ファイル	役割	カスタマイズ
lib/browser.mjs	Playwrightブラウザーの管理	ブラウザーの起動引数、プロキシを変更
lib/screenshot.mjs	スクリーンショットの撮影	スクロール動作、形式を変更
lib/theme.mjs	デザイントークンの抽出	トークンのカテゴリ、上限を調整
lib/markdown.mjs	HTML → Markdown	変換ルールを変更
lib/links.mjs	要素の収集	新しい要素タイプを追加
lib/pack.mjs	zipパッケージ化	パッケージの内容を変更
inject/extract-theme.js	ブラウザーに挿入されるテーマロジック	抽出するCSSプロパティを編集
inject/extract-markdown.js	ブラウザーに挿入されるMarkdownロジック	テキスト抽出をカスタマイズ
inject/extract-links.js	ブラウザーに挿入されるリンクロジック	カスタムセレクターを追加

テーマ複製のワークフロー

ユーザーがウェブサイトのデザイン言語の複製を希望している場合は、次の順序で実行します。

ステップ1：すべてのデータを抽出

node extract.mjs <url> --all --scroll --viewport 1440x900

Step 2: theme.json を解釈する

フィールド	対応先	CSS 変数
colors.background[0]	プライマリサーフェス	--color-bg
colors.text[0]	本文テキスト	--color-text
colors.text[1]	アクセント／ブランド	--color-primary
typography.families[0]	メインフォント	Google Fonts のインポート
spacing（上位 5 件）	スペーシングスケール	--spacing-1 …
radius[0]	デフォルトの角丸	--radius-base
transitions[0]	ホバー時のタイミング	.card, a, button に適用
cssVariables	デザイントークン（:root 変数が存在する場合）	名前をそのまま使用

Step 3: CSS 変数を生成する

:root {
  --color-bg:       <colors.background[0].value>;
  --color-text:     <colors.text[0].value>;
  --color-primary:  <colors.text[1].value>;
  --font-sans:      <typography.families[0].value>;
  --radius-base:    <radius[0].value>;
  --transition:     <transitions[0].value>;
}

cssVariables が空でない場合は、元のデザインシステムの意図を反映しているため、これらの名前を優先してください。

Step 4: アニメーションを復元する

• transitions[0].value → インタラクティブ要素に transition: <value> として適用
• animations → アニメーション名ごとに @keyframes ブロックを再構築し、エントリー要素に適用

Step 5: レイヤー化されたアセットを扱う

assets.images 内で position: absolute かつ zIndex > 0 の画像はオーバーレイレイヤーです。 親要素に CSS position: relative、オーバーレイに position: absolute を設定して再構築します。

Playwright で不足情報を補う

エクスポートデータはベストエフォートのスナップショットのため、元のページに戻って情報を補う必要がある場合があります（ホバー状態のスタイル、遅延読み込みコンテンツ、アニメーション効果など）。Playwright CLI を使用して、インタラクティブに追加情報を収集できます。

# 打开页面并获取快照
playwright-cli open https://example.com
playwright-cli snapshot

# 交互后采集（如 hover 态）
playwright-cli hover e15
playwright-cli screenshot --filename=hover-state.png

# 获取元素属性
playwright-cli eval "el => getComputedStyle(el).backdropFilter" e5

playwright-cli close

コマンドの完全なリファレンス: Playwright CLI の公式スキルドキュメント

Playwright が必要な場合

シナリオ	Playwright で行うこと
スクリーンショットがぼやけている／不完全	指定した要素を高解像度でスクリーンショット撮影
スタイルデータが不足している	完全な computedStyle を取得
hover/focus/active 状態	インタラクションを実行した後にスタイルを収集
遅延読み込みコンテンツ	スクロールをトリガーした後にスクリーンショット撮影
アニメーション／遷移効果	時間をおいてスクリーンショット撮影、または録画
レスポンシブのブレークポイント確認	viewport を設定した後にスクリーンショット撮影

トラブルシューティング

問題	対処方法
スクリーンショットが真っ白	ページのレンダリングに時間が必要です。--wait 2000 を追加してください
遅延読み込みコンテンツが表示されない	--scroll を使用して遅延読み込みをトリガーしてください
ログインが必要	--connect-cdp を使用してください（上記の「認証が必要なページ」を参照）
Playwright のインストールに失敗する	手動でインストールするか、PLAYWRIGHT_DOWNLOAD_HOST を設定してください
選択した要素が違う	まずブラウザーの DevTools でセレクターを確認してください