에이전트를 위한 디자인 시스템

버즈빌이 AI 에이전트를 소비자로 삼아 설계한 디자인 시스템 아키텍처를 소개한다. 사람 디자이너가 경험으로 채워 넣던 맥락을 TypeScript ComponentManifest로 성문화하고, 브랜드를 seed 값으로 추상화해 한 레시피에서 전혀 다른 브랜드 표현을 자동 생성한다. 5월 첫 실제 캠페인이 에이전트 생성으로 출시됐고, 사람 수작업과 동등한 품질을 검증했다.

핵심 포인트

ComponentManifest: 컴포넌트마다 funnelStages, intent, flowPredecessors, flowSuccessors, brandHooks, compositionRules를 TypeScript 타입으로 라벨링해 에이전트가 어디에 무엇을 쓸지 정확히 알게 한다.
3레이어 구조: 프리미티브(하단) — 준비된 컴포넌트(중간) — 플레이팅/테마(상단). 에이전트가 빽빽한 저장고 대신 알맞은 선반으로 손을 뻗는다.
브랜드 시드: 컴포넌트는 브랜드를 모른다. 런타임에 seed(primary color, mode, radiusBase, designNotes)를 주입해 스킨케어와 스트리트웨어가 같은 레시피에서 전혀 다른 결과물을 낸다.
Interaction Cooker: 레시피와 하우스 스타일을 받아 전체 인터랙션을 처음부터 끝까지 조립·검증하는 테스트 주방. 어떤 것도 돈을 내는 테이블에 닿기 전에 검증된다.
자동화 테스트: 빌드마다 시스템 무결성 검증. 누락 manifest, 미등록 컴포넌트, stale 토큰, 순환 참조 등이 있으면 출시 불가.
크래프트의 이동: 판단이 접시(개별 결과물)에서 레시피와 재료(시스템 설계)로 올라갔다. 재료 단계의 결정 하나가 그 위의 모든 것에 자동으로 적용된다.

상세 정리

문제 정의: 사람 디자이너는 레시피가 빠뜨린 맥락을 경험으로 채우지만, 에이전트는 레시피에 적힌 것만 정확히 실행하고 침묵한 지점에서 멈춘다.
ComponentManifest 설계: constraints 필드에 "Use as the reward" 한 단어만 적으면 에이전트가 잘못된 컴포넌트를 조합했다. "Use as the reward reveal after a discovery interaction. Always pair with a CTA"로 구체화하자 오조합이 사라졌다.
브랜드 추상화 예시: 같은 CouponCard 레시피에 스킨케어 시드(#1FA46A, light, radius 8)와 스트리트웨어 시드(#000000, dark, radius 2)를 주입하면 각자의 브랜드 언어로 전혀 다른 결과물이 나온다.
규모 문제: 테이블 × 하우스 스타일 × 목표의 조합은 사람이 접시마다 맛볼 수 있는 수가 아니다. 판단을 재료 안에 내재화해야 폭발적 확장이 가능하다.
테스트 예시: it('no relationship field references a missing manifest'), it('no tokensConsumed entry is stale') 등 — 레시피 무결성을 빌드마다 자동 검증하고 통과 못 하면 배포가 막힌다.
첫 실전 사례: 5월, 에이전트 생성 OX 퀴즈 광고 캠페인이 실제 광고주에게 출시됐고 사람 수작업과 동등한 품질을 확인했다.
다음 단계: 하나의 주방에서 손님마다 다른 맞춤 식사를 플레이팅하는 개인화. 균일한 품질의 단일 요리를 넘어 개인화가 성과를 능가함을 증명하는 실험 중.
핵심 통찰: "AI가 당신을 위해 디자인 시스템을 만들어 줄 거라고 생각했다. 우리는 AI를 위해 하나를 만들었다."