추천 프롬프트

Toss 스타일로 금융 서비스를 소개하는 모바일 우선 랜딩페이지를 만들어 주세요.

# 디자인 가이드
- 폰트: Pretendard, 한글 줄바꿈은 word-break: keep-all
- 레이아웃: 모바일 우선, 넉넉한 세로 여백, 카드 단위 그룹핑
- 모서리/여백: rounded 8·16·28, spacing 8·16·28 스케일
- 컬러 팔레트: Toss Blue #0064FF · Ink #191F28 · Gray 700 #4E5968 · Gray 100 #F2F4F6
- 톤: Minimal mobile-first fintech. White canvas, confident blue, clear hierarchy.

# 화면 구성
1. 한 문장 가치 제안 + 다운로드 CTA 히어로
2. 핵심 기능 3가지를 아이콘 카드로 정리한 섹션
3. 숫자로 보여주는 신뢰 지표(가입자·거래액) 밴드
4. 자주 묻는 질문 아코디언과 마지막 전환 CTA

# 컴포넌트 힌트
- FinanceCard: 금액을 가장 크게, 설명을 그 아래 회색으로 두는 카드. 한 카드에 숫자 하나만 담아 금융 화면 특유의 판단 부담을 줄인다.
- BlueCTA: 화면 하단에 고정되는 파란 버튼. 한 화면에 하나만 두고 나머지 행동은 텍스트 링크로 낮춰 다음 단계를 헷갈리지 않게 한다.
- AmountRow: 항목명을 왼쪽, 금액을 오른쪽 끝에 정렬한 한 줄. 숫자를 우측 정렬하고 고정폭으로 처리해 자릿수가 달라도 세로선이 맞는다.

# 카피 톤
- 한국어, Toss 특유의 랜딩·홍보 맥락에 맞는 간결한 문구
- 예시 헤드라인: "금융을 더 쉽게"

# 기술 스택 제안
- React + Tailwind CSS 컴포넌트로 분리, 반응형 구현
- 접근성(대비, 포커스, 시맨틱 태그) 고려

# 제약
- 로고/상표/실제 프로덕션 스크린을 복제하지 말 것
- 공개적으로 관찰 가능한 패턴 기반의 독립 제작이며 Toss과 제휴 관계가 아님

Baemin 스타일로 음식·로컬 앱을 유쾌하게 소개하는 랜딩페이지를 만들어 주세요.

# 디자인 가이드
- 폰트: Pretendard, 한글 줄바꿈은 word-break: keep-all
- 레이아웃: 모바일 우선, 넉넉한 세로 여백, 카드 단위 그룹핑
- 모서리/여백: rounded 8·16·28, spacing 8·16·28 스케일
- 컬러 팔레트: Baemin Mint #2AC1BC · Dark Teal #123B3A · Cream #FFF8EC · Sticker White #FFFFFF
- 톤: Playful mint delivery UI. Sticker cards, expressive labels, humorous microcopy.

# 화면 구성
1. 큼직한 타이포와 손글씨 톤 카피의 히어로
2. 주요 기능을 말풍선·스티커 카드로 보여주는 섹션
3. 사용자 리뷰를 태그 형태로 노출하는 소셜 증거 섹션
4. 앱스토어 배지형 다운로드 CTA

# 컴포넌트 힌트
- MenuSticker: 메뉴 사진 위에 비스듬히 얹는 스티커형 라벨. 손으로 붙인 듯한 각도를 살짝 주되 5도를 넘기지 않아야 조잡해 보이지 않는다.
- CategoryBubble: 둥근 말풍선 형태의 카테고리 버튼. 가로 스크롤 줄에 배치하고 선택된 것만 채움색으로 바꿔 현재 위치를 알린다.
- ReviewTag: "재주문 많아요" 같은 짧은 문구 태그. 별점 숫자 대신 상황을 말로 풀어 주문 직전의 망설임을 줄인다.

# 카피 톤
- 한국어, Baemin 특유의 랜딩·홍보 맥락에 맞는 간결한 문구
- 예시 헤드라인: "오늘 뭐 먹지?"

# 기술 스택 제안
- React + Tailwind CSS 컴포넌트로 분리, 반응형 구현
- 접근성(대비, 포커스, 시맨틱 태그) 고려

# 제약
- 로고/상표/실제 프로덕션 스크린을 복제하지 말 것
- 공개적으로 관찰 가능한 패턴 기반의 독립 제작이며 Baemin과 제휴 관계가 아님

29CM 스타일로 브랜드의 이야기를 잡지처럼 풀어내는 에디토리얼 랜딩을 만들어 주세요.

# 디자인 가이드
- 폰트: Pretendard, 한글 줄바꿈은 word-break: keep-all
- 레이아웃: 모바일 우선, 넉넉한 세로 여백, 카드 단위 그룹핑
- 모서리/여백: rounded 8·16·28, spacing 8·16·28 스케일
- 컬러 팔레트: Editorial Black #111111 · Paper #FAFAF7 · Stone #D8D3C7 · Muted #77736B
- 톤: Editorial commerce. Black/white restraint, magazine spacing, story-led cards.

# 화면 구성
1. 흑백 대비의 풀블리드 커버 이미지 자리와 카피
2. 좌우 교차 배치의 스토리 섹션(이미지+긴 문단)
3. 큐레이션된 제품/콘텐츠를 세로로 나열한 셀렉션
4. 뉴스레터 구독 폼 마무리

