design-system-extractor

ファイルの場所： このスキルの tools/ フォルダーにすべての Python ファイルがあります： .agents/skills/design-system-extractor/tools/ ├── design_system_extractor.py ├── extract_tokens.py └── requirements.txt

必須の手順：

# Navigate to the tools folder
cd .agents/skills/design-system-extractor/tools/

# Install dependencies (first time only)
pip install -r requirements.txt

# Run the Python pre-processor
python design_system_extractor.py <URL>

Python スクリプトの処理内容： ステップ A：HTML のサニタイズ

• <svg>、<path>、<script>、<noscript>、<iframe>、<style> タグをすべて削除します
• base64 データ（src="data:image..."）を削除します
• 構造のみを保持します：<header>、<main>、<section>、<h1>-<h6>、<p>、<a>、<button>、および CSS クラス

ステップ B：外部 CSS の抽出

• <head> 内の <link rel="stylesheet"> タグを特定します
• .css ファイルを取得します
• 正規表現を使って以下のみを抽出します：
  • :root { ... } ブロック（デザイントークンの 90%）
  • @font-face ルール
  • 重要なグローバルクラス（.btn、.card、.container、h1, h2, h3）

ステップ C：ユーティリティフレームワークの検出

• Tailwind のパターンを検出します：text-[16px]、bg-[#RRGGBB]、leading-tight
• 余白のパターン：m-4、p-8、gap-16、w-full
• タイポグラフィ：font-bold、text-xl、tracking-wide

</data_collection_and_sanitization>

<data_analysis> Python が返した JSON を使って、以下を分析します：

色：

• CSS 変数（:root）の色を優先します
• :root がない場合は、HTML/Tailwind から検出された色を使用します
• ブランド、黒、白、グレー（ライト／ミディアム／ダーク／テキスト／ミュート／ソーシャル）に分類します
• グラデーションと不透明度を検出します
• 各色の用途（CTA、テキスト、背景、境界線）を記録します

タイポグラフィ：

• CSS 変数または @font-face からフォントファミリーを取得します
• Google Fonts を使用している場合は、HTML の タグから取得します
• フォントサイズ：メガ（130px）、ヒーロー（86px）、ディスプレイ（66px）、h1-h6、本文、小
• フォントウェイト：400、500、600、700
• 行の高さ：タイト（0.94）、スナッグ（1.03）、標準（1.2）、リラックス（1.25）、ルーズ（1.65）
• 文字間隔：より詰める（-0.05em）、詰める（-0.035em）、標準（-0.03em）、広める（0.175em）

余白：

• 4px 単位を基準にします
• スペースシステム：1（4px）、2（8px）、4（12px）、6（16px）、8（20px）、10（24px）、16（40px）、24（60px）、40（90px）、75（150px）、100（200px）、125（250px）
• コンテナー幅：最大（1920px）、コンテンツ（1400px）、ナロー（1360px）、スモール（1200px）、テキスト（800px）、タイト（780px）

</data_analysis>

<component_catalog> Python が検出したコンポーネントを使って、以下を展開します：

ボタン（最低 4 種類）：

• プライマリー：ブランド背景、ピル型の角丸（100px）、高さ 40px
• チップ：グレーの背景、ピル型の角丸、ホバー／アクティブ状態
• リンク：テキストのみ、アニメーション付きの矢印を末尾に付加
• FAB：固定位置、backdrop-filter、パルスアニメーション
• パディング、角丸、フォントサイズ、フォントウェイト、トランジション

カード（最低 3 種類）：

• プロジェクトカード：画像付きメディア、コンテンツ、タイトル、サブタイトル
• パートナーカード：左側に画像、右側にコンテンツ、最大幅 310px
• ペインカード：インデックス番号、タイトル、サブタイトル、仕切り線
• 境界線（角丸 15～20px）、シャドウ、ホバー効果、画像のアスペクト比

</component_catalog> Forms:

• テキストフィールド：アニメーション付き下線、大きなラベル、高さ 56px
• セレクトボックス：下線＋末尾のシェブロン
• ファイルボックス：破線の枠線、ドラッグ＆ドロップ形式
• チェックボックス：チェックマーク付きのカスタムコントロール
• 入力スタイル、ラベル、検証状態、フォーカス状態

Navigation:

• トランジション付きの固定ヘッダー
• ロゴ＋横並びのメニュー＋CTA ボタン
• 矢印のアニメーション付きドロップダウン
• スクロールに応じた色の変化

</component_catalog>

<assets_and_media> ビジュアルへの没入感を高めるために重要：

• サイトから実際の画像 URL（オリジナルのロゴ、バナー、プロフィール写真、カード画像）を取得して使用してください。
• 生成する HTML には、これらの「実際の素材」を タグとコンポーネントの背景に含めてください。元のサイトに豊富な画像が使われている場合、単色だけを使用しないでください。
• これにより、生成するドキュメントが元のサイトのルック＆フィールを備えます。

画像：

• src から URL を抽出してください（必ずサイトのオリジナルを使用してください）
• 形式を特定してください（WebP、JPG、PNG、SVG）
• アスペクト比を記録してください（カードの padding-top 55% など）
• border-radius と効果（ホバー時の拡大など）を記録してください

アイコンとロゴ：

• サイドバーとヘッダーに、元のサイトのロゴの正確な URL を挿入してください。
• ライブラリ（FontAwesome、Material、Phosphor、カスタム SVG）
• スタイル（塗りつぶし、アウトライン、デュオトーン）
• 可能な場合はインライン SVG を抽出するか、オリジナルの URL を使用してください

</assets_and_media>

<animations_and_interactions>

• トランジションの長さ：高速（0.15s）、通常（0.25s）、低速（0.5s）
• タイミング関数：ease-smooth cubic-bezier(0.65, 0.05, 0.36, 1)
• キーフレームアニメーション：heartbeat、fade、slide、scale、pulse、ticker
• スクロールに応じたアニメーション（GSAP、ScrollMagic、AOS）
• ホバー効果：transform、opacity、background-color </animations_and_interactions>

<grid_and_layout>

• コンテナーの最大幅
• グリッドシステム（CSS grid、flexbox）
• ブレークポイント（1024px、768px）
• ギャップとガター
• Z-index のスケール：base（1）、dropdown（2）、header（3）、sticky（10）、fixed（55）、overlay（100） </grid_and_layout>

<anti_hallucination_guidelines> 重要：データを捏造しないために：

トークンは、Python が返した JSON のデータだけに厳密に基づいてください。

サイトで強いミニファイが行われており（クラスが .a、.b、.c など）、CSS がマッピングされていない場合：

• 数値のパターンを分析してデザインシステムを推測してください
• 業界標準のデフォルト値（4px グリッド、1.25 のタイプスケール）を使用してください

分析したデータに存在しない色やフォントを決して作り出さないでください。

情報が不足している場合は、デフォルト値を「Default」と記載してください。

空のプレースホルダーは禁止：[URL] や汎用的なグレーの画像を残すのではなく、サイトから抽出した実際の画像、写真、ロゴの URL を必ず HTML に挿入してください。ドキュメントが実際のサイトの一部のように見えるようにしてください。 </anti_hallucination_guidelines>

<output_format> HTML ファイル（design_pattern.html） 最終的な HTML コードのみを生成してください。コードの前後に説明を追加しないでください。 以下のテンプレートを使用し、[Site Name]、#HEX、値のプレースホルダーを、実際に抽出したプロパティに置き換えてください。 重要：、、「LOGO」と記載されたテキストなど、すべてのプレースホルダーを、取得した実際の画像 URL に置き換えてください。 :root ブロックのみを変更し、CSS のボイラープレートはすべて指定どおりに維持してください。 <html_template>

• Foundations
• Colors
• Typography
• Spacing
• Icons
• Components
• Buttons
• Cards
• Forms
• Navigation
• Badges & Chips
• Patterns
• Numbers & Stats
• Awards
• Footer
• Animations

デザインシステム

[Site Name] のデザインシステムに関する完全なドキュメントです。公式サイトをリバースエンジニアリングして抽出しました。

カラー

カラーパレットは、プライマリアクセントとして [brand color] を中心に構成され、 黒、白、グレーの色調と対比しています。

ブランドカラー

ブランドカラー

[#HEX]

CTA、リンク、アイコン、ホバー状態

CSS 変数

:root {
--color-brand: [#HEX];
--color-brand-hover: [#HEX];
--color-black: #000000;
--color-white: #FFFFFF;
--color-gray-light: #EEEEEE;
--color-gray-medium: #CDCDCD;
--color-gray-text: #9A9A9A;
--color-gray-dark: #7B7B7B;
--color-gray-muted: #575757;
--color-gray-social: #CBCBCB;
}

タイポグラフィ

タイポグラフィには [Font Name] フォントを使用し、ウェイトは 400～700 です。 文字システムの特徴は、負の字間と詰まった行間です。

メガタイトル

font-size: 130px

line-height: 0.94

letter-spacing: -0.05em

font-weight: 700

間隔

間隔システムは 4px を単位としています。 主要なセクション間は 200px、左右のパディングは 90px です。

間隔 1

4px

アイコン

すべてのアイコンは外部ライブラリを使わない、カスタムのインライン SVG です。 currentColor を使用して、周囲のコンテキストから色を継承します。

アイコン名

カスタム SVG

ボタン

ボタンの特徴は、ピル型の角丸（100px）、 高速なトランジション（0.15s）、明確なホバー状態です。

プライマリボタン

ボタン

.ds-btn-primary {
background: var(--color-brand);
color: #FFFFFF;
border-radius: 100px;
height: 40px;
padding: 0 20px;
font-size: 14px;
font-weight: 600;
}

カード

カードは、プロジェクト、パートナー、情報の表示に使用されます。 明るい背景、15～20px の角丸、控えめなホバー効果が特徴です。

プロジェクトカード

タイトル

サブタイトル

パートナーカード

パートナー名

クライアント

ペインカード

01

サービス

説明

フォーム

フォーム要素はミニマルなデザインで、フォーカス時に下線がアニメーションし、 ラベルは大きく太字で表示されます。

テキストフィールド

名前

選択とファイルのアップロード

+

ファイルをアップロード

ドラッグ＆ドロップするか、クリックしてください

同意します

ナビゲーション

ナビゲーションは固定表示され、スクロール時に色が滑らかに切り替わります。 ドロップダウンは0.25sの遅延後に表示されます。

• リンク
• ドロップダウン

CTA

バッジとチップ

チップはタグ、フィルター、カテゴリーに使用します。 ピル型で、ホバー時とアクティブ時の状態が明確です。

タグ1 タグ2 アクティブ

数値と統計

大きな数値で統計や実績を強調します。 メガタイポグラフィ（130px）を使用し、文字間隔を狭めています。

150+

プロジェクト

完了

受賞歴

ホバー時に下線がアニメーションする受賞歴のリストです。 すっきりしたデザインで、項目の区切りは控えめです。

受賞名

2025

フッター

フッターには、白とグレーのテキストを配した暗い背景を使用します。 リンクと連絡先情報を含む4列のグリッドです。

[email protected]

サービス

• サービス1

© 2026 ブランド

アニメーション

アニメーションは控えめで洗練されており、スクロールに応じた効果にはGSAPとScrollMagicを使用します。

フェード

スライド

拡大・縮小

パルス

キーフレームアニメーション

@keyframes heartbeat {
0%, 20%, 40%, 100% { transform: scale(1); }
10%, 30% { transform: scale(1.1); }
}

@keyframes pulse {
0%, 100% {
transform: scale(0.9);
box-shadow: 0 0 0 0 rgba(0,0,0, 0.1);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 50px rgba(0,0,0, 0);
}
}

</html_template> </output_format>

<validation_checklist> 納品前に、以下を確認してください： デザイントークン：

主要な色をすべて抽出（ブランドカラー、黒、白、6色以上のグレー）

フォントファミリーを特定し、Google Fontsからインポート

完全な文字サイズ体系（最低10段階：メガ、ヒーロー、ディスプレイ、h1〜h6、本文）

行の高さを記載（タイト、ややタイト、標準、ゆったり、非常にゆったり）

文字間隔を記載（非常に狭い、狭い、標準、広い）

完全なスペーシング体系（最低10段階）

コンテナーの幅を定義

角丸の体系（小、中、大、完全、ピル型）

シャドウを記載

トランジション（速い、標準、遅い）とイージング

</validation_checklist> Z-indexのスケール

コンポーネントとビジュアル：

サイトの実際のロゴと画像が最終的なHTMLに挿入されている（空のプレースホルダーはありません）

最低4種類のボタン（プライマリ、チップ、リンク、FAB）

実際に抽出した画像を使用した、コンテンツ入りの最低3種類のカード（プロジェクト、パートナー、ペイン）

フォーム要素（テキストフィールド、セレクトボックス、ファイルボックス、チェックボックス）

ナビゲーションの例（実際のロゴ、メニュー、CTAを含む固定ナビゲーション）

状態を持つバッジとチップ

アイコンの説明（インラインSVG）

メガタイポグラフィを使用した数値と統計

アニメーション付きの受賞歴リスト

フッターの例（4列）

アニメーションの実演（フェード、スライド、スケール、パルス）

構造：

:root内のCSS変数（全カテゴリー）

機能するサイドバーナビゲーション

スクロール進捗インジケーター

スムーズスクロールナビゲーション

スクロール時のアクティブナビゲーション

レスポンシブ対応（メディアクエリ：1024px、768px）

各セクションのコード例

ユーティリティクラス（マージン、色、テキスト揃え） </validation_checklist>

<required_tools>

Python 3.x — 前処理用

requests — HTTPリクエスト用のPythonライブラリ

beautifulsoup4 — HTML解析用のPythonライブラリ

write — HTMLファイルの作成用

場所：すべてのファイルは、このスキル内のtools/にあります。 </required_tools>

<usage_example> ユーザー入力： 「このサイトからデザインシステムを抽出してください：https://example.com」

実行フロー：

toolsフォルダーに移動して、依存関係をインストールします： cd .agents/skills/design-system-extractor/tools/ pip install -r requirements.txt

Pythonの前処理ツールを実行します： python design_system_extractor.py https://example.com

返されたJSONを分析します： { "url": "https://example.com", "fonts": ["Inter", "Roboto"], "css_variables": { "color-brand": "#0070F3", "color-black": "#000000" }, "colors": ["#0070F3", "#000000", "#FFFFFF"], "components": [ {"type": "button", "count": 5}, {"type": "card", "count": 12} ], "images": ["https://example.com/logo.png", "https://example.com/banner.jpg"] }

抽出したデータを使用してHTMLを生成し、タグをJSON内の実際の画像URLに置き換えます。

ファイルをdesign_pattern.htmlとして保存します。

主な要素（色、フォント、コンポーネント、生成したファイル）の概要を添えて納品します。 </usage_example>

<section_templates>

カラーカードのテンプレート

タイポグラフィ項目のテンプレート

スペーシング項目のテンプレート

アイコンカードのテンプレート

ボタンカードのテンプレート

.ds-btn-type {
  background: #XXX;
  color: #XXX;
  border-radius: 100px;
  height: 40px;
  font-size: XXpx;
  font-weight: 600;
}

プロジェクトカードのテンプレート

  <img src="[REAL IMAGE URL FROM SITE]" alt="プロジェクト">

パートナーカードテンプレート

  <img src="[REAL IMAGE URL FROM SITE]" alt="パートナー">

ペインカードテンプレート

フォーム要素テンプレート

数値統計テンプレート

受賞項目テンプレート

アニメーションカードテンプレート

コードブロックテンプレート

.class {
  property: value;
}

ユーティリティクラス .ds-mb-0 { margin-bottom: 0; } .ds-mb-8 { margin-bottom: var(--space-8); } .ds-mb-16 { margin-bottom: var(--space-16); } .ds-mb-24 { margin-bottom: var(--space-24); } .ds-mb-40 { margin-bottom: var(--space-40); }

.ds-text-brand { color: var(--color-brand); } .ds-text-gray { color: var(--color-gray-text); } .ds-text-center { text-align: center; }

.ds-bg-black { background-color: var(--color-black); } .ds-bg-white { background-color: var(--color-white); } .ds-bg-gray { background-color: var(--color-gray-light); } </section_templates>

<best_practices> 一貫性を保つため、常に CSS 変数を使用してください 生成される HTML に、サイトの実際の画像（ロゴ、バナー、カード写真）を必ず挿入し、サイトそのものの一部として機能する、オリジナルと同一のビジュアルカタログを作成してください 状態（ホバー、アクティブ、フォーカス、無効）を必ず記録してください 各セクションにコード例を必ず含めてください オリジナルのデザインを忠実に再現してください 説明的なトークン名（brand、gray-light など）を使用してください レスポンシブのブレークポイント（1024px、768px）を記録してください タイミング関数を使ったアニメーションとトランジションを含めてください レイアウト構造（サイドバー＋メインコンテンツ）に従ってください スクロール進捗インジケーターを実装してください スムーズスクロールとアクティブなナビゲーションを追加してください 余白と色にはユーティリティクラスを使用してください 少なくとも10段階のスペーシングを含めてください タイポグラフィの行の高さと文字間隔を記録してください 実際のメディアを使用したボタンを少なくとも4種類、カードを少なくとも3種類作成してください </best_practices>

<required_css_structure> 基本レイアウト .ds-layout { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }

.ds-sidebar { position: sticky; top: 0; height: 100vh; background-color: var(--color-black); color: var(--color-white); padding: var(--space-40) var(--space-24); overflow-y: auto; }

.ds-main { padding: var(--space-50) var(--space-75); max-width: var(--container-max); } ヘッダー .ds-header { margin-bottom: var(--space-100); padding-bottom: var(--space-50); border-bottom: 1px solid var(--color-gray-light); }

.ds-title { font-size: var(--text-mega); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); }

.ds-subtitle { font-size: var(--text-5xl); font-weight: var(--font-weight-medium); color: var(--color-gray-text); }

セクション .ds-section { margin-bottom: var(--space-100); }

.ds-section-title { font-size: var(--text-5xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-40); padding-bottom: var(--space-16); border-bottom: 3px solid var(--color-brand); display: inline-block; }

.ds-section-description { font-size: var(--text-lg); color: var(--color-gray-text); margin-bottom: var(--space-40); max-width: var(--container-text); }

スクロールインジケーター .ds-scroll-indicator { position: fixed; top: 0; left: 0; height: 3px; background-color: var(--color-brand); z-index: var(--z-fixed); width: 0%; transition: width 0.1s; } </required_css_structure>

<setup_and_metadata> Python の依存関係： 使用前にインストールしてください：

# Navigate to the tools folder
cd .agents/skills/design-system-extractor/tools/

# Install dependencies
pip install -r requirements.txt

または直接実行：

pip install requests beautifulsoup4

requirements.txt：

requests>=2.31.0
beautifulsoup4>=4.12.0

場所：このスキル内の tools/requirements.txt。

バージョン情報： バージョン：2.0.0（Python で最適化） 最終更新日：2026-03-19

v2.0 の改善点：

• Python による前処理 — コンテキストウィンドウのオーバーフローを防止
• HTML のサニタイズ — SVG、スクリプト、base64 を削除
• CSS の選択的抽出 — :root に焦点を当て、それ以外を無視
• Tailwind の検出 — ユーティリティクラスからトークンを推定
• ハルシネーション対策 — データの捏造を防ぐ厳格なガイドライン
• 出力の最適化 — 実際の画像を埋め込んだ HTML のみを生成

ファイル構成：

.agents/skills/design-system-extractor/
├── SKILL.md                        # This skill (you are here)
└── tools/
    ├── design_system_extractor.py  # Main Python script
    ├── extract_tokens.py           # Standalone CSS token extractor
    ├── requirements.txt            # Python dependencies
    └── README.md                   # Tools documentation

重要：Python スクリプトは必ず tools/ フォルダーから実行してください：

cd .agents/skills/design-system-extractor/tools/
python design_system_extractor.py <URL>

</setup_and_metadata>