/ ディレクトリ / プレイグラウンド / UI/UX Pro Max Skill
← 全サーバー ↗ GitHub
● コミュニティ nextlevelbuilder ⚡ 即起動

UI/UX Pro Max Skill

作者 nextlevelbuilder · nextlevelbuilder/ui-ux-pro-max-skill

ClaudeにダサいUIを生成させるのをやめよう。このskillは本物のデザインを教えます — タイプスケール、スペーシングリズム、カラーシステム、アクセシビリティ — Web、モバイル、デスクトップにまたがって。

UI/UX Pro Maxはこれを読み込む任意のエージェントにデザインインテリジェンスを注入する包括的なデザイン知識skillです。タイポグラフィ、カラー理論、スペーシング/グリッド、モーション、アクセシビリティ（WCAG 2.2）、プラットフォーム固有のパターン（Apple HIG、Material 3、Fluent）をカバーします。shadcn/Tailwindエコシステムとの相性が良いですが、それらに依存しているわけではありません。

▶ デモを見る 📦 インストール 💡 ユースケース

なぜ使うのか

主な機能

ライブデモ

実際の動作

準備完了

インストール

作者のリポジトリ · Claude Skills の公式ドキュメント

ユースケース

実用的な使い方： UI/UX Pro Max Skill

既存アプリの「AI生成UI」な見た目を修正する

👤 ClaudeがビルドしたUIが無難すぎる開発者 ⏱ ~60 min intermediate

使うタイミング： shadcnの出力は機能するが、量産品のように見える場合。

フロー
  1. 診断
    Use UI/UX Pro Max. Audit the design system in /src/ui — type, spacing, color tokens. Score each.✓ コピーしました
    → 軸ごとの具体的な問題を含むスコアカード
  2. トークンの設定
    Recommend a 4-step type scale + 4-step spacing scale aligned to 4px grid.✓ コピーしました
    → トークンテーブル
  3. 適用
    Update tokens.css and rerun. Diff what changed in the rendered look.✓ コピーしました
    → 引き締まったタイポグラフィ、一貫したリズム

結果： 「5分で作った」と叫ばないUIになる。

注意点
  • 過度なトークン化 — すべての値が変数になる — 繰り返し使うトークンには変数；一度きりのものはリテラルで問題ない

iOS HIGに従ったモバイル画面をデザインする

👤 クロスプラットフォームアプリを構築する開発者 ⏱ ~45 min intermediate

使うタイミング： iOS向けのサーフェスがあり、クロスプラットフォーム的ではなくネイティブな感触にしたい場合。

フロー
  1. 仕様
    Design a settings screen for iOS — group cells, navigation, light/dark, accessibility callouts. Reference HIG.✓ コピーしました
    → HIG参照付きの仕様
  2. 実装
    Translate to SwiftUI. Use system fonts, semantic colors, dynamic type.✓ コピーしました
    → システムネイティブに見えるSwiftUIコード

結果： 「ネイティブに見える」目視テストに合格する画面。

注意点
  • ハードコードされたカラーがダークモードを壊す — システムのセマンティックカラーを使用；このskillがこれを強制する

コンポーネントのアクセシビリティ監査を実行する

👤 アクセシビリティコンプライアンスを準備する開発者 ⏱ ~30 min intermediate

使うタイミング： 重要なフローでWCAG 2.2 AAが必要な場合。

フロー
  1. 監査
    Audit /components/Form.tsx against WCAG 2.2 AA. Find issues with contrast, labels, focus order.✓ コピーしました
    → 深刻度付きの問題リスト
  2. 修正
    Apply fixes. Verify with screen-reader semantic outline.✓ コピーしました
    → 問題リストが縮小；セマンティックアウトラインがクリーンに読める

結果： 監査者と実際のユーザーテストの両方に合格するコンポーネント。

注意点
  • 自動修正がビジュアルレイアウトを壊す — 各修正後に再レンダリング；ビジュアルリグレッションチェック
組み合わせ： filesystem

組み合わせ

他のMCPと組み合わせて10倍の力を

ui-ux-pro-max-skill + open-design-skill

デザインシステム + ブランド品質の参照システム

Use UI/UX Pro Max for fundamentals + open-design for brand styles.✓ コピーしました
ui-ux-pro-max-skill + filesystem

コードベース全体にトークン変更を適用

Update tokens.css and propagate; run audit.✓ コピーしました

ツール

このMCPが提供する機能

ツール入力呼び出すタイミングコスト
design_audit scope: ディレクトリまたはコンポーネント 初期評価 token
tokens_recommend constraints (brand, platform) デザインシステムの構築時 token
a11y_check component path コンプライアンス確認時 token

コストと制限

運用コスト

APIクォータ
N/A
呼び出しあたりのトークン
初回監査は重め；フォローアップは軽め
金額
無料
ヒント
アプリ全体ではなくコンポーネントごとに監査する

セキュリティ

権限、シークレット、影響範囲

最小スコープ： プロジェクトファイルの読み取り
認証情報の保管： なし
データ送信先： なし

トラブルシューティング

よくあるエラーと対処法

推奨内容がブランドガイドラインと衝突する

ブランドの制約を事前に提供する；skillはそれを尊重する

skillが過剰に発火する

ディレクトリでスコープを絞るか、明示的に呼び出す

代替案

UI/UX Pro Max Skill 他との比較

代替案代わりに使う場面トレードオフ
open-design-skillブランド品質のデザインシステムテンプレートが必要な場合基礎が少なく、既製スキンが多い
手動でキュレーションしたデザイントークンデザイナーがすでにループに入っている場合手間が多い

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る