mcpField
D
design-system

design-system

github.com/albertzhangz10デザイン・UI4236 回インストール31 週間前に更新
リポジトリ

design-system について

design-systemは、提供されたデザイン資料や既存コードから、トークン、アクセシビリティと利用指針、コンポーネント仕様の3つのMarkdown文書を作成するスキルです。

主な機能

  1. 01画像、PDF、リンク、文章、コードの分析
  2. 02相互参照する3つのMarkdown文書の生成
  3. 03デザイントークンとビジュアルスタイルの記録
  4. 04アクセシビリティ規則とコンポーネントの仕様化

活用シーン

  1. 01スクリーンショットからデザインシステムを文書化
  2. 02ブランドガイドをトークンリファレンスに整理
  3. 03既存UI資料からコンポーネントを一覧化
  4. 04アクセシビリティと利用指針の記録

インストール

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

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

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

README.es.md
LICENSE
README.md
README.zh-CN.md

詳細

デザインシステムジェネレーター

ユーザーが提供したデザインの参考資料（画像、スクリーンショット、PDF、リンク、テキストによる説明、既存のコード）を分析し、3 ファイルで構成される包括的なデザインシステムドキュメントを生成します。

入力

以下の任意の組み合わせを受け付けます。

  • 画像：UI のスクリーンショット、モックアップ、デザインツールからのエクスポート
  • PDF：ブランドガイドライン、スタイルガイド、デザイン仕様書
  • リンク：デザインシステムのドキュメント、コンポーネントライブラリ、公開ウェブサイトの URL
  • テキストによる説明：デザイン言語に関する文章での説明
  • 既存のコード：CSS ファイル、テーマ設定、Tailwind 設定、デザイントークン

ユーザーがリンクを提供した場合は、WebFetch を使ってコンテンツを取得します。ファイルパスを提供した場合は、ファイルを読み込みます。

出力

ユーザーの作業ディレクトリ（または指定されたパス）に、Markdown ファイルを正確に 3 つ生成します。

  1. design.md — トークンリファレンス
  2. design-guidelines.md — アクセシビリティと推奨事項・禁止事項
  3. design-components.md — コンポーネント仕様

ファイル仕様

design.md — トークンリファレンス
# [System Name] Design System — Token Reference

> Always read this file first. For component specs see [design-components.md](design-components.md). For accessibility and do's/don'ts see [design-guidelines.md](design-guidelines.md).

[1-2 sentence intro: design language, core architecture, primary typeface, base spacing unit, platform coverage]

必須セクション：

色

意味的な役割ごとに H3 の小見出しを使ってグループ化します（例：### アクセント — プライマリ、### サーフェスとニュートラル、### セマンティック／ステータス）。

役割Hex用途
primary#6442d6強い視覚的強調が必要な塗り、テキスト、アイコン
on-primary#ffffffprimary 上のテキスト／アイコン

判別できる場合は、ライトモード／ダークモードの Hex 値を含めます。

タイポグラフィ

デフォルトのフォントファミリーとフォールバックの順序を記載します。

スタイルサイズ太さ行の高さ字間
Display Large57sp40064sp-0.25sp
Body Medium14sp40020sp0.25sp

すべてのスケールレベル（Display、Headline、Title、Body、Label、またはそれに相当するもの）を記載します。

形状
トークン角丸半径コンポーネント
Small8dpチップ、スナックバー
Medium12dpカード
Full50%ボタン、検索バー
エレベーション
レベルdpCSS シャドウ用途
00noneベースサーフェス
110 1px 2px rgb(0 0 0/.3), 0 1px 3px 1px rgb(0 0 0/.15)カード
インタラクション状態
状態レイヤーの不透明度備考
有効0%通常時
ホバー8%カーソルを重ねた状態
フォーカス10%キーボードフォーカス時
押下10%タップ／クリック時
無効コンテンツ 38%、コンテナー 12%操作不可
レイアウト
クラス幅ペイン数ナビゲーション
コンパクト< 600dp1ナビゲーションバー
ミディアム600–839dp1–2ナビゲーションレールまたはバー
拡張840–1199dp1–2ナビゲーションレールまたはドロワー
モーション

イージングカーブ（CSS の cubic-bezier 値）、持続時間のトークン（短・中・長）、トランジションの種類を記載します。

