클로드 밤티를 줄이는 밤티 탈출 무료 UI 컴포넌트 사이트 모음

추석 AI 부트캠프 하루 6시간 만에
AI 기초부터 나만의
서비스까지 완성 이번 연휴를 기회로 삼으세요일정 보기 ↗

Quick Start

버튼·카드 모양을 따로 정해 주지 않으면 클로드는 매번 처음부터 그리고, 비슷한 기본 모양이 나오기 쉽습니다. 이미 잘 만들어진 컴포넌트 코드를 가져와 클로드에게 함께 주면 같은 화면에서 버튼과 카드만 또렷하게 달라집니다. 아래 다섯 곳은 모두 GitHub에 MIT 라이선스로 공개된 무료 오픈소스입니다.

1. STEP 1에서 만드는 화면에 맞는 사이트를 고릅니다.
2. STEP 2에서 사이트 방식대로 컴포넌트 코드를 가져옵니다.
3. STEP 3에서 프롬프트로 클로드에게 그 코드로 바꿔 달라고 합니다.

STEP 1 · 3분만드는 화면에 맞는 사이트를 고른다

STEP 2 · 5분사이트 방식대로 코드를 가져온다

사이트마다 코드를 가져오는 방식이 다릅니다. 아래는 2026년 9월 25일 각 공식 페이지에서 직접 본 방식입니다.

• Uiverse: 요소를 누르면 요소 페이지에 HTML·CSS 탭과 Copy 버튼이 있습니다. 두 탭을 각각 복사합니다.
• HyperUI: 컴포넌트마다 Preview·Copy 버튼이 있습니다(휴대폰 폭에서는 숨겨져 있어 PC 화면에서 복사합니다).
• shadcn/ui·Magic UI: 공식 페이지의 설치 명령을 React 프로젝트 폴더에서 실행합니다.

pnpm dlx shadcn@latest add button
pnpm dlx shadcn@latest add @magicui/marquee

• daisyUI: Tailwind CSS 프로젝트에 플러그인을 설치한 뒤, 클래스 이름으로 씁니다.

npm i -D daisyui@latest

/* app.css */
@import "tailwindcss";
@plugin "daisyui";

성공하면 Uiverse·HyperUI는 복사한 코드가, shadcn/ui·Magic UI는 components 폴더 안에 새 컴포넌트 파일이 생깁니다.

STEP 3 · 5분프롬프트로 클로드에게 바꿔 달라고 한다

레이아웃과 문구는 그대로 두고 부품만 바꿔 달라고 해야 전후 차이가 분명하게 보입니다.

아래 HTML/CSS는 Uiverse에서 가져온 버튼이야. 이 페이지의 모든 주요 버튼을 이 버튼 스타일로 바꿔줘. 버튼 문구, 레이아웃, 색 말고 다른 부분은 그대로 둬. 클래스 이름이 기존 코드와 겹치면 앞에 uv- 를 붙여줘.

[여기에 HTML 붙여넣기]
[여기에 CSS 붙여넣기]

이 프로젝트에 shadcn/ui Button이 components/ui/button.tsx 로 설치돼 있어. 페이지 안의 직접 만든 button 태그를 전부 이 Button 컴포넌트로 바꿔줘. 주요 버튼은 기본 variant, 보조 버튼은 outline variant로 써줘.

이 페이지는 Tailwind CSS와 daisyUI를 쓰고 있어. 버튼과 카드에 길게 붙은 Tailwind 클래스를 daisyUI의 btn, card 클래스로 바꿔서 짧게 정리해줘. 보이는 모양은 최대한 지금과 비슷하게 유지해줘.

알아 둘 한계

• shadcn/ui와 Magic UI는 React와 Tailwind CSS를 쓰는 프로젝트용입니다. HTML 한 장으로 만든 페이지라면 Uiverse(HTML/CSS)나 HyperUI(Tailwind CSS 코드 복사)를 먼저 봅니다.
• Magic UI에는 유료 상품(Magic UI Pro 블록·템플릿)도 있습니다. 이 글의 무료 범위는 공개 컴포넌트입니다.
• Uiverse 요소는 커뮤니티 회원이 올린 것이라 품질과 브라우저 지원이 요소마다 다릅니다. 쓰기 전에 휴대폰 화면에서도 확인합니다.
• 수치(7,440개·150개 이상·88%)와 라이선스는 2026년 9월 25일 각 공식 페이지와 GitHub 저장소 기준입니다. 이후 바뀔 수 있습니다.
• 「이럴 때」 열의 쓰임새는 편집자의 제안입니다.

함께 보면 좋은 글

• 클로드 밤티 화면에서 탈출하는 법 4가지
• 클로드 밤티를 줄이는 밤티 탈출 레퍼런스 사이트 모음