Route A
Phase 3 : Implementation
A-07:UIの実装
快適な操作画面を作る - エンジニアにしか作れないUXを
Lesson A-04で生成されたツールは、すでに最低限のGUI(操作画面)を持っているはずです。
しかし、AIが最初に作る画面は「とりあえず動く」程度のシンプルなものが多く、使い勝手が良いとは言えません。
このレッスンでは、今の画面をリフォームし、「左側で設定、右側でログ確認」ができる、プロ仕様のレイアウトにアップグレードさせます。
1. 画面レイアウトの刷新(進化の呪文)
以下のプロンプトを使い、gui/app.py を全面的に書き換えさせます。
単なるウィンドウから、作業効率の良い「2カラム構成」へと進化させましょう。
🎨 GUIアップグレード・プロンプト
2. 【秘策】ダークモードで見えない文字を直す
ダークモード(暗い背景)を使った時、AIが「黒い文字」を指定してしまい、文字が読めなくなることがあります。
そんな時は、以下の「GUI Color Fixer」プロンプトを使ってください。一撃で視認性を修正します。
🚑 視認性修正プロンプト
3. さらに使いやすくするには?
GUIはあなたの好みに合わせて無限にカスタマイズ可能です。AIに以下のように伝えるだけで実装できます。
- 「起動時にウィンドウを最大化(全画面)してほしい」
- 「要素が増えてきたので、タブで画面を切り替えたい(その際、タブごとにファイルを
gui/modules/に分けて)」 - 「文字が小さすぎるので、全体的にフォントサイズを大きくして」
- 「処理が終わったら『完了しました』というポップアップを出して」
要望を伝える際は、必ず最後に以下の呪文を添えることを忘れずに。
ファイルマーカーの出力は禁止。ファイル名だけをコードブロックの外に表示しておくこと。ファイルは省略禁止。
A-08 (進化の呪文) へ進む ← Route A トップへ戻る