flowchart TD
A[프롬프트 작성] --> B[모드 선택\nStandard / Experimental]
B --> C[Gemini 모델 분석]
C --> D[멀티스크린 UI 생성]
D --> E[복수 변형 제안]
E --> F{선택}
F --> G[채팅으로 반복 수정]
F --> H[새 변형 생성]
G --> I[코드·Figma 내보내기]
기본 단계:
1. 새 프로젝트 생성 → 프롬프트 입력
2. 모드 선택 (Standard: 빠름, Experimental: 고품질)
3. Generate 클릭 → AI가 멀티스크린 UI 즉시 생성
4. 복수 변형 중 마음에 드는 것 선택
5. 채팅창에서 추가 수정 반복
6. 완성 후 코드 또는 Figma로 내보내기
2. 효과적인 프롬프트 작성법
프롬프트 구조 패턴
[앱 유형] + [화면 또는 기능] + [색상/스타일] + [레이아웃 힌트]
프롬프트 예시 모음
수준
프롬프트 예시
효과
기본
”음식 배달 앱 홈 화면”
일반적인 레이아웃 생성
중간
”음식 배달 앱 홈 화면, 주황색 테마, 카드 레이아웃”
색상·구조 반영
고급
”신뢰감 있는 핀테크 앱 대시보드, 차분한 블루 색조, 데이터 중심”
분위기와 목적 반영
Vibe Design
”사용자가 안전함을 느끼는 헬스케어 앱 온보딩 플로우”
AI가 적합한 디자인 시스템 자동 제안
잘 작동하는 프롬프트 요소
요소
예시
설명
앱 도메인
배달, 핀테크, 헬스케어, 쇼핑
컴포넌트 맥락 제공
화면 유형
홈, 상세, 대시보드, 온보딩
레이아웃 패턴 결정
감정/분위기
신뢰감 있는, 활기찬, 차분한
Vibe Design 트리거
색상
주황색 테마, 다크 모드, 파스텔
색상 팔레트 방향 설정
레이아웃 힌트
카드, 리스트, 그리드, 탭바
구체적인 컴포넌트 유형 지정
피해야 할 프롬프트 패턴
잘못된 예
문제
개선 방법
”좋은 앱 만들어줘”
너무 막연함
도메인과 화면 유형 명시
”모든 화면 다 만들어줘”
범위 과대
화면 1~3개씩 단계적으로 요청
”정확히 픽셀 단위로 지정해줘”
Stitch의 강점이 아님
Figma Make나 직접 편집 활용
3. 채팅 기반 반복 편집
UI 생성 후 채팅창에서 자연어로 수정 지시를 내릴 수 있다.
자주 쓰는 수정 프롬프트 패턴
수정 목적
예시 프롬프트
색상 변경
”헤더 배경색을 파란색으로 바꿔줘”
컴포넌트 크기
”검색 버튼을 더 크게 만들어줘”
레이아웃 변경
”리스트를 그리드 레이아웃으로 바꿔줘”
요소 추가
”홈 화면에 배너 슬라이더 추가해줘”
요소 제거
”하단 탭바에서 설정 아이콘 빼줘”
스타일 변경
”전체적으로 다크 모드로 바꿔줘”
타이포그래피
”제목 폰트를 더 굵게 바꿔줘”
추가 화면
”주문 완료 확인 화면 추가해줘”
반복 편집 팁
한 번에 하나의 변경사항만 요청하면 결과 예측이 쉬워진다
마음에 들지 않으면 “이전 버전으로 돌아가줘” 또는 “다시 시도해줘” 사용
수정 전 현재 화면을 복제해 두면 비교가 편하다
4. 다중 화면 일괄 편집
여러 화면을 동시에 선택해 테마나 스타일을 한 번에 변경할 수 있다.
1. 캔버스에서 Shift+클릭으로 여러 화면 선택
2. 채팅창에 변경 프롬프트 입력
예: "선택된 모든 화면의 테마를 다크 모드로 바꿔줘"
3. AI가 선택된 화면 전체에 일관되게 적용
사용 시나리오
방법
앱 전체 색상 팔레트 변경
모든 화면 선택 → 색상 변경 프롬프트
특정 섹션 스타일 통일
해당 화면들만 선택 → 스타일 변경
공통 컴포넌트 일괄 업데이트
관련 화면 선택 → 컴포넌트 수정 프롬프트
5. 변형 관리
Stitch는 원본을 덮어쓰지 않고 대안 버전을 생성한다.
flowchart TD
A[원본 UI] --> B[변형 A\n현재 선택]
A --> C[변형 B\n대안 1]
A --> D[변형 C\n대안 2]
B --> E[추가 수정 → 변형 A-1]
B --> F[추가 수정 → 변형 A-2]