리소스 허브
AI 활용을 위한 프롬프트 템플릿과 AI 킷을 한곳에서 탐색하세요
인기 태그
정렬
커뮤니티 운영 자동화 클로드코드 PRD
클로드코드에 커뮤니티 자동화를 일임할 때 던질 Product Requirements Description입니다. 여러분 상황에 맞추어 변경하여 사용하실 수 있습니다. ➡️ 오른쪽에 '🔒로그인 필요' 또는 '다운로드' 버튼을 누르세요!
클로드코드 - Teams 기능 정의, 셋팅, 장단점, 팁
템플릿 설명이 없습니다.
클로드 코드, 프로젝트, 스킬, 서브에이전트 가이드
템플릿 설명이 없습니다.
AI 기능, 프롬프팅 완벽 가이드 - 11p 치트시트
GPT, Claude, Gemini, Copilot 등 주요 AI 플랫폼 공식 가이드 25+개를 통합 정리한 프롬프트 작성 치트시트. 4대 핵심 요소부터 10가지 실전 활용 사례, 플랫폼별 팁, AI 기능 조직도까지 한눈에!
따뜻한 & 친근한 디자인 스타일
따뜻하고 친근한 UI 디자인 스타일. 부드러운 색감과 둥근 모서리로 사용자에게 편안함을 전달합니다.
테크니컬 & 개발자 중심 디자인 스타일
기술적이고 개발자 중심의 UI 디자인 스타일. 코드 블록, 터미널 미학, 모노스페이스 폰트를 활용한 개발 도구 스타일입니다.
에디토리얼 콘텐츠 중심 디자인 스타일
에디토리얼 스타일의 콘텐츠 중심 UI 디자인. 매거진과 신문에서 영감받은 타이포그래피 중심의 레이아웃입니다.
접근성 우선 디자인 스타일
접근성 우선 UI 디자인 스타일. WCAG 가이드라인을 준수하며 모든 사용자가 이용할 수 있는 포용적인 디자인입니다.
글래스모피즘 디자인 스타일
글래스모피즘 UI 디자인 스타일. 반투명 유리 효과와 블러로 현대적이고 세련된 느낌을 연출합니다.
브루탈리즘 디자인 스타일
브루탈리즘 UI 디자인 스타일. 의도적으로 거친 미학, 대담한 타이포그래피, 반전통적인 레이아웃을 특징으로 합니다.
플레이풀 & 게이미피케이션 디자인 스타일
재미있고 게임화된 UI 디자인 스타일. 밝은 색상, 애니메이션, 게임 요소로 즐거운 사용자 경험을 제공합니다.
그라데이션 리치 디자인 스타일
그라데이션이 풍부한 UI 디자인 스타일. 현대적인 컬러 그라데이션으로 깊이감과 시각적 흥미를 더합니다.
레트로 & 노스탤지아 디자인 스타일
레트로와 노스탤지어 UI 디자인 스타일. 80-90년대 빈티지 미학으로 향수를 불러일으키는 디자인입니다.
럭셔리 & 하이엔드 디자인 스타일
럭셔리하고 하이엔드 UI 디자인 스타일. 골드 액센트, 우아한 타이포그래피로 최고급 브랜드 느낌을 연출합니다.
다크 모드 최적화 디자인 스타일
다크 모드에 최적화된 UI 디자인 스타일. 눈의 피로를 줄이고 OLED 화면에 적합한 어두운 인터페이스입니다.
자연 영감 오가닉 디자인 스타일
자연과 유기적인 UI 디자인 스타일. 자연에서 영감받은 색상, 유기적 형태, 지속 가능한 느낌의 디자인입니다.
볼드 & 비비드 디자인 스타일
대담하고 생동감 있는 UI 디자인 스타일. 강렬한 색상과 큰 타이포그래피로 시선을 사로잡는 인터페이스입니다.
미래지향적 시네마틱 디자인 스타일
미래지향적이고 영화같은 UI 디자인 스타일. SF 영화에서 영감을 받은 대담하고 혁신적인 인터페이스입니다.
뉴모피즘 (소프트 UI) 디자인 스타일
뉴모피즘/소프트 UI 디자인 스타일. 부드러운 그림자와 엠보싱 효과로 촉각적인 느낌을 주는 인터페이스입니다.
데이터 중심 분석 디자인 스타일
데이터 중심의 분석적 UI 디자인 스타일. 대시보드, 차트, 통계를 효과적으로 표현하는 시각화 중심 디자인입니다.
기업용 프로페셔널 디자인 스타일
기업용 전문적인 UI 디자인 스타일. 신뢰감을 주는 색상과 구조화된 레이아웃으로 비즈니스 애플리케이션에 적합합니다.
미니멀 & 포커스 디자인 스타일
미니멀하고 집중된 UI 디자인 스타일. 여백을 활용하고 핵심 콘텐츠에 집중하는 깔끔한 디자인입니다.
프리미엄 & 슬릭 디자인 스타일
고급스럽고 세련된 프리미엄 UI 디자인 스타일. 다크 테마, 그라데이션, 미묘한 애니메이션으로 고급 브랜드 느낌을 연출합니다.
스칸디나비안 미니멀 디자인 스타일
스칸디나비아 스타일의 미니멀 UI 디자인. 자연스러운 색감, 심플함, 기능성을 강조하는 북유럽 디자인 철학입니다.
구체적인 프롬프트 작성법
막연한 요청 대신 AI에게 명확한 방향을 제시하는 구체적인 프롬프트 작성 방법
컴포넌트 우선 개발
전체 페이지보다 작은 컴포넌트를 먼저 만들어 더 높은 품질의 결과물을 얻는 방법
AI 디자인 제안 요청
하나의 정답을 지시하는 대신 AI에게 여러 변형을 제안받는 방법
기술 스택 컨텍스트
AI가 호환되는 프로덕션 코드를 생성하도록 기술 스택을 항상 명시하는 방법
디자인 레퍼런스 조합
두 가지 유명 제품을 레퍼런스로 조합해 시각적 방향을 빠르게 전달하는 기법
브랜드 가이드라인 적용하기
폰트, 컬러, 그림자 등 브랜드 요소를 명확히 정의하여 일관된 브랜드 경험을 만드는 프롬프트
기존 패턴 재사용하기
이미 만든 레이아웃과 컴포넌트 패턴을 참조하여 일관성을 유지하는 프롬프트
Mobile-First vs Desktop-First 전략
반응형 디자인 전략을 명시하여 AI가 올바른 방향으로 레이아웃을 구성하도록 안내하는 프롬프트
유동적 Flex 레이아웃
고정 너비 대신 flex 기반의 유동적 레이아웃으로 반응형 UI를 만드는 프롬프트
디자인 시스템 기초 설정
스페이싱, radius, 타입 스케일 등 글로벌 디자인 규칙을 정의하여 일관된 UI를 만드는 프롬프트
Look & Feel 정의하기
감정적 언어와 구체적인 형용사로 UI의 전반적인 톤과 분위기를 설정하는 프롬프트
명확한 비전으로 시작하기
프로젝트 목표와 타겟 사용자를 명확히 정의하여 AI가 올바른 방향으로 디자인하도록 안내하는 프롬프트
컴포넌트 우선 설계
전체 페이지보다 재사용 가능한 컴포넌트를 먼저 만들어 일관성과 효율성을 높이는 접근법
Calendly API 통합
Calendly에서 예약 일정을 가져와서 표시
관리자 분석 대시보드
차트로 가입, 활성 사용자, 매출을 추적
API 속도 제한 미들웨어
사용자별 호출 제한으로 API 남용 방지
OpenAI 챗봇 위젯
GPT-4o/GPT-5로 구동되는 플로팅 채팅 위젯
AI 콘텐츠 생성기
OpenAI로 텍스트 콘텐츠(블로그, 소셜 포스트) 생성
AI 시맨틱 검색
임베딩과 벡터로 문서 전체 검색
AI 추천 엔진
사용자 행동 기반 개인화 추천
AI 폼 자동완성
GPT-4로 폼 입력 스마트 제안
AI 이미지 생성기
DALL·E 또는 Stability로 프롬프트에서 이미지 생성
Google Maps 자동완성 + 임베드
임베드된 지도 표시와 함께 주소 자동완성
PDF 내보내기
앱 데이터에서 브랜드 PDF 생성
Zapier 통합
앱 이벤트에서 Zapier 자동화 트리거
GitHub OAuth + 레포 뷰어
GitHub으로 로그인하고 사용자 레포지토리 보기
Notion 동기화
Notion에서 태스크와 문서를 Supabase로 동기화
이벤트 트래킹 (분석)
프론트엔드 액션을 기록하고 차트로 통계 확인
A/B 테스트 프레임워크
variant로 실험을 실행하고 전환을 추적
기능 플래그
관리자 UI로 기능을 동적으로 켜고 끄기
백그라운드 작업 (Cron)
Edge Functions로 반복 백그라운드 작업 예약
API 키 관리
관리자 대시보드에서 API 키 발급 및 취소
Resend 이메일 통합
깔끔한 유틸리티 함수로 Resend API를 통해 트랜잭션 이메일 전송
Twilio SMS 알림
로깅과 UI 폼으로 Twilio를 통해 SMS 메시지 전송
Slack 웹훅 알림
웹훅을 통해 앱 이벤트(예: 가입)를 Slack 채널에 전송
활동 피드
GitHub 스타일의 활동 타임라인
다크모드 토글
라이트/다크 테마 전환 및 프로필 저장
실시간 채팅
Supabase Realtime을 활용한 실시간 채팅 시스템
CSV 가져오기/내보내기
CSV 파일을 통한 데이터 가져오기와 내보내기
Stripe 일회성 결제
Stripe를 통한 일회성 상품 구매 플로우
알림 시스템
앱 내 알림 드롭다운과 읽지 않음 배지
감사 로그
데이터베이스 변경 사항을 추적하는 감사 시스템
Stripe 구독 결제
Stripe Checkout을 통한 월 구독 결제 플로우
푸시 알림 (PWA)
브라우저 푸시 알림 (Service Worker 기반)
이메일 알림 (이벤트 기반)
회원가입 등 이벤트 발생 시 Resend 이메일 전송
Role-Based Access Control (RBAC)
관리자/사용자/게스트 역할에 따른 접근 권한 제어
팀 워크스페이스 (Multi-Tenant)
조직 멤버십, 역할, 워크스페이스 전환 기능
Stripe 사용량 기반 과금
API 호출 등 사용량에 따른 과금 시스템
파일 업로드 & 저장소
드래그 앤 드롭 파일 업로드와 Supabase Storage 연동
Liquid Glass 컴포넌트 시스템
Apple VisionOS 스타일의 유리질감 UI 컴포넌트
Mercury 스타일 금융 대시보드
잔액, 거래 내역, 차트를 포함한 프리미엄 금융 대시보드
Linear 스타일 할일 앱
미니멀하고 직관적인 할일 관리 시스템
인증 시스템 구축
이메일/비밀번호 인증, 로그인, 회원가입, 비밀번호 찾기를 포함한 완전한 인증 시스템
Google OAuth 로그인
Google 소셜 로그인을 통한 간편 인증 시스템
Pro 플랜 업그레이드 (Pro-Rata)
비례 배분된 요금으로 플랜 업그레이드
사용자 설정 페이지
프로필 사진, 이름, 비밀번호 변경 및 다크모드 토글 기능
PayPal 결제
PayPal을 대체 결제 수단으로 추가
Magic Link 로그인 (비밀번호 없음)
이메일로 전송되는 매직 링크를 통한 비밀번호 없는 로그인
초대 시스템 (링크 기반)
만료되는 초대 링크를 통한 조직 멤버 초대