PIPELINE DEMO · 実行ログ

一行のブリーフからアプリまで、デザイナーなしで

Figma も Photoshop も開いていません。テキストブリーフ → Nano Banana 画像 → Gemini リバースエンジニアリング → 再生成・バリエーション → Gumson HTML変換 → Figma/PSD → バイブコーディング。以下は 2026-09-07 に実際に一度通した記録で、変換ステップは現在の状態をそのまま反映します。

01ブリーフ
02画像生成
03リバースエンジニアリング
04再生成・バリエーション
05HTML変換
06Figma · PSD
07バイブコーディング

画像生成 53.4s · リバースエンジニアリング 13.1s · 3つのバリエーションを並列実行 56.6s · HTML変換 39分 · .fig 48.7s · .psd 97.2s

01 – 02 ブリーフ → 画像生成

デザインは一文から始まる

ブリーフをプロンプトにして google/nano-banana-pro (DropShot API) に送りました。上部ナビからフッターまで、価格表やレビュアー名も含めて、書いたとおりの1枚の画像として出力されました。

モデル google/nano-banana-pro (DropShot API)比率・解像度 9:16 · 2K出力 1536×2752生成時間 53.4秒
PROMPT · ブリーフ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秒トークン 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) · 깔끔하고 가독성 높은 산세리프 폰트 계열, 명확한 자간과 행간

REGEN PROMPT · スペックから導いた再生成プロンプト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)
{
    "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 再生成・バリエーション

一つのスペックから三つの枝へ

リバースエンジニアリングしたスペックから3つのジョブを同時に実行しました。元画像なしにプロンプトだけで描き直す、元画像を参照してリブランドする、元画像を参照して言語を切り替える。3つとも約1分で完了しました。

オリジナル
オリジナル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 バイブコーディング(HTML → 動くアプリ)

HTMLさえあれば、プログラミングはその上に重ねる一層

変換したHTMLをコーディングエージェントに渡し、「動くようにして」と頼みました。1枚のデザイン画像が、プラン選択・価格計算・FAQアコーディオン・動く申込フォームを備えたページになりました。

追加した機能 プラン選択 · 初月30%の計算 · 配送曜日/豆のオプション · 申込フォーム(検証・保存・完了)· FAQの回答所要時間 約12分(エージェントの作成・検証を含む)
実行して確認できたこと

何が本物で、どこにまだ人が必要か

  • 画像生成(53秒)・リバースエンジニアリング(13秒)・バリエーション3種(並列57秒)まで、人の手を介さずに2分あまり。HTML変換は39分(オリジナル)・29分(リブランド)で、唯一のボトルネックだ。
  • リバースエンジニアリングしたJSONは43の文言を一文字も違えずに抽出した。プロンプトだけで再生成しても構造・文言・価格がそのまま戻ってくる — 「デザインのソースコード」は画像ではなく、このスペックだ。
  • I2Iバリエーションはレイアウトを完璧に守るが、小さな文字を壊す。文言や言語を変える作業は、HTMLに降りた後(本物のテキスト)に行うべきだ — Gumson の居場所はここにある。
  • 変換されたHTMLはセクション6・品質99%・検証ゲート通過。CSS変数・BEMクラス・SVGアイコン・レスポンシブ・FAQアコーディオンまで備えて出てきたので、バイブコーディングは「重ねる」12分で終わった(プラン選択・割引計算・オプション・申込フォーム・保存)。
  • Figma ファイルは49秒、PSD は97秒。デザインツールのファイルはパイプラインの出発点ではなく書き出しの成果物になった — デザイナーが手を入れる必要が生じたときに開く。
  • デザイナーとパブリッシャーが消えたのではなく、「検証者」の席に移った。残る判断は誤字・規制文言・ブランド適合性で、その検証画面が下のオリジナルと結果の1:1比較だ。
Reclaim the web

画像に閉じ込められたウェブを、今取り戻しましょう

ご登録と同時に無料クレジットを差し上げます。クレジットカードは不要です。

ニュースレターを購読

新機能・連携・変換のコツを、いち早くお届けします。

変換 問い合わせ