8개 · 갱신
스크린샷이 아니라 코드로 가져다 쓸 수 있는 UI 컴포넌트와 모션 레퍼런스예요. 에이전트가 바로 읽고 옮길 수 있는 것들이에요.
github.com
체험AI 코딩 에이전트가 만드는 프론트엔드 디자인의 뻔한 패턴을 줄여주는 디자인 가이드 스킬이에요. 24개 명령어와 59개의 결정적 탐지 규칙으로 critique, audit, polish 같은 작업을 할 수 있어요.
Claude Code나 Cursor 같은 AI 도구로 UI를 만들면서 디자인 품질을 점검하고 다듬고 싶을 때 참고해요.
주의: 설치 시 npx 설치기가 프로젝트에 훅 설정을 추가하고, 첫 실행 때 바이너리를 내려받아요. 사용 전에 내용을 확인해 보세요.
github.com
체험복사해서 바로 쓸 수 있는 CSS 트랜지션 모음이고, 카드 리사이즈, 모달, 드롭다운, 성공 체크 같은 UI 모션 패턴을 담고 있어요. CLI와 에이전트 스킬, Refine 도구도 있어서 AI 코딩 도구로 모션을 적용하기 좋아요.
UI에 완성도 높은 모션을 빠르게 넣거나 AI 코딩 에이전트가 일관된 트랜지션을 쓰게 하고 싶을 때 참고해요.
주의: 라이선스가 SPDX로 확인되지 않는 커스텀 조건이에요. 상업적 사용은 가능하지만 경쟁 트랜지션 라이브러리로 재배포하는 것은 금지돼요. Pro 트랜지션은 로그인이 필요해요.
github.com
체험유명 브랜드 웹사이트의 디자인 시스템을 분석해서 만든 DESIGN.md 파일 모음이에요. 프로젝트에 넣어 두면 코딩 에이전트가 일관된 스타일의 UI를 만들어 줘요.
AI 코딩 에이전트로 특정 브랜드 느낌의 UI나 랜딩 페이지를 만들고 싶을 때 참고해요.
주의: DESIGN.md는 저장소의 design-md/<브랜드>/ 폴더에 있어요. 브랜드 공식 디자인 시스템이 아니라 사이트를 분석한 결과물이고, README에 상업 후원 안내가 있어요.
reactbits.dev
텍스트 애니메이션, 배경, 인터랙티브 카드, 마이크로 인터랙션 같은 애니메이션 React 컴포넌트를 모아 둔 사이트예요. 라이브 데모를 보고 소스를 복사하거나 CLI로 설치할 수 있어요.
React 프로젝트에 눈에 띄는 애니메이션 효과나 배경을 빠르게 넣고 싶을 때 참고해요.
주의: 무료 컴포넌트는 MIT에 Commons Clause가 붙어 있어요. 앱에 넣는 건 되지만 컴포넌트 자체를 팔거나 재배포하면 안 돼요. Pro는 유료예요.
ui.aceternity.com
Tailwind CSS와 Motion으로 만든 200개 이상의 복사 후 붙여넣기용 React/Next.js 컴포넌트 모음이에요. 배경 효과, 카드, 텍스트 애니메이션, 내비게이션 등 인터랙티브 UI를 폭넓게 다뤄요.
랜딩 페이지나 포트폴리오에 애니메이션이 들어간 화려한 UI 컴포넌트가 필요할 때 참고해요.
주의: 무료로 복사할 수 있는 컴포넌트는 약 113개이고, 블록과 템플릿은 All-Access 유료예요. 결과물에 쓰는 건 되지만 경쟁 라이브러리로 재배포하면 안 돼요.
beui.dev
Motion과 Tailwind CSS로 만든 애니메이션 React 컴포넌트 143개와 Reanimated 기반 React Native 컴포넌트 45개를 제공해요. shadcn CLI로 설치하거나 소스를 복사해 자유롭게 고쳐 쓸 수 있어요.
버튼, 모달, 토스트, 탭처럼 스프링 모션이 들어간 UI 컴포넌트를 빠르게 가져다 쓰고 싶을 때 참고해요.
주의: 공개 컴포넌트는 MIT예요. Pro 블록과 템플릿은 따로 유료예요.
libraries.dev
AI 인터페이스에 쓸 수 있는 React 애니메이션 효과 라이브러리 모음이에요. 테두리 빔, 생각 중 오브, 액체 금속 버튼, 이미지 로더 등을 npm으로 설치할 수 있고 프롬프트를 복사해 코딩 에이전트에 붙여넣는 방식을 지원해요.
AI 챗이나 에이전트 앱에 눈에 띄는 로딩·상태 표시 UI 효과를 빠르게 넣고 싶을 때 써요.
주의: 본문에 패키지 수가 다섯 개와 일곱 개로 서로 다르게 적혀 있어요. Studio와 Pro 기능은 유료이고 React 외 플랫폼은 Beam과 Orb만 지원해요.
github.com
React와 TypeScript로 이메일을 만들 수 있는 스타일 없는 고품질 컴포넌트 모음이에요. Gmail, Outlook 등 클라이언트 간 호환성 문제를 대신 처리해 주고 다크 모드도 지원해요.
React 기반으로 반응형 HTML 이메일 템플릿을 만들고 Resend, Nodemailer, SES 같은 서비스로 발송할 때 써요.
원문 링크와 Refs가 직접 쓴 설명, GitHub 공개 메타만 실어요. 내려 달라는 요청은 sean@notique.co로 알려 주세요.