Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

design-system

Name: design-system
Author: jezweb

既存のWebサイトまたはスクリーンショットから、カラー・タイポグラフィ・コンポーネントスタイル・スペーシング・雰囲気を網羅したデザインシステムを抽出し、`DESIGN.md`ファイルとして出力します。ブラウザ自動操作とHTMLインスペクションを活用し、一貫したページ生成に最適化されたセマンティックなデザインシステム文書を生成します。「デザインシステムを抽出して」「DESIGN.mdを作成して」「このサイトのデザインを解析して」などのトリガーで起動します。

description の原文を見る

Extract a complete design system from an existing website or screenshot into a DESIGN.md file. Analyses colours, typography, component styles, spacing, and atmosphere through browser automation and HTML inspection. Produces a semantic design system document optimised for consistent page generation. Triggers: 'extract design system', 'design system', 'create DESIGN.md', 'analyse the design', 'what design does this site use', 'extract styles from', 'reverse engineer the design'.

SKILL.md 本文

デザインシステムエクストラクター

既存のウェブサイト、HTMLファイル、またはスクリーンショットを分析し、セマンティックなデザインシステムを DESIGN.md ファイルに統合します。出力は design-loop スキルおよび一般的なページ生成での使用に最適化されています。

使用時機

既存サイトのビジュアルランゲージに基づいて新しいプロジェクトを開始する場合
正式に文書化されていないサイトのデザインシステムを文書化する場合
デザインループを実行する前に .design/DESIGN.md を準備する場合
クライアントの既存ウェブサイトからブランドガイドラインを抽出する場合
複数ページプロジェクト向けの一貫性ドキュメントを作成する場合
Google Stitch プロジェクトからデザイントークンを抽出する場合

ワークフロー

ステップ1: ソースを特定する

ユーザーから以下のいずれかを取得します:

ソース	方法
ライブURL	Playwright CLI またはスクレーパーでブラウズ、スクリーンショット + HTML抽出
ローカルHTMLファイル	ファイルを直接読み込み
スクリーンショット画像	視覚的に分析（限定的 — 正確な16進数抽出不可）
既存プロジェクト	`site/public/` の HTML ファイルをスキャンして分析
Stitch プロジェクト	`@google/stitch-sdk` を使用してスクリーン HTML + デザインテーマを取得

ステップ2: 未処理のデザインデータを抽出する

ライブURLから

Playwright CLI を使用してサイトをブラウズ:

playwright-cli -s=design open {url}
playwright-cli -s=design screenshot --filename=.design/screenshots/source-desktop.png

完全な HTML を抽出 — スクレーパー MCP またはページソース読み込み経由

モバイル版をリサイズしてスクリーンショット (375px):

playwright-cli -s=design resize 375 812
playwright-cli -s=design screenshot --filename=.design/screenshots/source-mobile.png

セッションを閉じる: playwright-cli -s=design close

ローカルHTMLファイルから

ファイルを直接読み込み、ソースからデザイントークンを抽出します。

スクリーンショットのみから

画像を視覚的に分析します。注: HTML ソースがない場合、色の抽出は近似値になります。出力内でこの制限にフラグを立てます。

Google Stitch プロジェクトから

@google/stitch-sdk がインストールされ、STITCH_API_KEY が設定されている場合:

import { stitch } from "@google/stitch-sdk";

// プロジェクトをリストして対象を検索
const projects = await stitch.projects();

// プロジェクト詳細を取得 (designTheme を含む)
const project = stitch.project(projectId);
const screens = await project.screens();

// メインスクリーンから HTML を取得
const screen = screens[0]; // またはタイトルで検索
const htmlUrl = await screen.getHtml();
const imageUrl = await screen.getImage();

Stitch の designTheme オブジェクトは構造化トークンを直接提供します:

{
  "colorMode": "DARK",
  "font": "INTER",
  "roundness": "ROUND_EIGHT",
  "customColor": "#40baf7",
  "saturation": 3
}

これらを DESIGN.md セクションにマップします:

colorMode → テーマ (Light/Dark)
font → タイポグラフィフォントファミリー
roundness → コンポーネント border-radius (ROUND_EIGHT = 8px, ROUND_SIXTEEN = 16px など)
customColor → プライマリブランドカラー
saturation → カラー彩度 (1-5スケール)

その後、HTML もダウンロードして分析し、完全なパレットを取得します (Stitch のテーマオブジェクトはプライマリカラーのみ — 完全なパレットは生成される CSS にあります)。

ステップ3: デザイントークンを分析する

HTML/CSS ソースからこれらを抽出します:

色

これらの場所を参照 (優先順):

