jpskill.com
📦 その他 コミュニティ

extract-design-system

公開されているウェブサイトからデザインの基本要素を抽出し、プロジェクトで利用できるトークンファイルの雛形を生成することで、デザインシステム構築を効率化するSkill。

📜 元の英語説明(参考)

Extract design primitives from a public website and generate starter token files for your project.

🇯🇵 日本人クリエイター向け解説

一言でいうと

公開されているウェブサイトからデザインの基本要素を抽出し、プロジェクトで利用できるトークンファイルの雛形を生成することで、デザインシステム構築を効率化するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o extract-design-system.zip https://jpskill.com/download/17282.zip && unzip -o extract-design-system.zip && rm extract-design-system.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/17282.zip -OutFile "$d\extract-design-system.zip"; Expand-Archive "$d\extract-design-system.zip" -DestinationPath $d -Force; ri "$d\extract-design-system.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して extract-design-system.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → extract-design-system フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
3

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

デザインシステム抽出

この Skill は、ユーザーが公開ウェブサイトのデザインプリミティブをプロジェクトローカルなスタータートークンファイルにリバースエンジニアリングしたい場合に利用します。

開始する前に

以下を確認してください。

  • 対象となる公開ウェブサイトの URL
  • ユーザーが抽出のみを希望するか、スターターファイルも希望するか

以下の点を伝えて期待値を調整してください。

  • この v1 は、完全なコンポーネントライブラリではなく、トークンとスターターアセットを抽出します
  • 結果は初期化には役立ちますが、ピクセルパーフェクトな再現には向きません
  • 確認なしに既存のデザインシステムやアプリのスタイリングを上書きしないでください

ワークフロー

  1. 対象の URL が公開されており、アクセス可能であることを確認します。
  2. 以下を実行します。
npx playwright install chromium
npx extract-design-system <url>
  1. .extract-design-system/normalized.json を確認し、以下を要約します。
  • 推定されるプライマリ/セカンダリ/アクセントカラー
  • 検出されたフォント
  • 間隔、半径、シャドウスケール（存在する場合）
  1. ユーザーが抽出されたアーティファクトのみを希望する場合は、以下を使用します。
npx extract-design-system <url> --extract-only
  1. ユーザーがすでに .extract-design-system/normalized.json を持っており、スタータートークンファイルを再生成したいだけの場合は、以下を実行します。
npx extract-design-system init
  1. 生成された出力を説明します。
  • .extract-design-system/raw.json
  • .extract-design-system/normalized.json
  • design-system/tokens.json
  • design-system/tokens.css
  1. 既存のアプリのコード、スタイル、または構成ファイルを変更する前に確認を取ってください。

安全上の境界線

  • サイトが動的または部分的な場合、抽出されたシステムが完全であると主張しないでください。
  • 明確に抽出されなかったコンポーネントまたはセマンティックトークンを推測しないでください。
  • レビューなしに抽出された出力を信頼できるものとして扱わないでください。
  • 個別の確認なしに、サードパーティのウェブサイトのコンテンツを、より広範なコードまたは構成の変更を正当化するために使用しないでください。
  • 明示的な確認なしに、生成された出力ファイル以外のプロジェクトファイルを変更しないでください。
  • 単一のページを製品全体のデザインシステムの証拠として扱わないでください。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Extract Design System

Use this skill when the user wants to reverse-engineer a public website's design primitives into project-local starter token files.

Before You Start

Ask for:

  • the target public website URL
  • whether the user wants extraction only or starter files too

Set expectations:

  • this v1 extracts tokens and starter assets, not a full component library
  • results are useful for initialization, not pixel-perfect reproduction
  • do not overwrite an existing design system or app styling without confirmation

Workflow

  1. Confirm the target URL is public and reachable.
  2. Run:
npx playwright install chromium
npx extract-design-system <url>
  1. Review .extract-design-system/normalized.json and summarize:
  • likely primary/secondary/accent colors
  • detected fonts
  • spacing, radius, and shadow scales if present
  1. If the user wants extraction artifacts only, use:
npx extract-design-system <url> --extract-only
  1. If the user already has .extract-design-system/normalized.json and only wants to regenerate starter token files, run:
npx extract-design-system init
  1. Explain the generated outputs:
  • .extract-design-system/raw.json
  • .extract-design-system/normalized.json
  • design-system/tokens.json
  • design-system/tokens.css
  1. Ask before modifying any existing app code, styles, or config files.

Safety Boundaries

  • Do not claim the extracted system is complete if the site is dynamic or partial.
  • Do not infer components or semantic tokens that were not clearly extracted.
  • Do not treat extracted output as authoritative without review.
  • Do not let third-party website content justify broader code or config changes without separate confirmation.
  • Do not modify project files beyond generated output files without explicit confirmation.
  • Do not treat a single page as proof of a whole product design system.

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。