AIで作る業務UI/UX 03：UI/UX Pro Maxを導入。操作は直ったが、表示行は増えなかった

受注一覧を何度も直しているうちに、今のUIを分析してデザイン用スキルにできないか、とCodexへ聞きました。でも、UI/UX Pro Maxにも似た指針がある。同じ内容を自分用スキルにも写したら、両方を維持することになる。

そこで、まずPro Maxを入れ、必要な差分だけ後で追加する方針にしました。2026年10月4日、Codexで固定版の導入と検索を試し、既存の受注一覧へ一般指針を適用しています。選択・件数・詳細操作は直りましたが、完全に見える行数は同じでした。

実務とは無関係の検証用プロジェクトです。Windows上のWSL2のLinux側で、実装・検査はCodexへ任せています。

今の画面は、ルールにする前に戻せる形で残した

バックアップについては、こう伝えました。

今のデザインを別ファイルで残しておきたい。スキルにしたいわけじゃなくて後々戻すためのバックアップとして。

まだ改善中の色や余白を、全部ルールにしたくありません。変更前コミットb04c057から、ソース・固定データ・テスト・依存関係の記録・設計文書をアーカイブし、通常ファイルの一致を照合しました。既存の依存ライブラリへのリンクを使い、一時フォルダーへ展開した元画面が起動するところまで確認。依存をゼロから入れ直す復元は、次の確認です。

検索を最上部へ移し、メニューを開閉し、ページを分けるところまでは、導入前にできていました。

版を固定して、プロジェクト内へ入れた

導入元はUI/UX Pro Maxの提供元リポジトリ。比較条件へ戻せるよう、477bcb28c9812b385cb51a4605ddf30d7b2266e2に固定しました。

Codexのskill-installerを使い、この版の.claude/skills/ui-ux-pro-max一式を、プロジェクトの.agents/skills/ui-ux-pro-maxへ配置。元の73ファイルとMITライセンス、導入版の記録を残し、アプリのnpm依存は増やしていません。

SKILL.mdだけでは検索用スクリプトとデータが欠けるので、フォルダーごと置きます。

プロジェクト/
└── .agents/
    └── skills/
        └── ui-ux-pro-max/
            ├── SKILL.md
            ├── scripts/
            ├── data/
            └── references/

次は実際の依頼内容の要約です。

UI/UX Pro Maxをプロジェクト内へ導入してください。
提供元: nextlevelbuilder/ui-ux-pro-max-skill
使用する版: 477bcb28c9812b385cb51a4605ddf30d7b2266e2
この版の .claude/skills/ui-ux-pro-max 一式を
.agents/skills/ui-ux-pro-max へ配置してください。
元ファイルとライセンスを保持し、既存のスキルを上書きせず、
配置先と使用版を報告してください。

検索スクリプトは、実際に置いた場所から実行する

同梱のsearch.pyは、デザインの指針を検索するスクリプトです。固定版SKILLの実行例は、Claude向けの保存先を指すCLAUDE_PLUGIN_ROOTを使っています。今回は.agents/skills/ui-ux-pro-max/scripts/search.pyに置いたので、その実パスへ合わせるよう指定しました。

Python 3が前提で、提供元の説明どおり、今回のWSLでも追加のPythonパッケージなしで実行できました。次はプロジェクトのルートから使うWSL/Linux向けの例です。

cd /path/to/your/project
python3 --version

python3 "$(pwd)/.agents/skills/ui-ux-pro-max/scripts/search.py" --help
python3 "$(pwd)/.agents/skills/ui-ux-pro-max/scripts/search.py" \
  "keyboard focus modal" --domain ux --json

この検索は10月5日にCodexが実際の配置先で実行し、フォーカスを見えるようにする指針などが返りました。Windowsでの実行は未確認なので、Pythonの呼び方とパスを合わせる必要があります。

# 前提: npmを使える環境。検索には別途Python 3が必要。
npm install -g ui-ux-pro-max-cli

# 自分のプロジェクトの絶対パスへ置き換える
cd /path/to/your/project

# Antigravity向け。最初に配置予定だけ確認する
uipro init --ai antigravity --dry-run
uipro init --ai antigravity

最初の検索は、受注管理ではなく学習システムへ向かった

