DAUB MCP 서버: Claude로 JSON UI 생성 및 렌더링

DAUB는 Claude를 위해 특별히 제작된 MCP 서버로, Claude가 개발자가 복사, 붙여넣기, 컴파일, 디버깅하는 코드(예: JSX/HTML)를 생성하는 기존 UI 개발 워크플로우를 우회합니다. 대신 Claude가 직접 전체 사용자 인터페이스를 생성하고 렌더링할 수 있습니다.

작동 방식

Claude와 DAUB를 함께 사용할 때의 워크플로우는 다음과 같습니다:

Claude가 generate_ui("지출 차트, 필터, 데이터 테이블이 있는 대시보드가 필요합니다")를 호출합니다
DAUB의 MCP 서버가 구조화된 JSON 사양을 생성합니다
DAUB가 이 사양을 즉시 라이브 인터페이스로 렌더링합니다—컴파일이나 복사-붙여넣기가 필요 없습니다
Claude는 validate_spec이나 render_spec을 호출하여 여러 대화 턴에 걸쳐 디자인을 반복할 수 있습니다

MCP 서버 도구

Cloudflare 에지에서 실행되는 MCP 서버는 네 가지 특정 도구를 제공합니다:

generate_ui: 자연어 설명을 렌더링된 인터페이스로 변환합니다
render_spec: JSON 사양을 가져와 라이브 렌더링을 반환합니다
validate_spec: Claude가 렌더링 전에 자신의 출력을 확인할 수 있게 합니다
get_component_catalog: Claude가 34개 카테고리에서 76개 컴포넌트를 탐색하여 적절한 UI 요소를 선택할 수 있게 합니다

기술적 세부사항

JSON 사양 형식은 Claude가 안정적으로 생성할 수 있도록 의도적으로 단순하게 설계되었습니다. 레이아웃, 타이포그래피, 폼, 테이블, 네비게이션, 데이터 표시, 오버레이를 다룹니다. Claude는 여러 턴에 걸쳐 사양을 비교하고 처음부터 시작하지 않고 반복할 수 있습니다.

렌더링 측면에서는 daub.css와 daub.js 두 개의 CDN 파일만 필요합니다. 20개의 시각적 테마 패밀리를 포함하며 빌드 단계가 전혀 필요 없습니다.

전체 프로젝트는 개발 중에 Claude Code로 구축되었으며, 사양 형식은 Claude와 함께 많은 반복을 거쳐 컴포넌트 이름을 망상 없이 일관되게 생성할 수 있도록 했습니다.

사용 가능성

DAUB는 무료로 사용할 수 있습니다. GitHub 저장소는 https://github.com/sliday/daub에서 확인할 수 있으며, Claude 없이도 시도해 볼 수 있는 플레이그라운드는 https://daub.dev/playground.html에 있습니다. 로드맵은 https://daub.dev/roadmap에서 확인할 수 있습니다.

📖 Read the full source: r/ClaudeAI