extract-site

extract 任意のウェブサイトを完全なデザインシステムドキュメントに変換したり、デザイントークンの形式（DESIGN.md、tokens.json、variables.css、theme.css）を相互変換したりします。

WHAT

目的と背景

• 目的： 公開ウェブサイトからデザインシステム（色、タイポグラフィ、スペーシング、角丸、シャドウ、コンポーネント＋状態）を抽出し、ドキュメント／トークン（DESIGN.md、preview.html、tokens.json、variables.css、theme.css）にします。または、それらのトークン形式を相互変換します。
• 起動条件（使用するタイミング）： 起動方法は2種類あります — モード1 明示的な接頭辞 rico を付けたコマンド（rico DESIGN.md [url]、rico tokens [url]、rico 全部输出 [brand]、rico 把 DESIGN.md 转为 tokens…）、モード2 自然言語（「linear.app の DESIGN.md を作成して」「stripe.com からデザイントークンを抽出して」…）。ユースケース：既存のウェブサイトのデザインシステムドキュメントが必要 · 実装用にトークンを抽出したい · トークン形式を変換したい · あるブランドのデザインシステムを視覚的に参照できるページが必要。
• 対象外： ページ全体を実行可能なコードとして再構築すること（ピクセルパーフェクト）は行いません — これは /web-clone のモードB（再構築）の役割です。「モード3：フルクローン」を参照してください。ユーザーのウェブサイトにテーマを適用することも行いません（これは rico-ui-ux-themes の役割です。FAQ を参照してください）。ログインが必要なページからの抽出も行いません。

基本的な考え方

URL（または既存のトークンファイル）→ 視覚データの収集（スクリーンショット＋DevTools）→ 意味的なトークン（色 · タイポグラフィ · スペーシング · 角丸 · シャドウ）→ コンポーネント＋状態 → ブランドボイス＋Do's/Don'ts → themes/{brand-slug}/ 内の出力ファイル。形式変換では、ソースファイルを解析して出力ファイルを生成するため、データ収集の手順は省略します。

入力と出力の仕様

	フィールド	必須？	意味
In	有効な公開URL	はい（形式変換を除く）	extract DESIGN.md <url>
In	ソースのトークンファイル	形式変換時は必須	例：既存の DESIGN.md → tokens.json
In	フラグ --theme=light|dark、--depth=basic|full、--components-only、--tokens-only、--mobile-first、--desktop-first	いいえ	抽出範囲を調整します
Out	themes/{brand-slug}/DESIGN.md ＋ preview.html	デフォルト	スタイルリファレンス＋自己完結型のプレビュー
Out	tokens.json / variables.css / theme.css	コマンドによる	DTCG · CSS カスタムプロパティ · Tailwind v4 @theme
Out	出力レポート llmwiki/wiki/sources/draft/DDMMYY-<ten>.md	はい（成果物が0件の場合を除く）	Delivery セクション

ルールと機能

• RULE-01 (MUST)：トークンのカテゴリが不足している場合は、該当セクションを省略し、不足していることを記載します（値を捏造しないでください）。
• RULE-02 (MUST)：複数のテーマ（ライト／ダーク）がある場合は、どのテーマをドキュメント化するかユーザーに確認します。別途 dark/ サブディレクトリを作成する方法も提示します。
• RULE-03 (MUST)：認証が必要なページの場合は、公開されているマーケティングページを対象にします。
• RULE-04 (MUST)：実行可能なコードとしてフルクローンする場合は /web-clone のモードBに引き継ぎます。このスキルでは行いません（正規の方法を一本化し、差異を防ぐため）。
• RULE-05 (SHOULD)：Do's / Don'ts は各7～8項目とし、具体的なトークンを参照します。ブランドボイスはデザイン批評の形式で5～8文にします。
• 機能：公開ウェブページを読み取ります（スクリーンショットの撮影＋CSS／計算済みスタイルの読み取り）。ファイルを themes/{brand-slug}/ と wiki のドラフトに書き込みます。

対応できない場合

• URLが無効または非公開 → URLの確認を求めます。認証が必要なページ → 公開されているマーケティングページを対象に部分的に対応します。
• サイトにライト／ダークの両方がある → 抽出前にテーマを選ぶよう確認します。
• トークンのグループを抽出できない → 部分対応：該当項目を省略し、不足していることを明記します。値を捏造しません。
• コードとしての再構築を求められた場合 → 対象外です。/web-clone に引き継ぎます。

HOW

メインワークフロー

