레퍼런스 모음 · 52개
AI Product Builder
AI로 제품을 직접 만드는 메이커를 위한 레퍼런스 — 디자인 레퍼런스, AI 디자인 스킬, UI 컴포넌트, 이미지·영상, Claude Code 실전
Sunra MCP: images, video, audio and 3D models inside your agentsunra.ai
Sunra는 이미지·영상·오디오·3D 모델을 만드는 생성 도구로, Claude·ChatGPT 커넥터와 Claude Code·Codex·Cursor 등에 붙여 쓰는 MCP 서버다. 설치 명령(npm i -g @sunra/cli@0.2.2)과 로그인, 잔액·도구 확인 순서의 설정 프롬프트가 본문에 반복 게시되어 있다.
● Claude Code에서 이미지·영상을 직접 생성하는 MCP 도구라 AI로 제품을 만드는 레퍼런스에 맞는다.
Colorfigures skillapril-zhu.com
Claude용 스킬로, 일상 사물을 한 문장으로 설명하면 손으로 그린 듯한 아이소메트릭 일러스트와 실제로 동작하는 버튼이 달린 인터랙티브 오브젝트를 만들어 준다. 설치는 ~/.claude/skills 폴더에 tar.gz를 풀어 넣는 방식이며 Claude Code, Claude.ai, 수동 zip 설치를 지원한다.
● Claude 스킬로 디자인 결과물을 만드는 방식이라 AI 디자인 스킬 레퍼런스에 맞다.
CrumpledPaper Reveal — Free Component for Framerframer.com
CrumpledPaper Reveal은 Framer Marketplace의 무료 Effects 코드 컴포넌트로, 이미지 한 장을 구겨진 종이 공에서 펼쳐지는 종이 인쇄물처럼 보여준다. Hover·Click·In View·Scroll 트리거, 접힘 방식, 구김 모양, 종이 색과 그림자 등을 Framer 속성 패널에서 조절할 수 있다고 소개된다.
● Framer용 UI 컴포넌트이자 AI 에이전트로 캔버스에서 직접 다루는 레퍼런스라 메이커 레퍼런스에 맞다.
Cerebral Valley – AI Events and Hackathonscerebralvalley.ai
Cerebral Valley는 AI 커뮤니티이자 해커톤·이벤트를 운영하는 플랫폼이다. 설명에 따르면 GPT-4 이후 공개된 주요 모델 출시를 주관해 왔고, 기업 대상 내부 활성화 프로그램도 운영한다. 수집된 본문은 CSS와 숫자 위젯 코드 위주라 세부 행사 정보는 확인되지 않는다.
● AI로 제품을 만드는 메이커가 해커톤과 커뮤니티를 찾을 때 연결되는 곳이다.
iso-glowisoglow.dev
Claude 스킬로 설치하는 인터랙티브 아이소메트릭 선화 도구다. 사물·기기·건물을 설명하면 켜진 부분이 빛나고 눌러 볼 수 있는 단일 HTML 파일을 만들며, 3D 버전과 Lumen 스타일 채색 일러스트도 제공한다. 입력에 적힌 설치 명령은 옮기지 않는다.
● AI로 만드는 제품의 디자인 스킬 레퍼런스이며 Claude 스킬 형태라 메이커 도구 모음에 맞다.
Footer — The only footer gallery on earth.footer.design
웹사이트 푸터 디자인을 큐레이션해 모아 둔 갤러리다. 유형과 스타일별로 분류해 필요한 푸터 사례를 찾을 수 있다. 입력에 적힌 편집 선정 사례는 Trove, Aperios Design, Decimals 등 여러 사이트다.
디자인 레퍼런스
.webp)
Navbar Gallery – Navigation Design Inspirationnavbar.gallery
웹사이트 네비게이션 바 디자인 레퍼런스를 유형별(Static, Dropdown, Mega Menu, Sidebar, Search Bar, Announcement, Full Screen, Breadcrumbs)로 모아 둔 갤러리다. 각 유형의 설명과 실제 사이트 예시를 보여 주며, Mobbin이 스폰서로 표기되어 있다.
디자인 레퍼런스
Supahero - Website hero section librarysupahero.io
Supahero는 웹사이트 히어로 섹션을 큐레이션해 모은 라이브러리다. 현재 screensdesign 에 합쳐졌다고 소개되며, 다양한 사이트의 히어로 섹션 구조를 한눈에 볼 수 있다.
디자인 레퍼런스
- oil-oil/oil-ui
github.com
AI 에이전트용 UI 디자인 스킬로, 서로 다른 디자인 방향을 나란히 탐색하고 실제 스크린샷으로 다듬는 방식이다. 과거에 좋다고 저장한 UI Craft·Libraries.dev 계열의 AI 디자인 스킬과 같은 흐름이며 leenybook·answerly 같은 프로젝트의 화면 작업에 참고할 수 있다.
AI 디자인 스킬
Anatomy · A skill for Claude Codeskills.wheresryan.sh
Claude Code용 스킬 Anatomy는 아이디어를 한 줄로 받아 그 작동 원리를 돌아가는 3D 등각 모델(시계 무브먼트 등)로 그려 주는 도구다. 회전·조작·감속 보기가 가능한 인터랙티브 시각 자료로, 설명을 도식 대신 실제 기계로 보여 준다.
● AI 자동화 교육 자료에서 복잡한 원리를 인터랙티브 시각물로 설명할 때 참고할 수 있다.
이미지·영상
- Jakubantalik/transitions.dev
github.com
CSS 전환 효과 43개 이상을 모은 인터랙티브 컬렉션으로, 각 카드마다 복사해 쓸 수 있는 독립형 CSS 스니펫과 prefers-reduced-motion 가드를 제공한다. 과거에 좋다고 저장한 UI 모션·스킬형 레퍼런스(UI Craft, Libraries.dev, Bevel 애니메이션 분석)와 같은 계열이다.
UI 컴포넌트이미지·영상
AI App Animations is Hard Until You Learn This — John Kimyoutube.com
AI로 앱 애니메이션을 만드는 방법을 다루는 유튜브 영상으로 보인다. 수집이 일부만 되어 제목 외 본문은 확인하지 못했다.
이미지·영상
- Build live dashboards and animate explainers with Claude
claude.com
Anthropic이 Claude에서 데이터 기반 라이브 대시보드(Claude Dashboards)와 애니메이션 설명 영상(Claude Motion)을 베타로 공개했다는 공식 소개글이다. BigQuery, Databricks, Snowflake, Salesforce 등 데이터 플랫폼·CRM과 연결해 자연어로 질문하면 대시보드가 생성되고 데이터 변화에 따라 갱신된다는 점이 핵심이다.
● AI 자동화 교육에서 Claude 신기능을 소개할 때 참고할 수 있다.
이미지·영상
Minimal Gallery – Website Design Inspirationminimal.gallery
미니멀하고 기능적인 웹사이트 사례를 엄선해 매일 큐레이션하는 디자인 갤러리다. AI, 스타트업, 포트폴리오, 에이전시 등 카테고리별 웹 디자인 레퍼런스와 프리미엄 템플릿 정보를 제공한다.
디자인 레퍼런스
- Prompt Motion
prompt-motion.com
Prompt Motion은 Claude Opus로 제작한 모션 비디오와 제작에 사용된 프롬프트, 스킬을 모아놓은 아카이브다. 크리에이터별 작업물과 프롬프트 및 스킬을 필터링하여 미리보기와 함께 탐색할 수 있다.
● Claude를 활용한 모션 비디오 제작 프롬프트와 에이전트 스킬 작성 사례로 활용한다.
이미지·영상
Libraries.dev: High-crafted UI libraries for AI agentslibraries.dev
Libraries.dev는 React 18 기반의 Beam, Orb, Gooey, Liquid Metal 등 고품질 UI 효과 컴포넌트를 제공하는 무료 MIT 라이브러리 모음이다. 원클릭 프롬프트를 복사해 Claude Code, Cursor 등 코딩 에이전트에 붙여넣어 즉시 설치 및 구현할 수 있다.
● Claude Code 및 Cursor 에이전트를 활용한 바이브코딩 UI 구현 사례 및 교재로 활용한다.
UI 컴포넌트
- X에서 testarossa(@rossaxbt) 님
x.com
Claude를 사용해 외부 도구 없이 코드로 애플 키노트 스타일의 2D 런칭 영상을 제작하는 프롬프트 템플릿이다. 브랜드 에셋 입력 규격부터 씬 전환 트랜지션, 타이포그래피, 커서 인터랙션 등 구체적인 연출 지시문을 포함한다.
● Claude 프롬프트로 제품 런칭 모션 비디오를 코딩 생성하는 AI 바이브코딩 가이드 및 콘텐츠로 활용한다.
이미지·영상
- feitangyuan/onetake
github.com
화면 전환 없이 이전 비트가 다음 비트로 자연스럽게 이어지는 원테이크 모션 영상을 제작하는 Claude 에이전트 스킬이다. 슬라이드쇼 형태를 벗어나 제품 론칭 필름, 티저, 기능 데모 영상을 연속된 샷으로 생성한다.
● Claude Code 및 에이전트 스킬을 활용한 자동화·콘텐츠 제작 실습 사례로 소개한다.
이미지·영상
Style Picker three prototypesbensbites.com
페이지 레이아웃과 미감을 조합해 AI 에이전트용 프롬프트를 만드는 디자인 도구 프로토타입 모음이다. AI가 생성하는 UI의 스타일을 구체화할 때 참고할 수 있다.
AI 디자인 스킬
- coreyhaines31/marketingskills
github.com
Claude Code와 AI 에이전트용 마케팅 스킬 모음. CRO, 카피라이팅, SEO, 애널리틱스, 그로스 엔지니어링 작업을 자동화하는 에이전트 스킬 라이브러리.
● Claude Code 마케팅 자동화 스킬 라이브러리를 AI 에이전트 실습 및 교육 콘텐츠로 구성
카피·마케팅
Social post design inspiration — posts.designposts.design
670개 이상의 브랜드가 실제로 소셜미디어에 공유한 포스트들을 모아 디자인 영감을 제공하는 사이트. 런칭 공지, 제품 업데이트, 이벤트 등 다양한 포스트 타입의 디자인을 볼 수 있다.
디자인 레퍼런스카피·마케팅
- Appllama/appllama-skills
github.com
AI 에이전트가 모바일 앱을 제대로 만들 수 있도록 하는 에이전트 스킬 라이브러리. 실제 인기 앱들의 화면과 UI 패턴을 학습해 시뮬레이터 수준의 품질로 네이티브 모바일 화면을 생성한다.
AI 디자인 스킬
- nexu-io/open-design
github.com
AI 에이전트(Claude, DeepSeek 등)를 활용해 프로토타입, 대시보드, 랜딩페이지 등을 자동 생성하는 로컬 데스크톱 앱. HTML/PDF/PPTX/MP4 등 다양한 포맷 내보내기 지원.
● AI 에이전트로 프로토타입·대시보드 자동 생성하는 실전 워크플로우를 강의 사례로 제공
AI 디자인 스킬
Bevel iOS App UI/UX animation60fps.design
건강 및 피트니스 트래커 앱의 UI/UX 애니메이션 분석. 페이지 스와이프, 카드 슬라이드, 인터랙티브 스토리 카드 등 10가지 인터랙션을 프레임 단위로 분해.
디자인 레퍼런스이미지·영상
Best Web Design Inspiration | Details.sodetails.so
웹디자인 레퍼런스 큐레이션 사이트. 실제 웹사이트의 hero, footer, 애니메이션 등을 주간 업데이트로 제공하며, 코드로 복사 가능한 컴포넌트와 AI 통합 기능을 제공한다.
디자인 레퍼런스
The missing design vocabulary for agents.impeccable.style
AI가 생성한 인터페이스를 다듬어서 디자인 시스템에 맞게 개선해주는 도구. Claude, GitHub Copilot, Cursor 등과 통합되어 에이전트가 처음부터 빌드하거나 기존 것을 개선할 수 있다.
AI 디자인 스킬
React Bitsreactbits.dev
React용 고품질 애니메이션 컴포넌트 라이브러리. 200개 이상의 커스터마이징 가능한 UI 컴포넌트와 마이크로 인터랙션을 제공한다.
UI 컴포넌트
- Landbook - website design inspiration gallery
land-book.com
매일 업데이트되는 엄선된 웹사이트 디자인 갤러리. 산업, 스타일, 플랫폼 등으로 필터링하여 랜딩페이지, 포트폴리오, 이커머스 등 다양한 웹 디자인 사례를 찾을 수 있다.
디자인 레퍼런스
- gongnyang/gongnyang-prompt-kit
github.com
막연한 프롬프트를 gpt-image-2 완성 프롬프트로 자동 컴파일하는 Claude Code 스킬. 라우팅 테이블 기반 패턴 매핑과 검증기를 통해 질 높은 이미지 생성을 돕는다.
● Claude Code 스킬 구현 사례 — 프롬프트 자동 완성 패턴을 바이브코딩 교육 가이드에 포함
이미지·영상
- MengTo/Skills
github.com
AI 코딩 에이전트(Claude, Cursor 등)를 활용해 UI를 구축하기 위한 프롬프트 기법과 워크플로우 모음. 디자인 영상을 프롬프트로 변환하고 HTML을 상호작용 지시로 만드는 스킬들을 제공한다.
AI 디자인 스킬
- emilkowalski/skills
github.com
디자이너와 엔지니어를 위한 UI/애니메이션 설계 원칙과 베스트 프랙티스 모음. Vercel, Linear에서의 경험을 바탕으로 한 실무 가이드.
AI 디자인 스킬
UI Craft: taste you can fail a build onskills.smoothui.dev
Claude Code, Cursor 등 AI 코드 에디터에 설치하는 스킬. 생성된 것 같은 UI를 개선하고 디자인 품질을 보장한다. 무료 MIT 라이선스.
AI 디자인 스킬
- jakubkrehel/make-interfaces-feel-better
github.com
인터페이스의 작은 디테일을 개선하는 에이전트 스킬. 애니메이션, 타이포그래피, 아이콘, 호버 상태, 광학 정렬, 섀도우 등을 다룬다.
AI 디자인 스킬
- epoko77-ai/im-not-ai
github.com
Claude, Copilot 등 LLM이 생성한 한글 텍스트의 AI 티를 제거해 자연스럽게 윤문하는 CLI 도구. 번역투, 기계적 병렬, AI 특유 관용구 등 85가지 패턴을 탐지·수정한다.
● AI 생성 콘텐츠 윤문 도구—Claude 교육 강의에서 실습 소재
카피·마케팅
DESIGN.md Examples for AI Agents | Refero Stylesstyles.refero.design
AI 에이전트를 위한 DESIGN.md 라이브러리. 주요 제품 사이트의 컬러, 타이포그래피, 스페이싱, 컴포넌트 등 2,000+ 디자인 시스템을 AI 도구에서 사용 가능한 형식으로 제공한다.
AI 디자인 스킬
- addyosmani/agent-skills
github.com
AI 에이전트가 시니어 엔지니어의 모범 사례를 따르도록 하는 프로덕션급 스킬셋. 기획부터 배포까지 9개의 슬래시 커맨드로 개발 생명주기를 체계화한다.
● AI 에이전트 스킬셋과 개발 생명주기를 바이브코딩 교육 프레임워크로 제공
Claude Code
- Leonxlnx/taste-skill
github.com
AI가 생성하는 평범한 결과물을 개선하기 위한 프론트엔드 프레임워크. AI 에이전트의 출력 품질을 높이는 설계 원칙과 구현 방법을 제공한다.
AI 디자인 스킬
- multica-ai/andrej-karpathy-skills
github.com
Andrej Karpathy의 LLM 코딩 문제점 관찰에서 파생된 CLAUDE.md 파일. Claude Code의 동작을 개선하기 위한 4가지 원칙(사전 사고, 단순성, 정밀한 변경, 목표 기반 실행)을 제시한다.
● Claude Code 학습과 최적화 프롬프트 엔지니어링을 바이브코딩 교육 가이드로 제작
Claude Code
- ykdojo/claude-code-tips
github.com
Claude Code를 효과적으로 사용하는 45개 이상의 팁을 정리한 리포지토리. 기본부터 고급까지 다루며, 커스텀 상태 라인 스크립트와 dx 플러그인을 포함한다.
● Claude Code 팁 45개를 AI 자동화·바이브코딩 교육 콘텐츠로 변환해 강의·가이드 자료화
Claude Code
- kimsanguine/AI_PM
github.com
Claude Code를 활용해 PM의 워크플로우를 재설계하는 8파트 커리큘럼. 컨텍스트 인프라 설계, 10가지 유즈케이스를 통해 AI 네이티브 PM의 실전 방법론을 제시한다.
● Claude Code 활용 PM 8파트 커리큘럼을 AI 네이티브 워크플로우 교육 콘텐츠로 편성
Claude Code
- VoltAgent/awesome-design-md
github.com
Google Stitch의 DESIGN.md 포맷을 활용한 디자인 시스템 모음. AI 에이전트가 읽을 수 있는 마크다운 기반 디자인 문서로 일관된 UI를 생성하는 방식을 소개한다.
AI 디자인 스킬
- garrytan/gstack
github.com
Garry Tan이 Claude를 활용한 AI 에이전트 기반 개발 워크플로우를 공유한 저장소. CEO, 디자이너, 엔지니어 등의 역할을 수행하는 23개 도구 모음으로 한 명이 팀처럼 빠르게 제품을 출시하는 방법을 제시한다.
● Claude 기반 AI 에이전트 워크플로우 사례를 바이브코딩 교육에 활용
Claude Code
The Component Gallerycomponent.gallery
60개 컴포넌트, 95개 디자인 시스템의 예제를 모은 UI 컴포넌트 레퍼런스. 캐러셀, 트리뷰, 팝오버 등 다양한 컴포넌트의 구현 사례를 제공한다.
디자인 레퍼런스
- ai-native-camp/camp-1
github.com
비개발자를 위한 Claude Code 실습 캠프의 커리큘럼 자료. MCP, Skills 만들기, 콘텐츠 처리 등을 7일간 학습하며 AI 네이티브 업무 방식을 습득한다.
● Claude Code 캠프 커리큘럼을 AI Creator Lab 교육 프로그램 설계 참고자료로 활용
Claude Code
His Claude Code Workflow Is Insane — John Kimyoutube.com
Boris Cherny의 Claude Code 설정과 병렬 실행, CLAUDE.md, 슬래시 명령, 하위 에이전트, 피드백 루프 등의 활용법을 소개하는 영상입니다. Claude Code 워크플로를 익히거나 AI Creator Lab의 강의·가이드 콘텐츠를 구상할 때 참고할 수 있습니다.
● Claude Code 창시자의 워크플로우 분석으로 AI 자동화·바이브코딩 교육 콘텐츠에 직접 활용
Claude Code
Free React & Next.js Components | Aceternity UIui.aceternity.com
Tailwind CSS와 Framer Motion으로 만든 200개 이상의 무료 React·Next.js UI 컴포넌트. 복사-붙여넣기로 쓸 수 있는 Hero, Card, Animation 등 다양한 섹션과 이펙트를 제공한다.
UI 컴포넌트
Your AI Coding Workflow NEEDS This New Agent Browser CLI — Cole Medinyoutube.com
Vercel Agent Browser CLI로 코딩 에이전트가 웹사이트를 탐색·테스트하는 방법과 Playwright MCP 등과의 비교를 다루는 영상입니다. 에이전트 기반 웹 테스트와 브라우저 자동화 도구를 살펴볼 때 참고할 수 있습니다.
● Claude Code·바이브코딩 교육 콘텐츠의 소재 — 에이전트 도구 비교·벤치마크 데이터는 강의·가이드에 바로 쓰인다
Claude Code
One Page Love — One Page Website Inspiration and Templatesonepagelove.com
2008년부터 큐레이션한 원페이지 웹사이트 9,000여 개의 디자인 영감과 템플릿을 모아둔 갤러리. 랜딩 페이지, 포트폴리오, 서비스 소개 등 다양한 카테고리의 사이트 사례를 제공한다.
디자인 레퍼런스
One-shotting beautiful landing pages with code references — DesignCodeyoutube.com
Aura Compose의 템플릿·컴포넌트 참조, 이미지 생성, 배경·애니메이션 기능으로 랜딩 페이지를 만들고 다듬는 과정을 보여주는 영상입니다. 홈페이지 제작 워크플로와 AI 디자인 도구를 살펴볼 때 참고할 수 있습니다.
● AI 디자인·바이브코딩 워크플로 강의·가이드 콘텐츠 소재
AI 디자인 스킬
Full Tutorial: Create Beautiful Designs with AI in 40 Minutes (Not Generic Slop) | Meng To — Peter Yangyoutube.com
AI 웹사이트가 획일적으로 보이지 않도록 참조·템플릿을 활용해 프롬프트, 레이아웃, 애니메이션을 다듬는 과정을 소개하는 튜토리얼입니다. AI 웹사이트 제작과 프로토타이핑 워크플로우를 익힐 때 참고할 수 있습니다.
● AI Creator Lab — AI 디자인·프로토타이핑 워크플로우는 강의·가이드 콘텐츠 소재로 직결된다
AI 디자인 스킬
Mobbin — UI & UX design inspiration for mobile & web appsmobbin.com
60만 개 이상의 모바일·웹 앱 스크린샷 라이브러리. UI/UX 디자인 리서치 시간 단축용 검색 가능한 레퍼런스 모음.
디자인 레퍼런스
- Checklist Design
checklist.design
웹사이트, 웹앱, 모바일, 컴포넌트, 플로우 디자인 시 체크해야 할 항목들을 정리한 체크리스트 모음. 디자인 품질 관리 도구다.
디자인 레퍼런스
