使い方ガイドへスキップ
ui-ux-pro-max作者 nextlevelbuilder

UI UX Pro Max スキル。

Claude Code と Codex 用の UI デザインスキル:Web、モバイル、デスクトップ向けの UI/UX デザインインテリジェンス。レイアウト、カラー、タイポグラフィ、UX ルールに対応します。

  • Web & UI
  • UI コード
nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/ui-ux-pro-max/SKILL.mdSKILL.md
--- name: ui-ux-pro-max description: UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, … --- ## When to Apply ## Rule Categories by Priority ## Running the search tool ## Workflow ## Query Contract ## If a search returns 0 results
2026-09-14 にアップストリームファイルから読み取ったフロントマターとセクション見出し · 全 15,922 文字

01 できること

Claude Code と Codex における ui-ux-pro-max スキルの機能

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

UI/UX Pro Max は、Web、モバイル、デスクトップのインターフェース向けに検索可能なデザインインテリジェンススキルです。79 のスタイル(うち 50 がアクティブ)、推論プロファイル付きの 192 のプロダクトパレット、74 のフォントペアリング、119 の UX ガイドライン、105 のアイコン、17 の GSAP プリセット、25 のチャートタイプ、22 のテクノロジースタックを検索できます。ページのデザイン、カラーとタイポグラフィの選定、アクセシビリティと一貫性の観点での UI レビュー、ナビゲーションとアニメーションの実装、ユーザビリティの改善に活用できます。

package.json、pubspec.yaml、xcodeproj からスタックを自動検出し、セッションをまたいで再取得できるオプションの永続化機能付きでデザインシステムを生成します。3 つのデザインダイヤル(バリアンス、モーション、密度)で出力を調整します。このスキルは、UX、カラー、タイポグラフィ、アイコン、GSAP、スタック固有の実装ガイダンスに関するドメイン特化型の検索を提供します。

生成されるもの

  • パターン、スタイル、カラー、タイポグラフィ、エフェクト、アンチパターンを含むデザインシステムを ASCII、Markdown、または JSON 形式で提供
  • --page が指定された場合のページ固有の上書き用の design-system/project-slug/pages/page-name.md
  • ドメイン特化型の結果(UX ガイドライン、カラーパレット、フォントペアリング、アイコン、GSAP プリセット、チャート推奨、スタック実装ガイダンス)
プロンプト例を見る ↗

仕組み

  1. 01
    要件を分析する

    プロダクトタイプ(SaaS、EC、ダッシュボード)、対象ユーザー、スタイルキーワード(プレイフル、ミニマル、ダークモード)を抽出し、package.json、pubspec.yaml、xcodeproj、または app.json からスタックを検出します。

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

    新しいページやプロジェクトには --design-system を指定して search.py を実行します。

  3. 03
    マスターとオーバーライドとして永続化する

    プロジェクトルートを指す --persist と --output-dir を追加し、design-system/project-slug/MASTER.md を書き出します。ページ固有の上書きは pages/page-name.md に記述します。

  4. 04
    ドメイン検索で補完する

    意味のある 2〜5 個の用語と 1 つの制約を用いて、単一のドメイン(ux、color、typography、icons、gsap、chart、landing、google-fonts)を検索します。

  5. 05
    クエリスタックガイドライン

    検出されたスタック(react、nextjs、vue、swiftui、flutterなど)に応じて --stack を使用すると、実装固有のガイダンスが得られます。

  6. 06
    配信前ルールを確認する

    アプリUIを配信する前に、references/pro-rules.md を読み、アイコンの使い方、インタラクションのフィードバック、ライト/ダークモードのコントラスト、セーフエリアのレイアウト、ネイティブ/モバイルアプリUIのアクセシビリティを網羅した正式な配信前チェックリストを確認してください。

02 適合性を確認

ui-ux-pro-max スキルを使用するタイミング

この種の UI デザインの作業には、Claude Code または Codex で ui-ux-pro-max スキルを使用してください。適合性と制限は、スキル自身のファイルから取得されています。

適している場合

  • 新しいページの設計、またはUIコンポーネントの作成とリファクタリング
  • 色、タイポグラフィ、スペーシング、レイアウトシステムの選定
  • UX、アクセシビリティ、一貫性の観点からのUIレビュー
  • ナビゲーション、アニメーション、レスポンシブ動作の実装
  • インターフェースの知覚品質と使いやすさの向上

