D
Design MD Generator
公開URLから実際のデザイントークンを抽出し、AIコーディングエージェント向けのDESIGN.mdを生成
free
最終更新 2026/9/12
Design MD Generatorについて
Design MD Generatorは公開URLを受け取り、実際のCSSから色、フォント、文字サイズの比率、間隔、角丸、シャドウ、コンポーネントの状態を抽出し、テーマ、パレットの役割、タイポグラフィ、レイアウト、コンポーネント、階層、角丸、モーション、デザインガイドラインを含む9セクション構成のDESIGN.mdを生成します。ファイルをコードリポジトリに置き、CLAUDE.mdまたは.cursor/rulesから参照すれば、生成インターフェースを元サイトのデザインシステムに合わせられます。MCP経由でエディターからライブラリの検索、ファイルの読み込み、ジェネレーターの実行も可能です。
おすすめの利用者
AIコーディングエージェントの利用者
フロントエンド開発者
デザインシステムの保守担当者
CLAUDE.mdまたは.cursor/rulesを使うチーム
最適な利用シーン
既存サイトのデザインシステムファイルを生成する
AIコーディングエージェントに元サイトのデザインを再利用させる
エディターからMCP経由でジェネレーターを実行する
既成のDESIGN.mdデザインシステムを閲覧する
機能
実際のCSS抽出
実際のスタイルから色、フォントスタック、文字サイズの比率、間隔、角丸、シャドウ、CSSカスタムプロパティを集計します。
証拠に基づく分析
すべての16進カラー、フォント名、角丸はサイトの実際のCSS由来で、抽出器がトークンを創作することはありません。
9セクションのDESIGN.md
AIデザインアナリストがテーマ、パレットの役割、タイポグラフィ、レイアウト、コンポーネント、階層、角丸、モーション、ガイドラインを生成します。
MCPエディター接続
MCP経由でライブラリを検索し、DESIGN.mdを読み込み、エディターでジェネレーターを実行できます。
長所
- トークンが実際のCSSに基づくため推測を避けられる
- 出力をコードリポジトリに置き、エージェントから参照できる
- 1日の制限内で無料生成できる
- MCP対応でエディターから操作しやすい
短所
- 訪問者ごとの1日あたりの生成制限
料金プラン
無料
$0日
- DESIGN.mdを生成
- 訪問者ごとの1日あたりの制限
- クレジットカード不要
* 料金情報は参考用です。最新情報はDesign MD Generator公式サイトのお知らせをご確認ください。
よくある質問
実際のCSSから色、フォントスタック、文字サイズの比率、間隔、角丸、シャドウ、CSSカスタムプロパティを集計し、9セクション構成のDESIGN.mdを生成します。
MCPで接続すれば、エージェントがライブラリを検索したり、任意のDESIGN.mdを読み込んだり、エディターでジェネレーターを実行したりできます。
ツール情報
開発者Design MD Generator
リリース日2026/9/12
価格free