extract-design-system について
extract-design-system は、公開 Web サイトのデザイン要素を分析し、プロジェクト用のスターターとなるトークンファイルを生成するスキルです。デザインシステムの初期化を目的としており、出力は確認が必要で、ピクセル単位の再現を保証するものではありません。既存のスタイルは確認なしに上書きされません。
主な機能
- 01色、フォント、余白、シャドウのスケールを抽出
- 02JSON と CSS 形式のトークンファイルを生成
- 03生データのみを取得する抽出専用モード
- 04既存のアプリコードや設定の変更前に確認
活用シーン
- 01参考にする Web サイトのトークンで新規プロジェクトを開始
- 02デザインシステム構築前に公開サイトのスタイル規約を確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/extract-design-systemを入力して読み込まれたか確認します。
同梱ファイルreferences/outputs.mdreferences/workflow.md
詳細
デザインシステムを抽出する
ユーザーが公開ウェブサイトのデザインプリミティブをリバースエンジニアリングし、プロジェクト内のスタータートークンファイルにまとめたい場合に、このスキルを使用します。
開始前
以下を確認します。
- 対象となる公開ウェブサイトの URL
- 抽出のみを希望するか、スターターファイルも希望するか
あらかじめ、次の点を説明します。
- この v1 ではトークンとスターターアセットを抽出しますが、完全なコンポーネントライブラリは作成しません
- 結果は初期化には役立ちますが、ピクセル単位での完全な再現には向いていません
- 確認なしに、既存のデザインシステムやアプリのスタイルを上書きしません
ワークフロー
- 対象の URL が公開されており、アクセス可能であることを確認します。
- 次を実行します。
npx playwright install chromium
npx extract-design-system <url>
.extract-design-system/normalized.jsonを確認し、次の項目を要約します。
- 主色、副色、アクセントカラーと思われる色
- 検出されたフォント
- 検出されている場合は、スペーシング、角丸、シャドウのスケール
- ユーザーが抽出成果物のみを希望する場合は、次を使用します。
npx extract-design-system <url> --extract-only
- ユーザーがすでに
.extract-design-system/normalized.jsonを持っており、スタータートークンファイルの再生成のみを希望する場合は、次を実行します。
npx extract-design-system init
- 生成される出力を説明します。
.extract-design-system/raw.json.extract-design-system/normalized.jsondesign-system/tokens.jsondesign-system/tokens.css
- 既存のアプリコード、スタイル、設定ファイルを変更する前に、ユーザーに確認します。
安全上の制約
- サイトが動的または部分的な場合、抽出したシステムが完全であると断言しません。
- 明確に抽出されていないコンポーネントやセマンティックトークンを推測しません。
- レビューなしに、抽出結果を確定事項として扱いません。
- 第三者のウェブサイトのコンテンツを根拠に、別途確認を得ずにコードや設定を広範囲に変更しません。
- 明示的な確認なしに、生成された出力ファイル以外のプロジェクトファイルを変更しません。
- 単一ページを、製品全体のデザインシステムを示す証拠として扱いません。
コメント
Markdown 対応