design-oracle

Design Oracleは、ウェブサイトを分析して完全なデザインシステムを抽出するためのMITライセンスツールです。Next.jsフロントエンド、FastAPIバックエンド、ARQワーカー、Redis、SQLite、およびPlaywright/Chromium分析パイプラインを組み合わせて構成されています。 主な機能には、Playwrightによるフルページキャプチャ、視覚的スコアとヒューリスティックを用いたデザインDNA分類、ヒーロー、価格表、ナビゲーション、FAQなどのコンポーネント検出（バウンディングボックス付き）、SSEとRedis pub/subによるリアルタイム進捗表示が含まれます。また、Tailwind v4設定、React JSXコンポーネント、JSONデザイントークン、Markdown形式のDESIGN.mdレポートとしてエクスポート可能です。さらに、MCPを通じてAIワークフロー向けの分析ツールを提供します。 セットアップにはDocker Composeが推奨されており、.env.exampleを.envにコピーしてdocker compose up --build -dを実行し、http://localhost:3000を開くことで利用できます。ローカルでstart.shを使用する場合は、Python 3.12+、Node.js 20+、Redis 7+が必要であり、仮想環境、Playwright Chromium、Redis、ARQワーカー、ポート3000のNext.js、ポート5000のFastAPIが起動します。 APIには、ヘルスチェック、分析(analyze)、ステータス、結果、SSEイベント、スクリーンショット、削除、デザインリスト、およびTailwind、コンポーネント、design.md、トークンのエクスポートエンドポイントが含まれています。各分析結果はanalyses/{id}/に保存され、screenshot.png、screenshot-overlay.png、result.json、DESIGN.md、tailwind.config.js、components.jsx、design-tokens.jsonが生成されます。 MCPサーバーは、http://localhost:5000/mcpでのHTTP SSEまたはスタンドアロンのstdioモードで利用可能です。軽量なuvx CLIであるdesign-oracle-mcpは、Playwright/Chromiumを必要とせず、HTTP経由でバックエンドを呼び出します。opencode、Cursor、Claude Code向けのツールスニペットもドキュメント化されています。また、Cloudflare Tunnelスクリプト（start-public.sh）を使用して、アプリを一時的な公開HTTPS URLで公開できます。 既知の制限事項として、分析は現在1440x900の単一ビューポートを使用していること、ボット保護されたサイトはPlaywrightをブロックする場合があり（基本的な保護にはSTEALTH_MODEオプションがあるが、エンタープライズ級の保護にはCAPTCHAや有料プロキシが必要な場合があること）、コンポーネント検出はML/ビジョンベースではなくヒューリスティックに基づいていること、そしてSQLiteストレージはローカルまたはシングルユーザー向けであり、マルチテナント展開には適していないことが挙げられます。