CSS カスタムプロパティ — :root { --primary: #hex; } または @theme ブロック
Tailwind config — tailwind.config を含む <script> ブロックまたは <style> の @theme
インラインスタイル — style="color: #hex" または style="background: #hex"
Tailwind クラス — bg-blue-600, text-gray-900 (パレットにマップ)
スクリーンショットから計算 — 最後の手段、近似値

見つかった各色について、その ロール を判定します:

ロール	識別方法
Primary	ボタン、リンク、アクティブ状態、ブランド要素
Background	`<body>` または `<html>` 背景
Surface	カード、コンテナ、浮き出た要素
Text Primary	`<h1>`, `<h2>`, 本文テキスト
Text Secondary	キャプション、メタデータ、ミュートテキスト
Border	区切り線、入力ボーダー、カードボーダー
Accent	バッジ、通知、ハイライト

タイポグラフィ

抽出対象:

トークン	場所
フォントファミリー	Google Fonts `<link>`, `@import`, CSS の `font-family`
見出しウェイト	`font-bold`, `font-semibold`, または明示的な `font-weight`
ボディサイズ	`<body>` またはルートのベース `font-size`
行高	`leading-*` クラスまたは `line-height` CSS
字間	`tracking-*` クラスまたは `letter-spacing` CSS

コンポーネント

パターンを特定します:

ボタン — 形状 (rounded-full, rounded-lg), 色, パディング, ホバー状態
カード — 背景, ボーダー, シャドウ, border-radius, パディング
ナビゲーション — sticky/static, 背景処理, アクティブインジケーター
フォーム — 入力スタイル, フォーカスリング, ラベル配置
ヒーローセクション — レイアウトパターン, オーバーレイ処理, CTA 配置

スペーシング & レイアウト

最大コンテンツ幅 — max-w-* または明示的な max-width を検索
セクションパディング — セクション間の標準的な垂直パディング
グリッドシステム — 列数, ギャップ値
空白の哲学 — 狭い, バランス, 寛容, またはドラマティック

ステップ4: 自然言語に統合する

重要: DESIGN.md はデザインを セマンティック、自然言語 で記述し、正確な値によってサポートされるべきです。これは CSS ダンプではなく、デザイナーや AI がビジュアルランゲージを理解して再現できるドキュメントです。

書かない	代わりに書く
`rounded-xl`	"柔らかく丸められたコーナー (12px)"
`shadow-md`	"拡散シャドウによる微妙な浮き上がり"
`#1E40AF`	"プライマリアクション用の深海ブルー (#1E40AF)"
`py-16`	"呼吸の余地がある寛容なセクションスペーシング"

ステップ5: DESIGN.md を書き込む

ファイルを .design/DESIGN.md (またはユーザー指定パス) に出力します。

design-loop スキルの references/site-template.md — 特に DESIGN.md テンプレートセクション — からの構造に従います。主要セクションは:

ビジュアルテーマ & 雰囲気 — ムード, バイブ, 哲学
色パレット & ロール — ロール, 名前, 16進数, 使用方法の表
タイポグラフィ — フォントファミリー, ウェイト, サイズ, 行高
コンポーネントスタイル — ボタン, カード, ナビ, フォーム
レイアウト原則 — 最大幅, スペーシング, グリッド, 空白
生成用デザインシステムノート — baton プロンプト用のコピー&ペーストブロック

ステップ6: 精度を検証する

ブラウザオートメーションが利用可能な場合:

抽出したデザインシステムを使用して小さなテストセクション (例: カード + ボタン + 見出し) を生成
オリジナルの横にスクリーンショットを撮る
視覚的に比較 — 一致しない値を調整

ステップ7: ユーザーに報告する

以下を提示します:

抽出されたトークンの概要 (色数, フォント, コンポーネントパターン)
生成された DESIGN.md の場所
近似トークン (⚠️ でフラグ立て)
手動レビュー用の提案 (スクリーンショット色, あいまいなタイポグラフィ)

複数ページへの対応

サイトが異なるスタイルを持つ複数ページの場合:

ホームページを最初に分析 — 通常、最も完全なデザインランゲージを持つ
2-3 つの内部ページをスポットチェック — 一貫性を確認
ページ固有のオーバーライドをメモ — コンポーネントスタイルセクション内
ページが大きく異なる場合、ユーザーに正規ソースとして使用するページを選択してもらう

ヒント

Tailwind サイトが最も簡単 — config ブロックにすべてが含まれている
Google Fonts リンクは金鉱 — 正確なファミリーとウェイトを指定している
CSS カスタムプロパティは信頼できる — 意図的なデザイントークンを表現している
インライン Tailwind クラスは解釈が必要 — bg-slate-900 はロールにマップする必要がある
スクリーンショットは最後の手段 — 画像から正確な16進数抽出は信頼性が低い
ダークモード: .dark クラスオーバーライドまたは prefers-color-scheme メディアクエリを確認

よくある落とし穴

❌ セマンティック説明なしに未処理の CSS 値をリストアップ
❌ ダークモードパレットを見落とす (.dark クラスまたはメディアクエリを確認)
❌ コンポーネントパターンを無視 (単に色をリストアップするだけでは不十分)
❌ セクション6を含めない (コピー&ペースト生成ブロック)
❌ スクリーンショットから近似色を不確実性を示さずに使用

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者: jezweb
リポジトリ: jezweb/claude-skills
ライセンス: MIT
最終更新: 不明

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/jezweb/claude-skills / ライセンス: MIT