marvkr/better-design
Developer tools이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요. 원문 보기
MCP 서버 + shadcn/ui 레지스트리 - Claude Code, Cursor, Codex, GitHub Copilot 및 MCP 클라이언트를위한 AI 디자인 시스템.
개요
코딩 에이전트 설계 시스템, UI 및 UX 지도, 아이콘, 그리고 MCP를 통해 코드 리뷰를 제공합니다. Codex, Claude Code, Cursor, VS Code, Devin, Antigravity 및 기타 MCP 클라이언트와 함께 작동합니다. 첫번째는 대리인 기술을 설치합니다. 두 번째는 코딩 도구에 더 나은 디자인을 연결하고 기존 구성을 유지합니다. 설정 후 에이전트를 재시작. 계정이 없다면 설정은 무료로 키를 만듭니다. 뭔가 작동하지 않는 경우, npx 더 나은 디자인 의사를 실행. 각 문제를 해결하는 명령을 인쇄합니다. 에이전트가 UI를 구축 할 때, 더 나은 디자인은 보통 놓는 것을 제공합니다: UI 코드를 직접 확인하려면 프로젝트에서 npx 더 나은 디자인 리뷰를 실행하십시오. 더 나은 디자인을 사용하여 내 프로젝트의 설계 시스템을 사용하여 설정 페이지를 구축하고 액세스성과 일관성을 검토하십시오. 모든 디자인 시스템은 또한 shadcn 레지스트리입니다. better-design.com/design-systems에서 그들을 찾아, 다음 하나의 구성 요소를 설치:
개요(AI 번역)
코딩 에이전트 설계 시스템, UI 및 UX 지도, 아이콘, 그리고 MCP를 통해 코드 리뷰를 제공합니다.
Codex, Claude Code, Cursor, VS Code, Devin, Antigravity 및 기타 MCP 클라이언트와 함께 작동합니다.
웹 사이트 · 문서 · 디자인 시스템 · 설치 가이드
설치
프로젝트에 이러한 명령을 실행:
첫번째는 대리인 기술을 설치합니다. 두 번째는 코딩 도구에 더 나은 디자인을 연결하고 기존 구성을 유지합니다. 설정 후 에이전트를 재시작.
계정이 없다면 설정은 무료로 키를 만듭니다. 뭔가 작동하지 않는 경우, 실행 npx better-design doctor]. 각 문제를 해결하는 명령을 인쇄합니다.
무엇 그것
에이전트가 UI를 구축 할 때, 더 나은 디자인은 보통 놓는 것을 제공합니다:
| 도구 | 당신의 대리인이 얻는 무엇 |
인포메이션
| find-design-system | 기술에 맞는 디자인 시스템 |
| [T2] | get-design-system-kit | [T2]] | [T2]] 그 시스템의 토큰 및 구성 요소 코드, 설치 준비 |
| get-ui-principle | 히어로시, 스싱, 타이그래피, 깊이, 모션 등 |
| get-ux-principle | 흐름, 형태, 내비게이션, 오류 및 내장에 대한 안내 |
| find-icons | 도서관의 아이콘, 그래서 스타일은 일관되게 유지 |
이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요.
README
Better Design
Give your coding agent design systems, UI and UX guidance, icons, and code reviews through MCP.
Works with Codex, Claude Code, Cursor, VS Code, Devin, Antigravity, and other MCP clients.
Website · Docs · Design systems · Installation guide
Install
Run these commands in your project:
npx skills add marvkr/better-design --skill better-design
npx better-design
The first installs the agent skill. The second connects Better Design to your coding tools and keeps your existing configuration. Restart your agent after setup.
If you have no account, setup creates a free key for you. If something does not work, run npx better-design doctor. It prints the command that fixes each problem.
What it does
When your agent builds UI, Better Design gives it what it usually misses:
| Tool | What your agent gets |
|---|---|
find-design-system |
A design system that fits the product you describe |
get-design-system-kit |
That system’s tokens and component code, ready to install |
get-ui-principle |
Guidance on hierarchy, spacing, typography, depth, motion and more |
get-ux-principle |
Guidance on flows, forms, navigation, errors and onboarding |
find-icons |
Icons from one library, so the style stays consistent |
get-review-rules |
Accessibility and visual-design checks to fix its own work |
To check UI code yourself, run npx better-design review in your project.
Try it
Ask your agent:
Use Better Design to build a settings page with my project’s design system, then review it for accessibility and consistency.
Install a design system with shadcn
Every design system is also a shadcn registry. Browse them at better-design.com/design-systems, then install one component:
npx shadcn@latest add https://better-design.com/registry//.json
For example, the Cashmere button:
npx shadcn@latest add https://better-design.com/registry/cashmere/button.json
Or the full Cashmere theme and components:
npx shadcn@latest add https://better-design.com/registry/cashmere/all.json
This repository
This repository holds the agent skill in skills/better-design, and component and registry sources in components/ and registry/.
The transition components come from one source, scripts/transitions-src/. After you edit it, run node scripts/generate-transitions.mjs, then run the tests:
cd tests && bun install && bun run test
License
MIT
설치
npx skills add marvkr/better-design --skill better-design