Firecrawl ウェブサイトデザインクローン
ユーザーが1つのURLを、エージェントがすぐに使用できる実用的なデザインシステムファイルに変換したい場合に使用します。
デフォルトの成果: 任意のウェブサイトのデザインシステムを1行で抽出し、DESIGN.md としてフォーマットします。
このスキルは、Firecrawl のスクレイピングを中心としたシンプルなワークフローとして機能します。ページの表示コンテンツ、構造、メタデータ、リンク、利用可能な視覚的手がかりを収集し、それらの調査結果をクリーンなデザインシステムのマークダウンファイルに統合します。
オンボーディングインタビュー
ソースURL、ターゲットスタック、実装が要求されているかどうかをコンテキストから推測します。ユーザーがURLを指定してデザインシステムを要求した場合は、すぐに処理を開始します。
ブロックされた場合のみ、最大1～3の簡潔な質問をします。質問の例: ウェブサイトのURL、DESIGN.md のみを出力するか実装も行うか、必要なターゲットスタックなど。
ホストエージェントの通常のプロンプトまたはモーダルUIを使用します。ハーネス固有の質問関数を指定しないでください。
Firecrawl 収集計画
Firecrawl を CLI または同等のツールインターフェースを通じて使用します。常に、指定されたURLに対して次の2つの並列スクレイプから開始します:
brandingとimagesフォーマットを同時に使用して、構造化デザイントークンとページの全画像セットを取得します。- 視覚的コンテキストのためのフルページスクリーンショット。
例:
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（署名付きストレージリンクなど）を返す場合は、同じ .firecrawl/ パスにダウンロードして、DESIGN.md が安定したローカルアセットを参照できるようにします。
構造化された branding 出力を、色、タイポグラフィ、コンポーネント、ブランドアセット（ロゴ、ファビコン、ogImage）、パーソナリティ、信頼度の主要ソースとして使用します。images リストを、ページのコンテンツ画像（ヒーロー写真、プロダクトショット、カルーセル、機能ビジュアル、イラスト、装飾グラフィック）の真実のソースとして使用します。スクリーンショットを、レイアウト、階層、全体的な雰囲気の主要な視覚的参照として使用します。これらの形式で最終成果物に不十分な場合にのみ、補足フォーマットを追加します。
収集するもの:
- ブランディングデータ: 色、タイポグラフィ、スペーシング、ボタン、ロゴ、ブランドイメージ、パーソナリティ、信頼度
- 完全な
imagesリスト: 厳選されたブランドアセットを超えた、ヒーロー、製品、機能、セクションの画像 - フルページスクリーンショット: ローカルの
.firecrawl/に保存し、DESIGN.mdに埋め込めるようにする - ページマークダウン: 見出し、コピーの階層、CTA、ナビゲーション、セクションの順序（必要に応じて）
- メタデータとリンク: ブランド、製品、ページの目的の手がかり（必要に応じて）
- HTML:
branding出力、画像リスト、スクリーンショットだけではクラス、フォント名、CSS変数、コンポーネント構造を推測するのに不十分な場合のみ - 関連ページ: ユーザーがより広範なサイトシステムを要求した場合のみ
デフォルトでは過度にクロールしないでください。最初のバージョンは、代表的な1ページから有用であるべきです。
抽出するもの
サイトのデザイン言語を推測して文書化します:
- 色: プライマリ、セカンダリ、アクセント、背景、境界線、テキスト、状態
- タイポグラフィ: 検出可能なフォントファミリー、タイプスケール、ウェイト、行間、見出し/本文の処理
- スペーシング: コンテナ幅、セクションのリズム、グリッドギャップ、パディングスケール、密度
- レイアウト: ページ構造、ヒーローパターン、カード、グリッド、ナビゲーション、フッター、レスポンシブの仮定
- コンポーネント: ボタン、入力フィールド、カード、バッジ、ナビゲーションアイテム、価格ブロック、 testimonial、機能行、フォーム
- 画像とアイコン: スタイル、形状言語、イラスト/写真の処理、ロゴの制約;
branding.imagesはlogo、favicon、ogImage、logoHrefのみを保持するため、完全なimagesリストから代表的なヒーロー、製品、機能、セクション画像を取得します - モーションとインタラクション: ホバー状態、トランジション、観測可能または推測可能なアニメーションスタイル
- ボイスとコンテンツパターン: CTA の文言、見出しスタイル、製品コピーのリズム
スクレイプ出力から値を正確に測定できない場合は、「推測値」としてラベルを付け、実用的な近似値を与えてください。
並列処理
適切な場合は、サブエージェントまたは同等の並列タスクランナーを使用します。自然な分割は、マルチページサイトの場合は1ページあたり1リサーチャー、または色、タイポグラフィ、スペーシング、コンポーネントごとに1レビュアーなどです。
各並列リサーチャーは、ソースURL、抽出されたエビデンス、推測されたデザイントークン、および信頼度ノートを返す必要があります。
最終成果物
以下の構造で DESIGN.md を作成または返します。フルページスクリーンショットを上部近くに埋め込み、コーディングエージェントがトークンとともに視覚的コンテキストを取得できるようにします。
# DESIGN.md: [ソースサイト]
## ソース
- URL: [ソースURL]
- 取得日: [日付]
- エビデンス: [使用したスクレイプ/スクリーンショット/HTML/リンク]
## 参照スクリーンショット
![フルページスクリーンショット: [ソースサイト]](./.firecrawl/[ソース]-screenshot.png)
このスクリーンショットを、レイアウト、階層、密度、雰囲気に関する視覚的な真実のソースとして使用してください。以下のトークンは、同じページを機械可読形式で説明しています。
## デザイン概要
[視覚言語とエージェントが再現すべき内容の簡単な説明]
## デザイントークン
### 色
[既知の場合は名前付きカラーロールと16進数値; 推測値は明確にマーク]
### タイポグラフィ
[フォント、フォールバック推奨、スケール、ウェイト、見出し/本文ルール]
### スペーシングとレイアウト
[スペーシングスケール、コンテナ、グリッド、半径、シャドウ、境界線]
## コンポーネント
[ボタン、カード、ナビゲーション、フォーム、ヒーロー、機能セクション、価格設定、フッターなど]
## ページパターン
[セクションの順序、一般的なレイアウト、レスポンシブな動作]
## コンテンツスタイル
[ボイス、CTAスタイル、見出しパターン、コピー密度]
## エージェントビルド手順
[AIコーディングエージェントがこのスタイルで新しいサイトを作成するために従うことができる具体的な手順]
## 再実行入力
workflow: firecrawl-website-design-clone
source_url: [url]
target_stack: [スタック]
output: DESIGN.md
ユーザーが実装を要求した場合は、まず DESIGN.md を作成または更新し、それをビルドの真実のソースとして使用します。
品質基準
- ユーザーがサードパーティのロゴ、画像、商標、またはコピーに対する権利を持っていると暗示しないでください。
- 1回限りの観察よりも、再利用可能なデザイントークンを優先してください。
- 観測された事実と推測された近似値を区別してください。
- 別のエージェントがコンテキストに貼り付けてビルドできるように、出力をコンパクトに保ってください。
- ソースURLとスクレイプアーティファクトをレビューのために保持してください。