流水线演示 · 真实运行记录

从一句话需求到应用,全程没有设计师

既没有打开 Figma,也没有打开 Photoshop。文字需求 → Nano Banana 生成图片 → Gemini 逆向解析 → 再生成与变体 → Gumson HTML 转换 → Figma/PSD → Vibe Coding。下面是 2026-09-07 的一次真实运行;转换阶段实时反映当前状态。

01需求
02图片生成
03逆向解析
04再生成与变体
05HTML 转换
06Figma · PSD
07Vibe Coding

图片生成 53.4s · 逆向解析 13.1s · 3 个变体并行 56.6s · HTML 转换 39 分钟 · .fig 48.7s · .psd 97.2s

01 – 02 需求 → 图片生成

设计从一句话开始

我们把需求写成提示词交给 google/nano-banana-pro (DropShot API)。从顶部导航到页脚,包括价格表和评价者姓名,一切都按原文出现在同一张图片里。

模型 google/nano-banana-pro (DropShot API)比例 · 分辨率 9:16 · 2K输出 1536×2752生成耗时 53.4秒
提示词 · 需求1670 chars
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.

引号中的韩文文案被原样绘制出来。图片模型“会写字”的能力,是这条流水线的起点。

Nano Banana 生成的 Morning Brew 落地页设计
生成 · 原图打开原图 ↗
03 逆向解析(图片 → 规格 → 提示词)

把图片还原成设计的“源代码”

我们把生成的图片交给 gemini-3.8-flash(REBEAUTY Gemini 网关),以 JSON 形式提取出配色、字体、版块结构、全部文案、再生成提示词和变体指令。人需要花不少时间才能写出的“这个设计为什么长这样”,机器在 13.1 秒内写完。

模型 gemini-3.8-flash(REBEAUTY Gemini 网关)耗时 13.1秒Token 数 5,158版块 7提取的文字 43个
PALETTE
#FFFFFF
background
#F5EFEB
surface
#2B1A12
primary
#1F1F1F
text
#E5A93C
accent
SECTIONS
  1. 01
    nav navigation MORNING BREW · 구독안내 · 원두 · 후기 · FAQ · 구독 시작
  2. 02
    hero hero_banner 매일 아침, 문 앞에 갓 내린 콜드브루 · 새벽 로스팅 · 당일 추출 · 무료 배송 · 첫 달 30% 할인 받기
  3. 03
    benefits features 새벽 로스팅 · 매일 새벽 신선하게 로스팅된 원두를 사용합니다. · 당일 추출 · 주문 당일 추출하여 가장 신선한 상태로 발송합니다. · 언제든 해지 · 약정 없이 원할 때 언제든지 자유롭게 해지하세요.
  4. 04
    pricing pricing_table 구독 플랜 · 라이트 · 주 3병 · ₩19,900 / 월 · 선택하기 · 스탠다드 …
  5. 05
    reviews testimonials 구독자 후기 · 매일 아침 갓 내린 신선함이 너무 좋아요. 추천합니다! · 김민지 · 가성비 최고입니다. 맛도 깔끔하고 배송도 빨라서 만족해요. · 박준혁 · 정기 구독 덕분에 매일 아침이 즐거워졌어요. 최고! …
  6. 06
    faq accordion 자주 묻는 질문 · 배송은 언제 오나요? · 해지는 어떻게 하나요? · 원두를 바꿀 수 있나요?
  7. 07
    footer footer MORNING BREW · © 2026 모닝브루

字体判断: Pretendard / Noto Sans KR (Bold/ExtraBold) · 깔끔하고 가독성 높은 산세리프 폰트 계열, 명확한 자간과 행간

再生成提示词 · 由规格推导247 words
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)
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% 할인 코드가 자동 적용되는 간편 결제 체크아웃 플로우"
    ]
}
04 再生成 · 变体

同一份规格,三个分支

基于逆向解析出的规格,我们同时运行了三个任务:不用原图、仅凭提示词重新绘制;参考原图换品牌;参考原图换语言。三个任务都在约一分钟内完成。

原图
原图T2I · 53.4s
直接由需求生成的基础图片。
再生成(仅提示词)
再生成(仅提示词)T2I · 56.6s
不用原图,仅凭逆向解析出的提示词重新生成。版块、文案、价格和颜色全部还原,只有首屏构图有所不同。
换品牌(抹茶 “Green Morning”)
换品牌(抹茶 “Green Morning”)I2I · 54.5s
参考原图,版式逐像素保留,只替换配色、商品和文案。正文小字出现错别字(如 “매일 새벽” → “배일 세먹”)。
英文版(I2I 翻译)
英文版(I2I 翻译)I2I · 55.1s
大字被翻译了,但正文和评价坏掉了(“Gold Brew”“Ponular”“$19,90”)。这证明文字应该放在 HTML 层,而不是图片层。
05 HTML 转换(Gumson)

像素重新变回文字、素材和版式

生成的图片直接进入 Gumson 转换队列。从这里开始,文字变成真正的文本,照片变成独立文件,版式变成 CSS。转换是需要数十分钟的排队任务;本面板实时显示当前状态。

原图(Morning Brew)→ HTML

完成 C2609070C2F3BCA · 1536×2752 · 50 积分 · 6 个版块 · 质量 99% · 39 分钟
AI 生成图片(原图)1536×2752
原始图片
转换后的 HTMLHTML

换品牌(Green Morning)→ HTML

完成 C260907C7F98A36 · 1536×2752 · 50 积分 · 7 个版块 · 质量 97% · 29 分钟
AI 生成图片(原图)1536×2752
原始图片
转换后的 HTMLHTML
07 Vibe Coding(HTML → 可运行的应用)

有了 HTML,编程只是叠在上面的一层

我们把转换后的 HTML 交给编程智能体,让它“把它做成能用的”。一张设计图变成了带套餐选择、价格计算、FAQ 折叠面板和可用订阅表单的页面。

新增功能 套餐选择 · 首月 30% 折扣计算 · 配送日 / 咖啡豆选项 · 订阅表单(校验 · 保存 · 完成)· FAQ 回答耗时 约 12 分钟(含智能体编写与验证)
运行过程中确认的事

哪些是真的,哪里仍需要人

  • 图片生成(53 秒)、逆向解析(13 秒)和 3 个变体(并行 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 对比。
Reclaim the web

现在就夺回被困在图片里的网页

注册即赠免费积分,无需信用卡。

订阅新闻通讯

第一时间获取新功能、集成方案与转换技巧。

转换 咨询