디자인·컴포넌트

1인 빌더는 폭넓은 시각 피드에서 시작해 화면 유형이나 미감으로 범위를 좁힌 뒤, 레퍼런스에서 구현 준비가 된 부품으로 넘어갈 수 있다. 레퍼런스 경로에는 초점이 뚜렷한 갤러리와 디자인 시스템 레지스트리가 포함되며, 컴포넌트 소스는 기본 primitive, AI 채팅 상태, motion, 검색 가능한 레지스트리, 차트 라이브러리로 나뉜다. 제품 캐릭터 작업에는 별도의 경로가 더해진다. 마스코트의 시각적 정체성을 안정시킨 뒤 idle, success, error 같은 순간에 절제된 code-driven 상태를 연결한다. 브랜딩 사례는 재사용 가능한 부품이 아니라 여전히 레퍼런스이므로, 코드를 복사하기 전에 방향을 잡는 데 활용해야 한다.

시작하기

1. 웹 디자인 레퍼런스 필터링 — 이미 가진 기준에 맞춰 레퍼런스 소스를 고른다.
2. Land-book — 화면 유형과 색상이라는 제약 조건을 알고 있다면 범위를 좁힌다.
3. shadcn/ui — 맞춤형 control 대신 기본 primitive로 구현을 시작한다.
4. 21st.dev — 필요한 부품의 이름을 알게 되면 여러 컴포넌트 선택지를 검색한다.

페이지

화면 방향 고르기

• 웹 디자인 레퍼런스 필터링 — 편집자 추천, 유형·색상 필터, 시드 이미지 유사성을 활용하는 LOOPY의 플레이북
• Best Designs on X — 아직 기준이 없을 때 보는 폭넓은 편집자 큐레이션 피드
• Land-book — category와 color로 범위를 좁히는 웹 디자인 아카이브
• Same Energy — 하나의 시드 이미지에서 시작하는 시각적 유사성 검색
• Supahero — hero 섹션만 모은 레퍼런스 라이브러리
• Dark.design — 다크 웹 디자인 갤러리
• Mac App Supply — Mac 앱 랜딩 페이지 컬렉션
• Loadmore — 모바일 웹 실험 갤러리
• Layers — AI-native 제품 템플릿
• Dribbble — 모바일 화면과 아이콘 레퍼런스
• Pinterest — 모바일 moodboard 컬렉션

디자인 시스템과 브랜드 레퍼런스

• Oh My Design — 기업 디자인 시스템 문서 레지스트리
• Stanley — AI bot 캐릭터 브랜딩 레퍼런스

컴포넌트와 motion

• 마스코트를 제품 인터페이스 상태로 애니메이션하기 — César Álvarez; 이름 붙인 짧은 감정 상태를 정의하고 코드로 렌더링한 뒤 보면서 motion을 교정
• shadcn/ui — 기본 디자인 시스템 컴포넌트
• Beautiful UI — AI 채팅 승인 및 streaming primitive
• BeUI — React와 Motion 컴포넌트
• Rare UI — 개성 있는 animated 컴포넌트
• Transitions — UI transition 레퍼런스
• 21st.dev — 검색 가능한 컴포넌트 레지스트리
• ThreeUI — Three.js 컴포넌트, shader, 템플릿

차트

• Mono Charts — 단색 React 차트 visualizer
• Tremor — 복사해 붙여 넣는 차트 및 dashboard 컴포넌트

빈 곳

• 스택, 접근성, 유지보수를 기준으로 기본 라이브러리, 레지스트리, motion 중심 컬렉션을 비교하는 의사결정 플레이북.
• 선택한 레퍼런스를 시각적 승인 기준이 담긴 AI 코딩 brief로 넘기는 반복 가능한 인계 절차.
• code-driven 마스코트 상태의 접근성, reduced-motion, 성능 근거.
• 새 갤러리와 컴포넌트 소스의 production 근거. 현재 목록은 한 큐레이터의 컬렉션이다.