ステップ	種類	入力	アクション	出力／終了	失敗時／次の処理
W01	判定	ユーザーの依頼	モード（rico コマンド／自然言語）＋出力（Workflow 1–4）＋brand-slugを特定します	ワークフローの種類	コードの再構築 → /web-clone；テーマが複数ある → 確認
W02	処理	URL	ビジュアルデータを収集します：ヒーロー、ナビゲーション、CTA、カード、タイポグラフィ、フッターのスクリーンショット；DevTools の CSS 変数、@font-face、計算済みスタイル	生データ	SPA／CSS が圧縮されている → Edge Cases
W03	判定	生データ	デザイントークン（色、タイポグラフィ、スペーシング、角丸、シャドウ）を抽出します	トークンセット	グループが不足 → ギャップを記録
W04	判定	ページ＋トークン	すべての状態を含むコンポーネント、ブランドボイス、Do's/Don'ts を文書化します	DESIGN.md の内容	—
W05	処理	トークン	ワークフローに応じたファイルを themes/{brand-slug}/ に生成します	出力ファイル	—
W06	処理	結果	出力レポートのドラフト＋インデックス＋ログ（Delivery 項目）を作成します	ドラフト	アーティファクトが 0 件 → スキップ

各ステップの詳細（W01–W06 の信頼できる情報源）：以下の「Workflow 1–4」と、関連する参照項目を確認し、以前のバージョンからそのままコピーしてください。

分岐

ID	種類	条件	動作	スキップ／失敗	合流先
B01	ユーザー任意	rico tokens / rico variables / rico theme.css / rico preview	Workflow 2：1 つの形式のみ生成します	—	W06
B02	ユーザー任意	rico 全部输出 [brand]	Workflow 3：5 つのファイルすべてを生成します	—	W06
B03	条件付き必須	入力が既存のトークンファイル（rico 把 DESIGN.md 转为 tokens）	Workflow 4：ソースファイルを解析 → 出力形式を生成し、W02 をスキップします	ソースファイルがない → 確認	W05
B04	条件付き必須	サイトが light／dark の複数テーマに対応	テーマを尋ねます。dark が明確に異なる場合 → themes/{brand}-dark/ を提案します	ユーザーがテーマを 1 つ選択 → そのテーマのみ	W03
B05	復旧	SPA／クライアント側でレンダリング、または CSS が圧縮されている	view-source ＋ network タブ／DevTools の計算済みスタイル	それでも見つからない → ギャップを記録	W03

検証と停止

目視で確認します：トークンに実際に観察した根拠がある（捏造していない）、preview.html を file:// 経由で開ける、tokens.json が $description を含む正しい DTCG 形式である。選択したワークフローのすべてのファイルが生成されるか、ギャップが明確に記録された時点で停止します。

例

• 成功例： rico DESIGN.md https://linear.app → themes/linear/DESIGN.md ＋ themes/linear/preview.html。Linear のページが明確に異なる dark テーマの場合は、先にテーマを尋ね、themes/linear-dark/ を提案します。
• 境界／失敗例： 「stripe.com を Next.js で完全に同じようにクローンして、実行できるようにする」→ トークンは抽出せず、/web-clone Mode B に切り替えます。サイトにシャドウが見当たらない場合は、DESIGN.md の Shadows 項目を省略してギャップを記録し、値を捏造しません。

参照 — 入力仕様

Web サイトの抽出

extract DESIGN.md

必須：

• 有効な公開 URL

任意のフラグ：

• --theme=light|dark
• --depth=basic|full
• --components-only
• --tokens-only
• --mobile-first
• --desktop-first

参照 — このスキルでできること

主な機能

1. Web サイトからデザインシステムを作成 - 任意の Web サイト URL を入力すると、そのデザイントークン、色、タイポグラフィ、スペーシング、シャドウ、コンポーネントのスタイルを抽出します
2. 複数の出力形式 - DESIGN.md、preview.html、tokens.json（DTCG）、variables.css、theme.css（Tailwind v4）を生成します
3. 形式の変換 - サポートされている任意の形式間で変換します（例：DESIGN.md から tokens.json、variables.css から DESIGN.md）
4. ビジュアルプレビュー - デザインシステム全体を紹介する、自己完結型の preview.html ページを生成します

ユースケース

• 既存の Web サイトのデザインシステム文書が必要な場合
• 実装用のデザイントークンを抽出したい場合
• デザイントークンの形式を変換する必要がある場合
• ブランドのデザインシステムを確認するためのビジュアルリファレンスページが必要な場合

---

リファレンス — トリガー方法

このスキルは、2 つのトリガーモードに対応しています。

モード 1：明示的なコマンド（rico プレフィックス）

コマンド	出力
rico DESIGN.md [url]	DESIGN.md + preview.html（デフォルト）
rico preview [url]	preview.html のみ
rico tokens [url]	tokens.json のみ
rico variables [url]	variables.css のみ
rico theme.css [url]	theme.css のみ
rico 全部输出 [brand]	5 ファイルすべて
rico 把 DESIGN.md 转为 tokens	フォーマット変換

モード 2：自然言語

