本文にスキップ
AI News HubLIVE
サイト内リライト6 分で読了

私たちがデザインエージェントをどのように構築したか

記事の要約

LangChainは、Slack上でオンブランドな動画、グラフィック、デッキを作成するオープンソースのデザインエージェント「Content Studio」と、それを支えるハーネスの構築方法を共有しました。

私たちがデザインエージェントをどのように構築したか
誤りを報告

訂正窓口はまだ利用できません。記事情報をコピーして保存できます。

訂正案内
本文へ

LangChainは、Slack上で動作するデザインエージェント「Content Studio」を構築しました。これは単一のプロンプトから動画、ソーシャルグラフィック、再現されたUI画像、スライドデッキなどを作成できます。エージェントが生成するすべてのアセットはコードで書かれています。Content StudioはManaged Deep Agents上で完全に社内構築され、現在では社内で最も広く使われているGTMエージェントの1つとなっています。しかし、当初はそうではありませんでした。初期のフィードバックは芳しくなく、品質は低いものでした。そこからどのようにして高品質に至ったのでしょうか。LangChainのGTMエンジニアリングチームはデザインチームと協力し、4か月かけてContent Studioに自分たちのセンスとデザイン原則を教え込みました。その過程の多くは、エージェントが全社の前で間違えるのを観察することから学びました。

Content Studioを構築するには3つの要素が必要でした。デザイナーの専門的な判断をエージェントのスキルとチェックに書き込み、何が良いかを理解させること。モデルの周りにカスタム環境を構築し、デザイン作業のあらゆるレイヤーに対応するツールを備えたビデオ編集コンピュータを用意すること。そして、チーム全体が1つのSlackスレッドから数時間に及ぶプロジェクトで協力できる適切なUXです。Managed Deep Agentsは、Content Studioを社内で製品化するために必要なすべてを提供しました。管理されたLangSmith Sandbox、Slack統合、管理ツール、スコープ付きエージェントメモリ、エージェント実行のスケジューリングです。これにより、小さなチームがインフラストラクチャではなく、デザイン作業、スキル、ツール、Slack体験に時間を費やせるようになりました。

Content Studioはこれまでに3,000以上のアセットを配信し、80以上のスライドデッキを含みます。そのうちの1つは最も視聴されたオーガニックYouTube動画で使用されました。その作品を載せたXの投稿は約450万回閲覧されました。LangChainアカウントでは、そのビジュアルを含む投稿が他の投稿と比べて約2倍のいいねと3.7倍のブックマークを獲得しました。現在、リクエストの4分の3はマーケティング以外から来ており、ユーザーの75%は毎週戻ってくるリピーターです。リクエストの中央値コストは現在約50セントで、9月中旬の約8ドルから減少しました。Managed Deep Agentsへの移行後、自社コードは約80%削減されました。

構築に入る前に、AIは本当にデザインが得意なのかという議論に触れています。モデルは実行力に優れ、HTMLやCSS、チャート仕様、アニメーションタイムラインを書くことができました。しかし、文脈がなかったため、馴染みのあるパターンに頼りがちでした。これは「分布的収束」と呼ばれ、結果は洗練されて見えても他の100の作品と同じに見えたり、美しくアニメーションしても要点が伝わらないことがありました。StripeのデザインヘッドであるKatie Dillは、第二次世界大戦後の建設者がモダニズムの清潔な形状を繰り返しコピーした例を挙げ、AIも同様に「ゾンビUI」を生み出す可能性があると警告しています。自分たちの視点を持たなければ、AIが代わりに視点を与えてしまうのです。LangChainは、AIがデザインを苦手としているのではなく、視点を提供しない限り視点を持たないだけだと考えています。

デザインエージェントにセンスを教えることが鍵でした。センスとは、正しい仕事と良い仕事を分ける判断力です。デザインでは、2つのレイアウトが正しいフォント、色、間隔を使用していても、要点を伝えられるのは1つだけです。センスは「注意を払うのが非常に上手になること」から生まれます。チームはこの注意力によってAIスロップを見分けることを学びました。これは、ブリーフが決定をエージェントに委ねたときに最も頻繁に現れます。例えば、ローカルコーディングエージェントがブランドスキル(色、フォント、ロゴなど)を使用して作成した画像は、正しいロゴの組み合わせ、テキストの配置、主要ブランドカラーと二次ブランドカラーの区別など、重要なコンポーネントが欠けていました。同じプロンプトでContent Studioは完全にオンブランドな画像を生成しました。これは、ローカルエージェントがブリーフでカバーされていない各決定を最も見たもので埋めたのに対し、Content Studioはチームの選択で同じギャップを埋めたためです。

Content Studioに与えられたガイドラインは、カラートークン、フォントの太さ、間隔、配置などの基本から始まりました。しかし、改善の多くはその上に追加されたものから来ました。フレームごとに1つの焦点を持つこと、一般的なAIデザインパターンに対するガードレール、各フィードバックの背後にある理由などのデザイン原則を導入しました。これらとより優れた基盤モデルが組み合わさり、Content Studioはデザイナーのように考え、コミュニケーションすることを学びました。初期のモーショングラフィックでは、鳥が光のリボンを引きながら画面外へ飛び去るシーンがありました。チームは「鋭いエッジなし」を求めましたが、最初のパスはぎこちなく、鋭く丸みを帯びたエッジでした。デザイナーなら意図を理解し、エッジは柔らかくなり、尾は鳥の動きと反対方向に細くなりながらフェードするべきだとわかります。後のイテレーションでは、エージェントはデザイナーの目でその詳細を評価しました。簡単なスケッチで鳥の尾の位置を特定し、リボンが接続されたままであることを確認するためのフレームごとのチェックを自ら構築しました。ほとんどの視聴者はこの詳細に気づかないでしょうが、何かがおかしければ感じ取るでしょう。

