stitch-enhance-prompt

Stitch Prompt Enhancer

모호한 UI 아이디어를 Stitch에 최적화된 상세하고 구조화된 프롬프트로 변환합니다.

개요

Stitch는 상세하고 구체적인 프롬프트에서 더 좋은 결과를 생성합니다. 이 스킬은:

1. 구체성 향상: 모호한 설명을 상세한 사양으로 변환
2. UI/UX 키워드 추가: Stitch가 이해하는 디자인 용어 주입
3. 디자인 시스템 컨텍스트: DESIGN.md에서 스타일 정보 통합
4. 구조화된 출력: 최적의 생성 결과를 위한 프롬프트 구조화

Stitch 프롬프팅 원칙

효과적인 프롬프트의 3요소

요소	설명	예시
콘텐츠	무엇을 보여줄지	"사용자 프로필 카드"
스타일	어떻게 보일지	"미니멀, 둥근 모서리, 부드러운 그림자"
레이아웃	어떻게 배치할지	"중앙 정렬, 3열 그리드"

프롬프트 품질 스펙트럼

❌ 나쁜 프롬프트: "로그인 페이지"

⚠️ 괜찮은 프롬프트: "이메일과 비밀번호 필드가 있는 로그인 페이지"

✅ 좋은 프롬프트: "
미니멀한 로그인 페이지:
- 중앙에 배치된 카드 형태의 로그인 폼
- 상단에 로고와 환영 메시지
- 이메일 입력 필드 (아이콘 포함)
- 비밀번호 입력 필드 (보이기/숨기기 토글)
- 파란색 기본 버튼 '로그인'
- '비밀번호 찾기' 링크
- '계정 만들기' 보조 버튼
- 부드러운 그라데이션 배경
"

향상 프로세스

Step 1: 입력 분석

사용자의 원본 아이디어를 분석합니다:

입력: "대시보드 만들어줘"

분석:
- 타입: 대시보드 (관리/분석 UI)
- 누락된 정보:
  - 어떤 데이터?
  - 어떤 스타일?
  - 주요 기능?

Step 2: 컨텍스트 수집

관련 정보를 수집합니다:

1. DESIGN.md 확인 (있는 경우)

   • 색상 팔레트
   • 타이포그래피 규칙
   • 컴포넌트 스타일

2. 도메인 추론

   • 사용자 언급에서 도메인 파악
   • 일반적인 패턴 적용

Step 3: 프롬프트 확장

확장 체크리스트

• 페이지 목적: 이 페이지의 주요 목표는?
• 사용자 유형: 누가 이 페이지를 사용하는가?
• 핵심 요소: 반드시 포함해야 할 요소는?
• 레이아웃 구조: 어떤 섹션으로 구성되는가?
• 상호작용: 주요 액션은 무엇인가?
• 시각적 스타일: 어떤 분위기를 전달하는가?

Step 4: 구조화된 출력 생성

향상 템플릿

기본 템플릿

## [페이지 유형]: [페이지 이름]

### 개요
[페이지의 목적과 주요 기능 1-2문장 설명]

### 시각적 스타일
- **분위기**: [형용사들 - 예: 모던, 미니멀, 전문적]
- **색상**: [주요 색상 설명 또는 DESIGN.md 참조]
- **타이포그래피**: [폰트 스타일 설명]

### 레이아웃 구조
1. **헤더**: [헤더 구성 요소]
2. **메인 섹션**: [주요 콘텐츠 영역]
3. **사이드바** (선택): [보조 정보]
4. **푸터**: [푸터 구성 요소]

### 핵심 요소
- [요소 1]: [설명]
- [요소 2]: [설명]
- [요소 3]: [설명]

### 상호작용
- [액션 1]: [동작 설명]
- [액션 2]: [동작 설명]

### 디자인 시스템
[DESIGN.md 섹션 6 복사 또는 스타일 가이드]

향상 예시

예시 1: 간단한 입력

원본 입력:

"랜딩 페이지"

향상된 프롬프트:

## 랜딩 페이지: SaaS 제품 소개

### 개요
잠재 고객에게 제품 가치를 전달하고 가입을 유도하는 현대적인 랜딩 페이지

