6月12日、開発者が「Slightly reducing the sloppiness of AI generated frontend」と題した記事を公開した。

「Qtスタイル」指定だけで劇的改善

ChatGPTやClaude等でWebアプリのUIを生成させると、どうしても「安っぽい」見た目になってしまう。この問題に対し、ある開発者が意外な解決策を発見した。「Qtアプリのように見せて」と指示するだけで、安っぽさがほぼ完全に除去されるというのだ。

Qtは、C++やPythonで使われるクロスプラットフォームのGUIフレームワークだ。デスクトップアプリケーション開発では定番のツールで、VLC Media PlayerやAutodesk Mayaなど多くの著名ソフトウェアで採用されている。そのQtの洗練されたデザイン言語が、AI生成UIの品質向上に効果を発揮するという発見である。

AI生成UIの根深い問題

2024年後半からAIエージェントによるフロントエンド生成が実用レベルに達した一方で、デザイン品質の問題は開発者の共通課題となっている。著者の実験によると、この「安っぽさ」は特定のスタイルの問題ではなく、あらゆるスタイルに上乗せされる性質だという。

シンプルなWebページを「ミニマル」「モダン」「カラフル」など異なるスタイルで生成させても、すべて「指定スタイル＋安っぽさ」という結果になった。ところが「Qtアプリのように見せて」と指示した場合のみ、この問題が解決されたのである。

実証例：選挙予測ツールでの成功

この発見のきっかけは実用的なプロジェクトだった。著者はAxiosの選挙予測記事を読み、2030年の選挙人団データを可視化したいと考えた。

ChatGPTに「270-to-winスタイルのプログラム」を作らせ、共和党と民主党それぞれの勝利ルートの変化を確認できるインタラクティブツールを生成。この過程でQtスタイルの指定を試したところ、他の指定方法と比べて圧倒的に洗練された結果を得られた。実際の生成結果も公開されており、確かに違いは一目瞭然だ。

なぜQtスタイルが効くのか

この現象について著者は明確な理由を特定していないが、いくつかの仮説が考えられる。Qtは20年以上の歴史を持つ成熟したUIフレームワークで、一貫したデザイン原則とガイドラインを確立している。AIの学習データにも、Qtベースの高品質なアプリケーションが豊富に含まれている可能性が高い。

また、QtのHuman Interface Guidelinesでは、レイアウト、色彩、タイポグラフィに明確な規則がある。AIがこれらの原則に従って生成することで、結果的に「安っぽさ」が排除されるのかもしれない。

他のフレームワークでも試す価値あり

著者は他の個人用ソフトウェアもすべて「Qtスタイル」に変換したところ、見た目が大幅に改善されたと報告している。ただし、この発見は主観的な観察に基づくものだ。

同様の効果が期待できる他の候補として、Material Design、Human Interface Guidelines（Apple）、Fluent Design System（Microsoft）なども試してみる価値があるだろう。これらの確立されたデザインシステムも、AI生成UIの品質向上に寄与する可能性がある。

個人開発者にとっての実用性

特に短時間で使い勝手の良いツールを作成したい個人開発者にとって、このテクニックは immediate impact をもたらす可能性がある。デザインスキルがなくても、単純な指示語の変更だけで大幅な改善が見込めるからだ。

著者は他の開発者からのフィードバックや、AIが「安っぽさ」を上乗せせずに生成できる他のスタイルやデザインガイドラインについてのさらなる実験を求めている。この分野の知見が蓄積されれば、AI生成UIの品質は飛躍的に向上するだろう。

詳細はSlightly reducing the sloppiness of AI generated frontendを参照していただきたい。