mcpField
U
use-design-system

use-design-system

github.com/bluzirデザイン・UI10751 回インストール27 週間前に更新
リポジトリ

use-design-system について

組織レベルのデザインシステムを現在のプロジェクトに読み込むスキルです。tokens.json を読み取ってプロジェクト内にコピーし、プレビューがあれば表示を提案します。

主な機能

  1. 01利用可能なシステムの一覧表示
  2. 02選択したフォルダーの確認
  3. 03tokens.json の読み取り
  4. 04トークンをプロジェクトへコピー
  5. 05HTML プレビューの表示提案

活用シーン

  1. 01新規プロジェクトへ組織のトークンを読み込む
  2. 02後続のデザイン作業用にトークンを準備
  3. 03デザインシステムの HTML プレビューを確認

インストール

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

$npx skills add https://github.com/bluzir/claude-code-design --skill use-design-system

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

詳細

デザインシステムを使用する

組織レベルのデザインシステムを ~/.claude/design-systems/<name>/ から現在のプロジェクトに読み込みます。

手順

  1. $0（名前）が指定されていない場合 → Bash(ls ~/.claude/design-systems/ 2>/dev/null) を実行して一覧を表示し、どれを使うか尋ねます。

  2. フォルダーの存在を確認します： Bash(test -d ~/.claude/design-systems/$0 && echo ok || echo missing). 存在しない場合 → ユーザーに伝え、利用可能なものを一覧表示して終了します。

  3. トークンファイルを読み込みます： Read ~/.claude/design-systems/$0/tokens.json

  4. 以降の読み込みを高速化するため、プロジェクトレベルにコピーします：

    Bash(mkdir -p .claude)
Bash(cp ~/.claude/design-systems/$0/tokens.json .claude/design-tokens.json)

  5. ~/.claude/design-systems/$0/preview.html が存在する場合は、視覚的な参考として /preview ~/.claude/design-systems/$0/preview.html で開くことを提案します。作業を始める前に、システムの見た目を思い出せます。

  6. 次のように報告します：「デザインシステム $0 を読み込みました — 色、フォント、間隔、角丸を .claude/design-tokens.json に書き込みました。以降の /make-deck、/interactive-prototype、/wireframe では自動的に使用されます。」

このスキルを使用しない場合

  • ユーザーがコードベース／スクリーンショット／Figma から新しいシステムを抽出する場合 → 代わりに /create-design-system を使用します
  • ユーザーが「既存のものは無視して、新しいものが欲しい」と明示した場合 → 「ゼロから」モードで /create-design-system に誘導します

レジストリ形式の確認

~/.claude/design-systems/
├── acme/
│   ├── tokens.json           # required
│   └── preview.html          # optional
├── company-x/
│   └── tokens.json
└── minimal-mono/
    └── tokens.json

tokens.json のスキーマ：

{
  "name": "acme",
  "colors": { "primary": "#D97757", "accent": "...", "bg": "...", "text": "..." },
  "fonts": { "display": "...", "body": "...", "mono": "..." },
  "spacing": [4, 8, 12, 16, 24, 32, 48, 64],
  "radii": { "sm": 4, "md": 8, "lg": 16 },
  "shadows": [...]
}

コメント

Markdown 対応