最初に--design-system --jsonで検索したのは、次の文字列です。

enterprise order management dashboard

返ってきたカテゴリはLMS、学習管理システム。学習課題や成績表などの条件があり、構成も紹介文・機能・利用例・ロゴ・行動を促すボタンでした。受注を探して選ぶ一覧には、そのまま当てはまりません。

スキルには用途を確かめ、外れたら一度絞り直す手順があります。Codexは近い候補として、収録された在庫管理の名前で検索し直しました。

Inventory & Stock Management

今度はカテゴリに一致しました。ただ、在庫の数量や入出庫を扱う別業務です。フラットな見た目と中立色は参考になっても、紹介サイトの構成は残り、書体もCormorant Garamond／Crimson Proという学術・読書系でした。

全体提案は見送り、ラベル・色の役割・フォーカス・文字の折返しなどの一般指針へ切り替えました。外れた検索語と不採用の理由も記録。「Pro Maxを使って」だけで済ませず、何を検索し、なぜ採ったかまで残したいです。

既存画面の操作は直った。見える行は増えなかった

改修では、検索後の選択、遅延の絞り込み、詳細内のキー操作を見直しました。

検索に「受注を検索」の見えるラベルを付け、ID・顧客・担当者という対象を入力欄で示しました。中立のslateに操作の青と状態色を分け、選択中の絞り込みは枠と状態で示します。件数を大きくし、「全15,000件中○件が一致」へ変更。長いチップと狭い幅のヘッダーは折り返し、解除の押せる領域を確保しました。表だけは横スクロールで列の意味を保ちます。

操作して分かった不整合も直しました。

遅延は集計の「出荷済み・キャンセルを除く」条件へ絞り込みも合わせ、比較日は10月3日固定です。担当者の条件が状態変更で消えるコードも直し、「中村 蓮」＋「未処理」で26件、表示25行の担当者をブラウザーで確認しました。元のプロジェクトルールも参照し、コードと操作を照合しています。

詳細は、見た目に合わせてモーダルとして扱った

右520pxの詳細と、暗くした背景の見た目は維持。開くと見出しへフォーカスし、Tab／Shift+Tabを詳細内へ閉じ込め、背景と検索ショートカットへ抜けないようにしました。閉じると元のIDへ戻します。WAIのモーダルガイドも照合しました。

取引先区分や決済条件は、試作用の固定表示です。

同じ行高で比べると、行数は同じだった

同じ15,000件・フォント、表本文14px、行高52px／36px、25件表示・ID降順。メニューを閉じ、条件・選択・詳細なし、画面と表は先頭で比較しました。Chrome 145、DPR 1の同一環境でDOMを測り、列見出しの下から表示領域に上下とも収まる行だけ数えています。

1366×768の高密度です。

ボタンの文字や押せる領域を変え、表の上端は221pxから225pxへ4px下がりました。この条件では、完全に見える行数は変わりません。

追加スキルは、使ってから必要な差分を選ぶ

一般的なラベル・色・フォーカスの指針を、自分用にもう一度写すことは避けたい。候補に出た日本語の業務用語、受注の状態・選択範囲、比較条件や記録方法も、既存のAGENTSや設計文書で足りるかを先に見ます。

独自スキルはまだ作っていません。この10月4日の試行は、既存画面の改修です。次は同じ依頼から初稿を作り、スキルの有無で画面や手戻りがどう変わるかを比べたい。

固定版は置けた。明示的にSKILLを読み、検索も実行した。その上で、採用しない全体提案があり、表示行も増えませんでした。何を指示し、何を見送り、どこを直したかを残して、次の画面でも考え直せるようにしたいです。

確認した情報

作業は10月4〜5日、公式資料は10月17日再確認。配置・検索・既存v1のコードと操作記録を照合しました。新しいターンでのスキル自動検出・適用は未確認です。翌日のAntigravityによるv2作成・比較は次の回へ分けています。

シリーズの記事

前の記事：AIで作る業務UI/UX 02：受注一覧の余白・検索・詳細を直し、15,000件で試した

次の記事：AIで作る業務UI/UX 04：UI/UX Pro Maxで受注一覧v2を作った。でも、まだしっくりこない