mcpField
M
migrate-design-system

migrate-design-system

github.com/plugin87デザイン・UI3.0k500 回インストール1 日前に更新
リポジトリ

migrate-design-system について

migrate-design-systemは、外部デザインシステムとプロジェクトのトークンやコンポーネントを対応付けるデザインスキルです。スタイルの採用、テーマ設定、段階的な移行を支援し、コントラストや状態も確認します。

主な機能

  1. 01役割に基づくデザイントークンの対応付け
  2. 02導入・適用・移行の各方向に対応
  3. 03トークンのブリッジ計画の作成
  4. 04コントラスト・状態・ダークモードの確認

活用シーン

  1. 01Material 3やFluent 2のスタイルを採用
  2. 02プロジェクトのトークンで外部プリミティブをテーマ化
  3. 03画面ごとに段階的に移行して検証

インストール

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

$npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill migrate-design-system

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

詳細

スキル：デザインシステムの移行／相互運用設計

ステップ 0：キットはありますか？ このスキルはキット内のファイルを読み込みます。一度確認してください： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING KIT_MISSING の場合、インストールされているのはスキルフォルダーのみです。これは npx skills add の動作です。その旨を明確に伝え、 npx ux-ui-agent-skills init またはプラグインのインストールを案内して、そこで終了してください。 開けなかったファイルの内容を推測してはいけません。

ロールベースのクロスウォークを使って、外部デザインシステムとの相互運用を実現します。

手順

  1. ${CLAUDE_SKILL_DIR}/../../../design-systems/interop-protocol.md を読みます（クロスウォーク手法、3 つの方向性、ヘッドレスとスタイル付きの指針、検証）。
  2. Material 3／Apple HIG／Fluent 2／Carbon／shadcn/ui／Radix については、${CLAUDE_SKILL_DIR}/../../../design-systems/crosswalk.md の厳選された表を使用します。それ以外の場合は、クロスウォーク手法を使ってマッピングを導き出します（色のロール、タイポグラフィのスケール、スペーシング単位、角丸、エレベーション、モーションの 6 つの軸で、ロールと意図に基づいてマッピングします）。
  3. 方向性を選びます。
    • FROM 外部 → 自分たちのトークン（外部の見た目を採用）：semantic.* の参照先を変更します。
    • TO 外部スタック（自分たちのコンポーネントを相手の基盤上で使用）：相手のプリミティブを自分たちのトークンでテーマ設定します。
    • 移行：画面ごとに、監査 → マッピング → ブリッジ（エイリアスレイヤー） → 検証を行います。
  4. マッピングしたすべての色の組み合わせについて、コントラストを検証します（${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py／a11y-audit）。8 つすべての状態とダークモードで、マッピング後も問題がないことを確認します。

出力

クロスウォーク表（自分たちのトークン → 相手のトークン → 値の注記）、移行する場合はブリッジ計画、検証済みのトークンオーバーライドを作成します。design-code を使ってレンダリングします。

コメント

Markdown 対応