# 컴포넌트 힌트
- EditorialHero: 잡지 표지처럼 이미지를 전면에 깔고 제목을 여백 쪽에 두는 첫 화면. 글자를 이미지 위에 겹치지 않아 사진의 톤이 상하지 않는다.
- BrandStoryCard: 브랜드 사진과 서너 줄 소개를 세로로 묶은 카드. 가격을 넣지 않아 상품 목록이 아니라 읽을거리로 보이게 한다.
- ThinOutlineButton: 1px 실선 테두리에 채움 없는 버튼. 배경이 사진이어도 시선을 뺏지 않아 에디토리얼 화면과 충돌하지 않는다.

# 카피 톤
- 한국어, 29CM 특유의 랜딩·홍보 맥락에 맞는 간결한 문구
- 예시 헤드라인: "취향을 고르는 방식"

# 기술 스택 제안
- React + Tailwind CSS 컴포넌트로 분리, 반응형 구현
- 접근성(대비, 포커스, 시맨틱 태그) 고려

# 제약
- 로고/상표/실제 프로덕션 스크린을 복제하지 말 것
- 공개적으로 관찰 가능한 패턴 기반의 독립 제작이며 29CM과 제휴 관계가 아님

Coupang 스타일로 특가 상품을 빠르게 훑어보는 커머스 리스트 페이지를 만들어 주세요.

# 디자인 가이드
- 폰트: Pretendard, 한글 줄바꿈은 word-break: keep-all
- 레이아웃: 모바일 우선, 넉넉한 세로 여백, 카드 단위 그룹핑
- 모서리/여백: rounded 8·16·28, spacing 8·16·28 스케일
- 컬러 팔레트: Rocket Red #E52528 · Delivery Blue #2878FF · Price Ink #111827 · Canvas #FFFFFF
- 톤: Retail urgency. Red/blue deal labels, dense product grids, direct purchase CTAs.

# 화면 구성
1. 카테고리 탭과 정렬 옵션이 있는 상단 바
2. 할인율 배지·배송 배지가 붙은 상품 카드 그리드
3. 무한 스크롤 또는 페이지네이션 영역
4. 장바구니로 이어지는 고정 하단 CTA

# 컴포넌트 힌트
- DealBadge: 할인율을 담는 작은 빨강 라벨. 상품 이미지 좌상단에 겹쳐 놓고 목록에서 같은 위치를 유지해 눈이 훑는 경로를 고정한다.
- DeliveryPill: 배송 조건을 담는 파란 알약형 태그. 가격 바로 아래 붙여 "언제 오는가"를 가격과 한 묶음으로 읽히게 한다.
- ProductGridCard: 2열 상품 카드. 이미지·상품명 2줄·가격·배송 태그 순서를 고정하고 카드 높이를 맞춰 그리드가 어긋나지 않게 한다.

# 카피 톤
- 한국어, Coupang 특유의 커머스·쇼핑몰 맥락에 맞는 간결한 문구
- 예시 헤드라인: "오늘 도착하는 선택"

# 기술 스택 제안
- React + Tailwind CSS 컴포넌트로 분리, 반응형 구현
- 접근성(대비, 포커스, 시맨틱 태그) 고려

# 제약
- 로고/상표/실제 프로덕션 스크린을 복제하지 말 것
- 공개적으로 관찰 가능한 패턴 기반의 독립 제작이며 Coupang과 제휴 관계가 아님

Musinsa 스타일로 트렌드 랭킹 중심의 패션 카탈로그 페이지를 만들어 주세요.

# 디자인 가이드
- 폰트: Pretendard, 한글 줄바꿈은 word-break: keep-all
- 레이아웃: 모바일 우선, 넉넉한 세로 여백, 카드 단위 그룹핑
- 모서리/여백: rounded 8·16·28, spacing 8·16·28 스케일
- 컬러 팔레트: Black #000000 · White #FFFFFF · Cool Gray #F3F4F6 · Sale Red #FF3B30
- 톤: Streetwear catalog. Monochrome grid, sharp type, ranking and drop modules.

# 화면 구성
1. 랭킹 필터(성별·카테고리·기간) 레일
2. 순위 숫자가 붙은 상품 랭킹 카드 그리드
3. 한정 드롭 배너 모듈
4. 좋아요·조회수 메타데이터 표시

# 컴포넌트 힌트
- RankingCard: 순위 숫자를 이미지 좌상단에 큼직하게 얹은 카드. 1~3위만 강조색을 주고 나머지는 회색으로 두어 상위권이 먼저 읽히게 한다.
- DropBanner: 발매 일시를 카운트다운으로 보여 주는 가로 배너. 남은 시간이 줄어드는 것 자체가 유일한 장식이라 다른 요소를 덜어낸다.
- FilterRail: 목록 상단에 고정되는 필터 줄. 선택된 조건을 칩으로 남겨 두어 몇 단계를 거쳐도 지금 무엇으로 걸렀는지 보이게 한다.

# 카피 톤
- 한국어, Musinsa 특유의 커머스·쇼핑몰 맥락에 맞는 간결한 문구
- 예시 헤드라인: "랭킹으로 보는 트렌드"

# 기술 스택 제안
- React + Tailwind CSS 컴포넌트로 분리, 반응형 구현
- 접근성(대비, 포커스, 시맨틱 태그) 고려

# 제약
- 로고/상표/실제 프로덕션 스크린을 복제하지 말 것
- 공개적으로 관찰 가능한 패턴 기반의 독립 제작이며 Musinsa과 제휴 관계가 아님

Kurly 스타일로 식품 커머스의 상품 상세 페이지를 만들어 주세요.

# 디자인 가이드
- 폰트: Pretendard, 한글 줄바꿈은 word-break: keep-all
- 레이아웃: 모바일 우선, 넉넉한 세로 여백, 카드 단위 그룹핑
- 모서리/여백: rounded 8·16·28, spacing 8·16·28 스케일
- 컬러 팔레트: Kurly Purple #5F0080 · Light Lavender #F5EFF8 · Fresh Green #35A852 · Ink #222222
- 톤: Premium grocery purple. Soft cards, food editorial, trust and freshness cues.

