mcpField
U
ui-ux-pro-max

ui-ux-pro-max

github.com/galaxy-dawnデザイン・UI5.9k509 回インストール2 週間前に更新
リポジトリ

ui-ux-pro-max について

ui-ux-pro-max は、概要が決まった UI 要求をデザインシステムと実装ガイダンスにまとめるスキルです。UX や技術スタックに応じた情報を検索でき、複数ページのデザイン方針も保存できます。

主な機能

  1. 01デザインシステムの提案
  2. 02配色とタイポグラフィの指針
  3. 03UX・ビジュアル情報の検索
  4. 04技術スタック別の実装メモ
  5. 05ページ間のデザイン方針の保存

活用シーン

  1. 01製品 UI のビジュアル方針決定
  2. 02UX のレビューと改善点の整理
  3. 03技術スタックに応じたフォームや表の設計
  4. 04複数ページにわたるデザインの一貫性維持

インストール

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

$npx skills add https://github.com/galaxy-dawn/claude-scholar --skill ui-ux-pro-max

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

同梱ファイル

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

data/
ui-reasoning.csv
references/
USAGE.md
scripts/
search.py

詳細

UI/UX Pro Max

このスキルを使って、漠然とした UI の依頼を具体的なデザインシステムと実装ガイダンスに変換します。

役割

このスキルは、次の用途に向けたものです。

  • デザインシステムの選定
  • 配色とタイポグラフィの選択
  • UX のレビューと改善
  • スタックを考慮したフロントエンド実装のガイダンス
  • 複数ページの作業における、軽量なデザインシステムの保存

プロダクト戦略やユーザーリサーチの代わりにはなりません。プロダクトの方向性がおおむね定まった後、実行の精度を高めるために使用してください。

基本的なワークフロー

1. 依頼の要点を推測する

まず、最低限必要なデザイン上の手がかりを抽出します。

  • プロダクトの種類
  • 業界
  • スタイルのキーワード
  • 対象プラットフォーム
  • 実装スタック

ユーザーがスタックを指定していない場合は、html-tailwind をデフォルトとして使用します。

2. まずデザインシステムを生成する

ヘルパースクリプトを使って、簡潔なデザインの推奨事項を作成します。

python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "<product_type> <industry> <keywords>" --design-system -p "Project Name"

以下が生成されます。

  • 推奨するスタイルの方向性
  • 配色の系統
  • タイポグラフィの方向性
  • インタラクションや視覚効果
  • ランディングページやレイアウトの傾向
  • 避けるべきアンチパターン

作業が複数のターンやページにわたる場合は、デザインシステムを保存します。

python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "<query>" --design-system --persist -p "Project Name"
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "<query>" --design-system --persist -p "Project Name" --page "dashboard"

以下が作成されます。

  • design-system/MASTER.md
  • 必要に応じて、design-system/pages/ 以下にページ単位の上書きメモ
3. 必要な場合にのみ、対象を絞ったガイダンスを取得する

すべてを一度に読み込むのではなく、対象を絞って検索します。

python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "glassmorphism dark" --domain style
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "animation accessibility" --domain ux
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "real-time dashboard" --domain chart
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "elegant luxury serif" --domain typography

対応ドメイン：

  • product
  • style
  • color
  • typography
  • landing
  • chart
  • ux
4. コーディング前に、スタック固有のガイダンスを追加する
python3 "${CLAUDE_PLUGIN_ROOT}/skills/ui-ux-pro-max/scripts/search.py" "forms table responsive" --stack html-tailwind

対応スタック：

  • html-tailwind
  • react
  • nextjs
  • vue
  • svelte
  • swiftui
  • react-native
  • flutter
  • shadcn
  • jetpack-compose
5. 実装前に内容を統合する

デザインシステムの情報を収集した後、次の項目に落とし込みます。

  • レイアウト構造
  • コンポーネントのルール
  • ビジュアルトークン
  • インタラクションのルール
  • アクセシビリティ上の制約
  • 選択したスタック向けの実装メモ

検索結果をそのまま最終回答に貼り付けないでください。筋の通ったデザインの方向性を裏付けるために活用します。

デフォルトの出力形式

通常、適切な回答には次の項目が含まれます。

  1. プロダクトと UI の位置づけ
  2. 推奨するスタイルシステム
  3. 配色とタイポグラフィ
  4. コンポーネントとレイアウトのルール
  5. アクセシビリティとインタラクションの確認事項
  6. スタックを考慮した実装メモ

安全性に関するルール

  • プロダクトの種類とのつながりを示さずに、デザイン言語を決めつけないでください。
  • UI の主要なアイコンに絵文字を使用しないでください。
  • 見栄えを優先してテキストのコントラストを弱めないでください。
  • レイアウトを不安定にする場合、ホバー時にインタラクティブなカードを拡大しないでください。
  • prefers-reduced-motion に反するアニメーションを使用しないでください。
  • サポートされていないヘルパースクリプトやデータセットを作り出さず、付属の search.py と data/ui-reasoning.csv のみを使用してください。

参考資料

必要なものだけを読み込みます。

  • references/USAGE.md - 推奨されるコマンドパターンと情報取得の流れ
  • data/ui-reasoning.csv - ヘルパースクリプトが使用する、プロダクトからデザインを導くための簡潔なヒューリスティック
  • scripts/search.py - デザインシステム、ドメイン、スタックを検索する決定的なヘルパー

コメント

Markdown 対応