DESIGN.mdジェネレーター

実際のWebサイトからDESIGN.mdを作成します。URLを入力すると、ジェネレーターがコーディングエージェントの読み込むファイルを作ります。カラー、タイポグラフィ、スペーシング、コンポーネントのトークンと、その使い方のルールです。初めての方はDESIGN.mdとは何かをご覧ください。

ジェネレーターがDESIGN.mdを作る流れ

  1. WebサイトのURLを入力

    マーケティングサイト、ドキュメントサイト、Webアプリのランディングページなど、公開ページならどれでも使えます。まず新規登録してください。実行ごとにプリペイド式パックのクレジットを消費します。

  2. ジェネレーターがサイトを読み取る

    実際のブラウザでサイトを開き、実際に使われているカラー、フォント、スペーシング、角丸、コンポーネントを計測します。Proでの実行では、サイトの約5ページを対象にします。どの実行も少なくとも1分はかかります。

  3. DESIGN.mdが手に入る

    トークンはYAMLのフロントマターに、その使い方のルールはMarkdownに書かれます。Overview、Colors、Typography、Layout、Elevation and Depth、Shapes、Components、Do's and Don'tsの各セクションです。抽出履歴でコピー、ダウンロード、編集ができます。

出力サンプル：AnthropicのDESIGN.md

ジェネレーターがanthropic.comから作成したファイルの抜粋です。各グループのトークンを数個とOverviewの冒頭だけに絞っています。完全なファイルには、レイアウト、エレベーション、シェイプ、コンポーネント、Do's and Don'tsも含まれます。

DESIGN.md
---
version: alpha
name: Anthropic
colors:
  primary: "#141413"
  on-primary: "#FAF9F5"
  ink: "#141413"
  body-muted: "#5E5D59"
  surface: "#FAF9F5"
  surface-alt: "#F0EEE6"
  hairline: "#D1CFC5"
typography:
  hero-display:
    fontFamily: Anthropic Serif
    fontSize: 68.3429px
    fontWeight: 400
    lineHeight: 1.1
  body:
    fontFamily: Anthropic Serif
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 8px
  md: 12px
  lg: 16px
spacing:
  base: 4px
  section-padding-y: 48px
---

## Overview

Anthropic's site reads like a well-set research journal printed on warm
paper. The canvas is **Parchment** (`surface`, #FAF9F5), text is a
near-black **Ink** (`ink`, #141413), and there is no saturated brand hue
at all.

AnthropicのDESIGN.mdをすべて見るDESIGN.mdのサンプルをもっと見る

よくある質問

DESIGN.mdジェネレーターに関する質問

ジェネレーターが作るもの、料金、コーディングエージェントでのファイルの使い方。

GoogleのDESIGN.md仕様に沿ったDESIGN.mdファイルを1つ作成します。YAMLのフロントマターには、サイトのカラー、タイポグラフィ、スペーシング、角丸、コンポーネントのトークンが入ります。Markdownの本文ではその使い方をセクションごとに説明するため、コーディングエージェントはサイトに合った新しいUIを構築できます。

ジェネレーターではできません。ジェネレーターは公開されている実際のWebサイトからファイルを作成します。ゼロからデザインする場合は、仕様に沿ってDESIGN.mdを手で書き、無料のDESIGN.mdバリデーターで構造とトークンを確認してください。

HTTPまたはHTTPSでアクセスできる公開Webサイトなら、静的サイト、シングルページアプリ、サーバーサイドレンダリングのページを含めて読み取れます。ログインが必要なページ、localhost上のページ、プライベートネットワーク上のページには対応しておらず、自動化されたブラウザをブロックするサイトもあります。

新規登録してプリペイド式のクレジットパックを購入します。$5で50クレジットからご利用いただけます。サブスクリプションはなく、クレジットに有効期限はありません。実行ごとにクレジットを消費し、現在の1回あたりの費用は料金ページに表示しています。こちら側の原因で実行に失敗した場合、クレジットは返金されます。

プロジェクトのルートかdocsフォルダにDESIGN.mdとして保存し、プロンプトで言及してください。Claude Code、Cursor、GitHub Copilot、Windsurfなど、ファイルにアクセスできるエージェントがスタイルの参考として読み込みます。エージェントがDesign ExtractorのMCPサーバーを通じて、ジェネレーターを自ら実行することもできます。

はい。生成したDESIGN.mdはすべて抽出履歴に保存され、そこで編集、再ダウンロード、後日のサイトの再抽出ができます。プレーンテキストなので、お使いのエディタで編集することもできます。