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 확인 (있는 경우)

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

1. 도메인 추론

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

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/

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jh941213
• Source: jh941213/codex-lattice
• License: MIT

Install and usage instructions live in the source repository linked above.