hyunsu blog

홈노트

AI 디자인 참고 사이트 4곳, 쓰임새로 나눠 보기

노트 N-145분AI 작성

목차 · 5
  1. 0121st.dev 는 '프롬프트 복사'가 기본 경로다
  2. 02affectUI 는 의존성 없는 한 파일 컴포넌트다
  3. 03Inspora 는 코드가 아니라 방향을 고를 때 쓴다
  4. 04Prompt Motion 은 영상과 프롬프트를 같이 보여 준다
  5. 05고르고, 가져오고, 움직이는 순서로 쓴다

네 곳은 쓰임새가 갈린다. 코드를 바로 가져오려면 21st.dev 와 affectUI, 만들 방향을 고를 때는 Inspora, 모션 영상 프롬프트가 필요하면 Prompt Motion 을 연다. 앞의 두 곳은 shadcn CLI(컴포넌트 소스를 프로젝트에 복사해 넣는 명령줄 도구)와 MCP(Model Context Protocol, AI 에이전트가 외부 도구를 부르는 규약)를 지원해서, Claude Code·Cursor 같은 에이전트가 컴포넌트를 직접 설치한다.

01 21st.dev 는 '프롬프트 복사'가 기본 경로다

21st.dev 는 React·Tailwind CSS 컴포넌트와 템플릿, 테마를 모은 커뮤니티 레지스트리(registry, 공개 저장소)다. 페이지 제목부터 1만 2천 개가 넘는 UI 를 내세운다. 컴포넌트마다 미리보기와 소스가 붙는데, 기본 설치 경로는 Copy prompt 버튼이다. 복사한 프롬프트를 Cursor·Claude Code·v0·Lovable 에 붙이면 에이전트가 우리 코드베이스에 맞춰 컴포넌트를 다시 짠다.

코딩 에이전트 연결은 CLI 한 줄로 설정한다.

bash
npx @21st-dev/cli@latest init --client claude

--client 에는 cursor·claude·codex·vscode·devin 을 넣는다. 무료 플랜은 하루 두 번까지만 복사되고, 무제한 설치와 MCP 조회는 Builder 플랜(연 결제 시 월 6달러)부터 열린다. 21st AI 로 UI 를 생성하려면 크레딧을 따로 사야 한다.

02 affectUI 는 의존성 없는 한 파일 컴포넌트다

affectUI 는 AI 제품과 SaaS 를 겨냥한 React 컴포넌트·화면·일러스트·모션 모음이다. 항목마다 스타일을 품은 .tsx 파일 하나이고, Tailwind 도 애니메이션 라이브러리도 쓰지 않는다. Tool Call Card·Thinking State·Context Window 처럼 AI 화면에 맞춘 부품이 눈에 띈다. 무료 39개는 MIT 라이선스로 열려 있고, 나머지 58개는 한 번 사는 Pro 상품이다.

React 19 프로젝트라면 shadcn CLI 로 바로 받는다.

bash
npx shadcn@latest add https://www.affectui.com/r/reaction-bar.json

파일은 components/ui 에 들어가고, 다크 모드와 모션 줄이기(reduced motion)를 기본으로 따른다. MCP 서버도 열려 있어 Claude Code·Cursor·VS Code·Codex 에서 항목을 검색하고 문서와 소스를 받아 올 수 있다. Pro 항목은 계정 페이지에서 발급한 접근 키가 있어야 내려받을 수 있다.

03 Inspora 는 코드가 아니라 방향을 고를 때 쓴다

Inspora 는 디자인 사례 갤러리로, 첫 화면에 "Updated hourly" 라고 적혀 있다. Web·Product·Motion·3D 를 비롯한 일곱 분야로 거를 수 있다. 게시물을 열면 미리보기 이미지와 짧은 설명, 업종·색·스타일 태그, 원본 X 게시물로 가는 "View original" 링크가 나온다. 열어 본 게시물에는 복사할 코드나 프롬프트가 없었다. 그래서 고른 사례의 특징을 말로 풀어 에이전트에게 넘기는 식으로 쓰게 된다.

04 Prompt Motion 은 영상과 프롬프트를 같이 보여 준다

Prompt Motion 은 스스로를 Claude Opus 5.5 로 만든 모션 영상과, 그 영상을 만든 프롬프트·스킬의 모음이라고 소개한다. 영상은 Prompt·Skill 구분과 Kinetic type·Charts·Particles 같은 주제로 거른다. 쓸 만한 건 새로 생긴 Customize 기능이다. 잘 나온 프롬프트를 하나 골라 용도·포맷·색을 채우면 내 프로젝트에 맞춘 버전을 복사해 준다. 무료이고, 입력한 내용은 브라우저에만 남는다고 적혀 있다.

05 고르고, 가져오고, 움직이는 순서로 쓴다

새 화면을 만들 때는 네 곳을 이렇게 이어 쓰면 된다. Inspora 에서 방향을 고르고, 가까운 컴포넌트를 21st.dev 나 affectUI 에서 에이전트로 설치한 뒤, 소개 영상 같은 모션이 필요하면 Prompt Motion 프롬프트를 고쳐 쓴다. 두 라이브러리 가운데 무엇을 쓸지는 스타일 방식이 가른다. 프로젝트가 Tailwind 기반이면 21st.dev 가 결이 맞고, 의존성을 늘리기 싫으면 스타일을 파일에 품은 affectUI 가 편하다.

제한도 미리 봐 둔다. 21st.dev 무료 플랜의 하루 두 번 복사는 후보 여러 개를 가져와 견줘 보기엔 모자라다. Inspora 사례에는 원작자가 따로 있으니, 그대로 베끼지 않고 특징만 가져온다.