# 화면 구성
1. 큰 상품 이미지와 신선도·배송 배지
2. 가격·옵션 선택과 정기배송 토글
3. 상품 설명을 에디토리얼 톤으로 푼 섹션
4. 리뷰 요약과 구매 고정 버튼

# 컴포넌트 힌트
- FreshBadge: 입고일이나 보관 조건을 담는 작은 라벨. 신선식품에서 가장 먼저 확인하는 정보라 상품명보다 위에 둔다.
- PremiumProductCard: 여백을 넉넉히 준 단일 열 상품 카드. 한 화면에 적게 노출하는 대신 사진을 크게 써서 품질감을 전달한다.
- RecipeSection: 상품 아래 붙는 활용법 영역. 무엇을 파는지가 아니라 어떻게 먹는지를 설명해 장바구니 담기 직전의 이유를 만든다.

# 카피 톤
- 한국어, Kurly 특유의 커머스·쇼핑몰 맥락에 맞는 간결한 문구
- 예시 헤드라인: "좋은 식탁을 더 쉽게"

# 기술 스택 제안
- React + Tailwind CSS 컴포넌트로 분리, 반응형 구현
- 접근성(대비, 포커스, 시맨틱 태그) 고려

# 제약
- 로고/상표/실제 프로덕션 스크린을 복제하지 말 것
- 공개적으로 관찰 가능한 패턴 기반의 독립 제작이며 Kurly과 제휴 관계가 아님

Toss 스타일로 판매자용 정산·매출 대시보드를 만들어 주세요.

# 디자인 가이드
- 폰트: Pretendard, 한글 줄바꿈은 word-break: keep-all
- 레이아웃: 모바일 우선, 넉넉한 세로 여백, 카드 단위 그룹핑
- 모서리/여백: rounded 8·16·28, spacing 8·16·28 스케일
- 컬러 팔레트: Toss Blue #0064FF · Ink #191F28 · Gray 700 #4E5968 · Gray 100 #F2F4F6
- 톤: Minimal mobile-first fintech. White canvas, confident blue, clear hierarchy.

# 화면 구성
1. 핵심 지표 요약 카드 4개(정산 예정·완료·수수료·잔액)
2. 기간 필터가 있는 매출 추이 라인 차트 영역
3. 정산 내역 테이블(상태 뱃지 포함)
4. 우측 상세 패널로 단건 정산 열람

# 컴포넌트 힌트
- FinanceCard: 금액을 가장 크게, 설명을 그 아래 회색으로 두는 카드. 한 카드에 숫자 하나만 담아 금융 화면 특유의 판단 부담을 줄인다.
- BlueCTA: 화면 하단에 고정되는 파란 버튼. 한 화면에 하나만 두고 나머지 행동은 텍스트 링크로 낮춰 다음 단계를 헷갈리지 않게 한다.
- AmountRow: 항목명을 왼쪽, 금액을 오른쪽 끝에 정렬한 한 줄. 숫자를 우측 정렬하고 고정폭으로 처리해 자릿수가 달라도 세로선이 맞는다.

# 카피 톤
- 한국어, Toss 특유의 대시보드·관리자 맥락에 맞는 간결한 문구
- 예시 헤드라인: "금융을 더 쉽게"

# 기술 스택 제안
- React + Tailwind CSS 컴포넌트로 분리, 반응형 구현
- 접근성(대비, 포커스, 시맨틱 태그) 고려

# 제약
- 로고/상표/실제 프로덕션 스크린을 복제하지 말 것
- 공개적으로 관찰 가능한 패턴 기반의 독립 제작이며 Toss과 제휴 관계가 아님

Naver 스타일로 여러 서비스를 한눈에 관리하는 관리자 홈을 만들어 주세요.

# 디자인 가이드
- 폰트: Pretendard, 한글 줄바꿈은 word-break: keep-all
- 레이아웃: 모바일 우선, 넉넉한 세로 여백, 카드 단위 그룹핑
- 모서리/여백: rounded 8·16·28, spacing 8·16·28 스케일
- 컬러 팔레트: Naver Green #03C75A · Ink #111111 · Canvas #FFFFFF · Soft Mint #E9F8F0
- 톤: Green-first Korean portal utility. Dense content grids, rounded search, service tiles.

# 화면 구성
1. 검색바와 빠른 실행 서비스 타일 그리드
2. 오늘의 처리 현황 요약 위젯
3. 알림·공지 리스트 모듈
4. 좌측 사이드 내비게이션

# 컴포넌트 힌트
- SearchBar: 화면 최상단을 가로지르는 둥근 검색창. 좌우 여백을 최소로 두고 폭을 최대한 넓혀, 검색이 이 서비스의 출발점임을 첫 화면에서 드러낸다.
- ServiceTile: 아이콘과 짧은 라벨을 세로로 쌓은 정사각 타일. 4열 또는 5열 그리드로 묶어 서비스 진입점을 한 화면에 모은다.
- NewsCard: 썸네일 좌측, 제목 2줄, 출처와 시간을 회색 소문자로 붙인 목록형 카드. 구분선 하나로만 나눠 스크롤 밀도를 유지한다.

# 카피 톤
- 한국어, Naver 특유의 대시보드·관리자 맥락에 맞는 간결한 문구
- 예시 헤드라인: "검색에서 시작되는 모든 것"

# 기술 스택 제안
- React + Tailwind CSS 컴포넌트로 분리, 반응형 구현
- 접근성(대비, 포커스, 시맨틱 태그) 고려

