extract-design

デザイン言語を抽出する

任意の Web サイト URL からデザイン言語全体を抽出します。カラー、タイポグラフィ、余白、シャドウ、コンポーネント、ブレークポイント、アニメーション、アクセシビリティを網羅する 8 つのファイルを生成します。

前提条件

designlang が利用可能であることを確認してください。必要に応じてインストールします。

npm install -g designlang

または npx を使用します（インストール不要）。

npx designlang <url>

手順

1. 指定された URL で抽出を実行します。

npx designlang <url> --screenshots

複数ページをクロールする場合：npx designlang <url> --depth 3 --screenshots ダークモードの場合：npx designlang <url> --dark --screenshots

2. 生成された Markdown ファイルを読み、デザインを把握します。

cat design-extract-output/*-design-language.md

3. 主な調査結果をユーザーに提示します。

   • 16 進コードを含む基本カラーパレット
   • 使用されているフォントファミリー
   • 余白の体系（検出された場合は基本単位）
   • WCAG アクセシビリティスコア
   • 見つかったコンポーネントパターン
   • 特筆すべきデザイン上の判断（シャドウ、角丸など）

4. 次のステップを提案します。

   • *-tailwind.config.js をプロジェクトにコピーする
   • *-variables.css をスタイルシートにインポートする
   • shadcn/ui のユーザーには *-shadcn-theme.css を globals.css に貼り付ける
   • React/CSS-in-JS プロジェクトでは *-theme.js をインポートする
   • デザイナーへの引き継ぎ用に *-figma-variables.json を Figma にインポートする
   • *-preview.html をブラウザーで開き、視覚的な概要を確認する
   • Markdown ファイルを AI 支援開発のコンテキストとして使用する

出力ファイル（8 個）

ファイル	用途
*-design-language.md	AI 向けに最適化された Markdown — LLM 用の完全なデザインシステム
*-preview.html	色見本、文字サイズ、シャドウ、アクセシビリティを含む視覚的な HTML レポート
*-design-tokens.json	W3C Design Tokens 形式
*-tailwind.config.js	すぐに使える Tailwind CSS テーマ
*-variables.css	CSS カスタムプロパティ
*-figma-variables.json	Figma Variables のインポート形式
*-theme.js	React/CSS-in-JS テーマオブジェクト
*-shadcn-theme.css	shadcn/ui テーマ CSS 変数

その他のコマンド

• 2 つのサイトを比較： npx designlang diff <urlA> <urlB>
• 履歴を表示： npx designlang history <url>

オプション

フラグ	説明
--out <dir>	出力ディレクトリ（デフォルト：./design-extract-output）
--dark	ダークモードの配色も抽出する
--depth <n>	サイト全体を抽出するために内部ページを N 件クロールする
--screenshots	コンポーネントのスクリーンショットを撮影する（ボタン、カード、ナビゲーション）
--wait <ms>	SPA のページ読み込み後に待機する時間
--framework <type>	特定のテーマのみを生成する（react または shadcn）