firecrawl-website-design-clone

Firecrawl Web サイトデザインのクローン

1 つの URL から、エージェントがすぐに使える実用的なデザインシステムファイルを作成したい場合に使います。

デフォルトの成果物：あらゆる Web サイトのデザインシステムを 1 行で抽出し、DESIGN.md として形式化します。

このスキルは、Firecrawl によるスクレイピングを中心としたシンプルなワークフローを目指します。ページに表示されるコンテンツ、構造、メタデータ、リンク、利用可能な視覚的な情報を収集し、整理されたデザインシステムの Markdown ファイルにまとめます。

オンボーディングインタビュー

文脈から、ソース URL、対象スタック、実装を依頼されているかどうかを推測します。ユーザーが URL を提示し、デザインシステムを求めている場合は、すぐに進めてください。

必要な情報がなく作業を進められない場合に限り、Web サイトの URL、DESIGN.md のみを出力するか実装も行うか、必須の対象スタックなどについて、簡潔な質問を 1～3 件までしてください。

ホストエージェントが通常使用するプロンプトまたはモーダル UI を使ってください。特定のハーネス専用の質問関数には言及しないでください。

Firecrawl による収集計画

CLI または同等のツールを使って Firecrawl を利用します。必ず、指定された URL を次の 2 種類の方法で並行してスクレイピングしてください。

1. 構造化されたデザイントークンとページ内のすべての画像を取得するため、branding と images の形式を同時に指定します。
2. 視覚的な文脈を把握するため、ページ全体のスクリーンショットを取得します。

例：

firecrawl scrape "https://example.com" --format branding,images -o ".firecrawl/example-branding.json" --pretty &
firecrawl scrape "https://example.com" --full-page-screenshot -o ".firecrawl/example-screenshot.png" &
wait

branding と images を 1 回の呼び出しにまとめても、クレジットの消費は 1 回分です。また、この指定は必須です。branding ブロックに含まれるのは、厳選されたブランドアセット（logo、favicon、ogImage、logoHref）のみのため、images を指定しないと、ページ内の実際のコンテンツ画像（ヒーロー画像、製品写真、カルーセルのスライド、機能紹介のビジュアル、イラスト、アクセサリーの写真、ページ末尾のアートワークなど）を取得できません。tesla.com/cybertruck のような製品ページでは、branding ブロックにヒーロー画像はありません。images を指定した場合にのみ、メインの Cybertruck のヒーロー画像（例：Cybertruck-Hero-Desktop-NA-SA-APAC.png）や、ページ内のその他の写真が返されます。

スクリーンショットのスクレイピング結果がローカルファイルではなくリモート画像 URL（例：署名付きストレージリンク）を返した場合は、DESIGN.md から安定して参照できるよう、.firecrawl/ 内の同じパスにダウンロードしてください。

色、タイポグラフィ、コンポーネント、ブランドアセット（logo、favicon、ogImage）、パーソナリティ、確信度に関する注記の主な情報源として、構造化された branding の出力を使います。ヒーロー写真、製品写真、カルーセル、機能紹介のビジュアル、イラスト、装飾用グラフィックなど、厳選されたブランドアセット以外のページ内コンテンツ画像については、images リストを信頼できる情報源として使います。レイアウト、階層、全体的な雰囲気の主な視覚的参照として、スクリーンショットを使います。最終成果物の作成に不足がある場合に限り、追加の形式を使用します。

収集する情報：

• 色、タイポグラフィ、余白、ボタン、ロゴ、ブランドイメージ、パーソナリティ、確信度に関するブランドデータ
• 厳選されたブランドアセット以外のヒーロー画像、製品画像、機能紹介画像、セクション画像を含む、完全な images リスト
• DESIGN.md に埋め込めるよう、.firecrawl/ にローカル保存したページ全体のスクリーンショット
• 必要に応じて、見出し、コピーの階層、CTA、ナビゲーション、セクションの順序を把握するためのページの Markdown
• 必要に応じて、ブランド、製品、ページの目的を推測するためのメタデータとリンク
• branding の出力、images リスト、スクリーンショットだけではクラス名、フォント名、CSS 変数、コンポーネント構造を推測できない場合に限り、HTML
• ユーザーがサイト全体に及ぶシステムを求めている場合に限り、関連ページ