境界を知る

  • 純粋なバックエンドロジック、APIやデータベースの設計
  • 非視覚的なパフォーマンス作業、インフラ、DevOps
  • 見た目、操作感、動き、または操作方法を変更しない限り、非視覚的なスクリプトは対象外

提供すべきもの

  • プロダクトの種類とターゲットSaaS、eコマース、ポートフォリオ、ダッシュボード、エンターテインメント、ツール、または業務効率化に加え、年齢層と利用状況(通勤、レジャー、仕事)
  • スタイルキーワードPlayful、vibrant、minimal、dark mode、content-first、immersiveなど、目指すビジュアル方向性を表す形容詞
  • 永続化用のプロジェクト名-p "Project Name" を --design-system に渡すことで、design-systemサブディレクトリとMASTER.mdファイルに名前を付けられます
  • デザインダイヤル(任意)1〜10の3つのスライダー:--variance(中心的からbold/asymmetricまで)、--motion(控えめから複雑な振り付けまで)、--density(余裕のある配置からdense/dashboard間隔スケールまで)

03 スキルの内部

ui-ux-pro-max SkillがClaude CodeとCodexに与えるルール

SKILL.md がエージェントに設定する 8 つの具体的な指示・既定値・制限 — 結果を変える部分です。

  1. アクセシビリティ第一

    優先度1(重大)。コントラスト4.5:1、alt テキスト、キーボードナビゲーション、aria-label を確保してください。フォーカスリングを削除したり、ラベルのないアイコンのみのボタンを使用しないでください。

  2. タッチターゲットは最低44×44px

    優先度2(重大)。タッチおよびインタラクションは最小サイズ44×44px、8px以上の間隔、そしてローディングフィードバックを備えている必要があります。hoverのみへの依存や、即時(0ms)の状態変化は避けてください。

  3. 結果が空の場合は一度だけ再試行する

    検索結果が0件の場合は、より狭いクエリまたは明示的なドメイン/スタックを指定して一度だけ再試行してください。

  4. 最小の検索モードを使用する

    新しいプロジェクトやページには--design-systemを、特定の課題やコンポーネントのバグには明示的な--domainを1つ、既知の実装スタックには--stackを選択してください。

  5. スタックを決して仮定しない

    package.json、pubspec.yaml、xcodeproj、Package.swift、composer.json、またはapp.jsonからスタックを検出してください。何も検出できず、スタックに関する指針が重要な場合は、ユーザーに確認してください。

  6. フルパスでSearchを呼び出す

    python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py"は常に相対パスではなくフルパスで実行してください。

  7. 承認なしにMasterを上書きしない

    design-system/project-slug/MASTER.mdが存在する場合、--persistは書き込みをスキップし、--forceが渡されない限り変更しません。

  8. スタックより先にセマンティックな結果を照会する

    テキストレイアウトやコンパクトなコンポーネントのバグについては、まずセマンティックなUXの結果(孤立した見出し行のバランス、バッジ/チップのラベルの折り返しなど)を検索し、その後、実装のために検出されたスタックを検索してください。

04 実際に使う

Claude Code または Codex に ui-ux-pro-max をインストールする

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex またはあなたのエージェントに ui-ux-pro-max を追加する

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

.claude/skills/ui-ux-pro-max/SKILL.md 用の汎用的なskills CLI形式です。リポジトリに独自のパスが記載されている場合があります。

スキルに最初の UI デザインタスクを与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

Starter prompt
Design a dashboard page for a SaaS analytics product targeting data teams. The interface should feel modern and minimal with good dark mode support. Use the detected Next.js stack for implementation guidance. Persist the design system so the team can reference it across sessions.

出典:SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの:

  • 検索結果を適用する前に、返されたドメイン、上位結果の内容、ユーザーの製品およびプラットフォームへの適合性を確認してください
  • 出力が空またはトピックから外れている場合は、より絞り込んだ書き換えや明示的なdomain/stackで1回だけ再試行してください。
  • --forceによる再生成が正当化されるかどうかを判断する前に、既存のMASTER.mdを読んでください
  • アクセシビリティ作業では、明示的なアクセシビリティ結果の用語を使って一度に1つの観測可能な結果を照会し、結果が特定のインタラクションまたはWCAG基準に一致することを確認してください

OpenDesignではui-ux-pro-maxが同梱されています:Plugins → Skillsから上部バーで選択してください。

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

