design-mirror

Design Mirror

Bright Data の Web Unlocker を使って、あらゆるウェブサイトのビジュアルデザイン言語をリアルタイムで抽出し、色、タイポグラフィ、余白、レイアウトのリズム、コンポーネントの形状、全体的な美しさを既存のコードベースに適用します。

このスキルでできること

1. キャプチャ — Bright Data 経由で、参考サイトのスクリーンショットを撮り、HTML をスクレイピングします
2. 抽出 — 色、フォント、余白のスケール、角丸、影、コンポーネントのパターンなど、デザインシステム全体を特定します
3. 分析 — スクリーンショットを視覚的に、CSS を構造的に調べて、デザイン言語を理解します
4. 適用 — そのデザインシステムをユーザーの既存のコードベース（フレームワークやコンポーネント）に適用します

コンテンツや機能をコピーするのではありません。パレット、文字サイズのスケール、カードの形状、ホバー時の状態、全体的な美しさといった デザイン言語 を理解します。

重要： このスキルは、デザインの参考と学習を目的としています。公開されているデザイントークン（色、フォント、余白）を抽出し、自分の UI 制作に活用します。参照するサイトの利用規約を守り、常に敬意を持って使用してください。

セットアップ

必要なもの：

• BRIGHTDATA_API_KEY — brightdata.com/cp → アカウント設定から取得します
• BRIGHTDATA_UNLOCKER_ZONE — brightdata.com/cp で Unlocker zone を作成します

export BRIGHTDATA_API_KEY="your-api-key"
export BRIGHTDATA_UNLOCKER_ZONE="your-zone-name"

手順

ステップ 1：参考サイトをキャプチャする

視覚的な分析用のスクリーンショットと、CSS 抽出用の HTML スクレイピングの両方を並行して実行します。

# Screenshot (save as PNG)
bash scripts/screenshot.sh "https://inspiration-site.com" "/tmp/target_screenshot.png"

# HTML + CSS scrape
bash scripts/scrape_html.sh "https://inspiration-site.com" "/tmp/target_page.html"

生の HTML から CSS を抽出し、一般的な問題に対処する方法については、references/capture-guide.md を読んでください。

ステップ 2：デザインシステムを分析する

キャプチャ後、両方を並行して分析します。

視覚的な分析（スクリーンショット）： PNG 画像を読み取り、次の点を特定します。

• プライマリカラー、セカンダリカラー、アクセントカラー
• 背景色（ページの背景、カードの背景、サーフェスの階層）
• タイポグラフィ：表示されているフォントファミリー、サイズの階層（h1 → 本文 → キャプション）
• レイアウト：中央揃え／幅制限ありか？グリッドか？サイドバーはあるか？
• カード／コンテナーの形状：角丸の大きさ、影のスタイル（強い、柔らかい、なし、色付き）
• ボタンのスタイル：ピル型、長方形、ゴースト、グラデーションか？
• ナビゲーション：固定表示か？ガラス／ぼかし効果はあるか？ダークかライトか？
• 全体的な印象：ダーク、ライト、ミニマル、ブルータリスト、グラスモーフィズム、コーポレート、スタートアップか？

CSS の分析（HTML）： <style> タグとインラインスタイルから次の項目を抽出します。

• CSS カスタムプロパティ（:root { --color-... }）— 公開されているデザイントークン
• フォントのインポート（Google Fonts などからの @import）
• Tailwind の設定（存在する場合）
• 余白のスケールを示す、繰り返し使われているクラスのパターン

抽出の手順については、references/css-extraction.md を読んでください。

ステップ 3：デザイントークンのマップを作成する

コードに触れる前に、構造化されたデザイントークンのマップを作成します。

DESIGN TOKENS FROM [site]
==========================
Colors:
  --bg-primary: #0a0a0f      (page background)
  --bg-surface: #13131a      (card/panel background)
  --text-primary: #ffffff
  --text-muted: #8888aa
  --accent: #7c3aed          (primary CTA color)
  --accent-hover: #6d28d9
  --border: rgba(255,255,255,0.08)

Typography:
  --font-heading: 'Inter', sans-serif
  --font-body: 'Inter', sans-serif
  font-scale: 12/14/16/20/24/32/48px
  heading-weight: 700
  body-weight: 400

Spacing:
  base-unit: 8px
  scale: 4/8/12/16/24/32/48/64px

Borders & Shadows:
  --radius-sm: 6px
  --radius-md: 12px
  --radius-lg: 20px
  --shadow: 0 4px 24px rgba(0,0,0,0.4)

