북마크 더미가 아니라 순서
에이전트에 “예쁜 대시보드 만들어줘”만 넣으면 결과는 거의 같다. 가운데 히어로, 세 장의 카드, 보라색 그라데이션. 퀀트 리서치 화면에는 그 패턴이 맞지 않는다. 숫자는 읽혀야 하고, 호버 효과보다 테이블과 필터가 먼저다.
바이브코딩은 프롬프트 한 줄이 아니라 레이어를 쌓는 작업이다. 아래에 정리한 8개 사이트는 전부 쓸 필요가 없다. 역할이 겹치지 않게 다섯 층으로 나눈 뒤, 실제로 필요한 층만 연다.
BASE → SEEK → PACK → MOVE → SPACE
shadcn GetLayers Craftwork Skiper Spline
Shapefest Vengeance
Animmaster권장 순서는 화려함의 반대다. 기본 컴포넌트를 먼저 고정하고, 그다음에 프롬프트 언어를 참고하고, 에셋을 얹고, 모션은 한 군데만, 3D는 히어로가 필요할 때만.
BASE: 기본 컴포넌트 — shadcn/ui
shadcn/ui는 패키지가 아니라 복사해서 소유하는 컴포넌트 코드다. React / Next.js에서 버튼, 폼, 테이블, 다이얼로그를 같은 토큰으로 맞출 때 출발점으로 쓴다.
리서치 UI에 맞는 이유:
- 접근성 기본값이 있다. 키보드와 포커스 링을 나중에 덧붙이지 않아도 된다.
- 코드를 저장소에 두므로 테마를 이미 정한 팔레트로 바꿀 수 있다.
- 에이전트에게 “shadcn Table + 필터”라고 지시하면 카드 갤러리보다 원장에 가까운 화면이 나온다.
여기가 고정되지 않으면 위의 레이어는 장식이 된다.
SEEK: 디자인·프롬프트 참고 — GetLayers
GetLayers는 완성 사이트가 아니라 복사 가능한 레이어 프롬프트 라이브러리다. 씬, 그라디언트, 섹션 모션을 고른 뒤 프롬프트를 에이전트에 붙여 넣는다. 기본 출력은 독립 HTML이고, Next.js나 Astro로 다시 짜라고 한 줄만 추가하면 된다.
쓰는 방법:
- 마케팅 랜딩의 무드와 깊이감을 가져온다.
- 업종 템플릿을 고르지 않는다. GetLayers 쪽도 니치가 아니라 느낌을 고르라고 설명한다.
- 프롬프트에 색, 타이포, 레이아웃 제약을 직접 적는다. 그대로 붙이면 라이브러리 기본 미감이 남는다.
퀀트 대시보드 전체에 GetLayers 히어로를 씌우지 않는다. 한 섹션의 언어를 가져온 뒤, BASE 컴포넌트 위에 다시 그린다.
PACK: 디자인 에셋 — Craftwork Freebies, Shapefest
에셋은 프롬프트가 발명하게 두지 않는다. 라이선스가 적힌 파일을 고른다.
Craftwork Freebies
Craftwork Freebies는 아이콘, UI 키트, 일러스트, 목업을 무료로 내려받는 카탈로그다. 아이콘 세트와 목업은 바로 쓸 수 있다. 다만 일부 에셋은 AI로 만든 3D 아이콘이거나 추상 배경이다. 본문 히어로로 쓰기 전에 글자 깨짐과 장식 과잉을 눈으로 확인한다.
Shapefest
Shapefest는 Cinema 4D로 렌더한 3D 도형·오브젝트 라이브러리다. 상업적 사용이 가능하고, 일부 팩은 512px 무료다. 고해상도는 유료다. 다른 키트로 재배포하는 것은 라이선스가 막는다.
두 사이트 모두 다른 서비스의 콘솔 캡처가 아니다. 아이콘·도형만 가져오고, 타사 UI를 통째로 싣지 않는다.
MOVE: 인터랙션·애니메이션 — Animmaster, Skiper UI, Vengeance UI
모션은 한 페이지에 한 종류면 충분하다. 세 라이브러리를 동시에 넣지 않는다.
Animmaster Lib
Animmaster Lib는 스크롤, 호버, 페이지 전환, WebGL 같은 웹 애니메이션 컴포넌트 모음이다. 프롬프트가 아니라 손으로 짠 코드다. HTML/CSS/JS가 많고, React·Next.js 비중은 그보다 적다. 유료 팩이다. zip을 에이전트에 올려 기존 스택에 맞추라고 시키는 방식이 맞다. WebGL과 물리 효과는 마케팅 히어로용이지, 호가창이나 PnL 표에는 쓰지 않는다.
Skiper UI
Skiper UI는 shadcn/ui 위에 얹는 비범한(un-common) 컴포넌트다. BASE를 shadcn으로 둔 상태에서 토큰 스왑 같은 한 조각을 더할 때 참고한다. 기본 테이블을 대체하지 않는다.
Vengeance UI
Vengeance UI는 hover, 툴팁, 스크롤 레이아웃 중심의 React 컴포넌트다. shadcn 레지스트리로 설치한다. 마케팅 사이트 패턴이 많으니, 리서치 UI에는 커서 트레일보다 포커스와 상태 전환만 가져온다.
도메인 철자는 vengeance가 아니라 vengenceui.com이다.
SPACE: 웹 3D — Spline
Spline은 브라우저에서 3D와 인터랙션을 만들고, 웹·iOS·Android로 내보내는 도구다. 뷰어 임베드, React, Next.js를 지원한다.
리서치 제품에서 3D가 이득인 경우는 드물다.
- 브랜드 히어로, 제품 목업, 로고 마크
- 실시간 데이터가 필요 없는 장식 레이어
호가, 체결, 차트 영역에는 넣지 않는다. WebGL 캔버스는 메인 스레드와 GPU를 같이 쓴다. 숫자 화면의 응답을 지키려면 Spline은 히어로 한 곳으로 제한한다. 로그인 URL이 아니라 제품 홈을 북마크한다.
실제로 쌓는 순서
- shadcn으로 테이블, 필터, 폼, 빈 상태를 만든다.
- GetLayers에서 섹션 하나 또는 배경 언어만 복사하고, 색과 타이포는 이미 정한 토큰으로 덮는다.
- Craftwork·Shapefest에서 아이콘·도형을 고른 뒤 라이선스를 기록한다.
- 모션이 필요하면 Skiper 또는 Vengeance에서 한 컴포넌트만 가져온다. 스크롤 라이브러리 전체를 넣지 않는다.
- 히어로에 입체감이 필요할 때만 Spline을 임베드한다.
이 순서를 지키면 에이전트가 “멋진 랜딩”을 기본값으로 그리는 경로를 끊을 수 있다.
쓰지 말아야 할 것
- 타사 콘솔이나 경쟁 서비스 화면을 캡처해 본문에 넣는 일. 에셋 사이트에서 산 도형·아이콘과 다르다.
- 무료 에셋을 라이선스 확인 없이 재배포하는 일.
- 한 페이지에 GetLayers 히어로 + Spline + WebGL 스크롤 + glow 호버를 동시에 올리는 일.
- 데이터 색(상승/하락)을 장식 액센트로 쓰는 일. 숫자의 의미가 지워진다.
한눈에 보는 8개 사이트
| 층 | 사이트 | 역할 |
|---|---|---|
| BASE | shadcn/ui | 복사해 소유하는 React 컴포넌트 |
| SEEK | GetLayers | 레이어 프롬프트·씬 참고 |
| PACK | Craftwork Freebies | 무료 UI 키트·아이콘·목업 |
| PACK | Shapefest | 3D 도형·오브젝트 렌더 |
| MOVE | Animmaster Lib | 웹 애니메이션 코드 팩 |
| MOVE | Skiper UI | shadcn 기반 인터랙션 |
| MOVE | Vengeance UI | hover·스크롤 React 컴포넌트 |
| SPACE | Spline | 웹용 3D 디자인·임베드 |
