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 トップへ戻る