AIが生成するフロントエンドの「雑さ」を少しだけマシにする方法

AIによるフロントエンド生成は便利ですが、コードの品質や構成が少し雑になりがちです。この問題に対処し、より実用的で堅牢なコードを出力させるためのヒントをまとめました。

Qtは学習データに山ほど含まれているからね。何十年も前から存在しているし、モデルはQtのチュートリアルやスクリーンショット、ソースコード、議論なんかを嫌というほど見てきているはず。結果として、モデルの潜在空間において「Qtアプリケーション」という概念は非常に整合性が取れているんだ。「Qtアプリ」という言葉は、もはや特定の分布を指す用語のようなものだよ。

完全に個人の好みだけど、QtのUIによくあるベベル（面取り）がかかったグレーの多層構造は好きじゃないな。無駄に視覚的なグループ化を強要されている気がして落ち着かない。自分ならオリジナルか、Apple系かWin11系を選ぶね。Material Designならいいと思うけど、あのラベンダー色は何なんだろう？自分はいつもパレットを絞るようにしてる。背景色は最大2色まで、ドロップシャドウは無し。前景色も必要最低限に抑えて、もし単調すぎるかなと思ったら、その時に初めて装飾を加える感じかな。

https://csszengarden.com/ の現代版がまさに必要だよね。CSSが様々なLLMやプロンプトによって生成されるようなやつ。

単に楽しむだけなら、他にも面白い選択肢を生み出す方法はたくさんあるよ。例えば、映画（『時計じかけのオレンジ』や『Backrooms』みたいな、独自の強い美学を持つもの）をテーマにするよう指示したり、スクリーンショットや写真を渡して「デザインシステム」として使わせたりとか（より強力なモデルなら、雑誌や印刷物のレイアウトもうまく機能する）。

どうだろうね。どれもイマイチに見える。自分で使う小さなツールを作るときは、Svelteを使ってTauriでラップするよう指示するだけかな。グラフィカルな装飾は一切なし。自分の好みに合わせると、大抵いい感じに仕上がるよ。

これは大半がモデルのせいだね。多くのモデルは特定のスタイルのHTMLを生成するように学習されている。例えばClaudeのスタイルはかなり特徴的だし、新しいDeepSeekもそれを模倣している気がする。Kimi K2みたいに、もっと人間らしいHTMLを出力できるモデルもあるね。確かポストトレーニングの量が一番少ないモデルだったはず。もちろん、自分が持っていない画像やアセットを勝手に使わないように制限するのは必要だから、彼らが絵文字や手作り感満載のSVG、あるいはWebAudioで音声を合成したりするのは理解できる。人間がこれまでやってこなかった手法だけどね。

まともな結果を出したいなら、a) Opusを使うこと、b) frontend-designスキルを使うこと、この2つが不可欠だよ。 https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md

自分の結果とアプローチを共有するよ。取り組んでいる「プロンプトからデザイン」するツールで作った3つのデザインがこれ。 https://image.non.io/10037610-e35e-44b0-b5c6-69d8fb772109.webp (https://image.non.io/10037610-e35e-44b0-b5c6-69d8fb772109.webp) https://image.non.io/dcf067bc-e296-4744-9b36-2b882f3d791d.webp (https://image.non.io/dcf067bc-e296-4744-9b36-2b882f3d791d.webp) (上と同じで、簡易マップを適用したもの) https://image.non.io/94fdfb04-c57d-4b81-8d53-7b0f707e4d63.webp (https://image.non.io/94fdfb04-c57d-4b81-8d53-7b0f707e4d63.webp) 最初からLLMに丸投げするより、DiffusionモデルでまずレンダリングしてからLLMに組み立てさせる方が、仕上がりのチープさが抑えられることがわかった。建築図面なしで建設業者に家を建てろとは言わないだろ？それと同じで、視覚的なガイドなしにLLMに結果を求めるべきじゃないんだ。自分のツールは diffui.ai だから、興味があれば見てみて。DiffusionモデルにUIを生成させつつ、エージェントが連携して仕上げを行うような仕組みだよ。

エージェントに既存のデザインシステムを使わせればいいだけじゃないかな。一貫性も保てるし、選べるスタイルも豊富だし（個人的な用途ならカスタマイズも可能だし）。エージェントにプロジェクトごとにゼロから整合性の取れたコンポーネントライブラリを考えさせるなんて期待しすぎだよ。それは既に解決済みの問題だ。自分ならMUIみたいに広く使われているライブラリを採用して終わりにするね。

Windows 9xアプリのスタイルを再現させるプロンプトを試したらどうなるか興味があるな。最近はみんな、Windows 9x時代を懐かしんでいるようだね。アプリケーションが厳格な視覚的「システム」に従わなければならなかった最後の時代、というイメージがあるから（…というより、DirectDrawが登場するまでWindowsはサードパーティ製のカスタムコントロールを実装する柔軟性がなかったから、強制的に従わされていたと言うべきか。話が逸れたけど）。LLMが単に「Win95っぽく見える」だけでなく、当時の規則を本当に守れるのか気になるんだ。例えば、ボタンのグリッドをアイコンで構成するマインスイーパーのように、Win95時代のGDIコントロールの階層構造をしっかり再現できるか、といった感じだね。