Prompt Patterns

Google Stitch
프롬프트 패턴 모음

UI 디자인, 프로토타이핑, 코드 내보내기를 위한 유형별 프롬프트 템플릿입니다.
무엇을(대상) + 어떻게(변경) + 어디에(위치)를 구체적으로 작성하세요.

UI Design Prototyping Code Export
Slide 02 프로젝트/앱 전체 생성

1-1. 상위 아이디어형 (브레인스토밍)

패턴 "[타깃 사용자]가 [주요 목표]를 할 수 있는 앱을 만들어줘."
"[비즈니스]를 위한 웹사이트를 만들어줘."
"[오퍼]를 [타깃]에게 전환시키는 랜딩페이지를 만들어줘."
예시 "마라톤 러너가 훈련을 기록하고 지역 이벤트에 참여할 수 있는 앱을 만들어줘."
"프리랜서 디자이너가 고객, 프로젝트, 인보이스를 관리할 수 있는 모바일 앱을 만들어줘."

1-2. 상세 요구사항 포함형 (실전)

패턴 "[모바일/웹] 앱을 [목적/타깃]을 위해 디자인해줘.
포함할 화면: [화면1]: [기능], [화면2]: [기능]
스타일: 컬러/테마/타이포"
예시 (앱) "바쁜 직장인을 위한 온라인 학습 플랫폼 모바일 앱. 화면: 온보딩(가치 제안+회원가입), 홈 대시보드(진행률+추천), 강의 상세. 컬러: 딥블루+틸, 테마: 깔끔+전문적"
Slide 03 화면 · 컴포넌트 수정

2-1. 요소 추가/삭제

패턴: "[화면]에서 [위치]에 [요소]를 추가해줘." / "[화면]에서 [요소]를 제거해줘."

"홈페이지 헤더에 검색창을 추가해줘." / "상품 상세 하단에 고정형 장바구니 바를 추가해줘."

2-2. 컴포넌트 스타일 변경

패턴: "[화면]의 [컴포넌트]를 [크기/색상/형태]로 바꿔줘."

"CTA 버튼을 더 크게, 브랜드 블루 적용." / "보조 버튼을 아웃라인 스타일로 바꿔줘."

2-3. 레이아웃 재구성

패턴: "[화면]의 [섹션들] 순서를 [새 구조]로 재배치해줘."

"후기 섹션을 가격 섹션 위로 옮겨줘." / "통계 카드를 3열 그리드로 배치해줘."

2-4. 화면 재생성/리프레시

패턴: "이 페이지를 다시 보여줘." / "더 미니멀하게 다시 생성해줘."

"콘텐츠와 위계는 그대로 두고 레이아웃만 다시 생성해줘."

Slide 04 테마 · 브랜딩

3-1. 색상 테마

"메인 컬러를 [색상]으로, 포인트를 [색상]으로 바꿔줘."
"전체를 다크 모드로 바꾸고, 차트에는 [포인트 색상] 적용."

3-2. 폰트·타이포

"헤딩에 [형용사] 느낌의 [산세리프/세리프] 폰트 사용."
"모바일 가독성을 위해 본문 크기와 줄간격을 늘려줘."

3-3. 버튼/입력 모양

"모든 버튼 모서리를 완전 둥글게."
"보조는 고스트 버튼, 주요만 솔리드 적용."

3-4. 테마 한 번에 정의 (조합형)

"독서 추천 앱: 본문 세리프, 포인트 연두색, 카드에 부드러운 그림자."
"SaaS 대시보드: 화이트 스페이스 넉넉히, 그레이 보더, 핵심 지표는 강한 포인트 컬러."

3-5. 이미지/아이콘 통일

"테마를 [팔레트]로 업데이트, 모든 아이콘도 이 색상 체계에 맞춰줘."

Slide 05 콘텐츠 · 텍스트 · 언어

4-1. 전체 언어 변경

"이 앱의 모든 문구와 버튼 텍스트를 한국어로 바꿔줘."
"레이아웃은 그대로 두고 모든 텍스트를 스페인어로 바꿔줘."

4-2. 톤 & 카피 변경

"마케팅 카피를 더 [친근/전문적/발랄]하게 바꿔줘."
"헤딩을 혜택 중심/행동 유도형으로 다시 써줘."
"마이크로카피를 공감되고 안심되는 톤으로 바꿔줘."