Create a DESIGN.md for linear.app
Extract design tokens from stripe.com
Generate a preview for github.com
Analyze GitHub's design system

---

リファレンス — モード 3：フルクローン — 動作するコードとして再構築

デフォルトでは、extract-site は デザインシステム（トークン → DESIGN.md/css/json）を生成します。ユーザーがページ全体を動作するコードとして再構築したい場合（ピクセル単位で忠実に再現。たとえば Next.js + shadcn）、これはもはや extract-site の役割ではありません。**/web-clone モード B（再構築）**に切り替えてください。このスキルは、recon → コンポーネント仕様 → 並列ビルダー → visual-diff QA のパイプラインの唯一の正規版です（MIT ライセンスの ai-website-cloner-template から抽出）。2026-07-23 より前は、このパイプラインは両方のスキルに重複して記載されていました。一方を変更したときにもう一方の更新を忘れて内容がずれるのを防ぐため、web-clone に統合しました。

---

リファレンス — 出力構成

生成されたファイルはすべて themes/{brand-slug}/ ディレクトリに保存されます。

themes/{brand-slug}/
├── DESIGN.md         # Full style reference (default output)
├── preview.html      # Visual design system preview (default output)
├── tokens.json       # DTCG format design tokens
├── variables.css     # CSS custom properties
└── theme.css         # Tailwind v4 @theme

---

リファレンス — ワークフロー

ワークフロー 1：DESIGN.md + プレビューを生成（デフォルト）

User: rico DESIGN.md https://linear.app
    ↓
Step 1: Gather visual data
  • Screenshot hero, nav, CTAs, cards, typography, footer
  • Inspect DevTools for CSS variables, @font-face, computed styles
    ↓
Step 2: Extract design tokens
  • Colors → semantic tokens (canvas, surface-1, ink, accent-blue, etc.)
  • Typography → font families, sizes, weights, line-height, letter-spacing
  • Spacing → base unit detection (4px or 5px grid)
  • Radius → xs to full scale
  • Shadows → full CSS syntax
    ↓
Step 3: Document components with all states
  • Navigation, Buttons, Inputs, Cards, Footer
  • Include hover, focus, active, selected states
    ↓
Step 4: Write brand voice (5-8 sentences as design critique)
    ↓
Step 5: Write Do's / Don'ts (7-8 each, referencing specific tokens)
    ↓
Step 6: Generate DESIGN.md + preview.html

ワークフロー 2：単一形式で出力

User: rico tokens https://stripe.com
    ↓
Generate tokens.json only (DTCG format)

ワークフロー 3：すべて出力（5 ファイルすべて）

User: rico 全部输出 github
    ↓
Generate all 5 files:
  • DESIGN.md, preview.html, tokens.json, variables.css, theme.css

ワークフロー 4：フォーマット変換

User: rico 把 DESIGN.md 转为 tokens
    ↓
Parse existing DESIGN.md → generate tokens.json

---

リファレンス — 出力形式の詳細

DESIGN.md

以下を含む包括的な Markdown ドキュメントです。

• ブランドのトーンとデザイン哲学
• セマンティックなトークン名を使ったカラーシステム
• font-feature-settings を含むタイポグラフィのスケール
• 余白のシステム
• 角丸のスケール
• シャドウの仕様
• コンポーネントのドキュメント（すべての状態を含む）
• 具体的なトークンを参照する Do's and Don'ts

preview.html

単一ファイルで完結する、視覚的なデザインシステムのリファレンスページです。

• 上から下へ直線的に並ぶレイアウト（ベンタグリッドなし）
• セクション：ヒーロー → 色 → グラデーション → タイポグラフィ → 余白と形状 → シャドウ → 奥行きとサーフェス → コンポーネント → Do's and Don'ts
• すべての仕様ファイルへのダウンロードリンク
• セクションアンカー付きの固定ナビゲーション
• スクロールをトリガーとする表示アニメーション
• レスポンシブ（モバイルファースト）
• file:// プロトコルで動作（Google Fonts 以外の外部依存なし）

tokens.json

DTCG（Design Tokens Community Group）標準形式です。

• 各トークンに、用途を説明する $description が含まれます
• カテゴリ別にグループ化されています：色、タイポグラフィ、余白、角丸、シャドウ
• style dictionary および token transformers と互換性があります

variables.css

CSS カスタムプロパティを以下のグループに分けています。

• 色、フォントファミリー、文字サイズのスケール、ウェイト
• 余白、レイアウト、角丸、シャドウ、サーフェス

theme.css

Tailwind CSS v4 に直接統合できる、Tailwind v4 の @theme 形式です。

---

リファレンス — 使用例

例 1：ウェブサイトからデザインシステムを生成

User: rico DESIGN.md https://linear.app

