Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
bear2u avatar

Design Prompt Generator V2

bear2u/my-skills

  • 52 installs
  • 902 repo stars
  • Updated June 22, 2026
  • bear2u/my-skills

Design Prompt Generator v2 is a Claude skill that produces 7-step hierarchical design prompts for AI web-development tools like Lovable, Cursor, and Bolt.

About

This skill is a 7-step hierarchical generator that produces design prompts for AI web-development tools like Lovable, Cursor, and Bolt. It walks through domain research, user journey, emotional design, identity, design system, component specs, and micro-interactions to output a copy-paste implementation prompt. A developer uses it to turn a service idea into a structured, domain-aware design brief.

  • 7-step hierarchical framework for generating AI web-builder design prompts
  • Covers domain research, user journey, emotional design, and a full design system
  • Targets Lovable, Cursor, and Bolt with copy-paste implementation prompts

Design Prompt Generator V2 by the numbers

  • 52 all-time installs (skills.sh)
  • Ranked #1,237 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Aug 4, 2026 (Skillselion catalog sync)
At a glance

design-prompt-generator-v2 capabilities & compatibility

Capabilities
ui design · web design
Use cases
ui design · web design
Runs
Runs locally
Pricing
Free
From the docs

What design-prompt-generator-v2 says it does

Advanced 7-step hierarchical design prompt generator for AI web development tools (Lovable, Cursor, Bolt).
SKILL.md
Step 1: Domain Research → 업종 UX 패턴, 경쟁사 인사이트
SKILL.md
npx skills add https://github.com/bear2u/my-skills --skill design-prompt-generator-v2

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs52
repo stars★ 902
Last updatedJune 22, 2026
Repositorybear2u/my-skills ↗

What it does

Generate a 7-step domain-aware design prompt for AI web builders like Lovable, Cursor, and Bolt.

Who is it for?

Turning a service idea into a domain-aware, journey-based design prompt for AI web builders.

Skip if: Directly generating production frontend code.

When should I use this skill?

When the user asks for a design prompt, web design brief, or a Lovable/Bolt/Cursor prompt for a landing page or app.

What you get

A structured design prompt covering identity, design system, components, and interactions, ready to paste into an AI builder.

  • structured design prompt
  • design system spec
  • copy-paste implementation prompt

By the numbers

  • 7-step framework
  • 8-domain pattern table

Files

SKILL.mdMarkdownGitHub ↗

Design Prompt Generator v2

AI 웹 개발 도구(Lovable, Cursor, Bolt)를 위한 7단계 계층적 디자인 프롬프트 생성기입니다.

7-Step Framework

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   → 애니메이션, 인터랙션 패턴

---

Step 1: Domain Research

업종별 UX 패턴과 경쟁사를 분석합니다.

탐색 질문:

  • 이 도메인의 Top 3 앱/사이트는?
  • 사용자가 기대하는 UX 패턴은? (예: 데이팅앱의 스와이프, 배달앱의 카드)
  • 중요한 신뢰 신호는? (리뷰, 뱃지, 보증)
  • 경쟁사가 해결하지 못한 페인포인트는?

도메인별 패턴:

도메인예상 패턴신뢰 신호핵심 액션
Pet Services프로필 카드, 예약 캘린더, 펫 타입 필터인증 뱃지, 리뷰, 보험검색 → 조회 → 예약 → 결제
SaaS기능 비교, 요금제, 데모 CTA로고, 후기, 보안 뱃지학습 → 체험 → 구독
E-commerce그리드 갤러리, 필터, 장바구니리뷰, 반품정책, 보안결제탐색 → 담기 → 결제
Education강의 카드, 진도 추적, 강사 프로필인증서, 수강생 수, 평점탐색 → 등록 → 학습
Healthcare의료진 검색, 예약 슬롯, 증상 체커면허, 병원 소속찾기 → 예약 → 상담
Fintech대시보드, 거래 내역, 빠른 액션암호화 뱃지, 규제 준수연결 → 모니터링 → 실행
Food Delivery레스토랑 카드, 실시간 추적, 재주문평점, 배달 시간 예측탐색 → 주문 → 추적
Marketplace판매자 프로필, 리스팅 그리드, 메시징인증, 거래 내역검색 → 연락 → 거래

---

Step 2: User Journey

핵심 사용자 흐름과 전환 포인트를 매핑합니다.

프레임워크:

[진입] → [발견] → [평가] → [결정] → [행동] → [유지]

각 단계별 정의:

Journey Stage: [단계명]
├── User Goal: 달성하고자 하는 것
├── Key Info: 필요한 정보
├── Friction: 이탈 요인
└── Solution: 디자인 해결책

---

Step 3: Emotional Design

디자인이 불러일으킬 감정을 정의합니다.

감정 키워드 매트릭스:

