smithery/bear2u
Advanced 7-step hierarchical design prompt generator for AI web development tools (Lovable, Cursor, Bolt).
npx skills add smithery/bear2u --skill design-prompt-generator-v2
Related neighbors and high-traction skills in the same topics — useful to compare before installing.
Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…
866.4K installsBrowser automation CLI for AI agents. Use when the user needs to interact with websites, includ…
810.4K installsReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…
617.3K installsBuild, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …
576.5K installsDebug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …
568.9K installsOther skills from smithery/bear2u · top by installs.
npx skills add smithery/bear2u
Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.
Files included with this skill beyond the listing page.
SKILL.md
8,295 B
SUMMARY.md
386 B
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
[단계별 개선 프롬프트]필수:
선택 (더 좋은 결과):
최소 입력 시 도메인 기본값을 사용하고 가정을 명시합니다.