marvkr/better-design

해결하는 문제

Better Design은 일반적인 AI 생성 코드와 전문적인 수준의 UI 사이의 간극을 메워줍니다. AI 코딩 에이전트에게 시맨틱 CSS 토큰, 컴포넌트 오버라이드, 접근성 규칙과 같은 구체적인 디자인 컨텍스트를 제공하여, 단순히 'AI스러운' 범용 레이아웃이 아닌 확립된 디자인 시스템을 따르는 인터페이스를 구축할 수 있도록 합니다.

작동 방식

Claude Code, Cursor, GitHub Copilot과 같은 AI 코딩 도구와 통합되는 MCP (Model Context Protocol) 서버로 작동합니다. 두 가지 모드로 운영됩니다:

1. 디자인 인텔리전스 (Design Intelligence): 에이전트에게 능동적인 디자인 원칙과 검토 체크리스트(예: WCAG 접근성, 시각적 계층 구조)를 제공하여 스스로 출력을 평가하고 개선하도록 합니다.
2. 스캐폴드 (Scaffold): 에이전트가 31개의 엄선된 디자인 시스템(예: Linear, Stripe, Apple, Notion) 라이브러리에서 정보를 가져올 수 있게 합니다. 에이전트는 이를 사용하여 적절한 토큰, 아이콘 세트, 컴포넌트 코드를 선택함으로써 생성된 UI가 특정 전문 미학에 부합하도록 보장합니다.

대상 사용자

AI 코딩 에이전트를 사용하여 웹 인터페이스를 구축하며, 생성된 코드가 프로덕션 준비가 완료되었고 접근성이 뛰어나며 고품질 디자인 표준과 시각적으로 일관되기를 원하는 개발자와 디자이너를 위한 도구입니다.

주요 특징

• AI 에이전트를 위한 MCP 호환 디자인 시스템 레지스트리 제공.
• shadcn/ui와 호환되는 31개의 사전 구축된 디자인 시스템 포함.
• 접근성(WCAG) 및 시각적 디자인 일관성을 확인하는 자동 UI 검토 도구 제공.
• 자연어 프롬프트 기반의 디자인 시스템 시맨틱 매칭 지원.
• Cursor, Claude Desktop, VS Code와 같은 주요 AI 코딩 환경과의 원활한 통합 지원.