감정시각적 표현컬러 방향타이포이미지
Trust깔끔, 정돈, 일관성블루, 그린안정적 세리프/클린 산스실제 사진, 뱃지
Warmth부드러운 모서리, 유기적 형태웜 옐로우, 오렌지둥글고 친근함일러스트, 미소
Energy강한 대비, 다이나믹 앵글비비드 레드, 오렌지강렬, 임팩트액션샷, 모션
Calm여백, 미니멀소프트 블루, 그린, 뉴트럴가벼운 웨이트자연, 미니멀
Luxury다크 배경, 골드 액센트블랙, 골드, 딥 퍼플우아한 세리프하이엔드 포토
Playful비대칭, 애니메이션밝고 다양한 팔레트퀴키, 커스텀일러스트, 아이콘
Professional그리드 기반, 구조적네이비, 그레이, 화이트클래식 산스세리프기업적, 클린

감정 비율 정의 예시: 60% Trust, 30% Warmth, 10% Energy

---

Step 4: Identity & Goal

브랜드 포지셔닝을 명확히 정의합니다.

템플릿:

Service Name: [이름]
One-liner: [10단어 이내 설명]
Category: [도메인 카테고리]
Positioning: [경쟁사와의 차별점]
Primary Goal: [주요 전환 액션]
Secondary Goal: [보조 액션]
Brand Personality: [형용사 3개]

---

Step 5: Design System

종합적인 비주얼 시스템을 정의합니다.

컬러 시스템:

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]

---

Step 6: Component Specs

도메인별 핵심 컴포넌트를 정의합니다.

컴포넌트 템플릿:

[Component Name]
├── Purpose: 존재 이유
├── Contents: 표시 정보
├── States: Default, Hover, Active, Disabled, Loading
├── Variants: 필요한 버전들
└── Responsive: 모바일 적응 방식

공통 도메인 컴포넌트:

  • Profile/Card: 사용자 또는 아이템 표시
  • Search/Filter: 탐색 메커니즘
  • Booking/Action: 주요 전환
  • Review/Trust: 소셜 프루프
  • Status/Progress: 피드백 및 추적

---

Step 7: Micro-interactions

애니메이션과 인터랙션 피드백을 정의합니다.

카테고리:

타입목적예시
Entrance새 콘텐츠 주목Fade in, Slide up, Scale in
Feedback사용자 액션 확인버튼 누름, 성공 체크마크
State Change전환 표시로딩 스피너, 스켈레톤
Navigation뷰 간 가이드페이지 전환, 드로어 슬라이드
Delight기억에 남는 순간컨페티, 바운스

스펙 포맷:

Trigger: [트리거]
Animation: [동작]
Duration: [시간 ms]
Easing: [커브]
Purpose: [목적]

권장 기본값:

  • Micro-feedback: 150-200ms, ease-out
  • Transitions: 250-350ms, ease-in-out
  • Entrances: 400-600ms, ease-out + stagger

---

Output Format

최종 프롬프트 구조:

# [Service Name] Design Prompt

## Domain Context
[업계 인사이트, 사용자 기대, 경쟁 환경]

## User Journey
[단계별 흐름과 디자인 시사점]

## Emotional Direction
[주요 감정, 시각적 해석]

## Design Specifications

### Identity
[이름, 포지셔닝, 개성]

### Design System
[컬러, 타이포, 스페이싱 전체 스펙]

### Key Components
[도메인 특화 컴포넌트 정의]

### Interactions
[애니메이션, 마이크로 인터랙션 스펙]

## Implementation Prompt
[AI 도구용 복사-붙여넣기 프롬프트]

## Iterative Refinement Prompts
[단계별 개선 프롬프트]

---

User Input

필수: 1. 서비스 주제/업종 2. 서비스 이름 (없으면 제안)

선택 (더 좋은 결과): 3. 타겟 사용자 4. 경쟁사 또는 참고 서비스 5. 원하는 분위기/감성 6. 필수 기능 7. 페이지 종류 (랜딩/앱UI/대시보드)

최소 입력 시 도메인 기본값을 사용하고 가정을 명시합니다.

---

Quality Checklist

  • [ ] 도메인 특화 UX 패턴 반영
  • [ ] 사용자 여정 단계가 구조에 반영
  • [ ] 감정 키워드가 시각 스펙으로 변환
  • [ ] 컬러 시스템 완성 (용도 포함)
  • [ ] 핵심 컴포넌트 상태 정의
  • [ ] 마이크로 인터랙션 명시
  • [ ] 모바일 반응형 고려
  • [ ] 구현 프롬프트 복사-붙여넣기 가능

Related skills

anthropicsFrontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165kvercel-labsWeb Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6klarksuiteLark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16ksleekdotdesignSleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476leonxlnxDesign Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4knextlevelbuilderUi Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k
Design & UI/UXuiuxbranding
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.