From bear2u-my-skills
Generates 7-step hierarchical design prompts for AI web builders (Lovable, Cursor, Bolt) with domain research, user journeys, emotional design, and component specs. Useful for web design requests.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin bear2u-my-skillsThis skill uses the workspace's default tool permissions.
AI 웹 개발 도구(Lovable, Cursor, Bolt)를 위한 7단계 계층적 디자인 프롬프트 생성기입니다.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
AI 웹 개발 도구(Lovable, Cursor, Bolt)를 위한 7단계 계층적 디자인 프롬프트 생성기입니다.
Step 1: Domain Research → 업종 UX 패턴, 경쟁사 인사이트
Step 2: User Journey → 핵심 사용자 흐름, 전환 포인트
Step 3: Emotional Design → 감성 키워드, 무드 컨셉
Step 4: Identity & Goal → 브랜드 정체성, 목표
Step 5: Design System → 컬러, 타이포, 컴포넌트
Step 6: Component Specs → 핵심 컴포넌트 상세 정의
Step 7: Micro-interactions → 애니메이션, 인터랙션 패턴
업종별 UX 패턴과 경쟁사를 분석합니다.
탐색 질문:
도메인별 패턴:
| 도메인 | 예상 패턴 | 신뢰 신호 | 핵심 액션 |
|---|---|---|---|
| Pet Services | 프로필 카드, 예약 캘린더, 펫 타입 필터 | 인증 뱃지, 리뷰, 보험 | 검색 → 조회 → 예약 → 결제 |
| SaaS | 기능 비교, 요금제, 데모 CTA | 로고, 후기, 보안 뱃지 | 학습 → 체험 → 구독 |
| E-commerce | 그리드 갤러리, 필터, 장바구니 | 리뷰, 반품정책, 보안결제 | 탐색 → 담기 → 결제 |
| Education | 강의 카드, 진도 추적, 강사 프로필 | 인증서, 수강생 수, 평점 | 탐색 → 등록 → 학습 |
| Healthcare | 의료진 검색, 예약 슬롯, 증상 체커 | 면허, 병원 소속 | 찾기 → 예약 → 상담 |
| Fintech | 대시보드, 거래 내역, 빠른 액션 | 암호화 뱃지, 규제 준수 | 연결 → 모니터링 → 실행 |
| Food Delivery | 레스토랑 카드, 실시간 추적, 재주문 | 평점, 배달 시간 예측 | 탐색 → 주문 → 추적 |
| Marketplace | 판매자 프로필, 리스팅 그리드, 메시징 | 인증, 거래 내역 | 검색 → 연락 → 거래 |
핵심 사용자 흐름과 전환 포인트를 매핑합니다.
프레임워크:
[진입] → [발견] → [평가] → [결정] → [행동] → [유지]
각 단계별 정의:
Journey Stage: [단계명]
├── User Goal: 달성하고자 하는 것
├── Key Info: 필요한 정보
├── Friction: 이탈 요인
└── Solution: 디자인 해결책
디자인이 불러일으킬 감정을 정의합니다.
감정 키워드 매트릭스:
| 감정 | 시각적 표현 | 컬러 방향 | 타이포 | 이미지 |
|---|---|---|---|---|
| Trust | 깔끔, 정돈, 일관성 | 블루, 그린 | 안정적 세리프/클린 산스 | 실제 사진, 뱃지 |
| Warmth | 부드러운 모서리, 유기적 형태 | 웜 옐로우, 오렌지 | 둥글고 친근함 | 일러스트, 미소 |
| Energy | 강한 대비, 다이나믹 앵글 | 비비드 레드, 오렌지 | 강렬, 임팩트 | 액션샷, 모션 |
| Calm | 여백, 미니멀 | 소프트 블루, 그린, 뉴트럴 | 가벼운 웨이트 | 자연, 미니멀 |
| Luxury | 다크 배경, 골드 액센트 | 블랙, 골드, 딥 퍼플 | 우아한 세리프 | 하이엔드 포토 |
| Playful | 비대칭, 애니메이션 | 밝고 다양한 팔레트 | 퀴키, 커스텀 | 일러스트, 아이콘 |
| Professional | 그리드 기반, 구조적 | 네이비, 그레이, 화이트 | 클래식 산스세리프 | 기업적, 클린 |
감정 비율 정의 예시: 60% Trust, 30% Warmth, 10% Energy
브랜드 포지셔닝을 명확히 정의합니다.
템플릿:
Service Name: [이름]
One-liner: [10단어 이내 설명]
Category: [도메인 카테고리]
Positioning: [경쟁사와의 차별점]
Primary Goal: [주요 전환 액션]
Secondary Goal: [보조 액션]
Brand Personality: [형용사 3개]
종합적인 비주얼 시스템을 정의합니다.
컬러 시스템:
Primary: #[hex] - CTAs, 핵심 액션
Secondary: #[hex] - 보조 요소
Accent: #[hex] - 하이라이트, 뱃지
Background: #[hex] - 기본 캔버스
Surface: #[hex] - 카드, 상승 요소
Text Primary: #[hex] - 헤딩, 본문
Text Muted: #[hex] - 캡션, 힌트
Success: #[hex] - 확인
Warning: #[hex] - 경고
Error: #[hex] - 에러
타이포그래피:
Headings: [폰트] - [웨이트] - [특성]
Body: [폰트] - [웨이트] - [행간]
Scale: [base]px, ratio [비율]
스페이싱 & 레이아웃:
Base unit: [4/8]px
Border radius: [size]px
Shadow: subtle/medium/strong
Grid: [columns]columns, [gap]px gap
Container: max-width [width]px
컴포넌트 스타일:
Buttons: [shape], [padding], [hover]
Cards: [radius], [shadow], [padding]
Inputs: [border], [focus state]
도메인별 핵심 컴포넌트를 정의합니다.
컴포넌트 템플릿:
[Component Name]
├── Purpose: 존재 이유
├── Contents: 표시 정보
├── States: Default, Hover, Active, Disabled, Loading
├── Variants: 필요한 버전들
└── Responsive: 모바일 적응 방식
공통 도메인 컴포넌트:
애니메이션과 인터랙션 피드백을 정의합니다.
카테고리:
| 타입 | 목적 | 예시 |
|---|---|---|
| Entrance | 새 콘텐츠 주목 | Fade in, Slide up, Scale in |
| Feedback | 사용자 액션 확인 | 버튼 누름, 성공 체크마크 |
| State Change | 전환 표시 | 로딩 스피너, 스켈레톤 |
| Navigation | 뷰 간 가이드 | 페이지 전환, 드로어 슬라이드 |
| Delight | 기억에 남는 순간 | 컨페티, 바운스 |
스펙 포맷:
Trigger: [트리거]
Animation: [동작]
Duration: [시간 ms]
Easing: [커브]
Purpose: [목적]
권장 기본값:
최종 프롬프트 구조:
# [Service Name] Design Prompt
## Domain Context
[업계 인사이트, 사용자 기대, 경쟁 환경]
## User Journey
[단계별 흐름과 디자인 시사점]
## Emotional Direction
[주요 감정, 시각적 해석]
## Design Specifications
### Identity
[이름, 포지셔닝, 개성]
### Design System
[컬러, 타이포, 스페이싱 전체 스펙]
### Key Components
[도메인 특화 컴포넌트 정의]
### Interactions
[애니메이션, 마이크로 인터랙션 스펙]
## Implementation Prompt
[AI 도구용 복사-붙여넣기 프롬프트]
## Iterative Refinement Prompts
[단계별 개선 프롬프트]
필수:
선택 (더 좋은 결과): 3. 타겟 사용자 4. 경쟁사 또는 참고 서비스 5. 원하는 분위기/감성 6. 필수 기능 7. 페이지 종류 (랜딩/앱UI/대시보드)
최소 입력 시 도메인 기본값을 사용하고 가정을 명시합니다.