アイコン

アイコンシステムの仕様：スタイル、サイズ、グリッド、ストロークの太さ。判別できない場合は省略します。

デザイントークン

命名規則の形式（例：md.sys.color.primary）。

design-guidelines.md — アクセシビリティと推奨事項・禁止事項
# [System Name] Guidelines — Accessibility & Do's/Don'ts

> See [design.md](design.md) for token values. See [design-components.md](design-components.md) for component specs.

必須セクション：

アクセシビリティ
  • コントラスト要件：要件 | 比率の表と、コンポーネント | 対する 3:1 の表
  • タッチターゲット：最小サイズ、間隔のルール、密度の制約
  • キーボード操作：キー | 動作の表
  • 支援技術：スクリーンリーダーのルール、ラベル、ロール
ジェスチャー

ジェスチャー | 用途の表（タップ、ダブルタップ、長押し、スクロール、スワイプ、ドラッグ、ピンチ）。

コンテンツデザイン

文章作成のルール：トーン、大文字・小文字、行の長さ、ラベルの制約。

推奨事項と禁止事項

H3 の小見出しでカテゴリごとに整理します：色、形状、エレベーション、インタラクション、レイアウト、タイポグラフィ、モーション、コンポーネント。

形式：

  • 推奨：最も重要な操作 1 つにプライマリを使用する
  • 禁止：グループ内の複数のボタンにプライマリの塗りを適用する
design-components.md — コンポーネント仕様
# [System Name] Components

> Full specifications for all [N] components. Grouped by workflow.
> For tokens see [design.md](design.md). For rules & accessibility see [design-guidelines.md](design-guidelines.md).

提供された参照資料から確認できるすべてのコンポーネントを見つけてください。固定リストに限定しないでください。

ワークフローのカテゴリごとに、H2 見出しを使って整理してください：

  • アクション

  • 入力

  • ナビゲーション

  • コンテインメント

  • データ表示

  • フィードバック

各コンポーネントを H3 セクションとして記述してください：

### Button

**Types:** Filled (primary) > Tonal (secondary) > Elevated > Outlined > Text.
Height 40dp. Target 48dp. Label: 14sp/500. Sentence case.

| Property | Value |
|---|---|
| Contrast | 4.5:1 text, 3:1 icons/borders |
| States | Rest, Hover, Pressed, Focus, Disabled |
| Touch target | 48x48dp min |

**Do:** Use sentence case; keep labels concise (1-3 words).
**Don't:** Use "Click here"; end with punctuation.

---

取り上げる代表的なコンポーネント：

  • アクション： Button、Icon Button、FAB、Toolbar、Link
  • 入力： Text Field、Checkbox、Radio、Switch、Slider、Dropdown/Select、Combobox、Picker、Textarea
  • ナビゲーション： Navigation Bar/Rail/Drawer、Tabs、Breadcrumb、Menu、Search、App Bar
  • コンテインメント： Card、Dialog、Bottom Sheet、Drawer、Popover、Accordion、Divider
  • データ表示： Avatar、Badge、List、Carousel、Icon、Image、Tag/Chip、Skeleton、Tooltip
  • フィードバック： Progress Indicator、Spinner、Snackbar/Toast、Message Bar

一般ルール

  • 具体的に記述してください：dp/sp/px 単位の寸法、16 進カラー、CSS の box-shadow 値
  • 参照資料から値を特定できない場合は、デザイン言語に基づいて妥当な値を推定し、「（推定）」と記してください
  • 文章より表を優先し、一覧性を保ってください
  • ファイルあたり 150～400 行を目安にしてください
  • 各ファイルの冒頭の引用ブロックで、ほかの 2 つのファイルを相互参照してください
  • 水平線（---）でコンポーネントを区切ってください
  • Markdown の書式は一貫させてください

ワークフロー

  1. ユーザーからすべての参照資料を集めます（ファイルを読み込み、URL を取得します）
  2. デザイン言語を分析します：色、タイポグラフィ、間隔のパターン、コンポーネント一覧を特定します
  3. 3 つすべてのファイルを生成します
  4. 指定されたディレクトリに各ファイルを書き込みます
  5. 生成した内容を要約します：システム名、トークン数、コンポーネント数

コメント

Markdown 対応