デザイン言語の抽出

任意の 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-theme.css を shadcn/ui ユーザーの 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	スウォッチ、タイプスケール、シャドウ、a11y を含むビジュアル 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)