정백경/Design System Storybook MCP
특정 협업자나 내부 설정값 없이 AI가 읽을 수 있는 디자인 시스템 관점만 공개합니다.
Design System Storybook MCP는 디자인 시스템을 사람이 보는 컴포넌트 카탈로그에서 AI가 읽고 활용할 수 있는 UI 인프라로 바꾸려는 시도다. 프론트엔드, 디자인 시스템, MCP가 만나는 지점이다.
AI-readable 디자인 시스템
- Storybook은 컴포넌트의 상태와 사용 예시를 구조화해 설명하는 문서다.
- AI 에이전트가 UI를 만들려면 컴포넌트 이름, props, 상태, 사용 맥락을 읽을 수 있어야 한다.
- 따라서 디자인 시스템 문서는 사람만 보는 문서가 아니라 에이전트의 실행 컨텍스트가 된다.
Figma 병목
기존 기록에서는 레이어 이름과 절대좌표 중심 구조가 AI 에이전트 활용의 병목으로 정리돼 있다. 공개 문서에서는 특정 파일이나 협업자 대신, 시맨틱한 레이어 이름과 컴포넌트 구조가 왜 중요한지만 다룬다.
MCP와 연결
MCP는 AI 에이전트가 도구와 안전하게 연결되는 인터페이스다. Storybook과 디자인 시스템이 MCP와 연결되면, 에이전트는 임의로 UI를 그리는 것이 아니라 팀의 실제 컴포넌트와 규칙을 기준으로 작업할 수 있다.