pulkitxm/claude-directory
Claude가 생성한 AI 웹 UI 실험 갤러리 — 반응형 랜딩 페이지, 3D 씬, 셰이더, 디자인 시스템을 한 곳에
352+13이번 주0 찜
83포크0이슈
중간맛 분석
스택: React, TypeScript, Vite, Tailwind CSS, Three.js, Framer Motion, GSAP, WebGL 기반 다양한 구성 요소 | 난이도: 2~3 (스택 학습 필요하지만 코드는 참고용으로 우수함) | 즉시 사용 가능: 각 프로젝트 폴더를 클론해 의존성 설치 후 npm run dev로 실행하면 데모 확인 가능 | 카테고리: 히로 섹션(41개), 랜딩 페이지(98개), GLSL 셰이더, 3D/게임, UI 디자인 시스템, 애니메이션, 포트폴리오 등 9가지 분류
이런 레포예요
이럴 때 쓰면 좋아요
- 디자인 영감이나 UI 패턴 아이디어가 필요할 때 빠르게 참고
- Claude를 활용한 AI 생성 웹 컴포넌트 학습 및 프롬프트 엔지니어링 연구
- 랜딩 페이지나 히로 섹션의 프로덕션급 코드 예제를 찾을 때
- Three.js, GSAP, Framer Motion 등 고급 프런트엔드 기술 활용 사례 참고
핵심 기능
Claude Fable 5로 생성된 41개 히로 섹션 + 98개 랜딩 페이지 + 기타 9개 카테고리 이상의 재사용 가능한 UI 컴포넌트각 프로젝트마다 원본 프롬프트(prompt.md)와 데모 영상(demo.mp4) 포함으로 생성 과정 투명화React, Three.js, Tailwind CSS, GSAP, Framer Motion 등 다양한 스택 혼합 지원
대안 대비 차별점
AI 생성 UI 코드의 완전한 투명성(원본 프롬프트 공개)과 프로덕션급 현대 스택 조합으로, 단순 갤러리를 넘어 학습·프롬프트 공학·스택 참고의 종합 학습자료로 기능합니다.
준비물
- Node.js 및 npm
- Git
- 기본적인 React/JavaScript 지식 (선택사항, 프레임워크 자유)
바로 시작하기
- 레포지토리를 클론합니다
git clone https://github.com/pulkitxm/claude-directory.git
cd claude-directory
- 원하는 프로젝트 폴더로 이동합니다 (예: 히로 섹션)
cd hero-sections/aethera-cinematic-hero
- 의존성을 설치합니다
npm install
- 개발 서버를 실행합니다
npm run dev
-
브라우저에서
http://localhost:5173(또는 터미널에 표시된 URL)로 접속하면 프로젝트를 확인할 수 있습니다 -
필요시 프로덕션 빌드를 생성합니다
npm run build
이 레포로 만든 것들
🖋 완주 인증하기아직 이 레포로 만든 완주 인증이 없어요. 첫 밥도장을 찍어보세요!
별 추이 · 7일
352+13 / 7일
활용성 · 따라 만들기 좋은가
샘플 점수 34/100
- 관대한 라이선스
- 테스트 있음
- 예제 디렉토리
- 최근 활동
- AGENTS.md
- llms.txt
- 템플릿
🟢 최근 활동 있음 · 2026년 생성
이 레포에 깃밥 배지 달기
[](https://www.gitbap.com/r/pulkitxm/claude-directory)🔌 클로드에서 바로 써보기
깃밥을 클로드에 연결하면 이런 레포를 클로드·커서·Codex에서 바로 찾고 체험할 수 있어요.
방법 ① 커넥터 URL
클로드 설정 → 커넥터에 이 주소를 붙여넣기.
https://www.gitbap.com/api/mcp방법 ② 플러그인 (체험까지)
플러그인을 설치하면 /gitbap-trending·/gitbap-try 슬래시 커맨드로 레포를 그 자리에서 체험. Claude Code에서 아래 두 줄을 차례로 실행하세요.
/plugin marketplace add jakeparkcolde/gitbap-cowork/plugin install gitbap-cowork@gitbapAI가 README 기반으로 요약했습니다 · 원문 보기