Replitエージェントのデザイン機能の進化

皆さん、本日はお時間をいただき、ありがとうございます。私はTalor Andersonと申します。Replitのエンジニアとして、社内デザインシステムのメンテナンスやGitコラボレーションインフラの開発など、様々なプロジェクトに携わってきました。最近では、AIチームでエージェントの開発に取り組んでおり、本日は私たちがAIエージェントを単なるコーダーからデザイナーへと進化させた過程についてお話しさせていただきます。

AIソフトウェアデザイナーを作る上で、最大の課題は「ほとんどのソフトウェアが見た目が良くない」という現実です。Google CloudのダッシュボードやAWSを例に挙げると、無制限の予算があっても見た目が良いとは言えず、むしろ予算が多いほど見た目が悪くなる可能性すらあります。

Replitエージェントは、誰でも簡単にソフトウェアを作れるようにすることで、ソフトウェア作成の民主化を実現していますが、デザインはまだ民主化されていません。デザインは簡単ではなく、アプリやビジネスを差別化する重要な要素です。大企業でもデフォルトでは良いデザインにならないことを考えると、何か特別なアプローチが必要だと考えました。

開発の経緯

初期段階では、エージェントにデザインのガイドラインをほとんど与えていませんでした。6つのCSSフレームワークでテストを実施したところ、Bootstrapで最も良い結果が得られました。これは人気のCSSフレームワークで、長年の実績があり、エージェントも自然とBootstrapを選択する傾向がありました。興味深いことに、フレームワークがある方が30%処理が速いという結果も得られました。

しかし、ユーザーがエージェントの作品をTwitterに投稿し始めると、「2010年代のような見た目」「Bootstrapっぽい」というフィードバックが多く寄せられました。これは、学習データの多くがその時代のものだったことを考えると当然の結果でした。

そこで私たちは、独自のBootstrapフレーバーを開発し、Replitのデザインシステムに合わせて、ワークスペースと調和するようにカスタマイズしました。この過程で重要だったのは、エージェントに「独自のCSSを書かない」「提供されたライブラリのみを使用する」という明確な指示を与えることでした。これにより、独自のスタイルとライブラリのスタイルが混在する「フランケンシュタイン的な」デザインを避けることができました。

新しいアプローチ

デザインシステムの専門家として、この経験から重要な教訓を得ました。デザインシステムは、人間にもエージェントにも同じように重要で、どちらもタイポグラフィ、ボタン、ガイドラインといった明確な指針を必要としています。

最近では、JavaScriptスタックの導入とともに、特にshadcn/uiライブラリの採用を進めています。このライブラリは、デフォルトでアクセシビリティが高く、見た目も良いという特徴があります。さらに、テーミング機能を追加することで、ユーザーが簡単にデザインをカスタマイズできるようになりました。

例えば、シンプルなTodoリストアプリでも、数回のクリックで様々な見た目のバリエーションを作れるようになっています。これは、エージェントに「この色を変えて」「このボーダーを調整して」といった細かい指示を出すよりも、はるかに効率的です。

今後の展望

現在、私たちは要素ごとの対話型デザイン機能を開発中です。これにより、ユーザーは特定の要素をクリックして、エージェントとより密接にコラボレーションしながらデザインを調整できるようになります。この機能はまだデザインモックアップの段階ですが、このような直感的なツールの開発に力を入れていきたいと考えています。

結論として

この開発過程を通じて、私たちは3つの重要な発見をしました。
　第一に、エージェントと人間は同じようなニーズを持っており、同じデータやガイドラインを必要としています。

　第二に、制限は創造性を生むということです。エージェントは完全な自由よりも、適切な制約の中で、アクセントカラーやアライメントをより効果的に活用できました。
　最後に、適切な表現力の重要性です。白紙のキャンバスではなく、適切なツールを提供することで、より良い結果が得らより良い結果が得られることがわかりました。

ご清聴ありがとうございました。