4-3. 특정 섹션 수정

"가격 섹션 문구를 가치와 ROI 중심으로 바꿔줘."
"회원가입 페이지에 '왜 계정을 만들어야 하는지' 불릿 리스트 추가."

Slide 06 레이아웃 · 페이지 구조

5-1. 대시보드/관리 화면

패턴: "이커머스 분석 도구용 웹 대시보드를 디자인해줘. 포함: KPI 카드, 라인 차트, 인기 상품 테이블, 기간/채널 필터."

"강의 플랫폼용 관리자 대시보드. 네비게이션: Courses, Students, Instructors, Reports."

5-2. 리스트/카드/그리드

패턴: "강의를 3열 카드 그리드로 보여줘(썸네일, 제목, 강사, 평점, 소요시간 포함)."

"블로그를 데스크톱 2열, 모바일 단일 컬럼으로." / "메이슨리 스타일 레이아웃."

5-3. 네비게이션 구조

패턴: "상단 네비게이션 바에 Home, Features, Pricing, Blog, Contact 링크."

"모바일 하단 네비: Home, Search, Favorites, Profile." / "사이드바 네비: Analytics, Users, Settings."

Slide 07 이미지 · 멀티스크린

6. 이미지 업로드 프롬프트

레퍼런스 기반 재현

"이 이미지를 레이아웃/컬러 참고용으로 사용하되, 모바일 뱅킹 앱 홈 화면에 맞게 적용해줘."

이미지 + 텍스트 혼합

"이 스케치를 기반으로 프리미엄 커피 브랜드 상품 상세 페이지를 디자인해줘. 구조는 유지, 비주얼·타이포 개선."

7. 멀티 스크린·플로우

전체 앱 흐름 설계

"택시 보트 예약 앱. 화면: 홈(지도+선착장), 예약(날짜/인원/보트), 확인(상세+QR), 이용 내역. 코스탈 무드, 블루+뉴트럴."

컬렉션 앱

"레고 수집가를 위한 모바일 앱. 컬렉션 개요, 세트 상세, 위시리스트, 거래 제안 화면 포함."

Slide 08 코드 · 메타 프롬프트

8. 코드·내보내기

"현재 화면의 프론트엔드 코드를 React로 전체 보여줘."

"HTML과 CSS를 실서비스용으로 최적화한 뒤, 코드만 보여줘."

"React + Tailwind 프로젝트에서 유지보수 쉽게 코드 구조를 잡아줘."

9. 이해·리뷰용 메타

화면 설명 요청

"현재 화면의 목적과 주요 요소를 몇 문장으로 설명해줘."
"사용자가 화면들 사이를 어떻게 이동하는지 흐름을 설명해줘."

개선 아이디어 요청

"회원가입 플로우의 마찰을 줄이기 위한 UX 개선 아이디어 3가지를 제안해줘."
"이 대시보드 레이아웃을 리뷰하고, 더 깔끔한 배치를 제안해줘."

Slide 09 fact_check

고급 프롬프트 전략

10-1. 한 번에 하나씩

"한 번에 하나의 큰 시각적 변경만 적용해줘." / "타이포 개선에만 집중해줘."

10-2. UI/UX 키워드 활용

"카드 레이아웃, 제목-가격-CTA 위계 분명하게." / "스티키 네비게이션 바 추가."

10-3. 일관성 유지

"기존 디자인과 색상, 타이포, 여백 측면에서 일관되게 맞춰줘."

10-4. 브랜드 템플릿화

"우리 브랜드: 메인 [컬러], 포인트 [컬러], 헤딩 [폰트], 무드 [키워드]. 이 스타일로 [화면]을 디자인해줘."

추천 워크플로

  • 1 초기 컨셉 — 앱 목적/타깃/화면 목록 + 스타일 정의
  • 2 세부 수정 — 화면별 요소 추가/삭제/스타일 변경
  • 3 테마 고정 — 브랜드 컬러/타이포/무드 통일
  • 4 텍스트 정리 — 톤/언어 변경, 카피 개선
  • 5 최종 다듬기 & 코드 — 여백/위계 정리 → 코드 내보내기