626 ／ 626
바이브코딩 디자인을 위한 AI 툴과 레퍼런스
바이브코딩으로 서비스를 만들 때 디자인이 인공지능이 만든 것처럼 밋밋하게 느껴질 수 있다. 이러한 문제를 해결하고 감각적인 디자인을 구현하려면 좋은 디자인 도구와 레퍼런스를 참고하는 것이 중요하다. 이 글은 디자인 제작과 참고에 유용한 여러 사이트들을 소개한다.
AI 디자인 생성 도구
디자인 과정을 자동화하고 효율성을 높이는 AI 기반 도구들이 있다. 이 도구들은 사용자가 직접 디자인 요소를 만들지 않아도, AI가 제안하거나 생성하여 디자인 작업을 돕는다.
| 이름 | URL | 용도 |
|---|---|---|
| Claude Design | claude.com/product/design | UI 앱 디자인 시스템부터 웹, 앱, PPT, 디자인 시스템 등 범용적인 AI 디자인을 종합적으로 제공한다. |
| Stitch AI | stitch.withgoogle.com/ | 앱 및 웹 UI를 바이브코딩 디자인으로 만들고, MCP와 연동할 수 있는 툴이다. |
| Pen.dev | pen.dev/ | 피그마(Figma)처럼 사용할 수 있는 바이브코딩 디자인 툴이다. |
| Figma Make | figma.com/ko-kr/make/ | 피그마에서 출시한 UI와 바이브코딩을 결합한 툴이다. |
복사·붙여넣기 가능한 요소
디자인 작업 시간을 단축하고 시각적 품질을 높이는 데 유용한 컴포넌트, 모션 그래픽, UI 요소들을 바로 가져다 쓸 수 있는 사이트들이 많다.
| 이름 | URL | 용도 |
|---|---|---|
| 유니콘 스튜디오 | unicorn.studio/ | 시각적으로 돋보이는 모션 그래픽을 가져다 쓰기 좋다. |
| Iconify | icon-sets.iconify.design/ | 다양한 아이콘 세트를 한눈에 파악하고 활용하는 사이트다. |
| Spline | spline.design/ | 3D 디자인 레퍼런스를 찾고 가져다 쓰기 편리하다. |
| 21st.dev | 21st.dev/community/components | 다양한 컴포넌트를 제공한다. |
| animateUI | animate-ui.com/ | 웹사이트 애니메이션 기능을 가져다 쓰기 좋은 사이트다. |
| Magic UI | magicui.design/docs/components | 생동감 있는 UI 컴포넌트를 가져다 쓰기 유용하다. |
| ant design | ant.design/ | 바로 적용할 수 있는 디자인 테마와 컴포넌트를 제공한다. |
| motionsites | motionsites.ai/ | 히어로 섹션 배경부터 웹사이트 디자인 프롬프트까지 제공한다. |
| reactbits | reactbits.dev/ | 웹사이트에 적용하기 좋은 다양한 모션 컴포넌트를 가져다 쓰기 좋다. |
| Cult UI | cult-ui.com/docs | 템플릿부터 컴포넌트까지 폭넓은 자료를 제공한다. |
| Watermelon UI | ui.watermelon.sh/ | 600개 넘는 오픈소스 UI 컴포넌트 모음이다. |
| hero ui | heroui.com/docs/react/components | 앱에서도 쓸 수 있는 무료 컴포넌트를 제공한다. |
| float ui | floatui.com/components | 마케팅 CTA 섹션 소스와 UI 요소를 제공한다. |
| aceternity ui | ui.aceternity.com/components | 200개 이상의 애니메이션 컴포넌트를 포함한다. |
| getlayers | getlayers.ai/ | 모션과 디자인이 한 번에 구비된 템플릿 모음이다. |
| Animmaster Lib | animmasterlib.dev/ | 웹 페이지 전환 효과와 인터랙션 요소를 제공한다. |
| Skiper UI | skiper-ui.com/ | 세련되고 트렌디한 웹 UI 요소를 모아 놓았다. |
| Vengence UI | vengenceui.com/ | 최근 인기 있는 인터랙티브 컴포넌트 모음이다. |
| ShapeFest | shapefest.com/ | 3D 그래픽 및 도형 모음이다. |
| Design-isms | lidge-jun.github.io/design-isms/ | 최신 디자인 트렌드인 ‘~이즘’ 요소를 적용하고 싶을 때 참고한다. |
디자인 레퍼런스 갤러리
새로운 디자인 아이디어를 얻거나, 특정 스타일을 탐색할 때 유용한 레퍼런스 사이트들이다. 다양한 앱, 웹사이트, 디자인 시스템을 한눈에 볼 수 있다.
| 이름 | URL | 용도 |
|---|---|---|
| Supahero | supahero.io/ | 웹사이트의 히어로 섹션 디자인만 모아 놓은 사이트다. |
| BentoGrids | bentogrids.com/ | 다양한 그리드 디자인 레퍼런스를 모아 놓았다. |
| mobbin | mobbin.com/ | 해외 앱 서비스와 웹사이트 디자인 레퍼런스를 모아 놓은 사이트다. |
| framer gallery | framer.com/gallery/ | 다양한 웹사이트 디자인을 한눈에 볼 수 있다. |
| wwit | wwit.design/ | 국내 앱 디자인 화면을 한눈에 확인할 수 있는 사이트다. |
| 디자이너스 | ko.designus.design/ | 국내 웹 및 앱 레퍼런스와 앱스토어 스크린샷까지 제공한다. |
| pageflows | pageflows.com/ | iOS, Android, 웹 별로 레퍼런스를 모아 놓은 사이트다. |
| getdesign.md | getdesign.md/ | 해외 대기업의 UI 디자인 시스템을 모아 놓은 사이트다. |
| 눈누 | noonnu.cc/ | 폰트를 찾고 다운로드할 수 있는 곳이다. |
| Refero | refero.design/ | 웹사이트와 아이폰 앱 화면 2만 개 이상이 있는 곳으로, 검색해서 사용하기 좋다. |
클로드 코드 디자인 스킬
클로드 코드는 인공지능을 활용하여 디자인에 필요한 특정 기능을 수행하는 스킬들을 제공한다.
| 이름 | URL | 용도 |
|---|---|---|
| Taste skill | — | 흔한 디자인 대신 감각적인 스타일을 찾아주는 스킬이다. |
| ui-ux-pro-max | claudeskills.info/…/ui-ux-pro-max | 특정 서비스나 업종에 맞는 컬러, 폰트, 레이아웃 등을 추천하여 디자인 방향을 설계한다. |
| impeccable | — | 이미 만들어진 웹사이트의 디자인을 점검하는 스킬이다. |
| Frontend-design | claudeskills.info/…/frontend-design | 소재에 맞는 고유한 비주얼 아이덴티티를 적용한다. |
출처
- 82studio(이제만들시간), 「바이브코딩 디자인 참고 사이트 모음」
- https://82studio.notion.site/3446c679d11c80028efaf3733942ef40
공유