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: 구조화된 출력 생성

## 향상 템플릿

### 기본 템플릿

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

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

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

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

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

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

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

## 향상 예시

### 예시 1: 간단한 입력

**원본 입력:**
```
"랜딩 페이지"
```

**향상된 프롬프트:**
```markdown
## 랜딩 페이지: SaaS 제품 소개

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

### 시각적 스타일
- **분위기**: 신뢰감 있고 전문적, 친근한