langchain-ai/design-agent

Open-source design agent: on-brand stills, decks, diagrams, charts and motion graphics from a chat thread, built on Deep Agents.

概要

Content Studio は、LangChain が社内で実行しているデザインエージェントで、design-agent という名前でオープンソースとして公開されました。チームの Slack にデプロイできる AI アシスタントで、誰でも人間のデザイナーに頼むように依頼し、ファイルを添付し、サイズ調整済み広告からローンチフィルムまで、完成したブランド準拠の成果物を受け取ることができます。

LangChain 自身の数字：8 月以来 3,000 以上のアセットを出荷、その作品を特集した投稿で X 上で約 450 万ビュー、リクエストの 4 件中 3 件はマーケティングチーム以外からのものです。

仕組み

エージェントは Deep Agents 上に構築され、インフラ（Slack 統合、サンドボックス、メモリ、スケジュール、トレーシング）を処理する Managed Deep Agents（MDA）を介してデプロイされます。このリポジトリはその上のデザイン脳であり、モデルがクリエイティブな決定を行い、コードがレンダリング、チェック、配信を処理します。

主要なメカニズム：

Slack ファースト。 スレッドでエージェントに言及し、ブリーフとファイルを添付すると、完成した作品が同じスレッドに投稿されます。作業中にメモを追加でき、進行中の作業に反映されます。
スレッドごとに 1 台のコンピューター。 各スレッドには、Chrome、FFmpeg、HyperFrames、D2、およびフォントを備えた独自の Linux サンドボックスがあります。生成されるものはすべてプロジェクトフォルダー内のコード（スライドは HTML、フィルムはアニメーションタイムライン）であるため、変更は再起動ではなく編集と再レンダリングです。API キーがサンドボックスに入ることはありません。
スキル + デザイン Wiki。 常時オンになっている小さなプロンプトがルータースキルを読み取り、35 のスキル（サイズ調整済み広告、ローンチフィルムなど）から適切なワークフローを選択します。Wiki にはクラフト知識（タイポグラフィ、色、レイアウト、チャート）が保持され、ブランドパックには事実が保持されます。スキルは必要なときだけロードされます。
外部ツール。 ビデオは HyperFrames で構築され（フィルムはタイムライン上の Web ページ）、Paper はストーリーボード/レイアウトを編集するための共有キャンバスです。画像、音声、音楽モデルはサンドボックス外のツールとして実行されます。MCP サーバー（Notion、Linear、GitHub、Figma）は MDA を介して接続され、各人が自分としてサインインします。
非同期サブエージェント。 大きなジョブの場合、メインエージェントが計画し、作業を分割し、同じサンドボックス上でバックグラウンドでサブエージェントを実行します。フィルムはストーリーボード → アニマティック → 制作へと進み、各段階でコードベースのレビューが行われます。
メモリ。 「LinkedIn ではオレンジを使わない」などのルールがそのターンで保存されます。2 つのレイヤー：チームメモリ（共有）と個人メモリ（個人ごと）。
自己改善。 各ジョブの後、learn_from_job が使用されたスキルに対して有効だったメモを書き込みます。後続のジョブはそれらのメモを読み取り、評価します。弱いものは破棄されます。

AI に見えない理由

何かを投稿する前に レンダリングして自分の作業を確認 します。
ブランドはコードです — レイアウトはトークン（色、フォント、間隔）のみを使用します。
すべてのレンダリングで 機械が数えられるものをチェック します：色、フォント、コントラスト、サイズ、チャートの計算。味はデザイナーに任せます。

README には並べて比較が示されています：同じプロンプト（採用チャート）をブランドスキルを持つローカルコーディングエージェントと Content Studio に与えた場合 — 前者は壊れたロゴロックアップ、一般的なフォント、軸なし、ブランド外のバーを生成します。後者はクリーンなロックアップ、ブランド書体、グリッドライン付きの軸、ブランドブルーのバーを生成します。

はじめに

Slack にデプロイ（推奨パス）：

curl -fsSL https://raw.githubusercontent.com/langchain-ai/design-agent/main/install.sh | bash
cd design-agent
uv run design-agent config set LANGSMITH_API_KEY=lsv2_… ANTHROPIC_API_KEY=sk-ant-…
uv run design-agent sandbox publish   # ワークスペースごとに 1 回
uv run mda deploy

LangSmith アカウント（Managed Deep Agents は LangSmith Cloud でパブリックベータ版）とモデルキーが必要です。最初のデプロイで Slack アプリがセットアップされます。承認してから、チャンネルでエージェントに言及します。

またはコーディングエージェントを使用： Claude Code、Codex、Cursor でリポジトリを開き、「Slack にデプロイして」「ウェブサイトからブランドパックを作成して」「毎週のニュースレターヘッダーを作るように教えて」などと言います。AGENTS.md が各リクエストをステップバイステップのスキルにルーティングします。

ローカルで試す（API キー不要）： Docker が必要で、スクリプト化されたモデルで実際のエージェントを実行します：

uv run design-agent sandbox build
uv run design-agent demo

これにより、workspace/out/demo/ に 3 つのサイズのローンチカードと 4 秒のティーザーが残ります。.env にモデルキーを入れると、uv run design-agent ask "…" で実際の作業を依頼できます。

コスト

コードは無料（Apache 2.0）。
モデルプロバイダーに支払います：LangChain では、リクエストの中央値はモデル費用で約 50 セント。長いフィルムやデッキはより高くなります。
Managed Deep Agents のホスティングは有料です — エージェント、サンドボックス、Slack アプリ、スケジュールを実行します。これらは自分で構築する必要があります。

カスタマイズ

希望	追加
あなたのブランド	`workspace/brand/`（デフォルトでニュートラルなサンプルブランドが同梱）
生成画像	`OPENAI_API_KEY`
音声、音楽、効果音	`ELEVENLABS_API_KEY`
Paper キャンバス	`PAPER_MODE=local` と Paper Desktop、またはデプロイ時は `bridged`
ウェブ検索、ドキュメント、その他のツール	`config/mcp.toml` の MCP サーバー

ライセンスフォントは private-fonts/（git 無視）に置きます。

モデル

デフォルトは Claude Opus 5.5。OpenAI および Google モデル、OpenAI 互換のエンドポイント、LangSmith Gateway も動作します。

セルフホスティング

はい — Apache 2.0 です。セルフホスティングは、Docker、HTTP API、独自の Slack アプリで同じエージェントを実行します（docs/self-hosting.md を参照）。

メモ

2 つの名前： 「Content Studio」は LangChain がエージェントを呼ぶ名前（および Slack アプリのデフォルト名）です。リポジトリ、パッケージ、コマンドは design-agent です。
デザイナーを置き換えますか？ いいえ。繰り返しのリクエストを処理し、デザイナーは自分にしかできない仕事に集中できます。彼らの判断はスキルとチェックに生きています。
Slack は必須ではありません： デプロイメントの API を呼び出したり、LangSmith Studio で開いたり、ターミナル（design-agent ask）を使用できます。長時間のバックグラウンドジョブ（フィルム、並行ルック）は Slack で報告されます。API 経由では、1 ターンで完了するリクエストに留めてください。
セキュリティ： サンドボックスは資格情報を保持せず、デフォルトでネットワークがありません。ホストツールがフェッチ、生成、配信を行い、結果をファイルとしてドロップします。

構築に使用

Deep Agents、Managed Deep Agents、HyperFrames、Paper、LangSmith、Chrome Headless Shell、FFmpeg、D2、Apache ECharts、sharp。