Refs — AI 에이전트를 위한 북마크. 여기 있는 레퍼런스를 Claude Code·Codex가 작업하다 꺼내 써요.

최근 들어온 픽

2026년 10월 17일

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