flawless-ui-uxとは
flawless-ui-uxは、コーディングエージェント向けのUI/UXデザインスキルであり、ローカルで動作する検査用CLIです。エージェントが、プロダクトのオーディエンス、コンテンツ、アイデンティティに基づいて、インターフェースの作成、再設計、改良、レビューを行うのを支援します。
このスキルは、Web、ネイティブモバイル、デスクトップの各インターフェースに向けて、レイアウト、タイポグラフィ、カラー、インタラクションの設計判断をガイドします。CLIは選択したソースファイルとブラウザのインターフェースを検査し、エージェントが問題を発見して修正を検証するために利用できる観察結果を提供します。あなたがタスクを説明すると、あなたのコーディングエージェントが既存のプロジェクトにガイダンスを適用します。
スキルなし vs スキルあり
Codex（GPT 6.1 Sol、低設定）で作成後、同じモデルと推論設定で flawless-ui-ux を使用して洗練しました。
インストール
プロジェクトディレクトリから、お好みのパッケージマネージャーを使用して以下のコマンドを実行します：
# npm
npx flawless-ui-ux@latest install
# pnpm
pnpm dlx flawless-ui-ux@latest install
# Bun
bunx flawless-ui-ux@latest install
Node 22.12以上が必要です。ターミナルで、プロジェクトまたはグローバルスコープを選択し、1つ以上のエージェントを選択してから、コピー前に保存先を確認します。選択にはSpaceキー、決定にはEnterキーを使用します。Ctrl+Cでインストールファイル書き込み前にキャンセルできます。
明示的なフラグを使用すると直接実行できます：
npx flawless-ui-ux install --codex
npx flawless-ui-ux install --codex --devin
npx flawless-ui-ux install --claude-code --global
npx flawless-ui-ux install --project ./app
npx flawless-ui-ux install --yes
--yes はメニューをスキップし、他のフラグが指定されていない場合にデフォルト（現在のプロジェクト内のすべてのサポート対象エージェント）を使用します。JSON出力、CI、非ターミナル実行の場合は、非対話的に動作します。機械可読な出力には --format json を使用します。
npx skills add smokeeaasd/flawless-ui-ux --skill flawless-ui-ux
これにより、Skills CLI を通じてスキルがインストールされます。ランタイム要件とエージェント選択はそのインストーラに従います。検査用CLIは、このガイドのnpmコマンドとは別に利用できます。
bash /絶対パス/flawless-ui-ux/install.sh --codex --project
Bashの代替方法では、ローカルインストールに --project が必要です。デフォルトはグローバルです。WindowsユーザーはGit BashまたはWSLが必要です。
スキルを使う
必要なインターフェースを説明し、スキル名を指定します：
flawless-ui-uxスキルを使って、フリーランサー向けの財務ダッシュボードを構築してください。
Codexでは $flawless-ui-ux を呼び出します。スラッシュコマンドに対応したホストでは /flawless-ui-ux を、Piでは /skill:flawless-ui-ux を使用します。お使いのホストのスキルメカニズムを通じて、スキル名でリクエストすることもできます。インストール後、検出を更新する必要がある場合は、新しいセッションを開始してください。
インターフェースの開発に合わせて、同じ会話を続けてください：
| タスク | リクエスト例 |
|---|---|
| 作成 | デプロイメント調整とインシデント引き継ぎを行うアプリのランディングページを構築してください。 |
| 再設計 | 提供されたブランドパレットを使用して、このアカウント画面をモバイル向けに再設計してください。コンテンツと動作は維持してください。 |
| 改良 | ページのビジュアルキャラクターを維持しながら、メインアクションの存在感を高めてください。 |
| 焦点 | タイポグラフィとスペーシングを改善してください。文言、色、機能は維持してください。 |
| レビュー | このダッシュボードを読みやすさ、ナビゲーション、アクセシビリティ、繰り返されるジェネリックパターンの観点からレビューしてください。ファイルは編集せずに、調査結果のみを報告してください。 |
仕組み
スキルは設計と実装をガイドします。 プロダクトのコンテキストを構成、タイポグラフィ、カラー、密度、イメージ、インタラクションに結び付けます。焦点を絞ったリファレンスは、既存のスタックでの作成、再設計、改良、レビューをサポートします。
新しいインターフェースや大規模な再設計の場合、エージェントは実装前に少なくとも3つの意味的に異なる構成を内部的に検討し、プロダクトとタスクに適したアプローチを選択します。焦点を絞った改良では、承認されたスコープと確立された決定が維持されます。
デザインガイダンスはWeb、ネイティブモバイル、デスクトップのインターフェースに適用されます。CLIのレンダリングチェックはブラウザインターフェースを対象とします。ネイティブ検証は、適切なプラットフォームとプロジェクトツールを使用します。
改良により意図されたキャラクターを発展させます。 インターフェースには、より強い存在感、競合する強調の低減、またはより一貫性のある仕上がりが必要な場合があります。適切な介入は、コンテンツとタスクによって異なります。ジェネリックなコピー、繰り返しの装飾、よくあるパターンは、ユーザビリティやアクセシビリティとともに、コンテキストに基づいてレビューされます。
CLIが実装をチェックします。 プロジェクトコンテキストを収集し、選択したソースファイルまたは実行中のインターフェースを検査し、修正後の結果を比較します。エージェントが変更を行い、CLIは観察結果を提供し、実際にチェックされた内容を記録します。
プロダクトコンテキストとワークフロー
プロダクトの事実や設計上の決定は、既存のMarkdownドキュメントに保持します。エージェントはこれらをタスク間で再利用します。コンテキストファイルはオプションです。context --source docs/brief.md を使用して、通常の場所以外にあるドキュメントを選択します。
不足している記録を準備するには、以下を実行します：
npx flawless-ui-ux init
CLIは、プロダクト/デザインのMarkdownテンプレートを作成するか、サポートされている既存のドキュメントを再利用し、その内容を保持します。エージェントはプロジェクトとあなたの決定から記録を埋めます。後で context でこれらを読むことができます。初期化はブリーフを生成したり、ビジュアルスタイルを選択したりしません。
関連する画面を検査するには、--url 入力を繰り返し使用し、--consistency でコンテキストに応じたスタイルインベントリを取得します。--flow flows/edit-member.json を使用して、許可されたテスト環境で明示的に定義されたUIアクション、期待値、名前付き状態を実行します。検証には、変更されていないフローファイルを再度選択する必要があります。ワークフローの例と制限を参照してください。
検査と検証
CLIを直接使用するか、エージェントにこれらのチェックを作業に含めるよう依頼します。適宜 npx を pnpm dlx または bunx に置き換えてください。
コンテキストとソースから始める
npx flawless-ui-ux context --project . --format json
npx flawless-ui-ux inspect --project . --source src/App.tsx --format json
実行中のインターフェースをチェックする
アプリを起動し、ブラウザを一度準備します：
npx [email protected] install chromium
# または: pnpm dlx [email protected] install chromium
# または: bunx [email protected] install chromium
実際の開発サーバーのURLを検査し、ベースラインを保存します：
npx flawless-ui-ux inspect --project . --source src/App.tsx --url http://localhost:5173 --output ../app-before --format json
修正後、保存されたスコープを繰り返します：
npx flawless-ui-ux verify ../app-before/run.json --output ../app-after --format json
比較は、「永続的」、「新規」、「観測されなくなった」所見を分離します。欠落している確認対象や変更された条件は未検証のままです。
| 領域 | 収集されたエビデンス |
|---|---|
| アクセシビリティ | 選択されたaxeのコントラストおよびアクセシブルネームルール（レビュー用の不完全な結果を含む） |
| テキストとレイアウト | サンプリングされた幅での計算フォントサイズと水平方向のオーバーフロー |
| アセットとランタイム | 表示される壊れたイメージとu... |