# 제약
- 로고/상표/실제 프로덕션 스크린을 복제하지 말 것
- 공개적으로 관찰 가능한 패턴 기반의 독립 제작이며 Naver과 제휴 관계가 아님

Yanolja 스타일로 숙소 예약 날짜·인원·객실을 선택하는 예약 폼을 만들어 주세요.

# 디자인 가이드
- 폰트: Pretendard, 한글 줄바꿈은 word-break: keep-all
- 레이아웃: 모바일 우선, 넉넉한 세로 여백, 카드 단위 그룹핑
- 모서리/여백: rounded 8·16·28, spacing 8·16·28 스케일
- 컬러 팔레트: Yanolja Pink #FF3478 · Deep Purple #5B2CFF · Sky #EAF3FF · Ink #1F2937
- 톤: Travel deals with energetic magenta/purple. Rounded promo blocks and app-first CTA.

# 화면 구성
1. 날짜 범위 선택 캘린더와 인원 스텝퍼
2. 객실 옵션 카드 선택
3. 쿠폰·할인 적용 영역
4. 최종 결제 금액 요약과 예약 CTA

# 컴포넌트 힌트
- PromoGradient: 보라에서 분홍으로 넘어가는 프로모션 배경. 할인 문구를 흰 글자로 얹되 그라디언트 중간 밝은 구간은 피해야 글자가 묻히지 않는다.
- BookingCard: 날짜·인원·가격을 한 카드에 묶은 예약 요약. 변경 가능한 항목만 밑줄로 표시해 무엇을 누를 수 있는지 구분한다.
- CouponPill: 양쪽에 반원 홈을 낸 쿠폰 모양 태그. 실물 쿠폰의 형태를 빌려 적립금·할인과 시각적으로 구분한다.

# 카피 톤
- 한국어, Yanolja 특유의 예약·폼·문의 맥락에 맞는 간결한 문구
- 예시 헤드라인: "이번 주말 어디 갈까?"

# 기술 스택 제안
- React + Tailwind CSS 컴포넌트로 분리, 반응형 구현
- 접근성(대비, 포커스, 시맨틱 태그) 고려

# 제약
- 로고/상표/실제 프로덕션 스크린을 복제하지 말 것
- 공개적으로 관찰 가능한 패턴 기반의 독립 제작이며 Yanolja과 제휴 관계가 아님

Kakao 스타일로 채팅 형태로 상담 정보를 받는 예약 폼을 만들어 주세요.

# 디자인 가이드
- 폰트: Pretendard, 한글 줄바꿈은 word-break: keep-all
- 레이아웃: 모바일 우선, 넉넉한 세로 여백, 카드 단위 그룹핑
- 모서리/여백: rounded 8·16·28, spacing 8·16·28 스케일
- 컬러 팔레트: Kakao Yellow #FEE500 · Brown Ink #3C1E1E · Cream #FFF8D6 · Bubble Gray #F2F3F5
- 톤: Warm yellow platform UI. Friendly bubbles, rounded panels, approachable copy.

# 화면 구성
1. 안내 말풍선과 사용자 응답 버블이 번갈아 나오는 대화 흐름
2. 이름·연락처·희망 시간 입력을 대화형으로 수집
3. 선택지를 빠른 답장 버튼으로 제공
4. 요약 확인 후 예약 완료 카드

# 컴포넌트 힌트
- ChatBubble: 한쪽 모서리만 각진 말풍선. 보낸 쪽은 브랜드 노랑, 받은 쪽은 회색으로 두고 최대 폭을 화면의 70%로 제한해 읽는 리듬을 만든다.
- YellowCTA: 노란 배경에 진한 갈색 글자를 올린 버튼. 노랑은 밝아서 흰 글자를 쓰면 대비가 무너지므로 어두운 글자색이 사실상 강제된다.
- ProfileChip: 원형 썸네일과 이름을 가로로 붙인 작은 조각. 대화·목록·멘션 어디에 놓아도 같은 높이를 유지해 줄 정렬이 흐트러지지 않게 한다.

# 카피 톤
- 한국어, Kakao 특유의 예약·폼·문의 맥락에 맞는 간결한 문구
- 예시 헤드라인: "친구처럼 쉬운 서비스"

# 기술 스택 제안
- React + Tailwind CSS 컴포넌트로 분리, 반응형 구현
- 접근성(대비, 포커스, 시맨틱 태그) 고려

# 제약
- 로고/상표/실제 프로덕션 스크린을 복제하지 말 것
- 공개적으로 관찰 가능한 패턴 기반의 독립 제작이며 Kakao과 제휴 관계가 아님

Zigbang 스타일로 관심 매물에 대한 문의를 남기는 폼을 만들어 주세요.

# 디자인 가이드
- 폰트: Pretendard, 한글 줄바꿈은 word-break: keep-all
- 레이아웃: 모바일 우선, 넉넉한 세로 여백, 카드 단위 그룹핑
- 모서리/여백: rounded 8·16·28, spacing 8·16·28 스케일
- 컬러 팔레트: Zigbang Red #FF5A36 · Map Blue #2F80ED · Canvas #FFFFFF · Soft Gray #F4F6F8
- 톤: Map-first real estate UI. Red-orange accents, property cards, trust filters.

# 화면 구성
1. 지도 미리보기와 매물 요약 카드
2. 희망 조건(가격·평형·입주일) 필터 입력
3. 연락처와 문의 메시지 입력
4. 개인정보 동의 체크와 문의 전송 CTA

