Manavarya09/design-extract

何を解決するか

designlang は、任意のライブウェブサイトから完全なデザインシステムを抽出するツールです。DOMをプログラム的に読み取ることで、スタイル、トークン、レイアウトを手動で再作成する作業を排除し、Tailwind設定、Figma変数、Reactコンポーネントのスタブなどの開発者向けアセットを生成します。

動作方法

このツールはヘッドレスブラウザ（Chromium）を使用して、URLのライブDOMを分析します。色、タイポグラフィ、スペース、モーションを抽出し、複数ページをクロールして一貫性のある重複除去されたデザインシステムを合成できます。また、レイアウトパターン、4つのブレークポイントにおけるレスポンシブ動作、およびインタラクション状態（ホバー/フォーカス/アクティブ）を分析します。

対象ユーザー

既存のウェブサイトのデザイン言語をクローン、再現、または分析する必要があるフロントエンド開発者、UI/UXデザイナー、AIコーディングエージェント向けです。開発を迅速に開始したり、視覚的な正確性を保証したりするのに役立ちます。

主な特徴

• 包括的な出力: W3C DTCGトークン、Tailwind設定、shadcnテーマ、Figma変数を含む17ファイル以上を出力。
• 忠実度測定: ピクセル差分とモーション分析を使用して、クローンとオリジナルサイトを比較し、0〜100点のスコアと順位付けされた修正計画を提供。
• デザインDNA: 色、タイプ、スペース、形状、モーションの5軸で他のシステムのコアと比較し、デザイン空間における相対的位置を評価。
• AI統合: Claude CodeプラグインおよびMCPサーバーとして提供され、AIエージェントが設計トークンとコンポーネントを直接アクセス可能。
• 高度な抽出: 実行時モーション（スタガリング、コーディネーション、スクロールレシピ）とWCAGコントラストスコア（アクセシビリティ対応）をキャプチャ。
• サイト全体の合成: 複数ページをクロールし、カバレッジに基づいてサイト全体のトークンとページ固有の選択を分離。