발표에서 확인된 핵심 사실

서로 다른 프레임워크로 제작된 23개 바이브 코딩 제품을 하나의 코드베이스로 통합하는 과정에서 디자인 시스템은 AI의 임의 조합을 제한하는 제약 시스템으로 진화한다. AI에게 검증된 컴포넌트와 토큰이라는 명확한 맥락(Context)을 제공함으로써 기계가 임의로 코드를 생성하는 범위를 통제하기 때문이다.

Meta의 Asterisk(기계 읽기 가능 디자인 시스템)는 컴포넌트와 CLI, 문서, MCP(Model Context Protocol)를 통합 제공한다. AI가 디자인 시스템을 API처럼 소비하도록 설계해 특정 산업에 치우치지 않은 범용 시스템을 지향한다. Meta가 Instagram과 Facebook, Facebook Messenger 등 내부 제품에서 실제 운용한 시스템을 기반으로 구축해 실무 적용성을 높였다.

Figmalint(피그마 AI 검증 플러그인)는 결정론적 테스트와 LLM 기반 추천을 결합해 Figma 컴포넌트 집합을 AI 사용 환경에 맞게 검증한다. 토큰 참조 여부와 레이어 이름, 분리된 컴포넌트의 존재 여부를 정밀하게 검사해 디자인 측의 책임 범위를 명확히 규정한다. Design Systems Assistant MCP(디자인 시스템 어시스턴트 모델 컨텍스트 프로토콜)를 활용해 Google Material UI와 Microsoft Fluent 같은 대규모 디자인 시스템의 모범 사례를 추천하며 누락된 속성을 보완한다.

AI 시대의 디자인 시스템은 AI가 만든 제품을 역설계해

AI 시대의 디자인 시스템은 디자인을 코드로 넘기던 기존의 단방향 흐름을 뒤집어 AI가 생성한 제품을 역설계하는 코드 중심 워크플로로 확장한다. 제품의 결과물에서 출발해 코드를 역설계하고 이를 다시 캔버스(디자인 도구의 작업 영역)로 생성하여 구성원 간 합의를 도출하는 과정을 거친다. AI가 만든 결과물을 먼저 안정화한 뒤 다시 전통적인 선형 워크플로로 복귀하는 구조를 취한다. 제품의 실체에서 설계도로 거슬러 올라가는 역방향 흐름을 통해 AI 생성물의 불확실성을 제어한다.

언어 모델을 이용해 코드에서 캔버스로, 다시 코드로 반복 변환하면 패딩이나 세부 속성이 누락되는 드리프트(데이터가 원래 값에서 점차 벗어나는 현상)가 발생한다. 이러한 손실을 막기 위해 계약(Contract, 코드와 디자인 간의 약속된 명세서)을 정본으로 설정하는 방식이 도입된다. 계약을 정본으로 두면 언어 모델의 자의적인 해석 과정 없이도 동일한 명세로부터 코드와 캔버스를 결정론적으로 생성한다. 명확한 기준점을 통해 코드와 캔버스의 결과물을 일치시키고 변환 시 발생하는 데이터 왜곡을 차단한다.

디자인 시스템은 AI가 임의의 조각을 조합하지 못하도록

검증된 컴포넌트와 토큰, 문서, 접근성 속성이 결여된 상태에서 AI를 투입하면 내부 동작 원리를 무시한 바이브 디자인(Vibe Design)과 바이브 코딩(Vibe Coding)이 발생한다. 디자인 시스템은 AI가 선택할 수 있는 검증된 레고 블록 집합으로서의 맥락을 제공한다. AI가 임의의 조각을 조합하지 못하도록 제한하는 이 구조는 AI 결과물의 안정성을 높이는 필수 기반이 된다.

에이전시가 내부 도구와 실무 경험을 오픈소스로 공개하는 전략은 전문성 입증과 맞춤형 프로젝트 확보로 이어진다. 적극적인 영업보다는 같은 문제를 겪는 실무자를 돕기 위해 자료를 무료로 배포하며 신뢰를 구축하는 방식이다. 이는 SaaS(Software as a Service, 서비스형 소프트웨어) 운영에 수반되는 고객 지원이나 마케팅 비용 부담 없이도 반복 가능한 고객 유입 경로를 만드는 실무적 대안이 된다.

디자인 시스템의 AI 적합성은 Figmalint(피그마 린트, 디자인 파일 검사 도구)의 검증 항목인 토큰 참조 여부, 레이어 이름 일치, hover나 disabled 같은 상태값의 존재 여부로 판단한다.