スキルファイル
.claude/skills/ui-ux-pro-max/SKILL.md 検証時に記録されたコンテンツチェックサム;コミット 7f69fed
License
MIT LICENSE より
リポジトリスター数
127,450 このカタログに 7 つのスキルを含む nextlevelbuilder/ui-ux-pro-max-skill リポジトリ全体について 2026-09-14 に取得された GitHub スナップショットです。ui-ux-pro-max の評価や使用数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign メイン版に同梱(2026-08-28 確認)。このページでは実際の実行記録はまだありません。

SKILL.md の中身

  1. 適用すべき場面UI構造、視覚デザイン、インタラクション、UX品質に使用してください。バックエンド、API、インフラには使用しないでください。
  2. 優先度別のルールカテゴリAccessibility(CRITICAL)からCharts(LOW)まで10のカテゴリがあり、主要なチェック項目とアンチパターンを含みます
  3. 検索ツールの実行スキルディレクトリからフルパスでsearch.pyを呼び出してください。Python 3.xが必要で、外部依存はありません。
  4. クエリの契約最小の検索モードを選択してください。1つの支配的な意図、2〜5個の用語、domain/fitの確認、空の場合は1回だけ再試行してください。
  5. ステップ1:ユーザー要件を分析製品タイプ、対象ユーザー、スタイルのキーワードを抽出し、package.jsonまたは同等のファイルからスタックを検出してください。
  6. ステップ2:デザインシステムを生成新しいページやプロジェクトには--design-systemを使用してください。製品/スタイル/カラー/ランディング/タイポグラフィのマッチを集約します。
  7. ステップ2b:デザインシステムを永続化--persistと--output-dirを追加してMASTER.mdを書き込んでください。既存のMasterは、--forceで許可されない限りスキップされます。
  8. ステップ2c:デザインダイヤル--design-systemの出力を調整するための、バリエーション、モーション、密度に関する任意の1〜10のスライダーです。
  9. ステップ3:詳細な検索で補完product、style、color、typography、google-fonts、chart、ux、landing、icons、gsap、react、webの各ドメインを照会してください。
  10. ステップ4:スタックガイドライン検出されたスタックに合わせて --stack を使用すると、実装に特化したガイダンスが得られます。22種類のスタックに対応しています。
  11. 検索結果が0件だった場合クエリを狭めて一度リトライしてください。それでも結果が空の場合は、優先度テーブルにフォールバックし、ユーザーに伝えてください。
  12. より良い結果を得るためのヒント1クエリにつき1つの意図、2〜5語で構成してください。リトライは1回まで。新規作成には --design-system を、特定領域には --domain を使用してください。
スキル自身による説明
「Web、モバイル、デスクトップ向けの UI/UX デザインインテリジェンス。このスキルは、ページ、コンポーネント、デザインシステム、アクセシビリティ、インタラクション、レスポンシブレイアウト、タイポグラフィ、色、チャート、スタック固有の UI 実装を含むインターフェースの設計、構築、レビュー、または修正を行う際に使用してください。検索可能なローカルデータ:79 の検索可能なスタイル(50 がアクティブ)、192 のプロダクトパレットと推論プロファイル、74 のフォントペアリング、119 の UX ガイドライン、105 のアイコン、17 の GSAP プリセット、25 のチャートタイプ、および 22 のスタック。」

SKILL.md からのフロントマター説明です。完全なファイルは約 15,922 文字です。GitHub で完全なファイルを読む。

06 インストールする前に

ui-ux-pro-max スキルに関する質問

回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

このスキルの実行に必要なものは何ですか?

検索スクリプトは外部依存のない Python 3.x を必要とします。python、python3、または py -3 を使って、スキルディレクトリからフルパスで呼び出す必要があります。Python が見つからない場合のインストール手順は README に記載されています。

特定のページだけデザインシステムを上書きするにはどうすればよいですか?

永続化時に --page "page-name" を渡すと、design-system/project-slug/pages/page-name.md が作成されます。そのページをビルドする際、エージェントはまず MASTER.md を読み込み、次に pages/page-name.md が存在するか確認します。存在する場合はそのルールが Master を上書きします。存在しない場合は Master のルールのみが使用されます。

UI UX Pro Max

実際の UI デザインタスクで ui-ux-pro-max を実行する。

ui-ux-pro-max スキルは OpenDesign に同梱されています。アプリをダウンロードし、Plugins → Skills でスキルを選択し、上記のプロンプトを貼り付けて、結果の前にプランを読んでください。

ターミナル
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max