UI/UX Pro Max：AIコーディングアシスタント向けデザイン資料

UI/UX Pro Maxは、AIコーディングアシスタント向けのオープンソースデザインスキルです。UIスタイル、配色、タイポグラフィ、UXガイド、業界のデザイン例を検索できる形で整理します。自然言語で製品や画面の要件を伝え、設計システムの案や選択した技術向けのコード作成に活用できます。単体のグラフィックデザインアプリではありません。

機能と技術

製品カテゴリ、ビジュアルスタイル、色、ページパターン、フォントの組み合わせなどで資料を検索できます。UXルール、チャート例、業界別のガイド、デザイン上のアンチパターン確認も紹介されています。データベースの内容はバージョンによって変わるため、項目数を恒久的な保証として扱わないでください。

対応技術としてHTML、Tailwind CSSのほか、React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutterが挙げられています。出力は導入バージョンとアシスタントのワークフローに左右されるため、まず対象プロジェクトの小さな画面で確認してください。

導入と利用

資料ではコマンドラインツールuipro-cliによる初期化を説明しています。Node.jsとPython 3.xを用意し、CLIを導入して、対応アシスタント名を指定してuipro initを実行します。対応名は変わる可能性があるため、現在のCLIヘルプを確認してください。設定ディレクトリへ手動で配置する方法もあります。

起動方法はアシスタントごとに異なり、自然言語の依頼で使えるものと、ワークフローやスラッシュコマンドが必要なものがあります。TraeについてはSOLOモードとフロントエンド向け指示が紹介されています。使用するアシスタントの最新資料に従ってください。

用途と制約

SaaSのダッシュボード、製品ページ、データ画面、モバイル画面の設計開始点として利用できます。提案やコードは、実際の要件、アクセシビリティ、ブランド規則、既存コードに照らして確認が必要です。ユーザー調査、アクセシビリティ試験、安全性レビューの代わりにはなりません。