# 컴포넌트 힌트
- MapSearchPanel: 지도 위에 겹쳐 올리는 반투명 검색 패널. 지도를 가리는 높이를 화면의 40% 이하로 제한해 위치 감각을 잃지 않게 한다.
- PropertyCard: 매물 사진·보증금/월세·면적·층수를 고정 순서로 담은 카드. 숫자 항목을 같은 자리에 두어 여러 매물을 위아래로 비교하기 쉽게 한다.
- TrustFilter: 허위매물 검증 여부로 거르는 필터. 부동산 서비스의 핵심 불안을 다루는 조건이라 다른 필터보다 앞에 배치한다.

# 카피 톤
- 한국어, Zigbang 특유의 예약·폼·문의 맥락에 맞는 간결한 문구
- 예시 헤드라인: "좋은 집을 더 빠르게"

# 기술 스택 제안
- React + Tailwind CSS 컴포넌트로 분리, 반응형 구현
- 접근성(대비, 포커스, 시맨틱 태그) 고려

# 제약
- 로고/상표/실제 프로덕션 스크린을 복제하지 말 것
- 공개적으로 관찰 가능한 패턴 기반의 독립 제작이며 Zigbang과 제휴 관계가 아님

Toss 스타일로 단계별로 진행하는 회원가입 온보딩 플로우를 만들어 주세요.

# 디자인 가이드
- 폰트: Pretendard, 한글 줄바꿈은 word-break: keep-all
- 레이아웃: 모바일 우선, 넉넉한 세로 여백, 카드 단위 그룹핑
- 모서리/여백: rounded 8·16·28, spacing 8·16·28 스케일
- 컬러 팔레트: Toss Blue #0064FF · Ink #191F28 · Gray 700 #4E5968 · Gray 100 #F2F4F6
- 톤: Minimal mobile-first fintech. White canvas, confident blue, clear hierarchy.

# 화면 구성
1. 진행률 표시가 있는 단계 헤더
2. 한 화면당 하나의 입력(휴대폰 인증 → 기본 정보 → 약관)
3. 큰 하단 고정 다음 버튼
4. 가입 완료 축하 화면

# 컴포넌트 힌트
- FinanceCard: 금액을 가장 크게, 설명을 그 아래 회색으로 두는 카드. 한 카드에 숫자 하나만 담아 금융 화면 특유의 판단 부담을 줄인다.
- BlueCTA: 화면 하단에 고정되는 파란 버튼. 한 화면에 하나만 두고 나머지 행동은 텍스트 링크로 낮춰 다음 단계를 헷갈리지 않게 한다.
- AmountRow: 항목명을 왼쪽, 금액을 오른쪽 끝에 정렬한 한 줄. 숫자를 우측 정렬하고 고정폭으로 처리해 자릿수가 달라도 세로선이 맞는다.

# 카피 톤
- 한국어, Toss 특유의 온보딩·인증 맥락에 맞는 간결한 문구
- 예시 헤드라인: "금융을 더 쉽게"

# 기술 스택 제안
- React + Tailwind CSS 컴포넌트로 분리, 반응형 구현
- 접근성(대비, 포커스, 시맨틱 태그) 고려

# 제약
- 로고/상표/실제 프로덕션 스크린을 복제하지 말 것
- 공개적으로 관찰 가능한 패턴 기반의 독립 제작이며 Toss과 제휴 관계가 아님

Daangn 스타일로 위치 기반 동네 인증 온보딩을 만들어 주세요.

# 디자인 가이드
- 폰트: Pretendard, 한글 줄바꿈은 word-break: keep-all
- 레이아웃: 모바일 우선, 넉넉한 세로 여백, 카드 단위 그룹핑
- 모서리/여백: rounded 8·16·28, spacing 8·16·28 스케일
- 컬러 팔레트: Carrot Orange #FF6F0F · Warm Cream #FFF4EC · Ink #212124 · Gray #868B94
- 톤: Local trust orange. Friendly neighborhood cards, simple listings, warm onboarding.

# 화면 구성
1. 서비스 소개와 동네 인증 시작 화면
2. 위치 권한 요청과 현재 동네 확인
3. 관심 카테고리 선택
4. 인증 완료와 첫 피드 유도

# 컴포넌트 힌트
- LocalListing: 썸네일·제목·동네명·가격을 한 줄에 담은 목록 항목. 거리 정보를 동네 이름으로 대체해 지역 서비스라는 인상을 만든다.
- NeighborhoodBadge: 인증된 동네를 표시하는 작은 배지. 신뢰가 거래의 전제라 프로필과 게시글 양쪽에 같은 모양으로 반복 노출한다.
- OrangeCTA: 주황 채움 버튼. 채도가 높아 면적을 넓게 쓰면 부담스러우므로 높이를 낮추고 모서리를 크게 굴려 완화한다.

# 카피 톤
- 한국어, Daangn 특유의 온보딩·인증 맥락에 맞는 간결한 문구
- 예시 헤드라인: "우리 동네에서 만나요"

# 기술 스택 제안
- React + Tailwind CSS 컴포넌트로 분리, 반응형 구현
- 접근성(대비, 포커스, 시맨틱 태그) 고려

# 제약
- 로고/상표/실제 프로덕션 스크린을 복제하지 말 것
- 공개적으로 관찰 가능한 패턴 기반의 독립 제작이며 Daangn과 제휴 관계가 아님

Watcha 스타일로 취향 기반 콘텐츠 추천 피드 화면을 만들어 주세요.

# 디자인 가이드
- 폰트: Pretendard, 한글 줄바꿈은 word-break: keep-all
- 레이아웃: 모바일 우선, 넉넉한 세로 여백, 카드 단위 그룹핑
- 모서리/여백: rounded 8·16·28, spacing 8·16·28 스케일
- 컬러 팔레트: Watcha Pink #FF0558 · Cinema Black #111114 · Panel #1E1F25 · Text #F8F8FA
- 톤: Media recommendation dark UI. Pink accent, poster grids, taste chips.

