オープンソースUI設計ツール「Impeccable 3.5」公開、AI特有の量産型デザインを撲滅

生成AIにウェブサイトのUIを作らせると、誰もが見覚えのある「あのデザイン」が出来上がります。無駄に広い文字間隔、薄い枠線に過剰なドロップシャドウ、そしてなぜか判を押したように使われるクリーム色の背景です。

オープンソースのUI設計ツールImpeccableの開発チームが数千件の生成結果を検証したところ、74%のページでAI特有のクリーム系背景が使われ、76%が極端な文字間隔を採用し、90%以上が最低限のコントラスト基準すら満たしていませんでした。

こうした量産型の粗悪デザインを撲滅するため、チームは5月29日にImpeccable 3.5をリリースしました。すべてのモデルに同じ指示を与えるのをやめ、モデルごとの悪癖に合わせた専用ルールを適用するアプローチに舵を切っています。

モデル別の悪癖をピンポイントで修正

Impeccable 3.5の大きな特徴は、ビルド時にモデル固有の制約ルールを組み込む仕組みです。特にGPT-5.5やCodex向けには、それらのモデルが頻出させる欠陥を直接防ぐ専用ルールが生成されます。

約190件のサンプル分析をもとに、暖色系での安易なクリーム色背景の採用を禁止したほか、全大文字の飾り見出し、番号付きセクション、3種類以上のフォント混用などを一掃しました。

また、新規案件と既存案件の挙動も明確に分けられました。既存のコードベースでは既存のデザインシステムやコンポーネントを尊重してスタイルを維持し、新規案件では129種類の厳選カラーパレットから最適な配色を提案します。

ブラウザ上で直感編集、そのままソースコードへ

操作面での目玉は、ベータ版となったLiveモードです。AIとのチャット画面とエディタを往復する必要はなく、実際の画面を見ながら作業できます。

画面上のSteerバーにテキストや音声で指示を出せばページ全体が即座に書き換わり、特定要素を選んで直接文言を編集することも可能です。確定ボタンを押せば、裏でサブエージェントが動作してソースコード自体を直接更新します。

内部エンジンから重いjsdomを排除し、独自のCSSカスケードリゾルバーへ刷新したことで、処理速度は約20倍に高速化しました。41種類のアンチパターン検出ルールが、CLIやブラウザ上で軽快に動作します。

なぜ重要か

AIによるコード生成は実用段階に入ったものの、デザイン面では「動くけれど見た目がダサい」状態が続いていました。修正に余計な手間がかかる問題に対し、Impeccable 3.5は極めて実用的な解を提示しています。

CursorやClaude Codeを使う個人開発者やフロントエンド担当者にとって、導入する価値は十分にあります。ブラウザ上の見た目をいじる感覚でソースコードまで直せるLiveモードは、プロトタイピングの反復速度を劇的に引き上げるはずです。

モデルごとに別々のプロンプトやルールを生成して焼き込む設計は、非常に賢い手法だと評価できます。万能な指示文をひとつ置くよりも、各モデルの出力バイアスを直接潰すほうが確実だからです。一方で、基礎モデルが頻繁にアップデートされる中で、それぞれの欠陥ルールを追従し続けられるかが今後の運用課題になるでしょう。