### 시각적 스타일
- **분위기**: 신뢰감 있고 전문적, 친근한 느낌
- **색상**:
  - 기본: 진한 파랑 (#2563EB) - 신뢰와 안정
  - 강조: 밝은 주황 (#F97316) - CTA 버튼
  - 배경: 순백색 (#FFFFFF) with 미묘한 그레이 섹션
- **타이포그래피**: Inter 폰트, 큰 헤딩 (48-72px), 넉넉한 줄간격

### 레이아웃 구조

1. **네비게이션 바**
   - 좌측: 로고
   - 중앙: 메뉴 링크 (Features, Pricing, About, Contact)
   - 우측: "로그인" 텍스트 링크 + "무료 시작" 기본 버튼

2. **히어로 섹션**
   - 좌측 (60%):
     - 대형 헤드라인 (제품 가치 제안)
     - 부제목 (1-2문장 설명)
     - CTA 버튼 그룹 ("무료 체험" + "데모 보기")
     - 신뢰 지표 (사용 기업 로고 또는 사용자 수)
   - 우측 (40%):
     - 제품 스크린샷 또는 3D 일러스트
     - 미묘한 그림자로 떠있는 효과

3. **기능 섹션**
   - 섹션 제목: "왜 [제품명]인가요?"
   - 3열 그리드의 기능 카드
   - 각 카드: 아이콘 + 제목 + 설명 (2-3줄)

4. **사회적 증거 섹션**
   - 고객 로고 배너 (그레이스케일)
   - 선택: 추천 인용문 카드

5. **CTA 섹션**
   - 배경: 미묘한 그라데이션
   - 대형 텍스트: 행동 유도 문구
   - 큰 CTA 버튼

6. **푸터**
   - 4열: 제품, 회사, 리소스, 법적 링크
   - 하단: 저작권 + 소셜 아이콘

### 핵심 요소
- **CTA 버튼**: 둥근 모서리 (8px), 넉넉한 패딩, 호버 시 약간 어두워짐
- **기능 카드**: 흰색 배경, 미묘한 테두리 또는 그림자, 호버 시 살짝 상승
- **신뢰 지표**: 회색조 로고, 자연스러운 간격

### 상호작용
- 네비게이션 링크: 호버 시 색상 변경
- CTA 버튼: 호버 시 살짝 어두워지고 미세한 상승
- 기능 카드: 호버 시 그림자 강화 및 미세 상승

### 참고사항
- 모바일 반응형 고려 (DESKTOP 우선 생성)
- 이미지 플레이스홀더 사용 가능
- 접근성: 충분한 색상 대비, 큰 클릭 영역

예시 2: 대시보드

원본 입력:

"분석 대시보드"

향상된 프롬프트:

## 대시보드: 비즈니스 분석 개요

### 개요
핵심 비즈니스 지표를 한눈에 파악할 수 있는 데이터 중심 대시보드

### 시각적 스타일
- **분위기**: 데이터 중심, 깔끔, 전문적
- **색상**:
  - 배경: 밝은 그레이 (#F3F4F6)
  - 카드: 순백색 (#FFFFFF)
  - 기본 텍스트: 진한 회색 (#1F2937)
  - 차트 팔레트: 파랑, 초록, 보라, 주황 (데이터 시각화)
  - 성공: 초록 (#10B981), 경고: 주황 (#F59E0B), 위험: 빨강 (#EF4444)
- **타이포그래피**:
  - 폰트: Inter 또는 system-ui
  - 숫자: tabular-nums (고정폭 숫자)
  - 큰 지표 숫자는 bold, 설명은 regular

### 레이아웃 구조

1. **좌측 사이드바** (고정, 60px 접힌 상태 / 240px 펼친 상태)
   - 상단: 로고
   - 메뉴 아이템: 아이콘 + 텍스트
   - 현재 페이지 강조 (배경색 + 좌측 강조선)
   - 하단: 사용자 아바타 + 설정

2. **상단 헤더** (고정)
   - 좌측: 페이지 제목 + 빵크럼
   - 우측: 검색 바 + 알림 아이콘 + 프로필 드롭다운

3. **메인 콘텐츠** (스크롤 가능)

   **Row 1: KPI 카드 (4열)**
   - 총 매출 (금액 + 전주 대비 %)
   - 신규 사용자 (숫자 + 전주 대비 %)
   - 전환율 (% + 전주 대비)
   - 활성 세션 (숫자 + 스파크라인)
   - 각 카드: 작은 아이콘, 라벨, 큰 숫자, 변화율 배지

   **Row 2: 차트 영역 (2열)**
   - 좌측 (66%): 라인 차트 (주간 트렌드)
     - 제목 + 기간 선택 드롭다운
     - 범례
     - 호버 시 툴팁
   - 우측 (33%): 도넛 차트 (카테고리 분포)
     - 중앙에 총합 표시
     - 우측에 범례 목록

   **Row 3: 데이터 테이블**
   - 제목: "최근 거래"
   - 컬럼: 날짜, 고객명, 금액, 상태 (배지), 액션 버튼
   - 페이지네이션
   - 필터/정렬 컨트롤

### 핵심 요소
- **KPI 카드**: 둥근 모서리 (12px), 미묘한 그림자, 좌측에 색상 강조선
- **변화율 배지**: 초록 (상승), 빨강 (하락), 작은 화살표 아이콘
- **차트**: 깔끔한 그리드선, 호버 시 데이터 포인트 강조
- **테이블**: 줄무늬 행, 호버 시 행 강조

### 상호작용
- 사이드바 메뉴: 호버 시 배경 변경
- KPI 카드: 클릭 시 상세 페이지 이동 암시 (커서 변경)
- 차트: 호버 시 툴팁, 범례 클릭 시 시리즈 토글
- 테이블 행: 호버 시 강조, 액션 버튼 표시

UI/UX 키워드 사전

프롬프트에 추가하면 좋은 키워드들:

레이아웃 키워드

키워드	용도
centered	중앙 정렬
grid layout	그리드 레이아웃
split view	분할 뷰
sidebar	사이드바
sticky header	고정 헤더
card layout	카드 레이아웃
masonry	벽돌형 레이아웃

스타일 키워드

키워드	용도
minimal	미니멀
modern	현대적
clean	깔끔한
rounded corners	둥근 모서리
soft shadows	부드러운 그림자
subtle gradient	미묘한 그라데이션
glassmorphism	유리 효과
frosted glass	불투명 유리 효과

컴포넌트 키워드

키워드	용도
pill button	알약형 버튼
avatar	프로필 이미지
badge	배지/태그
tooltip	툴팁
dropdown	드롭다운
modal	모달
toast	토스트 알림
skeleton	로딩 스켈레톤

상태 키워드

키워드	용도
hover effect	호버 효과
active state	활성 상태
disabled	비활성화
loading	로딩 중
empty state	빈 상태
error state	에러 상태

디자인 시스템 주입

DESIGN.md가 있는 경우, 섹션 6을 프롬프트 끝에 추가합니다:

### 디자인 시스템 (DESIGN.md에서)

비주얼 스타일: 미니멀하고 공기처럼 가벼운, 넉넉한 여백
기본 색상: Deep Ocean Blue (#0066FF) - 기본 액션 버튼
보조 색상: Soft Sky (#E0F2FE) - 강조 배경
배경: Pure White (#FFFFFF) 메인, Whisper Gray (#F9FAFB) 섹션
텍스트: Midnight (#1A1A1A) 헤딩, Slate (#64748B) 본문
버튼 스타일: 알약 모양, 미묘한 호버 상승
카드 스타일: 8px 둥근 모서리, 속삭이듯 부드러운 그림자
전체적인 느낌: 신뢰감 있고 친근한, 전문적이면서 접근하기 쉬운

피해야 할 것

❌ 피해야 할 것	✅ 대신 이렇게
"예쁜 페이지"	"미니멀하고 현대적인, 충분한 여백"
"좋은 색상"	"#2563EB 파란색 기본 버튼, #10B981 성공 표시"
"큰 버튼"	"높이 48px, 패딩 24px, 둥근 모서리"
"어딘가에 로고"	"좌측 상단 모서리에 로고, 높이 32px"
"몇 개의 카드"	"3열 그리드, 각 카드에 아이콘, 제목, 설명"

참고 리소스

• Stitch 프롬프팅 가이드: https://stitch.withgoogle.com/docs/learn/prompting/
• Stitch 갤러리 (영감용): https://stitch.withgoogle.com/gallery
• UI 패턴 참고: https://ui-patterns.com/