# 화면 구성
1. 오늘의 추천작 대형 히어로 배너
2. 가로 스크롤 포스터 컬렉션 여러 줄
3. 취향 태그 칩과 평가 별점 UI
4. 하단 탭 내비게이션

# 컴포넌트 힌트
- PosterGrid: 포스터 비율(2:3)을 유지하는 3열 그리드. 제목을 이미지 안에 넣지 않고 아래에 두어 포스터 원본을 가리지 않는다.
- TasteChip: 취향 키워드를 담는 둥근 칩. 여러 개를 선택 상태로 남겨 추천 근거가 무엇인지 사용자가 되짚을 수 있게 한다.
- RatingBadge: 평점을 담는 작은 배지. 별 아이콘 대신 숫자만 써서 포스터가 촘촘한 그리드에서 시각적 소음을 만들지 않는다.

# 카피 톤
- 한국어, Watcha 특유의 앱·모바일 맥락에 맞는 간결한 문구
- 예시 헤드라인: "취향을 발견하는 시간"

# 기술 스택 제안
- React + Tailwind CSS 컴포넌트로 분리, 반응형 구현
- 접근성(대비, 포커스, 시맨틱 태그) 고려

# 제약
- 로고/상표/실제 프로덕션 스크린을 복제하지 말 것
- 공개적으로 관찰 가능한 패턴 기반의 독립 제작이며 Watcha과 제휴 관계가 아님

Naver 스타일로 검색에서 시작하는 모바일 유틸리티 홈을 만들어 주세요.

# 디자인 가이드
- 폰트: Pretendard, 한글 줄바꿈은 word-break: keep-all
- 레이아웃: 모바일 우선, 넉넉한 세로 여백, 카드 단위 그룹핑
- 모서리/여백: rounded 8·16·28, spacing 8·16·28 스케일
- 컬러 팔레트: Naver Green #03C75A · Ink #111111 · Canvas #FFFFFF · Soft Mint #E9F8F0
- 톤: Green-first Korean portal utility. Dense content grids, rounded search, service tiles.

# 화면 구성
1. 상단 로고와 둥근 검색바
2. 자주 쓰는 서비스 바로가기 타일
3. 오늘의 콘텐츠·뉴스 카드 피드
4. 하단 고정 탭바

# 컴포넌트 힌트
- SearchBar: 화면 최상단을 가로지르는 둥근 검색창. 좌우 여백을 최소로 두고 폭을 최대한 넓혀, 검색이 이 서비스의 출발점임을 첫 화면에서 드러낸다.
- ServiceTile: 아이콘과 짧은 라벨을 세로로 쌓은 정사각 타일. 4열 또는 5열 그리드로 묶어 서비스 진입점을 한 화면에 모은다.
- NewsCard: 썸네일 좌측, 제목 2줄, 출처와 시간을 회색 소문자로 붙인 목록형 카드. 구분선 하나로만 나눠 스크롤 밀도를 유지한다.

# 카피 톤
- 한국어, Naver 특유의 앱·모바일 맥락에 맞는 간결한 문구
- 예시 헤드라인: "검색에서 시작되는 모든 것"

# 기술 스택 제안
- React + Tailwind CSS 컴포넌트로 분리, 반응형 구현
- 접근성(대비, 포커스, 시맨틱 태그) 고려

# 제약
- 로고/상표/실제 프로덕션 스크린을 복제하지 말 것
- 공개적으로 관찰 가능한 패턴 기반의 독립 제작이며 Naver과 제휴 관계가 아님

Coupang 스타일로 상품 탐색부터 결제까지 이어지는 커머스 전체 구매 플로우를 만들어 주세요.

# 디자인 가이드
- 폰트: Pretendard, 한글 줄바꿈은 word-break: keep-all
- 레이아웃: 모바일 우선, 넉넉한 세로 여백, 카드 단위 그룹핑
- 모서리/여백: rounded 8·16·28, spacing 8·16·28 스케일
- 컬러 팔레트: Rocket Red #E52528 · Delivery Blue #2878FF · Price Ink #111827 · Canvas #FFFFFF
- 톤: Retail urgency. Red/blue deal labels, dense product grids, direct purchase CTAs.

# 화면 구성
1. 카테고리·검색·정렬이 있는 상품 목록
2. 옵션 선택과 배송/리뷰가 있는 상품 상세
3. 수량 변경·쿠폰 적용이 있는 장바구니
4. 배송지·결제수단·최종 금액 요약 결제 화면
5. 주문 완료와 배송 추적 진입
6. 전역 상태(장바구니 개수, 최근 본 상품) 관리 구조

# 컴포넌트 힌트
- DealBadge: 할인율을 담는 작은 빨강 라벨. 상품 이미지 좌상단에 겹쳐 놓고 목록에서 같은 위치를 유지해 눈이 훑는 경로를 고정한다.
- DeliveryPill: 배송 조건을 담는 파란 알약형 태그. 가격 바로 아래 붙여 "언제 오는가"를 가격과 한 묶음으로 읽히게 한다.
- ProductGridCard: 2열 상품 카드. 이미지·상품명 2줄·가격·배송 태그 순서를 고정하고 카드 높이를 맞춰 그리드가 어긋나지 않게 한다.

# 카피 톤
- 한국어, Coupang 특유의 커머스·쇼핑몰 맥락에 맞는 간결한 문구
- 예시 헤드라인: "오늘 도착하는 선택"

# 기술 스택 제안
- React + Tailwind CSS 컴포넌트로 분리, 반응형 구현
- 접근성(대비, 포커스, 시맨틱 태그) 고려

