Manavarya09/design-extract

何を解決するか

designlang は、DOM を分析することで、任意のライブサイトの完全なデザインシステムを抽出するツールです。ライブサイトからデザイントークン、レイアウト、ブランドガイドラインを手動で再作成するという課題を解決し、開発者やデザイナーがサイトのビジュアルアイデンティティをプログラム的にクローンまたは分析できる方法を提供します。

動作方法

このツールはヘッドレスブラウザ（Chromium）を使用して URL を指定し、ライブ DOM から直接デザインシステムを読み取ります。色、タイポグラフィ、スペース、モーション、レイアウトパターンを複数のブレークポイントで分析します。複数のページをクロールして、一貫性のある、重複を排除したデザインシステムを合成でき、ピクセル差分とモーション分析を用いてクローンの「忠実度」を測定することも可能です。

対象ユーザー

• フロントエンド開発者: ライブサイトに基づいて Tailwind 設定、shadcn テーマ、または Next.js スターターを素早く生成できます。
• UI/UXデザイナー: 既存のウェブサイトから Figma 変数やブランドガイドラインを抽出できます。
• AIエージェント: MCP サーバーまたは Claude Code プラグインを通じて、プログラム的にデザイントークンやコンポーネントにアクセスし、ウェブサイトの構築やリスタイルが可能になります。

主な特徴

• 包括的な抽出: DTCG トークン、Tailwind 設定、Figma 変数、タイプ化された React コンポーネント構造を含む 17 以上のファイルを出力。
• 忠実度測定: 0–100 のスコアでクローンをオリジナルと比較し、視覚的・モーション的な正確性のための順位付けされた修正計画を提供。
• デザインDNA: 色、タイプ、スペース、形状、モーションの5つの軸で、他のシステムとの比較に基づきデザインの相対的位置を評価。
• サイト全体の分析: 複数のページをクロールして、サイト全体のトークンとページ固有の選択を分離。
• エージェント統合: Claude Code プラグインおよび MCP サーバーとして提供され、AI コーディングツールとシームレスに連携。
• 高度なビジュアル処理: ホバー/フォーカス状態、WCAG コントラストスコア、複雑なモーションの choreography をキャプチャ。