Special effects:
  glass-blur: backdrop-filter: blur(16px)
  gradient: linear-gradient(135deg, #7c3aed, #2563eb)

次に進む前に、このトークンマップをユーザーに提示してください。これは土台となるものです。誤っていれば、出力も誤ったものになります。

ステップ 4：ユーザーのコードベースを把握する

コードを書く前に、ユーザーのコードベースの関連箇所を読んでください。

• 使用しているフレームワークは何か？（React、Vue、Next.js、プレーンな HTML など）
• スタイリングには何を使っているか？（Tailwind、CSS modules、styled-components、プレーンな CSS など）
• グローバルスタイルはどこで定義されているか？（globals.css、theme.ts、tailwind.config.js など）
• どのコンポーネントのスタイルを変更する必要があるか？（不明な場合はユーザーに確認してください）

すべてを書き換えるのではなく、必要な部分だけを正確に変更してください。既存の構造にデザイントークンを適用します。

ステップ 5：デザインを適用する

適用方法は、使用している技術スタックによって異なります。

Tailwind の場合： tailwind.config.js を更新し、新しいカラーパレット、フォントファミリー、角丸のスケールを設定します。Tailwind で標準対応できないものには、カスタム CSS 変数を追加します。

CSS/CSS Modules の場合： globals.css に :root 変数ブロックを作成または更新します。コンポーネントのスタイルシートを更新し、新しい変数を使用するようにします。

styled-components/Emotion の場合： テーマオブジェクトを更新します。ハードコードされた色や余白の値をテーマトークンに置き換えます。

すべての場合：

• まず色、タイポグラフィ、余白を全体に適用します
• 次に、ボタン、カード、ナビゲーションなど、コンポーネントごとの詳細に取り組みます
• 既存の機能とレイアウト構造はすべて維持し、変更するのは見た目のプロパティだけにします
• インスピレーション元のサイトの特徴となる特殊効果（ガラスのぼかし、グラデーション、アニメーションなど）を追加します

フレームワークごとの実装パターンについては、references/apply-guide.md を参照してください。

ステップ 6：変更前と変更後を提示する

変更を適用した後、以下を明確に提示します。

• 変更したファイル
• デザイントークンの対応関係（元の値 → 設定した値）
• 追加した特殊効果
• ユーザーが見た目で確認すべき点（ホバー状態、ダークモード／ライトモード、モバイル）

ユーザーが開発サーバーを起動している場合は、確認するよう伝えます。特定のコンポーネントについて、さらに調整することも提案します。

重要な原則

マークアップではなく、デザイン言語を取り入れます。 インスピレーション元のサイトの HTML 構造とコンテンツは、そのサイト固有のものです。色の関係、余白の使い方、サイトの特徴となる要素などのデザイン言語を抽出し、独自の創造的な基盤として適用します。

コードより先にデザイントークンを決めます。 システム全体を理解する前に急いで色を適用すると、一貫性のない結果になります。必ず最初にトークンマップを作成してください。

適用範囲を確認します。 「すべてにデザインを適用する」「ホームページだけその雰囲気にする」「ナビゲーションバーだけスタイルを変更する」では、作業内容が大きく異なります。作業を始める前に確認してください。

正常に動作しているものを壊さないようにします。 ユーザーのコンポーネントは正常に動作しています。変更するのは見た目のプロパティだけにしてください。変更によってレイアウトが崩れる可能性がある場合は、慎重に進め、その可能性をユーザーに伝えてください。

段階的に進めても問題ありません。 まず基盤（色、タイポグラフィ、余白）を整え、ユーザーに確認してもらってから、コンポーネントごとの詳細に取り組むほうがよいこともよくあります。

状況に応じた対応

サイトがデザインシステム（Material、shadcn など）を使用している場合： そのシステムを特定してユーザーに伝え、同じシステムを採用するか、見た目のトークンだけを抽出するかを確認します。

CSS が圧縮または難読化されている場合： スクリーンショットと視覚的な分析を利用します。見た目を確認すれば、色、余白、形状は引き続き抽出できます。

インスピレーション元のサイトが JavaScript でレンダリングされ、HTML のスクレイピング結果がほとんど空の場合： そのことをユーザーに伝えます。スクリーンショットを使った視覚的な分析は引き続き可能ですが、CSS の抽出には限界があります。見た目から、ほとんどのトークンを推定することはできます。

ユーザーのコードベースがコンポーネントライブラリ（shadcn、Chakra、MUI）を使用している場合： 個々のコンポーネントを上書きするのではなく、ライブラリのテーマや設定をカスタマイズしてデザインを適用します。

複数のページのデザインを合わせる必要がある場合： 全体のデザイントークンにはホームページを使用し、特定のページの見た目も合わせたいかどうか、ユーザーに確認したうえで、必要に応じて下層ページ（例：/pricing、/docs）も確認します。