# 제약
- 로고/상표/실제 프로덕션 스크린을 복제하지 말 것
- 공개적으로 관찰 가능한 패턴 기반의 독립 제작이며 Coupang과 제휴 관계가 아님

Toss 스타일로 SaaS 서비스를 운영하는 관리자 대시보드 전체 화면 세트를 만들어 주세요.

# 디자인 가이드
- 폰트: Pretendard, 한글 줄바꿈은 word-break: keep-all
- 레이아웃: 모바일 우선, 넉넉한 세로 여백, 카드 단위 그룹핑
- 모서리/여백: rounded 8·16·28, spacing 8·16·28 스케일
- 컬러 팔레트: Toss Blue #0064FF · Ink #191F28 · Gray 700 #4E5968 · Gray 100 #F2F4F6
- 톤: Minimal mobile-first fintech. White canvas, confident blue, clear hierarchy.

# 화면 구성
1. 핵심 지표(KPI) 카드와 추이 차트가 있는 홈
2. 검색·필터·페이지네이션이 있는 회원 관리 테이블
3. 단건 상세 우측 슬라이드 패널
4. 정산·매출 리포트와 CSV 내보내기
5. 요금제·팀·권한 설정 화면
6. 반응형 사이드바 내비게이션과 다크모드

# 컴포넌트 힌트
- FinanceCard: 금액을 가장 크게, 설명을 그 아래 회색으로 두는 카드. 한 카드에 숫자 하나만 담아 금융 화면 특유의 판단 부담을 줄인다.
- BlueCTA: 화면 하단에 고정되는 파란 버튼. 한 화면에 하나만 두고 나머지 행동은 텍스트 링크로 낮춰 다음 단계를 헷갈리지 않게 한다.
- AmountRow: 항목명을 왼쪽, 금액을 오른쪽 끝에 정렬한 한 줄. 숫자를 우측 정렬하고 고정폭으로 처리해 자릿수가 달라도 세로선이 맞는다.

# 카피 톤
- 한국어, Toss 특유의 대시보드·관리자 맥락에 맞는 간결한 문구
- 예시 헤드라인: "금융을 더 쉽게"

# 기술 스택 제안
- React + Tailwind CSS 컴포넌트로 분리, 반응형 구현
- 접근성(대비, 포커스, 시맨틱 태그) 고려

# 제약
- 로고/상표/실제 프로덕션 스크린을 복제하지 말 것
- 공개적으로 관찰 가능한 패턴 기반의 독립 제작이며 Toss과 제휴 관계가 아님

Daangn 스타일로 동네 기반 중고거래 앱의 MVP 화면 전체를 만들어 주세요.

# 디자인 가이드
- 폰트: Pretendard, 한글 줄바꿈은 word-break: keep-all
- 레이아웃: 모바일 우선, 넉넉한 세로 여백, 카드 단위 그룹핑
- 모서리/여백: rounded 8·16·28, spacing 8·16·28 스케일
- 컬러 팔레트: Carrot Orange #FF6F0F · Warm Cream #FFF4EC · Ink #212124 · Gray #868B94
- 톤: Local trust orange. Friendly neighborhood cards, simple listings, warm onboarding.

# 화면 구성
1. 동네 설정과 카테고리가 있는 매물 피드
2. 이미지 슬라이드·판매자 정보가 있는 매물 상세
3. 거래 채팅 화면(말풍선, 약속 잡기)
4. 사진 업로드·가격·설명 입력 글쓰기 폼
5. 내 판매내역·매너온도가 있는 프로필
6. 하단 탭 내비게이션과 알림

# 컴포넌트 힌트
- LocalListing: 썸네일·제목·동네명·가격을 한 줄에 담은 목록 항목. 거리 정보를 동네 이름으로 대체해 지역 서비스라는 인상을 만든다.
- NeighborhoodBadge: 인증된 동네를 표시하는 작은 배지. 신뢰가 거래의 전제라 프로필과 게시글 양쪽에 같은 모양으로 반복 노출한다.
- OrangeCTA: 주황 채움 버튼. 채도가 높아 면적을 넓게 쓰면 부담스러우므로 높이를 낮추고 모서리를 크게 굴려 완화한다.

# 카피 톤
- 한국어, Daangn 특유의 앱·모바일 맥락에 맞는 간결한 문구
- 예시 헤드라인: "우리 동네에서 만나요"

# 기술 스택 제안
- React + Tailwind CSS 컴포넌트로 분리, 반응형 구현
- 접근성(대비, 포커스, 시맨틱 태그) 고려

# 제약
- 로고/상표/실제 프로덕션 스크린을 복제하지 말 것
- 공개적으로 관찰 가능한 패턴 기반의 독립 제작이며 Daangn과 제휴 관계가 아님

Yanolja 스타일로 숙소 검색부터 결제·확정까지 이어지는 예약 전체 플로우를 만들어 주세요.

# 디자인 가이드
- 폰트: Pretendard, 한글 줄바꿈은 word-break: keep-all
- 레이아웃: 모바일 우선, 넉넉한 세로 여백, 카드 단위 그룹핑
- 모서리/여백: rounded 8·16·28, spacing 8·16·28 스케일
- 컬러 팔레트: Yanolja Pink #FF3478 · Deep Purple #5B2CFF · Sky #EAF3FF · Ink #1F2937
- 톤: Travel deals with energetic magenta/purple. Rounded promo blocks and app-first CTA.

# 화면 구성
1. 지역·날짜·인원으로 검색하는 홈
2. 지도/리스트 토글이 있는 숙소 검색 결과
3. 객실 옵션과 취소 정책이 있는 숙소 상세
4. 쿠폰·포인트·결제수단 선택 결제 화면
5. 예약 확정 및 바우처 화면
6. 예약 내역 관리와 취소 흐름

