DESIGN.mdツールの比較

Design Extractorは、任意の公開URLからDESIGN.mdを作成します。ファイルはGoogleのDESIGN.md仕様に沿っており、ページから選び出した各コンポーネントを、コーディングエージェントが再構築できるHTMLとCSSのレシピとして出力します。各レシピは実際のサイトと照合して確認するか、確認できない場合は理由を明記します。特定の国からの訪問者にしか応答しないサイトにも対応しています。

他のツールは異なるアプローチを取っています。getdesign.mdやRefero Stylesのようなコレクションは、すでに分析したサイトの既製ファイルを提供しています。designmd.meはURLからファイルを生成します。TypeUIのChrome拡張機能は、タブ内のスタイルから独自のテンプレートを埋めます。各比較では、何をいつ確認したかを記載しています。初めての方はDESIGN.mdとは何かをご覧ください。

Design Extractorを選ぶ理由

  • GoogleのDESIGN.md仕様に準拠

    YAMLのフロントマターには仕様で定義されたプロパティだけを使い、独自のトップレベルキーはありません。標準セクションは、OverviewからDo's and Don'tsまで仕様どおりの順序で並びます。フロントマターのコンポーネント項目には仕様の8つのプロパティだけを使い、値はリテラルで記述します。どのファイルも無料のDESIGN.mdバリデーターで確認できます。

  • ページから選び出したコンポーネントごとのレシピ

    ページから選び出したヘッダー、フッター、ボタン、入力欄、カードなどのコンポーネントは、それぞれレシピとして出力されます。リテラル値で書かれた、要点を抽出したHTMLとCSSで、DESIGN.mdのComponentsセクションに含まれます。各レシピには、構成要素と、サイトで確認されたホバー時とフォーカス時の状態が記載されているため、コーディングエージェントは推測ではなくコンポーネントを再構築できます。

  • 実際のサイトと照合

    各レシピは単独でレンダリングされ、実際のサイトと照合されます。レンダリングされた構成要素をページで計測した内容と照らし合わせる構造の一致チェックと、実際の要素を新たにキャプチャした画像とのピクセル比較です。失敗したレシピは作り直して再度チェックします。それでも合格しないものは理由を明記してフラグを付け、検証済みとして出力することはありません。結果ページでは、コンポーネントの一致度と、サイトのカラーとテキストスタイルのカバー率を確認できます。ギャラリーのStripeをご覧ください。

  • 地域制限のあるサイトにも対応

    一部のサイトは、特定の国からの訪問者にしか応答しません。そのために実行が失敗した場合、結果ページに国の選択肢が表示されます（ページを読み込めることが確認された国が先頭に並びます）。選んだ国のブラウザを経由して同じ抽出を実行します。別の国からの実行には、Proの料金に6クレジットの追加料金がかかります（合計16クレジット）。抽出に失敗した場合は、クレジットを返金します。

比較一覧

  • getdesign.md vs Design Extractor

    既製のDESIGN.mdファイルを厳選したコレクションと、任意のURLから作る仕様準拠のDESIGN.md（実際のサイトと照合したコンポーネントのレシピ付き）の比較。

  • designmd.me vs Design Extractor

    URLからDESIGN.mdを作る2つのジェネレーターを、仕様への準拠、コンポーネントのレシピ、実際のサイトとの照合、価格で比較。

  • Refero Styles vs Design Extractor

    Webサイトのスタイルを集めた大規模な無料ライブラリと、任意のURLから作る仕様準拠のDESIGN.md（実際のサイトと照合したコンポーネントのレシピ付き）の比較。

  • TypeUI vs Design Extractor

    タブ内のスタイルから独自のテンプレートを埋めるTypeUIの無料Chrome拡張機能と、実際のサイトと照合したコンポーネントのレシピ付きの仕様準拠のDESIGN.mdの比較。