測定可能な問題は最も簡単に解決できました。デフォルトの大文字化は以前レビューで頻繁に指摘されましたが、自動チェックがすべてのインスタンスを捕捉するようになりました。より難しい決定はより主観的で、キャンペーンのアイデアが十分に強いか、メッセージが明確に伝わるか、実行が観客に響くかなどです。デザイナーがこれらの判断を下すとき、チームはその理由をスキルに取り込み、エージェントが将来のドラフトに適用できるようにしました。Content Studioは誰がデザイン作業を行えるかを変えました。PM、エンジニア、創業者がSlackでエージェントにブリーフィングし、オンブランドで出荷可能なものを手にすることができます。現在、リクエストの4分の3はマーケティング以外から来ています。デザイナーにとって役割はクリエイティブディレクターに近づき、すべてのアセットを自分で制作するのではなく、方向性を設定し作品をレビューするようになりました。

デザイン判断を正しく行うことはプロセスの一部に過ぎません。チームはエージェントにそれを実行するためのツールと環境も提供する必要がありました。デザイナーはPhotoshopで静止画、ビデオエンジンでモーション、共有キャンバスでプロトタイピングとコラボレーションなど、複数のツールを横断して作業します。また、ブランドガイドライン、デザインアセット、会社のドキュメントにも依存しています。エージェントにも同様のセットアップが必要です。作業するコンピュータ、デザインプロセスのさまざまな部分のツール、デザイナーが仕事に持ち込む文脈です。ハーネスはこれらの要素をまとめます。Deep Agentsは、エージェントループ、計画、ファイル、サブエージェント、コンテキスト管理を含む基盤となるハーネスを提供します。Managed Deep Agentsはそれをパッケージ化し本番環境で実行します。チームはその周りに環境を構築し、エージェントがプロジェクトを維持し、ツールを横断して作業し、結果を検査できるコンピュータを与えました。

最初のハーネスはモデルの代わりにデザインしようとしました。初期のモデルは、チームが出荷したいモーショングラフィックやローンチフィルムを作るのに多くの助けを必要としました。モデルがまだ自分で理解できないことを補うため、チームの直感はより多くのデザイン判断を指示とコードに入れることでした。そこで、タイトル、レイアウト、アニメーション用の115個の再利用可能なUIコンポーネントを備えたデザインシステムを構築し、いつどのように使用するかのガイダンスも提供しました。これによりモデルは既存のデザインから作業できるようになり、ゼロから行う創造的な決定の数が減りました。これによりブランド整合性は保たれましたが、エージェントは各フレームで同じレイアウトとアニメーションを繰り返すだけで、多様性に欠けていました。チームはモデルが最終的にこのタスクを得意になると知っていたため、その瞬間に向けて環境を構築し続け、途中でスキルとツールを試しました。時にはモデルを助けるためにより多くの参照や詳細な指示を追加し、時にはそれらを完全に削除してモデルが自分で何ができるかを見ました。しかし結果はまだ望ましいものではなく、ギャップを埋めるにはますます多くのエンジニアリング作業が必要でした。チームはスキルにルールを追加し続け、より多くのモーションコードを書き、モデルができないことを補うためにより多くのコンポーネントを構築しました。そしてOpus 5.5が登場し、品質がすぐに向上しました。チームはスキルを見直し、ハードコードされたルールのほとんどを削除し、デザイン原則と高レベルのガイダンスを残しました。結果はさらに改善され、多様性が増し、繰り返しが減りました。モデルはついにチームが以前に事前構築しようとしていた創造的な決定を行えるようになりました。これが彼らの「苦い教訓」です。モデルの弱点を補うために設計されたルールは、モデルが改善するにつれて有用性を失います。持続するのはモデルの周りの環境であり、使用するツール、引き出す文脈、そして人々がその仕事をどのように導くかです。チームは創造的な決定を事前に構築する代わりに、各世代の新しいモデルを活用できるようハーネスを十分に柔軟にすることに焦点を当てました。

ハーネスの実際の動作を示すため、チームはContent Studioに、ビデオプロジェクトをエンドツーエンドでどのように処理するかについてのフィルムを作成するよう依頼しました。結果は…(原文はここで途切れています)

要点と分析を開く

記事インテリジェンス

投資家中級

要点

  • デザインのセンスは、コード能力だけでなく、デザイナーの文脈、原則、フィードバックの理由から生まれる。
  • エージェントには、スレッドごとのサンドボックス、ビデオエンジン、画像ツール、共有キャンバスを備えた「デザイナーのコンピュータ」を与える。
  • モデルの弱点を補うために作られたハードコードされたルールは、モデルの進化に合わせて削除し、デザイン原則を残すべき。
  • 長時間実行されるエージェントには、Slackスレッドで計画、ライブ進捗、出荷前の承認を示すマルチプレイヤーUXが必要。

要点と分析は自動生成され、誤りを含む場合があります。原典をご確認ください。