ClaudeなどのコーディングエージェントをUX/UIデザインの専門家にする、DTCG tokens、コンポーネント仕様、138種類のデザインシステム、52の客観的なゲートを備えた指示・知識キット。
nextlevelbuilder/ui-ux-pro-max-skill
コーディング支援AIに、検索可能なUI/UXデザインルール、スタイル、配色、フォントの組み合わせ、スタック別のガイダンスを提供するスキルです。
- スター
- 138,031
- フォーク
- 14,642
- 未解決の Issue
- 91
- 最終コミット
- 6 日前
これは何?
UI UX Pro Maxは、ユーザーインターフェースの構築時にデザインに関する知見を提供する、AIコーディング支援ツール向けのスキルです。検索可能なUIスタイルのカタログ、192種類の製品向けカラーパレット、厳選したフォントの組み合わせ、グラフの推奨事項、UXガイドラインをまとめています。Pythonの検索スクリプトがBM25ランキングで検索し、製品に合わせたデザインシステムを生成します。
このスキルは、npmパッケージのui-ux-pro-max-cliを使ってClaude Code、Cursor、Windsurf、GitHub Copilot、Codex CLI、Gemini CLIなどにインストールできます。パッケージは各アシスタントが想定するディレクトリにスキルファイルを配置します。スタック別ガイダンスでは、React、Next.js、Vue、Angular、SvelteなどのWebフレームワーク、SwiftUI、Jetpack Compose、Flutterなどのモバイル向けフレームワークに加え、複数のデスクトップ向けフレームワークを扱います。
検索スクリプトはPythonの標準ライブラリのみを使い、ネットワークへの接続は行いません。デザインシステムは、必要に応じてページごとの上書き設定を加えてMASTER.mdファイルに保存できるため、後のセッションでも同じルールを再利用できます。
主な機能
- 01UIスタイル79種類を収録した検索可能なカタログ。初期設定では50種類が有効です。
- 02192種類の製品向けカラーパレットと、厳選された74種類のフォントの組み合わせ。
- 03React、Vue、SwiftUI、Flutterなど、22種類のフレームワークに対応したスタック別ガイドライン。
- 04Python CLIスクリプトを使い、製品の説明からデザインシステムを生成。
- 05ページごとの上書き設定に対応した、永続化可能なデザインシステムファイル。
- 06ui-ux-pro-max-cli npmパッケージを通じて、多数のAIコーディング支援ツールにインストール可能。
ユースケース
- ランディングページやダッシュボードの作成前に、AIコーディング支援ツールへデザインルールを与える。
- 新しいSaaS、フィンテック、ヘルスケア製品向けに、一貫した配色とタイポグラフィのシステムを生成する。
- 特定のフレームワーク向けのアクセシビリティやレスポンシブレイアウトのガイドラインに照らして、UIコードを確認する。
- MASTER.mdファイルとページ単位の上書き設定を使い、セッションをまたいでデザインシステムを維持する。
クイックスタート
- 1
npm CLIパッケージ ui-ux-pro-max-cli を見つけ、READMEのインストール手順に従ってください
- 2
このプロジェクトはPythonで書かれているため、Python 3.xがインストールされていることを確認してください
使う前に知っておきたいこと
- お使いのマシンにPython 3.xが必要です。
- ここで確認できるREADMEの抜粋にはインストールコマンドの全容が記載されていないため、使用前にセットアップのセクションを確認してください。
トピック
よくある質問
- ui-ux-pro-max-skill とは?
- コーディング支援AIに、検索可能なUI/UXデザインルール、スタイル、配色、フォントの組み合わせ、スタック別のガイダンスを提供するスキルです。 UI UX Pro Maxは、ユーザーインターフェースの構築時にデザインに関する知見を提供する、AIコーディング支援ツール向けのスキルです。検索可能なUIスタイルのカタログ、192種類の製品向けカラーパレット、厳選したフォントの組み合わせ、グラフの推奨事項、UXガイドラインをまとめています。Pythonの検索スクリプトがBM25ランキングで検索し、製品に合わせたデザインシステムを生成します。
- ui-ux-pro-max-skill は無料で使えますか?ライセンスは?
- ui-ux-pro-max-skill は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
- ui-ux-pro-max-skill は今もメンテナンスされていますか?
- 活発にメンテナンス中。ui-ux-pro-max-skill の最終コミットは 2026年10月15日 です。
- ui-ux-pro-max-skill は何に使えますか?
- ランディングページやダッシュボードの作成前に、AIコーディング支援ツールへデザインルールを与える。 新しいSaaS、フィンテック、ヘルスケア製品向けに、一貫した配色とタイポグラフィのシステムを生成する。 特定のフレームワーク向けのアクセシビリティやレスポンシブレイアウトのガイドラインに照らして、UIコードを確認する。 MASTER.mdファイルとページ単位の上書き設定を使い、セッションをまたいでデザインシステムを維持する。
- ui-ux-pro-max-skill のインストール方法は?
- npm CLIパッケージ ui-ux-pro-max-cli を見つけ、READMEのインストール手順に従ってください このプロジェクトはPythonで書かれているため、Python 3.xがインストールされていることを確認してください
- ui-ux-pro-max-skill はどこで入手できますか?
- ソースコードとインストール手順は GitHub にあります:https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。
関連プロジェクト
Goのイディオム、テスト、セキュリティ、人気ライブラリについて、AIコーディングアシスタントに本番運用を見据えた指針を提供するGo特化のエージェントスキル集です。
アクセシビリティとパフォーマンスへの配慮を組み込んだ、React、Next.js、Svelte、Astro向けMotion.devアニメーション生成Claude Codeスキル。
Radix UIとTailwind CSSを基盤とする、コピーして使えるReactコンポーネント集。コードは自分で所有し、自由にカスタマイズできます。
Claude Code、Claude.ai、Codex、Cursor、Gemini CLIなどのコーディングエージェント向けに、1000件以上のClaude Skillsとプラグインを厳選してまとめたディレクトリ。
ダークモードとNext.js RSCに対応し、Webアプリをすばやく構築できるアクセシブルなReactコンポーネントライブラリ兼デザインシステム。