AI로 뭔가 만드는 분이 바로 쓸 수 있게, 살아 있는지·라이선스·어디에 쓰는지까지 확인해 둔 레퍼런스예요.
랜딩, 앱 화면, 소셜 포스트를 볼 때 여는 갤러리예요. 무엇을 모아 둔 곳인지, 언제 열면 좋은지 적어 뒀어요.
7개 · 2026년 10월 17일 갱신
스크린샷이 아니라 코드로 가져다 쓸 수 있는 UI 컴포넌트와 모션 레퍼런스예요. 에이전트가 바로 읽고 옮길 수 있는 것들이에요.
8개 · 2026년 10월 17일 갱신
에이전트가 브라우저를 열고, 기기를 만지고, 작업 흐름을 다듬을 때 쓰는 도구예요. 어떤 상황에서 쓸모 있는지 한 줄씩 적어 뒀어요.
9개 · 2026년 10월 17일 갱신
Claude Code나 Codex에 바로 넣어 쓰는 스킬 묶음이에요. 설치해 보고 살아 있는지, 라이선스가 무엇인지 확인한 것만 올려요.
8개 · 2026년 10월 17일 갱신
github.com
AI 에이전트와 자동화를 위해 Zig로 처음부터 만든 헤드리스 브라우저예요. Chromium 대비 메모리는 약 16배 적게 쓰고 실행은 약 9배 빠르다고 소개해요.
Puppeteer나 Playwright를 CDP로 연결해 가볍고 빠른 헤드리스 브라우저로 크롤링하거나 에이전트를 돌리고 싶을 때 써요.
주의: 화면을 그리지 않아 스크린샷이나 시각 QA에는 못 쓰고, CDP로 HTML과 시맨틱 트리를 읽는 크롤링용이에요. AGPL-3.0이라 서비스에 포함하거나 고쳐 배포할 때 조건을 확인하세요. Windows 네이티브 바이너리는 없고 Alpine 같은 musl 환경에서는 안 돌아요.
getlayers.ai
웹 템플릿, 3D WebGL 씬, 애니메이션 배경, 그라디언트를 프롬프트 하나로 복사해 AI에 붙여넣을 수 있는 라이브러리예요. MCP와 Figma 연동, 텍스트 애니메이션이나 커스텀 커서 같은 디자인 도구도 함께 제공해요.
AI로 만든 사이트가 밋밋해 보여서 시네마틱한 3D나 모션 디자인을 프롬프트로 입히고 싶을 때 써요.
주의: 전체 프롬프트와 상업 라이선스는 Unlimited 플랜, 소스와 3D, MCP는 Full Stack 플랜이에요. 계정 없이 복사되는 무료 레이어도 있어요. 성능 수치는 제작자 주장이에요.
styles.refero.design
실제 제품 웹사이트 2,000개 이상의 스타일을 색상, 타이포그래피, 간격, 컴포넌트와 함께 AI가 읽을 수 있는 DESIGN.md로 정리해 둔 라이브러리예요. Cursor, Claude Code, Codex, v0, Lovable 같은 도구에 붙여 원하는 디자인 방향을 바로 적용할 수 있어요.
AI 코딩 도구로 UI를 만들 때 참고할 디자인 시스템이나 DESIGN.md 예시를 찾고 싶을 때 써요.
주의: 2,000개 이상은 사이트가 밝힌 수치예요. 스타일별 사용 조건은 확인되지 않았어요. 파일이 저장소에 있는 VoltAgent/awesome-design-md가 에이전트용으로는 더 안정적이에요.
onepagelove.com
2008년부터 직접 골라 모은 원페이지 웹사이트 9천여 개와 섹션 예시 9천여 개를 보여주는 갤러리예요. 카테고리, 스타일, 플랫폼, 기술 스택별로 필터링할 수 있고 템플릿과 OG 이미지 생성 같은 도구도 있어요.
랜딩 페이지나 포트폴리오를 만들기 전에 비슷한 디자인 레퍼런스와 섹션 구성 예시를 찾고 싶을 때 써요.
주의: 일부 항목은 스폰서 광고이고 템플릿 중에는 유료가 많아요.
land-book.com
매일 업데이트되는 웹사이트 디자인 큐레이션 갤러리예요. 랜딩, 포트폴리오, 이커머스 등 유형과 스타일, 업종별로 필터링해서 볼 수 있어요.
새 웹사이트나 랜딩 페이지를 기획하면서 참고할 디자인 레퍼런스를 찾을 때 써요.
주의: 무료 플랜은 카테고리, 필터, 검색 결과가 제한되고 일부 기능은 PRO 구독이 필요해요.
details.so
체험실제 웹사이트의 히어로, 푸터, 프리로더, 페이지 전환, 스크롤 애니메이션 같은 디테일을 매주 골라서 보여줘요. 필터와 자연어 검색으로 원하는 섹션 사례를 빠르게 찾을 수 있어요.
랜딩 페이지나 포트폴리오를 만들면서 섹션별 디자인과 인터랙션 레퍼런스가 필요할 때 써요.
주의: 코드와 전체 라이브러리, MCP는 유료 플랜이에요. 같은 사이트 안에서 플랜 이름과 가격이 서로 달라 정확한 요금은 결제 화면에서 다시 확인하세요.
60fps.design
체험유명 iOS 앱과 웹 앱의 애니메이션과 인터랙션 디테일을 2천 개 넘게 모아 둔 큐레이션 사이트예요. 앱별, 유형별로 필터링해 볼 수 있고 모션, 스니펫, MCP 같은 부가 자료도 있어요.
버튼, 탭 전환, 로딩 같은 UI 모션을 설계하기 전에 실제 앱의 레퍼런스를 찾아보고 싶을 때 써요.
주의: 전체 필터는 PRO(좌석당 월 15달러)이고, MCP는 PRO와 별도 구독이에요. 샷 영상의 재사용 조건은 확인되지 않았어요.
posts.design
체험860개 이상의 브랜드가 실제로 소셜에 올린 포스트, 헤더, OG 이미지를 매일 모아 보여줘요. 제품 업데이트, 런칭, 발표 카드 같은 유형별로 나눠 볼 수 있어요.
소셜 포스트나 OG 이미지 디자인의 레퍼런스를 브랜드별, 유형별로 찾아보고 싶을 때 써요.
주의: 가입 후 이용하는 기능이 있을 수 있고, 각 이미지의 저작권은 원 브랜드에 있어요.
github.com
React와 TypeScript로 이메일을 만들 수 있는 스타일 없는 고품질 컴포넌트 모음이에요. Gmail, Outlook 등 클라이언트 간 호환성 문제를 대신 처리해 주고 다크 모드도 지원해요.
React 기반으로 반응형 HTML 이메일 템플릿을 만들고 Resend, Nodemailer, SES 같은 서비스로 발송할 때 써요.
libraries.dev
AI 인터페이스에 쓸 수 있는 React 애니메이션 효과 라이브러리 모음이에요. 테두리 빔, 생각 중 오브, 액체 금속 버튼, 이미지 로더 등을 npm으로 설치할 수 있고 프롬프트를 복사해 코딩 에이전트에 붙여넣는 방식을 지원해요.
AI 챗이나 에이전트 앱에 눈에 띄는 로딩·상태 표시 UI 효과를 빠르게 넣고 싶을 때 써요.
주의: 본문에 패키지 수가 다섯 개와 일곱 개로 서로 다르게 적혀 있어요. Studio와 Pro 기능은 유료이고 React 외 플랫폼은 Beam과 Orb만 지원해요.
beui.dev
Motion과 Tailwind CSS로 만든 애니메이션 React 컴포넌트 143개와 Reanimated 기반 React Native 컴포넌트 45개를 제공해요. shadcn CLI로 설치하거나 소스를 복사해 자유롭게 고쳐 쓸 수 있어요.
버튼, 모달, 토스트, 탭처럼 스프링 모션이 들어간 UI 컴포넌트를 빠르게 가져다 쓰고 싶을 때 참고해요.
주의: 공개 컴포넌트는 MIT예요. Pro 블록과 템플릿은 따로 유료예요.
ui.aceternity.com
Tailwind CSS와 Motion으로 만든 200개 이상의 복사 후 붙여넣기용 React/Next.js 컴포넌트 모음이에요. 배경 효과, 카드, 텍스트 애니메이션, 내비게이션 등 인터랙티브 UI를 폭넓게 다뤄요.
랜딩 페이지나 포트폴리오에 애니메이션이 들어간 화려한 UI 컴포넌트가 필요할 때 참고해요.
주의: 무료로 복사할 수 있는 컴포넌트는 약 113개이고, 블록과 템플릿은 All-Access 유료예요. 결과물에 쓰는 건 되지만 경쟁 라이브러리로 재배포하면 안 돼요.
원문 링크와 Refs가 직접 쓴 설명, GitHub 공개 메타만 실어요. 내려 달라는 요청은 sean@notique.co로 알려 주세요.