mcpField
D
design-system-extractor

design-system-extractor

github.com/sylphxaiデザイン・UI150 回インストール今日更新
リポジトリ

design-system-extractor について

散在する UI から再利用可能なデザインシステムを抽出するスキルです。既存の製品 UI を標準化するチーム向けに、トークン、コンポーネント、状態、パターンを整理し、課題や重複、検証項目を含むシステムマップを作成します。

主な機能

  1. 01UI トークンとコンポーネントの棚卸し
  2. 02状態とレイアウトパターンの記録
  3. 03命名の標準化とプリミティブの分類
  4. 04課題と重複要素の特定
  5. 05移行・検証計画の作成

活用シーン

  1. 01既存製品のデザインシステムの文書化
  2. 02画面間で重複する UI コンポーネントの発見
  3. 03標準コンポーネント名への移行計画
  4. 04アクセシビリティとレスポンシブ対応の確認

インストール

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

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

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

同梱ファイルagents/openai.yamlreferences/design-system-extraction-systems.md

詳細

デザインシステムの抽出

このスキルを使うと、散在する UI を、エージェントが再利用できる一貫したデザインシステムにまとめられます。

ワークフロー

  1. 元となる画面、製品の種類、プラットフォーム、ブランド上の制約、システムの対象ユーザーを特定します。
  2. references/design-system-extraction-systems.md を読みます。
  3. トークン、コンポーネント、状態、レイアウトパターン、コンテンツパターン、モーション、アクセシビリティ、例外を洗い出します。
  4. 正規の名称に統一し、プリミティブと製品固有のコンポーネントを分けます。
  5. 不足点、重複、移行計画、検証項目を含むデザインシステムのマップを作成します。

使用しない場合

  • このスキル固有の成果物の要件がなくても、ベースモデルが対応できる一般的なアドバイスには使用しないでください。

ガードレール

  • 既存のシステムを抽出するタスクでは、新しいシステムを作り出さないでください。
  • 製品固有の意味のあるバリエーションを、汎用コンポーネントにまとめないでください。
  • アクセシビリティの状態、エラー状態、密度、レスポンシブな動作、モーションを見落とさないでください。

出力形式

Source surfaces:
System shape:

Tokens:
- color / type / spacing / radius / elevation / motion

Components:
- <component> -> variants, states, usage, gaps

Inconsistencies:
- <issue> -> recommended canonical pattern

Migration plan:
- quick wins / systematic fixes / open questions

コメント

Markdown 対応