LangChain、Slack上のデザインエージェント構築を公開

LangChainのGTMエンジニアリングチームとデザインチームは、指示文からブランドに沿ったキャンペーン素材を作るデザインエージェント「Content Studio」をSlack上に構築しました。デザイン原則を4カ月かけて学習させた結果、3,000点を超える素材を生成し、スライド資料は80本を超えました。そのうち1本は、同社のオーガニック動画で最も視聴されたYouTube動画に使われました。素材を使った投稿はXで約450万回表示され、LangChainのアカウントでは他の投稿に比べ「いいね」が約2倍、ブックマークが3.7倍になりました。依頼の4分の3はマーケティング部門以外からで、利用者の75%が毎週戻ってきます。依頼あたりのモデル利用費の中央値は、9月中旬の約8ドルから約50セントに下がり、移行後にはコード量も約80%減りました。

当初、モデルはHTMLやCSS、グラフの仕様、アニメーションのタイムラインを書けましたが、個性あるデザインに必要な社内事情を把握していませんでした。チームは色の指定、フォントの太さ、余白や配置の指針を加え、各画面の焦点を一つにする原則や、AIデザインにありがちなパターンを避ける仕組み、デザイナーのフィードバックの理由も取り入れました。キャンペーンの強さ、メッセージの明瞭さ、受け手の反応などをデザイナーが主観的に判断した場合、その理由を「スキル」に記録し、次の草案に生かします。レビューで頻発していた大文字・小文字の誤りは、自動チェックですべて検出できるようになりました。

Content StudioはSlackのスレッドごとに、独立したLinuxマシンとファイルシステム、シェルを備えたLangSmith Sandbox（作業環境を隔離する実行領域）で動きます。スレッドごとにプロジェクトファイルが保存され、エージェントとサブエージェントがコードを修正し、素材の一部を再描画できます。依頼内容、計画、場面ごとのコード、音声、描画結果は同じフォルダーにまとめられます。動画制作には、動画をウェブページとして扱うオープンソースのHyperFramesと、クリップや字幕、文字を動かすGSAPのタイムラインを使います。別のモーションスタジオ用キャンバスエンジンはコードでフレームを描き、最大16の瞬間を一つのフレームに混ぜて動きをぼかせます。両エンジンはタイムスタンプを指定してフレームを描画するため、エージェントは個々の場面を確認し、複数のフレームを並行して作れます。音声も同じタイムラインで管理し、ナレーション、音楽、効果音を同期させます。

LangChainは当初、タイトル、レイアウト、アニメーション用の再利用可能な部品115個と、その使い方の指示を備えたデザインシステムを構築しました。ブランドの一貫性は保てましたが、レイアウトやアニメーションが繰り返されるようになりました。Opus 5.5の登場後、チームはデザイン原則と大まかな指針を残し、固定ルールの大半を削除しました。同社によると、その結果、生成内容の多様性が増し、繰り返しが減りました。モデルの弱点を補うルールはモデルの性能向上とともに有用性が下がる一方、周辺のツールや文脈、人が作業を導く方法は引き続き重要だとLangChainは述べています。同社はエージェントのリポジトリーをオープンソースとして公開しました。チームはこれを複製してブランドの色指定、フォント、スキルを追加し、Managed Deep Agentsを通じてSlackに導入できます。

LangChainのGTMエンジニアリングチームとデザインチームは、指示文からブランドに沿ったキャンペーン素材を作るデザインエージェント「Content Studio」をSlack上に構築しました。デザイン原則を4カ月かけて学習させた結果、3,000点を超える素材を生成し、スライド資料は80本を超えました。そのうち1本は、同社のオーガニック動画で最も視聴されたYouTube動画に使われました。素材を使った投稿はXで約450万回表示され、LangChainのアカウントでは他の投稿に比べ「いいね」が約2倍、ブックマークが3.7倍になりました。依頼の4分の3はマーケティング部門以外からで、利用者の75%が毎週戻ってきます。依頼あたりのモデル利用費の中央値は、9月中旬の約8ドルから約50セントに下がり、移行後にはコード量も約80%減りました。

当初、モデルはHTMLやCSS、グラフの仕様、アニメーションのタイムラインを書けましたが、個性あるデザインに必要な社内事情を把握していませんでした。チームは色の指定、フォントの太さ、余白や配置の指針を加え、各画面の焦点を一つにする原則や、AIデザインにありがちなパターンを避ける仕組み、デザイナーのフィードバックの理由も取り入れました。キャンペーンの強さ、メッセージの明瞭さ、受け手の反応などをデザイナーが主観的に判断した場合、その理由を「スキル」に記録し、次の草案に生かします。レビューで頻発していた大文字・小文字の誤りは、自動チェックですべて検出できるようになりました。

Content StudioはSlackのスレッドごとに、独立したLinuxマシンとファイルシステム、シェルを備えたLangSmith Sandbox（作業環境を隔離する実行領域）で動きます。スレッドごとにプロジェクトファイルが保存され、エージェントとサブエージェントがコードを修正し、素材の一部を再描画できます。依頼内容、計画、場面ごとのコード、音声、描画結果は同じフォルダーにまとめられます。動画制作には、動画をウェブページとして扱うオープンソースのHyperFramesと、クリップや字幕、文字を動かすGSAPのタイムラインを使います。別のモーションスタジオ用キャンバスエンジンはコードでフレームを描き、最大16の瞬間を一つのフレームに混ぜて動きをぼかせます。両エンジンはタイムスタンプを指定してフレームを描画するため、エージェントは個々の場面を確認し、複数のフレームを並行して作れます。音声も同じタイムラインで管理し、ナレーション、音楽、効果音を同期させます。

LangChainは当初、タイトル、レイアウト、アニメーション用の再利用可能な部品115個と、その使い方の指示を備えたデザインシステムを構築しました。ブランドの一貫性は保てましたが、レイアウトやアニメーションが繰り返されるようになりました。Opus 5.5の登場後、チームはデザイン原則と大まかな指針を残し、固定ルールの大半を削除しました。同社によると、その結果、生成内容の多様性が増し、繰り返しが減りました。モデルの弱点を補うルールはモデルの性能向上とともに有用性が下がる一方、周辺のツールや文脈、人が作業を導く方法は引き続き重要だとLangChainは述べています。同社はエージェントのリポジトリーをオープンソースとして公開しました。チームはこれを複製してブランドの色指定、フォント、スキルを追加し、Managed Deep Agentsを通じてSlackに導入できます。