AI로 UI 만들 때 참고하는 사이트 정리 - 컴포넌트부터 DESIGN.md까지

AI한테 화면 하나 만들어달라고 하면 결과가 대체로 비슷하다.

가운데 정렬에 그라데이션 조금 얹은, 어디서 본 것 같은 랜딩 페이지가 나온다.

그런데 레퍼런스를 같이 던져주면 결과가 확 달라진다. "이 라이브러리 써서" 한마디만 붙여도 그렇다.

그래서 북마크에 UI 관련 폴더를 따로 파두고 모으는 중인데, 쌓인 김에 한 번 정리해본다.

 

---

1. 복붙 컴포넌트

AI한테 "이거 기준으로 만들어"라고 지정하기 좋은 것들이다. 문서가 잘 돼 있어서 모델도 잘 안다.

이름	스타	한 줄
shadcn/ui	122k	사실상 표준. 라이브러리가 아니라 코드를 복사해 오는 방식
Anime.js	72k	자바스크립트 애니메이션 엔진
daisyUI	42k	Tailwind에 클래스 이름만 얹어 쓰는 방식
Chakra UI	41k	접근성까지 챙긴 리액트 컴포넌트
HeroUI	30k	예전 NextUI. 모던한 기본값
Magic UI	22k	애니메이션 붙은 컴포넌트 모음
HyperUI	12k	Tailwind 마크업만 복사
Preline UI	6.4k	블록 단위로 잘라 쓰는 구성
ReUI	3.3k	shadcn 위에 얹은 확장

 

저장소가 없는 것 중에도 좋은 게 있다.

• Aceternity UI — 200개 넘는 복붙 컴포넌트. 히어로 섹션이나 배경 효과가 화려하다
• 21st.dev — 커뮤니티가 올린 리액트 컴포넌트를 골라 복사하고 리믹스한다
• Shadcn Kit — shadcn 위에 인증·결제·메일·다국어까지 얹은 Next.js 스타터 킷. 유료(49달러)라 성격이 좀 다르다

개인적으로는 shadcn/ui를 기본으로 깔고, 눈에 띄는 부분만 Magic UI나 Aceternity에서 가져다 쓰는 편이다.

 

---

2. AI가 직접 읽는 것

여기가 요즘 재밌어진 부분이다. 사람이 보라고 만든 게 아니라 에이전트가 읽으라고 만든 사이트들이 생겼다.

Refero Styles는 유명 서비스들의 디자인 규칙을 DESIGN.md 파일로 정리해둔다.

색, 타이포, 간격, 컴포넌트, 규칙이 마크다운 한 장에 들어 있다. Claude Code나 Cursor에 그대로 물려주면 된다.

쉽게 말해, "리니어처럼 만들어줘" 대신 리니어의 규칙 파일을 통째로 던지는 방식이다.

 

비슷한 결의 것들이 더 있다.

• Astryx Design System — 메타가 공개한 오픈소스 디자인 시스템. 소개 문구에 대놓고 "agent ready"라고 적혀 있다
• coss ui — "Built for developers and AI"를 내걸었다
• MotionSites AI — Lovable, Bolt, Cursor, Claude용 웹사이트 프롬프트를 판다
• Lazyweb — MCP로 붙여서 실제 앱 화면을 컨텍스트로 넘긴다
• taste-skill — 사이트가 아니라 에이전트 스킬이다. 뻔하고 무난한 결과물이 나오는 걸 막는 게 목적. 스타 7만 9천, MIT

디자인 레퍼런스가 보는 것에서 먹이는 것으로 넘어가는 중인 것 같다.

 

---

3. 실제 앱 화면 보기

실제로 잘 만든 앱들이 어떻게 풀었는지 보는 쪽이다. 여긴 아직 사람이 눈으로 봐야 한다.

이름	뭘 보나
Mobbin	수백 개 iOS 앱의 화면과 플로우
ScreensDesign	온보딩과 페이월을 어떻게 설계했는지
유아이볼	국내 앱·웹·게임 10만 건 이상. 화면·패턴별로 정리
UPA	국내. UX 패턴을 종류별로 모아둔 곳
What Was IT	서비스들이 예전엔 어떻게 생겼었는지

국내 서비스를 만든다면 유아이볼과 UPA가 확실히 편하다. 해외 레퍼런스만 보면 결과물이 붕 뜬다.

디자인 시스템 자체를 보고 싶으면 당근의 SEED가 공개돼 있다.

 

---

4. 모션과 디테일

레이아웃이 잡히고 나면 결국 디테일에서 갈린다.

Design Spells는 "이런 것까지 신경 썼네" 싶은 마이크로 인터랙션만 모아둔 곳이다.

예전에 여기 전체를 한 번 훑어본 적이 있는데, 300개가 넘는 사례가 쌓여 있었다.

60fps는 애니메이션과 인터랙션만 따로 모은다. 영상으로 보여줘서 감을 잡기 좋다.

AI한테 이런 걸 시킬 때는 말로 설명하는 것보다 참고할 사례를 하나 집어주는 게 훨씬 빠르다.

 

---

5. 아이콘

• Reicon — SVG 아이콘 3,900여 개에 일러스트가 71,000장 넘는다. 오픈소스
• theSVG — 브랜드 로고 전용. 6,500개 넘게 있고 npm으로도 받는다

브랜드 로고는 직접 찾아 넣다 보면 화질이나 규격이 제각각이 되는데, theSVG 쪽이 깔끔하다.

 

---

마무리

정리하면 이렇다.

• 컴포넌트는 shadcn/ui를 기본으로 두고 필요한 것만 가져다 쓴다
• AI에 물릴 거면 Refero처럼 규칙이 파일로 정리된 걸 찾는다
• 국내 서비스라면 유아이볼과 UPA를 먼저 본다
• 디테일은 Design Spells와 60fps에서 사례를 하나 집어 준다
• 결과물이 뻔하게 나오면 taste-skill 같은 스킬을 얹어본다

AI가 코드를 짜주는 건 이제 당연해졌는데, 뭘 참고하게 할지는 여전히 내 몫이다.

북마크를 잘 모아두는 게 프롬프트 잘 쓰는 것만큼 중요해진 것 같다.

쓸 만한 사이트 더 있으면 댓글로 알려주면 좋겠다!