AI: [Extracts design tokens from Linear's website]
    [Generates themes/linear/DESIGN.md + themes/linear/preview.html]

    Generated 2 files:
    • themes/linear/DESIGN.md - Full style reference
    • themes/linear/preview.html - Visual preview

例 2：トークンのみを抽出

User: rico tokens https://github.com

AI: [Extracts tokens from GitHub]
    [Generates themes/github/tokens.json]

    Generated DTCG tokens with 87 tokens across 6 categories.

例 3：フォーマット間の変換

User: rico 把 DESIGN.md 转为 tokens

AI: [Parses existing DESIGN.md]
    [Converts markdown tables to DTCG format]

    Generated themes/github/tokens.json

例 4：すべて出力

User: rico 全部输出 github

AI: [Generates all 5 files in themes/github/]
    • DESIGN.md
    • preview.html
    • tokens.json
    • variables.css
    • theme.css

---

リファレンス — エッジケース

シナリオ	対応
SPA／クライアント側でレンダリング	view-source とネットワークタブを使って CSS ファイルを確認します
圧縮された CSS	DevTools の計算済みスタイルパネルを使います
複数テーマ（ライト／ダーク）	どのテーマをドキュメント化するかユーザーに確認します。別の dark/ サブディレクトリを用意することも提案します
認証が必要なページ	公開されているマーケティングページを対象にします
トークンカテゴリが不足	該当セクションを省略し、不足していることを記載します（値を捏造しないでください）

---

リファレンス — ファイル構成

skills/
└── rico-design-md/
    ├── SKILL.md                          # Core skill definition
    └── references/
        ├── DESIGN-TEMPLATE.md            # Template for new DESIGN.md files
        └── themes-github/                # Reference example (GitHub)
            ├── DESIGN.md                 # Complete DESIGN.md example
            ├── github-preview.html       # Visual preview example
            ├── tokens.json               # DTCG format reference
            ├── variables.css             # CSS custom properties reference
            └── theme.css                 # Tailwind v4 @theme reference

---

リファレンス — FAQ

rico-ui-ux-themes との違いは何ですか？

• rico-ui-ux-themes：既存のデザインテーマを適用して、ウェブサイトのビジュアルデザインを最適化します
• rico-design-md：ウェブサイトからデザインシステムを抽出し、ドキュメント／トークンを生成します

生成されたトークンをプロジェクトで使用できますか？

はい。すべての出力形式をそのまま本番環境で使用できます。

• tokens.json は style dictionary および token transformers で動作します
• variables.css は直接インポートできます
• theme.css は Tailwind v4 と統合できます

ウェブサイトにライトモードとダークモードの両方がある場合はどうなりますか？

このスキルでは、どちらのモードを記録するかを確認します。ダークモードが視覚的に異なる場合（Linear、Supabase など）は、別の themes/{brand}-dark/ サブディレクトリを生成することを提案します。

---

最終更新日：2026-05-13

メンテナー：[@ricouii]

ブログ：rico'blog

ステータス：開発中

---

納品 — 出力レポート

スキルの主なタスクがすべて完了したら、wiki に提案ドラフトを作成します。

手順

1. ファイル名を作成します：

• 形式：DDMMYY-<ten>.md
• DDMMYY = 今日の日付（例：2026 年 6 月 2 日の場合は 020626）
• <ten> = 実施内容を要約する、kebab-case の 2～4 語（例：landing-page-coteccons、brand-kit-fintech、ingest-auth-spec）

2. llmwiki/wiki/sources/draft/DDMMYY-<ten>.md を作成します：

---
type: draft
title: "DDMMYY-<ten>"
status: proposed
tags: [<skill-name>, output-report]
timestamp: YYYY-MM-DD
---

# DDMMYY-<ten>
**Type:** draft
**Status:** proposed
**Tags:** <skill-name>, output-report
**Proposed:** YYYY-MM-DD

## What
<One sentence — what this skill invocation produced or decided>

## Output
<Key artefacts, files created/modified, or decisions made>

## Files
| File | Action |
|------|--------|
| `path/to/file` | created / modified |

## Notes
- Invoked via: `/<skill-name>` skill

## Origin
- **Draft:** `wiki/sources/draft/DDMMYY-<ten>.md`
- **Commit:** _(filled by verify-before-commit)_
- **Date promoted:** _(filled by verify-before-commit)_

3. wiki のインデックスとログを更新します：

• llmwiki/wiki/index.md — 次の行を追加します：| [DDMMYY-<ten>](sources/draft/DDMMYY-<ten>.md) | draft | YYYY-MM-DD |
• llmwiki/wiki/log.md — 次の行を追加します：## YYYY-MM-DD — <skill-name> — <ten>

スキルによる成果物も決定事項もない場合に限り、スキップします（例：/caveman-stats のような純粋な表示モード）。