# 컴포넌트 힌트
- PromoGradient: 보라에서 분홍으로 넘어가는 프로모션 배경. 할인 문구를 흰 글자로 얹되 그라디언트 중간 밝은 구간은 피해야 글자가 묻히지 않는다.
- BookingCard: 날짜·인원·가격을 한 카드에 묶은 예약 요약. 변경 가능한 항목만 밑줄로 표시해 무엇을 누를 수 있는지 구분한다.
- CouponPill: 양쪽에 반원 홈을 낸 쿠폰 모양 태그. 실물 쿠폰의 형태를 빌려 적립금·할인과 시각적으로 구분한다.

# 카피 톤
- 한국어, Yanolja 특유의 예약·폼·문의 맥락에 맞는 간결한 문구
- 예시 헤드라인: "이번 주말 어디 갈까?"

# 기술 스택 제안
- React + Tailwind CSS 컴포넌트로 분리, 반응형 구현
- 접근성(대비, 포커스, 시맨틱 태그) 고려

# 제약
- 로고/상표/실제 프로덕션 스크린을 복제하지 말 것
- 공개적으로 관찰 가능한 패턴 기반의 독립 제작이며 Yanolja과 제휴 관계가 아님

Toss 스타일로 금융 서비스 수준의 본인인증(KYC) 온보딩 플로우를 만들어 주세요.

# 디자인 가이드
- 폰트: Pretendard, 한글 줄바꿈은 word-break: keep-all
- 레이아웃: 모바일 우선, 넉넉한 세로 여백, 카드 단위 그룹핑
- 모서리/여백: rounded 8·16·28, spacing 8·16·28 스케일
- 컬러 팔레트: Toss Blue #0064FF · Ink #191F28 · Gray 700 #4E5968 · Gray 100 #F2F4F6
- 톤: Minimal mobile-first fintech. White canvas, confident blue, clear hierarchy.

# 화면 구성
1. 약관 동의와 진행률 표시 시작 화면
2. 휴대폰 본인인증(인증번호 입력)
3. 신분증 촬영·정보 확인 단계
4. 계좌 1원 인증 단계
5. 보안 비밀번호(PIN) 설정
6. 인증 완료와 실패·재시도 예외 처리

# 컴포넌트 힌트
- FinanceCard: 금액을 가장 크게, 설명을 그 아래 회색으로 두는 카드. 한 카드에 숫자 하나만 담아 금융 화면 특유의 판단 부담을 줄인다.
- BlueCTA: 화면 하단에 고정되는 파란 버튼. 한 화면에 하나만 두고 나머지 행동은 텍스트 링크로 낮춰 다음 단계를 헷갈리지 않게 한다.
- AmountRow: 항목명을 왼쪽, 금액을 오른쪽 끝에 정렬한 한 줄. 숫자를 우측 정렬하고 고정폭으로 처리해 자릿수가 달라도 세로선이 맞는다.

# 카피 톤
- 한국어, Toss 특유의 온보딩·인증 맥락에 맞는 간결한 문구
- 예시 헤드라인: "금융을 더 쉽게"

# 기술 스택 제안
- React + Tailwind CSS 컴포넌트로 분리, 반응형 구현
- 접근성(대비, 포커스, 시맨틱 태그) 고려

# 제약
- 로고/상표/실제 프로덕션 스크린을 복제하지 말 것
- 공개적으로 관찰 가능한 패턴 기반의 독립 제작이며 Toss과 제휴 관계가 아님

Musinsa 스타일로 시즌 세일·드롭 캠페인을 위한 전환 최적화 랜딩페이지를 만들어 주세요.

# 디자인 가이드
- 폰트: Pretendard, 한글 줄바꿈은 word-break: keep-all
- 레이아웃: 모바일 우선, 넉넉한 세로 여백, 카드 단위 그룹핑
- 모서리/여백: rounded 8·16·28, spacing 8·16·28 스케일
- 컬러 팔레트: Black #000000 · White #FFFFFF · Cool Gray #F3F4F6 · Sale Red #FF3B30
- 톤: Streetwear catalog. Monochrome grid, sharp type, ranking and drop modules.

# 화면 구성
1. 카운트다운 타이머가 있는 캠페인 히어로
2. 핵심 혜택을 강조하는 베네핏 섹션
3. 상품/룩북 하이라이트 그리드
4. 고객 후기와 신뢰 배지
5. 반복되는 전환 CTA와 플로팅 구매 버튼
6. 이메일/앱 알림 수집 폼

# 컴포넌트 힌트
- RankingCard: 순위 숫자를 이미지 좌상단에 큼직하게 얹은 카드. 1~3위만 강조색을 주고 나머지는 회색으로 두어 상위권이 먼저 읽히게 한다.
- DropBanner: 발매 일시를 카운트다운으로 보여 주는 가로 배너. 남은 시간이 줄어드는 것 자체가 유일한 장식이라 다른 요소를 덜어낸다.
- FilterRail: 목록 상단에 고정되는 필터 줄. 선택된 조건을 칩으로 남겨 두어 몇 단계를 거쳐도 지금 무엇으로 걸렀는지 보이게 한다.

# 카피 톤
- 한국어, Musinsa 특유의 랜딩·홍보 맥락에 맞는 간결한 문구
- 예시 헤드라인: "랭킹으로 보는 트렌드"

# 기술 스택 제안
- React + Tailwind CSS 컴포넌트로 분리, 반응형 구현
- 접근성(대비, 포커스, 시맨틱 태그) 고려

# 제약
- 로고/상표/실제 프로덕션 스크린을 복제하지 말 것
- 공개적으로 관찰 가능한 패턴 기반의 독립 제작이며 Musinsa과 제휴 관계가 아님