從一句話的需求到應用程式,沒有設計師
沒有開啟 Figma,也沒有開啟 Photoshop。文字需求 → Nano Banana 圖片 → Gemini 逆向解析 → 重新生成與變化 → Gumson HTML 轉換 → Figma/PSD → Vibe coding。以下是 2026-09-07 的一次真實執行紀錄;轉換階段會即時反映目前狀態。
圖片生成 53.4s · 逆向解析 13.1s · 3 個變化版並行 56.6s · HTML 轉換 39 分鐘 · .fig 48.7s · .psd 97.2s
設計從一句話開始
我們把需求整理成提示詞並送給 google/nano-banana-pro (DropShot API)。從頂部導覽到頁尾,包括價格表與評論者姓名,全部依照文字內容一次生成在同一張圖片中。
A complete, high-fidelity Korean e-commerce landing page design mockup for a cold brew coffee subscription brand named "모닝브루", rendered as one tall vertical desktop webpage screenshot. Clean modern Korean web design, white background, warm cream (#F5EFE6) and deep espresso brown (#3B2418) accents, Pretendard-like sans-serif typography, generous whitespace, crisp UI. Layout from top to bottom: 1) Top navigation bar: wordmark "MORNING BREW" on the left, menu items "구독안내 원두 후기 FAQ", and a small dark rounded button "구독 시작" on the right. 2) Hero section: large bold headline "매일 아침, 문 앞에 갓 내린 콜드브루", sub-headline "새벽 로스팅 · 당일 추출 · 무료 배송", a big dark rounded CTA button "첫 달 30% 할인 받기". On the right, a product photo of a glass bottle of cold brew coffee with ice on a light wooden table, soft morning light. 3) Three benefit cards in a row with simple line icons and titles "새벽 로스팅", "당일 추출", "언제든 해지", each with one short Korean sentence. 4) Pricing section titled "구독 플랜" with three price cards side by side: "라이트" "주 3병" "₩19,900 / 월"; "스탠다드" "주 5병" "₩29,900 / 월" highlighted in cream with a small badge "인기"; "패밀리" "주 10병" "₩49,900 / 월". Each card has a button "선택하기". 5) Reviews section titled "구독자 후기" with three short quote cards, five gold stars, and names "김민지", "박준혁", "이서연". 6) FAQ section titled "자주 묻는 질문" with three rows: "배송은 언제 오나요?", "해지는 어떻게 하나요?", "원두를 바꿀 수 있나요?". 7) Footer: dark espresso brown band with "MORNING BREW" and small text "© 2026 모닝브루". All Korean text must be spelled exactly as written above, crisp and perfectly legible. No extra random text, no lorem ipsum, no watermark, no device frame — just the flat webpage design itself.
引號中的韓文文案被逐字呈現。圖片模型「畫出文字」的能力,正是這條流程的起點。

把圖片還原成設計的「原始碼」
我們把生成的圖片交給 gemini-3.8-flash(REBEAUTY Gemini 閘道),以 JSON 擷取出色票、字體、區塊結構、所有文案、重新生成提示詞與變化指令。這份人要花不少時間才寫得出來的文件 — 「為什麼這個設計長這樣」 — 機器在 13.1 秒內就寫好了。
background
surface
primary
text
accent
- 01
nav navigation MORNING BREW · 구독안내 · 원두 · 후기 · FAQ · 구독 시작
- 02
hero hero_banner 매일 아침, 문 앞에 갓 내린 콜드브루 · 새벽 로스팅 · 당일 추출 · 무료 배송 · 첫 달 30% 할인 받기
- 03
benefits features 새벽 로스팅 · 매일 새벽 신선하게 로스팅된 원두를 사용합니다. · 당일 추출 · 주문 당일 추출하여 가장 신선한 상태로 발송합니다. · 언제든 해지 · 약정 없이 원할 때 언제든지 자유롭게 해지하세요.
- 04
pricing pricing_table 구독 플랜 · 라이트 · 주 3병 · ₩19,900 / 월 · 선택하기 · 스탠다드 …
- 05
reviews testimonials 구독자 후기 · 매일 아침 갓 내린 신선함이 너무 좋아요. 추천합니다! · 김민지 · 가성비 최고입니다. 맛도 깔끔하고 배송도 빨라서 만족해요. · 박준혁 · 정기 구독 덕분에 매일 아침이 즐거워졌어요. 최고! …
- 06
faq accordion 자주 묻는 질문 · 배송은 언제 오나요? · 해지는 어떻게 하나요? · 원두를 바꿀 수 있나요?
- 07
footer footer MORNING BREW · © 2026 모닝브루
字體判定: Pretendard / Noto Sans KR (Bold/ExtraBold) · 깔끔하고 가독성 높은 산세리프 폰트 계열, 명확한 자간과 행간
A complete desktop landing page UI mockup for a premium cold brew coffee delivery service called 'MORNING BREW'. Minimalist, modern aesthetic with a warm ivory background (#F5EFEB), dark brown brand color (#2B1A12), and pure white cards. At the top, a clean white header with logo 'MORNING BREW', nav links '구독안내', '원두', '후기', 'FAQ', and a rounded dark CTA button '구독 시작'. The hero section has warm natural sunlight, showing a large glass bottle filled with dark iced cold brew on a light wooden table. Hero headline in bold dark typography reads '매일 아침, 문 앞에 갓 내린 콜드브루', subhead '새벽 로스팅 · 당일 추출 · 무료 배송', and rounded CTA button '첫 달 30% 할인 받기'. Below, a 3-column benefit section with minimal line icons for '새벽 로스팅' ('매일 새벽 신선하게 로스팅된 원두를 사용합니다.'), '당일 추출' ('주문 당일 추출하여 가장 신선한 상태로 발송합니다.'), and '언제든 해지' ('약정 없이 원할 때 언제든지 자유롭게 해지하세요.'). Then a '구독 플랜' section with three pricing cards: '라이트' with '주 3병' and '₩19,900 / 월', highlighted center card '스탠다드' with badge '인기', '주 5병', '₩29,900 / 월', and '패밀리' with '주 10병', '₩49,900 / 월', each with a dark '선택하기' button. Next, '구독자 후기' section with three user review cards containing 5 yellow stars each: reviews by '김민지' ('매일 아침 갓 내린 신선함이 너무 좋아요. 추천합니다!'), '박준혁' ('가성비 최고입니다. 맛도 깔끔하고 배송도 빨라서 만족해요.'), and '이서연' ('정기 구독 덕분에 매일 아침이 즐거워졌어요. 최고!'). Followed by an accordion FAQ section '자주 묻는 질문' with questions '배송은 언제 오나요?', '해지는 어떻게 하나요?', '원두를 바꿀 수 있나요?'. Clean dark brown footer with 'MORNING BREW' and copyright '© 2026 모닝브루'. All Korean text must be spelled exactly as written, crisp and legible. No extra text, no watermark.
查看完整規格 JSON (pipeline/spec.json)
{
"summary": "신선한 콜드브루 커피 정기 구독 서비스를 소개하고 신청을 유도하는 랜딩페이지 디자인.",
"brand": {
"name": "MORNING BREW",
"industry": "식음료 / 커피 구독 서비스",
"tone": [
"모던함",
"신뢰감",
"따뜻함",
"미니멀"
]
},
"palette": [
{
"role": "background",
"hex": "#FFFFFF",
"usage": "전체 기본 배경색"
},
{
"role": "surface",
"hex": "#F5EFEB",
"usage": "히어로 섹션 배경 및 추천 플랜 카드 배경"
},
{
"role": "primary",
"hex": "#2B1A12",
"usage": "주요 버튼, 푸터 배경, 짙은 헤드라인"
},
{
"role": "text",
"hex": "#1F1F1F",
"usage": "본문 텍스트 및 기본 제목"
},
{
"role": "accent",
"hex": "#E5A93C",
"usage": "구독자 후기 별점 아이콘"
}
],
"typography": {
"headline": "Pretendard / Noto Sans KR (Bold/ExtraBold)",
"body": "Pretendard / Noto Sans KR (Regular/Medium)",
"weights": "400, 500, 700, 800",
"notes": "깔끔하고 가독성 높은 산세리프 폰트 계열, 명확한 자간과 행간"
},
"layout": {
"canvas": "desktop single column",
"grid": "최대 1200px 중앙 정렬 그리드",
"spacing": "섹션별 넉넉한 상하 패딩, 통일된 컴포넌트 간격",
"sections": [
{
"id": "nav",
"order": 1,
"type": "navigation",
"position": "top",
"background": "#FFFFFF",
"texts": [
"MORNING BREW",
"구독안내",
"원두",
"후기",
"FAQ",
"구독 시작"
],
"components": [
"logo",
"nav_links",
"button"
],
"notes": "좌측 로고, 중앙 메뉴, 우측 강조 CTA 버튼"
},
{
"id": "hero",
"order": 2,
"type": "hero_banner",
"position": "upper",
"background": "#F5EFEB",
"texts": [
"매일 아침, 문 앞에 갓 내린 콜드브루",
"새벽 로스팅 · 당일 추출 · 무료 배송",
"첫 달 30% 할인 받기"
],
"components": [
"headline",
"subheadline",
"cta_button",
"product_photo"
],
"notes": "좌측 텍스트 및 CTA 버튼, 우측 콜드브루 유리병 이미지 2열 구성"
},
{
"id": "benefits",
"order": 3,
"type": "features",
"position": "upper",
"background": "#FFFFFF",
"texts": [
"새벽 로스팅",
"매일 새벽 신선하게 로스팅된 원두를 사용합니다.",
"당일 추출",
"주문 당일 추출하여 가장 신선한 상태로 발송합니다.",
"언제든 해지",
"약정 없이 원할 때 언제든지 자유롭게 해지하세요."
],
"components": [
"icon",
"feature_title",
"feature_desc"
],
"notes": "3열 카드형 레이아웃, 라인 아이콘 적용"
},
{
"id": "pricing",
"order": 4,
"type": "pricing_table",
"position": "middle",
"background": "#FFFFFF",
"texts": [
"구독 플랜",
"라이트",
"주 3병",
"₩19,900 / 월",
"선택하기",
"스탠다드",
"인기",
"주 5병",
"₩29,900 / 월",
"선택하기",
"패밀리",
"주 10병",
"₩49,900 / 월",
"선택하기"
],
"components": [
"title",
"pricing_card",
"badge",
"button"
],
"notes": "3열 카드 구성, 중앙 스탠다드 카드에 배경색 및 '인기' 뱃지 강조"
},
{
"id": "reviews",
"order": 5,
"type": "testimonials",
"position": "middle",
"background": "#FFFFFF",
"texts": [
"구독자 후기",
"매일 아침 갓 내린 신선함이 너무 좋아요. 추천합니다!",
"김민지",
"가성비 최고입니다. 맛도 깔끔하고 배송도 빨라서 만족해요.",
"박준혁",
"정기 구독 덕분에 매일 아침이 즐거워졌어요. 최고!",
"이서연"
],
"components": [
"title",
"review_card",
"rating_stars"
],
"notes": "3열 박스 카드 레이아웃, 노란색 별점 5개 배치"
},
{
"id": "faq",
"order": 6,
"type": "accordion",
"position": "lower",
"background": "#FFFFFF",
"texts": [
"자주 묻는 질문",
"배송은 언제 오나요?",
"해지는 어떻게 하나요?",
"원두를 바꿀 수 있나요?"
],
"components": [
"title",
"accordion_item",
"icon_chevron"
],
"notes": "중앙 정렬 아코디언 리스트 형태"
},
{
"id": "footer",
"order": 7,
"type": "footer",
"position": "bottom",
"background": "#2B1A12",
"texts": [
"MORNING BREW",
"© 2026 모닝브루"
],
"components": [
"logo",
"copyright"
],
"notes": "짙은 브라운 단색 배경, 중앙 화이트 텍스트 정렬"
}
]
},
"imagery": [
{
"where": "hero",
"description": "우드 테이블 위 햇살을 받으며 얼음이 가득 담긴 투명한 유리병의 콜드브루 커피.",
"style": "photo"
},
{
"where": "benefits",
"description": "커피콩/시계, 드립퍼, 달력/해지 아이콘.",
"style": "icon"
}
],
"style_keywords": [
"모던",
"미니멀",
"웜톤",
"커피",
"깔끔한",
"정돈된 그리드"
],
"text_inventory": [
"MORNING BREW",
"구독안내",
"원두",
"후기",
"FAQ",
"구독 시작",
"매일 아침, 문 앞에 갓 내린 콜드브루",
"새벽 로스팅 · 당일 추출 · 무료 배송",
"첫 달 30% 할인 받기",
"새벽 로스팅",
"매일 새벽 신선하게 로스팅된 원두를 사용합니다.",
"당일 추출",
"주문 당일 추출하여 가장 신선한 상태로 발송합니다.",
"언제든 해지",
"약정 없이 원할 때 언제든지 자유롭게 해지하세요.",
"구독 플랜",
"라이트",
"주 3병",
"₩19,900 / 월",
"선택하기",
"스탠다드",
"인기",
"주 5병",
"₩29,900 / 월",
"선택하기",
"패밀리",
"주 10병",
"₩49,900 / 월",
"선택하기",
"구독자 후기",
"매일 아침 갓 내린 신선함이 너무 좋아요. 추천합니다!",
"김민지",
"가성비 최고입니다. 맛도 깔끔하고 배송도 빨라서 만족해요.",
"박준혁",
"정기 구독 덕분에 매일 아침이 즐거워졌어요. 최고!",
"이서연",
"자주 묻는 질문",
"배송은 언제 오나요?",
"해지는 어떻게 하나요?",
"원두를 바꿀 수 있나요?",
"MORNING BREW",
"© 2026 모닝브루"
],
"variant_prompts": {
"rebrand": "Keep the exact layout and section structure but rebrand to '그린모닝', a premium matcha latte subscription. Change the primary palette to matcha green (#4F7A3A) and light cream. Replace the cold brew bottle photo with a glass bottle of layered iced matcha latte. Update all text precisely: logo to '그린모닝', headline to '매일 아침, 문 앞에 신선한 말차 라떼', subheadline to '제주 유기농 말차 · 당일 블렌딩 · 무료 배송', CTA to '첫 달 30% 할인 받기'. Benefits to '유기농 말차', '당일 제조', '언제든 해지'. Plan names remain '라이트', '스탠다드', '패밀리' keeping prices '₩19,900 / 월', '₩29,900 / 월', '₩49,900 / 월'. Footer copyright '© 2026 그린모닝'. All Korean text crisp and legible.",
"localize_en": "Keep the exact layout, colors, and cold brew imagery unchanged, but translate all Korean texts to natural English: Nav: 'MORNING BREW', 'About', 'Beans', 'Reviews', 'FAQ', CTA 'Subscribe'. Hero: headline 'Fresh Cold Brew Delivered to Your Door Every Morning', subhead 'Dawn Roasted · Brewed Daily · Free Shipping', CTA 'Get 30% Off First Month'. Benefits: 'Dawn Roasting', 'Brewed Daily', 'Cancel Anytime'. Pricing: title 'Subscription Plans', cards 'Light' (3 bottles/wk, $19.90/mo), 'Standard' with 'Popular' badge (5 bottles/wk, $29.90/mo), 'Family' (10 bottles/wk, $49.90/mo), buttons 'Select Plan'. Reviews: title 'Subscriber Reviews'. FAQ: title 'Frequently Asked Questions', questions 'When will it be delivered?', 'How do I cancel?', 'Can I change beans?'. Footer: 'MORNING BREW', '© 2026 Morning Brew'."
},
"dev_components": [
"Sticky Navigation Bar with flex layout and CTA button",
"Hero Banner with 2-column responsive layout",
"Feature Benefits Section with 3-column icon card grid",
"Pricing Cards Component with highlighted featured card and badge",
"Testimonial Cards Grid with star rating component",
"FAQ Accordion with collapsible items and chevron toggle",
"Footer Section with centered branding text"
],
"app_ideas": [
"구독 플랜 선택 시 배송 요일 및 원두 종류(디카페인, 산미 등)를 커스텀하는 대화형 모달",
"마이페이지 내 다음 배송일 건너뛰기 및 실시간 배송 조회 토글 기능",
"구독 결제 시 첫 달 30% 할인 코드가 자동 적용되는 간편 결제 체크아웃 플로우"
]
}一份規格,三個分支
從逆向解析出的規格,我們同時執行三項作業:不使用原圖、只憑提示詞重新繪製;參照原圖重新品牌化;參照原圖切換語言。三項都在約一分鐘內完成。
像素還原為文字、素材與版面
生成的圖片直接送進 Gumson 的轉換排程。從這裡開始,文字變成真正的文字、照片變成獨立檔案、版面變成 CSS。轉換是需要數十分鐘的排程作業;此面板會即時顯示目前狀態。
原圖(Morning Brew)→ HTML
完成 C2609070C2F3BCA · 1536×2752 · 50 點・6 個區塊・品質 99%・39 分鐘
重新品牌化(Green Morning)→ HTML
完成 C260907C7F98A36 · 1536×2752 · 50 點・7 個區塊・品質 97%・29 分鐘
設計工具是匯出目標,而不是起點
把轉換後的 HTML 頁面網址交給 REBEAUTY Design API,就能得到分層的 .fig 與 .psd。若設計師需要微調,那時再開啟即可。
有了 HTML,程式設計只是在上面加一層
我們把轉換後的 HTML 交給程式設計代理,請它「讓它動起來」。一張設計圖片就變成了具備方案選擇、價格計算、FAQ 摺疊面板與可運作訂閱表單的頁面。
哪些是真的,哪裡仍需要人
- 圖片生成(53 秒)、逆向解析(13 秒)與三個變化版(並行 57 秒)在沒有人工介入下只花了兩分多鐘。HTML 轉換分別為 39 分鐘(原圖)與 29 分鐘(重新品牌化),是唯一的瓶頸。
- 逆向解析出的 JSON 一字不差地擷取了全部 43 段文案。只憑提示詞重新生成,結構、文案與價格也都完整回來 — 「設計的原始碼」是這份規格,而不是圖片。
- I2I 變化版能完美保留版面,卻會破壞小字。更改文案或語言必須在設計落到 HTML(真正的文字)之後進行 — 這正是 Gumson 的位置。
- 轉換後的 HTML 有 6 個區塊、品質 99%,並通過審核關卡。CSS 變數、BEM 類別、SVG 圖示、響應式與 FAQ 摺疊面板都已具備,Vibe coding 只花了 12 分鐘「疊加」(方案選擇、折扣計算、選項、申請表單、儲存)。
- Figma 檔案 49 秒,PSD 97 秒。設計工具檔案不再是流程的起點,而是匯出產物 — 只有設計師需要介入時才開啟。
- 設計師與網頁製作人員並沒有消失,而是移到了審核者的位置。剩下的判斷是錯字、法規文案與品牌契合度 — 而那個審核畫面,就是下方的原圖與結果 1:1 比較。