デフォルトでは過剰にクロールしないでください。まずは代表的な 1 ページから、役立つ初版を作成してください。

抽出する内容

サイトのデザイン言語を推測し、文書化します。

• 色：プライマリー、セカンダリー、アクセント、背景、境界線、テキスト、状態
• タイポグラフィ：フォントファミリー（判別できる場合）、文字サイズのスケール、ウェイト、行の高さ、見出しと本文の扱い
• 余白：コンテナー幅、セクションのリズム、グリッドの間隔、パディングのスケール、密度
• レイアウト：ページ構造、ヒーローのパターン、カード、グリッド、ナビゲーション、フッター、レスポンシブの想定
• コンポーネント：ボタン、入力欄、カード、バッジ、ナビゲーション項目、料金プラン、推薦文、機能の行、フォーム
• 画像とアイコン：スタイル、形状の特徴、イラストや写真の扱い、ロゴの制約。branding.imagesにはlogo、favicon、ogImage、logoHrefしか含まれないため、そこだけに頼らず、imagesリスト全体から代表的なヒーロー画像、プロダクト画像、機能画像、セクション画像を取得します
• モーションとインタラクション：観察できる、または推測できる場合のホバー状態、トランジション、アニメーションのスタイル
• トーンとコンテンツのパターン：CTAの文言、見出しのスタイル、プロダクトコピーのリズム

スクレイプ結果から値を正確に測定できない場合は、推測値であることを明記し、実用的な近似値を示します。

並行作業

適切な場合は、サブエージェントや同等の並列タスク実行手段を使用します。複数ページのサイトではページごとに担当を分ける方法、色、タイポグラフィ、余白、コンポーネントをそれぞれ担当するレビュアーを設ける方法が考えられます。

並行して作業する各リサーチ担当者は、参照元URL、抽出した根拠、推測したデザイントークン、確信度に関する注記を提示します。

最終成果物

以下の構成でDESIGN.mdを作成するか、返します。コーディングエージェントがトークンとあわせて視覚的なコンテキストを把握できるよう、冒頭付近にページ全体のスクリーンショットを埋め込みます。

# DESIGN.md: [Source Site]

## Source
- URL: [source URL]
- Capture date: [date]
- Evidence: [scrape/screenshot/html/links used]

## Reference Screenshot
![Full-page screenshot of [Source Site]](./.firecrawl/[source]-screenshot.png)

Use this screenshot as the visual source of truth for layout, hierarchy, density, and feel. Tokens below describe the same page in machine-readable form.

## Design Summary
[Short description of the visual language and what an agent should recreate]

## Design Tokens

### Colors
[Named color roles with hex values when known; mark inferred values clearly]

### Typography
[Fonts, fallback recommendations, scale, weights, heading/body rules]

### Spacing And Layout
[Spacing scale, containers, grids, radius, shadows, borders]

## Components
[Buttons, cards, nav, forms, hero, feature sections, pricing, footer, etc.]

## Page Patterns
[Section order, common layouts, responsive behavior]

## Content Style
[Voice, CTA style, heading patterns, copy density]

## Agent Build Instructions
[Concrete instructions an AI coding agent can follow to create a new site in this style]

## Rerun Inputs
workflow: firecrawl-website-design-clone
source_url: [url]
target_stack: [stack]
output: DESIGN.md

ユーザーが実装を依頼した場合は、まずDESIGN.mdを作成または更新し、それをビルドの信頼できる情報源として使用します。

品質基準

• サードパーティのロゴ、画像、商標、コピーの使用権がユーザーにあるかのように示さないでください。
• 単発の観察結果より、再利用可能なデザイントークンを優先してください。
• 観察された事実と推測による近似値を区別してください。
• 別のエージェントがコンテキストに貼り付けてビルドに利用できるよう、出力を簡潔に保ってください。
• 確認用に、参照元URLとスクレイプの成果物を保持してください。