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 키는 샌드박스에 절대 들어가지 않습니다.
스킬 + 디자인 위키. 항상 켜져 있는 작은 프롬프트가 라우터 스킬을 읽고 35개의 스킬(크기 조정 광고, 출시 필름 등) 중에서 올바른 워크플로를 선택합니다. 위키에는 공예 지식(타이포그래피, 색상, 레이아웃, 차트)이 있고, 브랜드 팩에는 사실이 있습니다. 스킬은 필요할 때만 로드됩니다.
외부 도구. 비디오는 HyperFrames에서 구축되고(필름은 타임라인의 웹 페이지), Paper는 스토리보드/레이아웃 편집을 위한 공유 캔버스입니다. 이미지, 음성, 음악 모델은 샌드박스 외부의 도구로 실행됩니다. MCP 서버(Notion, Linear, GitHub, Figma)는 MDA를 통해 연결되며 각 사람이 자신으로 로그인합니다.
비동기 하위 에이전트. 큰 작업의 경우 메인 에이전트가 계획하고 작업을 분할하며 동일한 샌드박스에서 백그라운드로 하위 에이전트를 실행합니다. 필름은 스토리보드 → 애니메틱 → 제작으로 진행되며 각 단계에서 코드 기반 검토가 이루어집니다.
메모리. "LinkedIn에서는 주황색을 사용하지 마세요"와 같은 규칙이 해당 턴에 저장됩니다. 두 계층: 팀 메모리(공유) 및 개인 메모리(개인별).
자기 개선. 각 작업 후 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/에 세 가지 크기의 출시 카드와 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 참조).

참고 사항

두 이름: "Content Studio"는 LangChain이 에이전트를 부르는 이름(및 Slack 앱의 기본 이름)입니다. 저장소, 패키지, 명령은 design-agent입니다.
디자이너를 대체하나요? 아니요. 반복적인 요청을 처리하여 디자이너가 자신만 할 수 있는 작업에 집중할 수 있게 합니다. 그들의 판단은 스킬과 검사에 살아 있습니다.
Slack 필수 아님: 배포의 API를 호출하거나 LangSmith Studio에서 열거나 터미널(design-agent ask)을 사용할 수 있습니다. 긴 백그라운드 작업(필름, 병렬 룩)은 Slack에서 보고됩니다. API를 통해서는 한 턴에 완료되는 요청으로 유지하세요.
보안: 샌드박스는 자격 증명을 보유하지 않으며 기본적으로 네트워크가 없습니다. 호스트 도구가 가져오기, 생성, 전달을 수행하고 결과를 파일로 드롭합니다.

구축에 사용된 도구

Deep Agents, Managed Deep Agents, HyperFrames, Paper, LangSmith, Chrome Headless Shell, FFmpeg, D2, Apache ECharts, sharp.