design-system

Name: design-system
Author: jezweb

github.com/jezwebデザイン・UI1.1k1.1k 回インストール3 週間前に更新

design-system について

design-systemは、既存のWebサイト、HTML、スクリーンショット、Google Stitchプロジェクトからデザインシステムを抽出し、DESIGN.mdを作成するスキルです。視覚情報をデザイントークンと意味的な説明にまとめ、ページ生成やデザインのワークフローに活用できます。

主な機能

01Webサイト・HTML・画像・Stitchプロジェクトの分析
02色・タイポグラフィ・コンポーネント・レイアウトの抽出
03デザイントークンの意味的な説明への整理
04.design/DESIGN.mdの生成
05複数ページの差異とページ固有のスタイルを記録
06テスト用セクションと画像による抽出結果の確認

活用シーン

01既存サイトのビジュアルを基に新規プロジェクトを開始
02文書化されていないサイトのデザイン仕様を作成
03design-loop実行前にDESIGN.mdを準備
04クライアントサイトからブランドガイドラインを抽出
05複数ページのビジュアル仕様を統一

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/jezweb/claude-skills --skill design-system

インストール後、Claude Code で/design-systemを入力して読み込まれたか確認します。

詳細

デザインシステムの抽出

既存のウェブサイト、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";

// List projects to find the target
const projects = await stitch.projects();

// Get project details (includes designTheme)
const project = stitch.project(projectId);
const screens = await project.screens();

// Get HTML from the main screen
const screen = screens[0]; // or find by title
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 → テーマ（ライト／ダーク）
font → タイポグラフィのフォントファミリー
roundness → コンポーネントの角丸（ROUND_EIGHT = 8px、ROUND_SIXTEEN = 16px など）
customColor → ブランドの主要カラー
saturation → 色の鮮やかさ（1〜5 のスケール）

次に、完全なカラーパレットを取得するため、HTML もダウンロードして分析します（Stitch のテーマオブジェクトに含まれるのは主要カラーのみで、完全なカラーパレットは生成された CSS に含まれています）。

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

HTML／CSS ソースから、次の項目を抽出します。

色

次の場所を優先順位の高い順に確認します。

CSS カスタムプロパティ — :root { --primary: #hex; } または @theme ブロック
Tailwind の設定 — <script> ブロック内の tailwind.config、または <style> 内の @theme
インラインスタイル — style="color: #hex" または style="background: #hex"
Tailwind クラス — bg-blue-600、text-gray-900（パレットに対応付ける）
スクリーンショットから推定 — 最終手段。概算になります

見つかった各色について、役割を特定します。

役割	特定方法
プライマリー	ボタン、リンク、アクティブ状態、ブランド要素
背景	`<body>` または `<html>` の背景
サーフェス	カード、コンテナー、浮き上がった要素
プライマリーテキスト	`<h1>`、`<h2>`、本文のメインテキスト
セカンダリーテキスト	キャプション、メタデータ、控えめなテキスト
ボーダー	区切り線、入力欄の枠線、カードの枠線
アクセント	バッジ、通知、ハイライト

タイポグラフィ

次の項目を抽出します。

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

コンポーネント

次のパターンを特定します。

ボタン — 形状（rounded-full、rounded-lg）、色、パディング、ホバー状態
カード — 背景、枠線、シャドウ、角丸、パディング
ナビゲーション — 固定／通常配置、背景の処理、アクティブ状態の表示
フォーム — 入力フィールドのスタイル、フォーカスリング、ラベルの配置
ヒーローセクション — レイアウトパターン、オーバーレイの処理、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 Template セクションに従います。主要なセクションは次のとおりです。

ビジュアルテーマと雰囲気 — ムード、雰囲気、設計思想
カラーパレットと役割 — 役割、名前、HEX、用途を含む表
タイポグラフィ — フォントファミリー、ウェイト、サイズ、行の高さ
コンポーネントのスタイル — ボタン、カード、ナビゲーション、フォーム
レイアウトの原則 — 最大幅、余白、グリッド、ホワイトスペース
生成時のデザインシステムに関するメモ — バトン用プロンプトにコピー＆ペーストするブロック

ステップ 6：正確性を確認する

ブラウザー自動化が利用できる場合：

抽出したデザインシステムを使って、小さなテストセクション（例：カード＋ボタン＋見出し）を生成します
元のデザインと並べてスクリーンショットを撮ります
見た目を比較し、一致しない値を調整します

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

次の内容を提示します。

抽出したトークンの概要（色の数、フォント、コンポーネントのパターン）
生成した DESIGN.md の場所
概算値だったトークン（⚠️ を付けて明示）
手動レビューの提案（スクリーンショットから抽出した色、曖昧なタイポグラフィ）

複数ページへの対応

サイトに異なるスタイルのページが複数ある場合：

まずホームページを分析します — 通常、最も包括的なデザイン言語が使われています
内部ページを 2～3 ページ抜き取り、デザインの一貫性を確認します
ページごとに異なる上書き設定があれば、コンポーネントのスタイルセクションに記載します
ページ間の違いが大きい場合は、基準とするページをユーザーに確認します

ヒント

Tailwind のサイトは最も簡単です — 設定ブロックに必要な情報がすべてあります
Google Fonts のリンクは貴重です — 正確なフォントファミリーとウェイトが指定されています
CSS カスタムプロパティは信頼できます — 意図的に定義されたデザイントークンを表しています
Tailwind のインラインクラスには解釈が必要です — bg-slate-900 を適切な役割に割り当てる必要があります
スクリーンショットは最終手段です — 画像から正確な HEX 値を抽出するのは困難です
ダークモード：.dark クラスによる上書きや prefers-color-scheme メディアクエリを確認します

よくある落とし穴

❌ 意味の説明なしに生の CSS 値を列挙する
❌ ダークモードのパレットを見落とす（.dark クラスやメディアクエリを確認）
❌ コンポーネントのパターンを無視する（色を列挙するだけでは不十分）
❌ セクション 6（コピー＆ペースト用の生成ブロック）を含めない
❌ スクリーンショットから概算した色について、不確実性を明示しない

Markdown 対応

ログインしてコメント

基本情報

作者: jezweb
リポジトリ: jezweb/claude-skills
カテゴリ: デザイン・UI
インストール数: 1,127
GitHub スター: 1,090

問題を報告