marvkr/better-design

어떤 프로젝트인가요?

핵심 기능

• 01설명된 제품에 맞는 디자인 시스템을 찾습니다.
• 02설치를 위한 디자인 토큰과 컴포넌트 코드를 제공합니다.
• 03레이아웃, 타이포그래피, 폼, 내비게이션에 관한 UI 및 UX 원칙을 제공합니다.
• 04일관된 스타일을 유지하도록 단일 라이브러리의 아이콘을 제공합니다.
• 05UI 코드에 접근성 및 시각 디자인 검수 규칙을 적용합니다.

활용 사례

• AI 코딩 에이전트가 일관된 디자인 시스템을 따르는 설정 페이지를 만들도록 합니다.
• 선택한 브랜드 스타일 테마의 개별 shadcn 컴포넌트를 React 프로젝트에 추가합니다.
• 커밋 전에 생성된 UI 코드의 접근성 문제를 검사합니다.
• 에이전트가 만든 인터페이스에서 아이콘 스타일을 일관되게 유지합니다.

빠른 시작

1. 1

   프로젝트에 에이전트 스킬을 설치하세요

   npx skills add marvkr/better-design --skill better-design
2. 2

   Better Design을 코딩 도구에 연결하고 에이전트를 다시 시작하세요

   npx better-design
3. 3

   문제가 발생하면 설정을 확인하세요

   npx better-design doctor

사용 전 알아둘 점

• !계정이 없으면 설정 과정에서 무료 키가 생성되므로 better-design.com의 호스팅 서비스에 의존합니다.

포함된 컬렉션

토픽

자주 묻는 질문

better-design은(는) 무엇인가요?

코딩 에이전트에 디자인 시스템, UI/UX 가이드, 아이콘, 접근성 검수 규칙을 제공하는 MCP 서버이자 shadcn/ui 레지스트리입니다. Better Design은 Claude Code, Cursor, Codex, VS Code 같은 코딩 에이전트에 부족한 디자인 맥락을 제공하는 MCP 서버입니다. 설명된 제품에 맞는 디자인 시스템을 찾고, 해당 시스템의 토큰과 컴포넌트 코드를 가져오며, 계층 구조, 간격, 타이포그래피, 폼, 내비게이션, 오류 처리에 관한 UI 및 UX 원칙을 조회하는 도구를 제공합니다.

better-design은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

better-design은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

better-design은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. better-design의 마지막 커밋은 2026년 10월 25일입니다.

better-design은(는) 어디에 사용할 수 있나요?

AI 코딩 에이전트가 일관된 디자인 시스템을 따르는 설정 페이지를 만들도록 합니다. 선택한 브랜드 스타일 테마의 개별 shadcn 컴포넌트를 React 프로젝트에 추가합니다. 커밋 전에 생성된 UI 코드의 접근성 문제를 검사합니다. 에이전트가 만든 인터페이스에서 아이콘 스타일을 일관되게 유지합니다.

better-design는 어떻게 설치하나요?

프로젝트에 에이전트 스킬을 설치하세요: npx skills add marvkr/better-design --skill better-design Better Design을 코딩 도구에 연결하고 에이전트를 다시 시작하세요: npx better-design 문제가 발생하면 설정을 확인하세요: npx better-design doctor

better-design은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/marvkr/better-design