INSANE0777/Awwwards-mcp

解決する課題

このプロジェクトは、AI エージェントに Awwwards から高品質なデザインインスピレーションと技術的な青写真を入手する能力を提供します。美しいウェブサイトを見ることと、それがどのように構築されたかを正確に理解することの間のギャップを埋め、エージェントが複雑なウェブデザインを分析、再現、検証できるようにします。

仕組み

これは、コーディングエージェントに接続する MCP（モデルコンテキストプロトコル）サーバーとして機能します。ライブスクレイピングとローカル SQLite インデックスを組み合わせて、色、タグ、またはテクノロジーでウェブサイトを検索します。サイトが選択されると、エージェントは詳細なフォレンジックを実行できます：ページ構造のマッピング、モーション（スクロール/ホバーアニメーション）の記録、テクノロジースタックのフィンガープリント、さらには 3D キャンバスポーズのキャプチャ。最後に、これらの調査結果を機能する Vite、Astro、または Next.js プロジェクトに変換し、元のサイトに対してビルド品質を検証できます。

対象ユーザー

Claude Code、Cursor、Cline などの AI コーディングエージェントを使用する開発者向けに設計されており、ハイエンドでモーションリッチなウェブサイトを構築し、プロフェッショナルなデザインパターンを体系的に研究および複製する必要がある人に最適です。

ハイライト

• デザイン DNA 抽出：任意のサイトのカラーパレット、テクノロジースタック、受賞履歴を抽出します。
• モーションフォレンジック：ライブ URL からスクロールトリガーアニメーション、ホバーインタラクション、GSAP タイムラインをキャプチャします。
• 自動再構築：分析したページ構造をすぐに実行可能なフレームワークプロジェクトに変換します。
• 検証エンジン：バンドマップ比較とモーションフィンガープリント差分を使用して、参照サイトに対してビルドをスコアリングします。
• ユニバーサルツール：ほとんどの分析ツール（キャプチャ、センサス、検証）は、Awwwards 受賞サイトだけでなく、任意の URL で動作します。
• オフラインファースト：API キーやアカウントなしで動作し、ローカル SQLite キャッシュを使用して高速で信頼性の高いデータアクセスを実現します。