AIフロントエンドの「紫の牢獄」からの脱出記

YouWareテックブログへようこそ。ここでは私たちの失敗を告白し、秘密を共有します。

AIが生成したフロントエンドは10マイル先からでもわかる

これは冗談ではありません。助けを求める叫びです。インターネットを埋め尽くす、紫とインディゴのAIグラデーションの波を誰もが目にしてきたはずです。

https://x.com/IamKyros69/status/1975153164300263533

世界中の人々が「パープルグラデーション疲れ」に悩まされています。そして、その犯人はわかっています。5年前、現代のAIウェブを支えるフレームワーク「Tailwind CSS」の開発者が、ある運命的な決断を下しました。デフォルトのUIカラーをbg-indigo-500に設定したのです。本人も知らないうちに、その選択がAI時代全体の美学を決定づけることになりました。

https://x.com/adamwathan/status/1953510802159219096

そこにAnthropicが登場し、この紫の美学をさらに推し進めました。彼らの主力モデルであるClaude Sonnetは、この色に深い、魂レベルのつながりを持っているようです。どれほど詳細なデザインのプロンプトを書いても、どれほど懇願しても、また別の紫グラデーションのウェブサイトが出てきます。

私たちYouWareはSonnetを長年使ってきました。あまりに使いすぎて、自社のウェブサイトが紫色への賛辞のようになり始めていました。これは、私たちがそこから抜け出した物語です。

「Boost」ボタンという応急処置

最初の脱出計画は、「Boost」と呼ぶ機能でした。

AIエージェントのシステムプロンプトは長く、繊細です。「見た目を良くして」と伝えるだけで傑作を期待するわけにはいきません。そこで、特別な「Boost」モードを作りました。ユーザーがそれをクリックすると、エージェントが厳選されたモダンなデザインガイドラインに切り替わり、プロジェクトに即座の美的アップグレードを施します。そして何より、紫の呪縛を祓い清めます。

Boostは優れた機能で、特に新しいプロジェクトには絶大な効果を発揮します。しかし実際に使ってもらううちに、2つのことが明らかになりました。

• 大きなコミットメント: 「Boost」をクリックするのは、家中の部屋を一度にリフォームするようなものです。見えない何かへの信頼の跳躍が必要です。ユーザーは何が起こるか確信が持てず、すでに手を入れたプロジェクトにそれほど大きな変更を加えることを躊躇する場合がありました。
• 混乱を招く可能性: 複雑なウェブサイトでは、デザインシステムの全面刷新は予期しない影響を与えることがあります。サイトが壊れるわけではありませんが、手動での修正が必要なレイアウトのずれやスタイルの不整合が生じることがありました。

Boostは今でも私たちの武器として有効なツールであり、紫色ではない強力な美学で新しいプロジェクトを始めるのに最適です。しかしそこから、重要な教訓を得ました。プロンプトや後処理でできることには限界がある、ということです。絆創膏は傷を隠せても、治すことはできません。本当の戦いは、根本となるモデル自体で戦う必要がありました。