jomvick/design-oracle

これは何？

主な機能

• 01PlaywrightとChromiumでページ全体をキャプチャ。
• 02色、タイポグラフィ、余白、コンポーネントのバウンディングボックスを抽出。
• 03Tailwind v4設定、React JSX、JSONデザイントークン、Markdownレポートを出力。
• 04SSEとRedis pub/subによる解析進捗のリアルタイム表示。
• 05MCPサーバーを通じて、AIエージェントに解析ツールを提供。

ユースケース

• 既存サイトのスタイルをTailwindテーマに変換し、リデザインに活用する。
• 参考サイトのレイアウトを再現するReactコンポーネントのスタブを生成する。
• UIの構築前に、サイトのデザインをまとめた構造化データをAIコーディングエージェントに渡す。
• 競合サイトやレガシーサイトのデザインシステムをMarkdownレポートとして記録する。

クイックスタート

1. 1

   リポジトリをクローンしてディレクトリに移動します

2. 2

   env ファイルをコピーします（Docker では任意）

   cp .env.example .env
3. 3

   Docker Compose で起動し、http://localhost:3000 を開きます

   docker compose up --build -d

使う前に知っておきたいこと

• !分析は単一の 1440×900 ビューポートを使用します。複数デバイスでの分析には対応していません。
• !高度なボット対策を導入しているサイトでは Playwright がブロックされる場合があり、CAPTCHA の解決や有料プロキシが必要になることもあります。
• !コンポーネントの検出にはヒューリスティックを使用しており、ML やビジョンモデルは使用していません。
• !SQLite ストレージはローカルでの単一ユーザー利用向けで、マルチテナントのデプロイには適していません。

トピック

よくある質問

design-oracle とは？

Webサイトを解析し、デザインシステムをTailwind v4設定やReactコンポーネントなどに出力 Design OracleにURLを渡すと、PlaywrightでChromium上にページ全体を表示し、サイトのビジュアルシステムを抽出します。色、タイポグラフィ、余白、ヒーローや料金表、ナビゲーション、FAQなどのコンポーネント、UXパターンを解析します。各解析結果にはスクリーンショット、コンポーネントのオーバーレイ、未加工のJSONデータが保存されます。

design-oracle は無料で使えますか？ライセンスは？

design-oracle は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

design-oracle は今もメンテナンスされていますか？

半年以内に更新あり。design-oracle の最終コミットは 2026年8月9日 です。

design-oracle は何に使えますか？

既存サイトのスタイルをTailwindテーマに変換し、リデザインに活用する。 参考サイトのレイアウトを再現するReactコンポーネントのスタブを生成する。 UIの構築前に、サイトのデザインをまとめた構造化データをAIコーディングエージェントに渡す。 競合サイトやレガシーサイトのデザインシステムをMarkdownレポートとして記録する。

design-oracle のインストール方法は？

リポジトリをクローンしてディレクトリに移動します env ファイルをコピーします（Docker では任意）: cp .env.example .env Docker Compose で起動し、http://localhost:3000 を開きます: docker compose up --build -d

design-oracle はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/jomvick/design-oracle