AI로 만든 웹사이트가 다 비슷해 보이는 건, AI한테 디자인 기준을 안 줬기 때문이에요.
실제로 계속 쓰게 되는 10개만 골라서 사용법까지 정리했어요 저장해두세요! 언젠가는 쓰입니데이
1/ shadcn/ui
ui.shadcn.com
React와 Tailwind로 만든 기본 컴포넌트 모음이에요. 지금도 사실상 표준이에요.
패키지로 설치하는 게 아니라 코드를 내 프로젝트에 복사해 넣는 방식이라 자유롭게 고칠 수 있어요.
사용법
npx shadcn@latest init 으로 초기 설정을 하고
npx shadcn@latest add button 처럼 필요한 컴포넌트를 추가하면 돼요.
2/ 21st.dev
21st.dev
디자인 엔지니어들이 직접 올린 React 컴포넌트, 템플릿, 테마가 12,000개 넘게 있어요.
히어로 섹션 하나만 봐도 서로 완전히 다른 버전이 수십 개 나와요.
사용법
/
ui.shadcn.com
shadcn/ui - The Foundation for your Design System
[댓글 @escape.salary]
마음에 드는 컴포넌트에서 Copy prompt를 눌러 Cursor나 Claude Code에 붙여넣으면 돼요.
무료로는 하루에 2번 복사할 수 있어요.
3/ Refero Styles
styles.refero.design
OpenAI, Figma, Raycast, Wise 같은 실제 서비스 2,000곳 이상의 색, 폰트, 간격을 정리해둔 곳이에요.
사용법
원하는 분위기의 사이트를 고르고 거기서 DESIGN.md 파일을 받아 AI에게 주면, 그 디자인 톤을 따라서 만들어줘요.
4/ DESIGNmd
designmd.ai
AI 코딩 도구가 읽을 수 있는 마크다운 디자인 시스템 수백 개를 무료로 받을 수 있어요.
사용법
DESIGN.md를 다운로드해서 프로젝트 맨 위 폴더에 넣고 "DESIGN.md 따라서 만들어줘"라고 하면 끝이에요.
화면을 여러 개 만들어도 디자인이 따로 놀지 않아요.
5/ Component Gallery
/
designmd.ai
DESIGN.md - Design Systems for AI Coding
[댓글 @escape.salary]
component.gallery
아코디언, 탭, 토스트 같은 UI 요소를 유명 디자인 시스템들이 각각 어떻게 만들었는지 비교해볼 수 있어요.
사용법
만들려는 요소 이름으로 검색해서 괜찮은 사례를 고르고, AI에게 "이것처럼, 이런 상태들까지 포함해서"라고 구체적으로 요청하세요.
6/ Aceternity UI
ui.aceternity.com
랜딩 페이지에서 눈길을 끄는 애니메이션 컴포넌트가 200개 넘게 있어요.
사용법
컴포넌트 페이지에서 코드를 복사하거나 설치 명령어를 실행하면 돼요.
히어로 섹션이나 배경 효과에 특히 좋아요.
7/ Magic UI
magicui.design
숫자 카운터, 흐르는 로고 띠, 빛나는 버튼처럼 SaaS 랜딩 페이지에 자주 쓰는 애니메이션 컴포넌트예요.
사용법
shadcn과 같은 방식으로 컴포넌트 페이지의 설치 명령어를 실행하면 돼요.
8/ Motion Primitives
motion-primitives.com
/
motion-primitives.com
Motion-Primitives - UI kit to make beautiful, animated interfaces, faster.
[댓글 @escape.salary]
과하지 않고 깔끔한 모션 컴포넌트 모음이에요.
화려한 효과보다 고급스러운 느낌이 필요할 때 좋아요.
사용법
shadcn 방식으로 설치하고 Tailwind 클래스로 다듬으면 돼요.
9/ Minimal Gallery
minimal.gallery
군더더기 없는 고급 웹사이트만 골라 모은 레퍼런스 사이트예요.
사용법
마음에 드는 사이트 2~3개를 캡처해서 AI에게 보여주고 "이 레이아웃과 여백 느낌으로"라고 하세요.
말로 설명하는 것보다 훨씬 정확하게 나와요.
10/ Anime.js
animejs.com
가볍고 강력한 자바스크립트 애니메이션 라이브러리예요. React가 아니어도 쓸 수 있어요.
사용법
npm install animejs 로 설치한 다음, AI에게 "Anime.js로 스크롤하면 나타나는 애니메이션 만들어줘"처럼 라이브러리 이름을 콕 집어서 요청하세요.
11/ 정리하면
3~4번으로 디자인 기준을 먼저 정하고
/
animejs.com
Anime.js | JavaScript Animation Engine
[댓글 @escape.salary]
1~2번으로 기본 틀을 만들고
6~10번으로 움직임을 더하면 돼요.
