teamai-test/.teamai/skills/common/gpt-image-2/references/ui-mockups/landing-page-case-study.md

长页面 Landing Page / Case Study UI 样机模板

本文件用于生成"完整的一整页 SaaS / 营销 / case study 落地页 UI 样机"——把多个 section（hero / strategy / performance / social proof / CTA）从上到下拼到一张超长图里。

典型用途：

• SaaS 产品官网首页 mockup
• 营销 case study 长页面（投后报告 / KPI 复盘）
• 增长 / agency 业务介绍页
• Y Combinator 风格 demo day 项目页
• 客户提案稿 / 投资人 deck 的网页化展示

特征（与现有 UI 模板的区别）：

模板	视觉范围	适用场景
chat-interface-scene.md	单屏聊天界面	iMessage / 微信 / 群聊
social-interface-mockup.md	单屏社交动态详情	Twitter / 小红书 / 微博
live-commerce-ui.md	单屏直播 UI 叠加	抖音 / 淘宝直播
product-card-overlay.md	单屏 hero / 详情主图	电商详情页主图
本模板	完整长页面（5-7 个 section 纵向拼接）	SaaS / 营销长页面 / case study

适用范围

• SaaS 落地页 / 产品官网首页
• 营销 case study 长页面
• 增长复盘报告 web 版
• 投资人 / 客户提案的网页样机
• Agency 业务介绍长页面

何时使用

• 用户提到"落地页 / landing page / case study / 一整页 / 长页面 / 网站 mockup"
• 用户希望出"从上到下完整 section 结构"而不是单屏截图
• 客户需要看到「hero → 数据 → 时间线 → 社交证明 → CTA」完整营销叙事

不要使用：

• 单屏 UI 截图 → 用 chat-interface-scene / social-interface-mockup / live-commerce-ui
• 仅 hero section → 用 poster-and-campaigns/banner-hero.md
• 真实可交互的 HTML 网页 → 应当生成 HTML 代码而非图片

缺失信息优先提问顺序

1. 业务类型（SaaS / agency / 课程 / case study / 投后报告）
2. 品牌 / 主标 + 一句话定位
3. 是「营销 case study」（要展示数据 + 客户 logo）还是「产品官网首页」（要展示功能 + 截图）
4. 配色基调（深色 + 霓虹 / 纯白 + 强色 accent / 浅米色商务 / 玻璃拟态）
5. 必须出现的核心数据（GMV / 播放量 / 客户数 / 增长率）
6. 是否要客户 logo 墙 / 推荐语 / CTA 表单
7. 比例（3:4 / 9:16 长截图 / 整张 desktop 截图）

主模板：营销 case study 长页面 mockup

📖 描述

一张超长截图，从上到下 6-7 个独立 section，整体用统一深色 + 霓虹 accent，每个 section 都长得像真实落地页里会出现的模块。

📝 提示词

{
  "type": "UI/UX landing page mockup",
  "goal": "生成一张高仿真的营销 case study 长页面截图，可以作为提案稿、投后报告或作品集封面",
  "theme": "{argument name=\"theme\" default=\"dark mode, sleek modern aesthetic, glassmorphism, neon purple and blue glowing accents\"}",
  "viewport": {
    "width": "{argument name=\"viewport width\" default=\"desktop 1440px width\"}",
    "scroll_capture": "{argument name=\"capture style\" default=\"full-page screenshot, vertical scroll captured into one tall image\"}",
    "aspect_ratio": "{argument name=\"aspect ratio\" default=\"3:4 portrait long page\"}"
  },
  "header": {
    "logo": "{argument name=\"brand name\" default=\"goViralX\"}",
    "nav_items": ["Home", "Case Studies", "Pricing", "Contact"],
    "top_right_cta": "{argument name=\"top cta\" default=\"Login\"}",
    "top_right_tag": "{argument name=\"top right tag\" default=\"VIRAL CAMPAIGN CASE STUDY\"}"
  },
  "layout": {
    "section_count": 6,
    "section_separation": "subtle horizontal divider, 80-120px vertical breathing room",
    "sections": [
      {
        "name": "Hero",
        "position": "top",
        "headline": "{argument name=\"hero headline\" default=\"How We Created 10M+ Viral Impact\"}",
        "subheadline": "{argument name=\"hero subhead\" default=\"3 天引爆全网, 助力品牌实现指数级增长\"}",
        "stats_row": {
          "count": 4,
          "labels": ["{argument name=\"stat label 1\" default=\"总播放量\"}", "{argument name=\"stat label 2\" default=\"互动率\"}", "{argument name=\"stat label 3\" default=\"转化咨询\"}", "{argument name=\"stat label 4\" default=\"执行周期\"}"],
          "values": ["{argument name=\"stat value 1\" default=\"10,240,000+\"}", "{argument name=\"stat value 2\" default=\"18.7%\"}", "{argument name=\"stat value 3\" default=\"3,200+\"}", "{argument name=\"stat value 4\" default=\"72小时\"}"]
        },
        "visual": "{argument name=\"hero visual\" default=\"cinematic shot of a person in a hoodie looking at glowing digital screens and graphs, large play button overlay\"}"
      },
      {
        "name": "Strategy",
        "title": "{argument name=\"strategy title\" default=\"Our 3-Day Execution Strategy\"}",
        "layout_type": "vertical timeline",
        "steps_count": 3,
        "elements_per_step": ["timeline node circle", "step title", "3 bullet points", "video thumbnail with play button", "description box"],
        "step_titles": ["Day 1: Asset Production", "Day 2: Multi-Platform Launch", "Day 3: Amplification & PR"]
      },
      {
        "name": "Performance",
        "title": "{argument name=\"perf title\" default=\"Data-Driven Performance\"}",
        "left_column": {
          "stat_cards_count": 4,
          "values": ["10M+", "43%", "28,000+", "3,200+"],
          "labels": ["Total Views", "Engagement", "New Followers", "Leads"]
        },
        "right_column": {
          "charts_count": 2,
          "chart_1": "line graph showing 7-day growth peaking at Day 3, x-axis days 1-7, y-axis views, glowing line",
          "chart_2": "horizontal segmented bar chart showing platform distribution (TikTok 52%, Instagram 24%, X 15%, YouTube 9%)"
        }
      },
      {
        "name": "Keys to Success",
        "title": "{argument name=\"keys title\" default=\"The 3 Keys to Viral Success\"}",
        "cards_count": 3,
        "card_elements": ["glowing icon (fire / target / antenna)", "card title", "2-line description", "VIEW DETAIL link with arrow"]
      },
      {
        "name": "Social Proof",
        "title": "{argument name=\"sp title\" default=\"TRUSTED BY CREATORS & BRANDS\"}",
        "left_column": {
          "logos_count": 8,
          "grid": "2x4",
          "brands": ["{argument name=\"logo 1\" default=\"SHEIN\"}", "SHOPLINE", "Blueglass", "instacart", "lemon8", "mi", "CIDER", "bellroy"]
        },
        "right_column": {
          "testimonial_cards_count": 2,
          "elements": ["large quotation mark", "italic quote text", "author avatar circle", "author name + title (e.g. SaaS Founder, Growth Manager)"]
        }
      },
      {
        "name": "Call to Action",
        "title": "{argument name=\"cta title\" default=\"READY TO GO VIRAL?\"}",
        "interactive_elements": [
          "text input field with placeholder '{argument name=\"input placeholder\" default=\"Your work email\"}'",
          "glowing button with text '{argument name=\"call to action text\" default=\"获取专属增长方案 ->\"}'"
        ],
        "visual": "{argument name=\"cta visual\" default=\"3D render of a rocket ship taking off with purple and blue flames\"}"
      }
    ]
  },
  "footer": {
    "logo": "{argument name=\"brand name\" default=\"goViralX\"}",
    "columns": ["Product", "Company", "Resources", "Legal"],
    "social_icons": ["X", "LinkedIn", "YouTube", "Instagram"],
    "copyright": "© 2026 {argument name=\"brand name\" default=\"goViralX\"}. All rights reserved."
  },
  "global_style": {
    "rendering": "production-quality web UI mockup, sharp pixel-perfect typography, realistic component spacing, modern web design",
    "typography": "modern sans-serif (Inter / Space Grotesk feel), strong size hierarchy across sections",
    "color_tone": "{argument name=\"color tone\" default=\"dark navy / charcoal background, neon purple + electric blue accents, white-90% body text\"}",
    "components": "rounded corners 12-16px, soft glassmorphism cards, subtle shadows, accent gradient buttons",
    "browser_chrome": "{argument name=\"chrome\" default=\"none, just the page itself\"}"
  },
  "constraints": {
    "must_keep": [
      "6 个 section 从上到下顺序清晰、可独立识别",
      "每个 section 的内部组件都符合常规网页设计（卡片 / 网格 / 时间线 / chart）",
      "数据可读、字体清晰、对比度足够",
      "整体看起来像真实可滚动的网页截图，而不是 PPT 拼贴"
    ],
    "avoid": [
      "section 之间没有视觉分隔（容易混在一起）",
      "把 chart 画成示意图而非真实数据可视化",
      "logo 墙的品牌名变得不可读",
      "CTA 按钮颜色与全页配色冲突",
      "Hero 占据 80%+ 高度（导致下面 section 被压扁）"
    ]
  }
}

参数策略

• 必问：brand name + 业务定位、core data values、配色基调
• 可默认：nav items、footer columns、stat labels（按业务类型推荐）
• 可随机：客户 logo 墙的具体品牌（按行业匹配真实存在的品牌名）、推荐语 quote 内容

自动补全策略

• 用户只说"营销 case study 落地页"→ 默认深色 + 霓虹方案 + 6 section 标准结构
• 用户给了核心数据（如「3 天 1000 万播放」）→ 自动反推 stat label / chart / strategy timeline
• 用户没说客户 logo → 按行业生成 8 个真实存在的品牌名（不要造假名）

变体 1：SaaS 产品官网首页（feature-driven）

📝 提示词

{
  "type": "SaaS product homepage mockup",
  "section_count": 7,
  "sections": [
    "Hero (headline + subhead + CTA + dashboard screenshot)",
    "Logo Strip (8 customer logos)",
    "Feature Grid (3x2 = 6 features with icon + title + description)",
    "How It Works (3-step process)",
    "Product Screenshot Showcase (1 large dashboard image)",
    "Pricing (3 tiers comparison table)",
    "Testimonials + CTA"
  ],
  "theme": "{argument name=\"theme\" default=\"clean white + accent blue, modern startup\"}",
  "must_have": "1 prominent product UI screenshot embedded in Hero, 1 dashboard image in showcase section"
}

何时选这个变体

• 用户做的是 SaaS 产品官网而非 case study
• 需要展示「产品长什么样」（截图嵌套截图）
• 需要 pricing table

变体 2：投资人 / 客户 deck 网页化版

📝 提示词

{
  "type": "investor / client pitch deck rendered as one long landing page",
  "section_count": 8,
  "sections": [
    "Hero (problem statement)",
    "Solution Overview",
    "Market Size (chart)",
    "Product Demo (screenshots)",
    "Traction (key metrics + growth chart)",
    "Team (4 avatars + roles)",
    "Roadmap (4 phases timeline)",
    "Ask + Contact"
  ],
  "theme": "professional, premium, slightly editorial, soft shadow + light grid background",
  "tone": "credible, ambitious, data-backed"
}

何时选这个变体

• 创业者要做 demo day 提案的网页化版
• 把 Keynote deck 转成可分享的网页样机
• 需要"传统 deck"的所有要素（market / team / ask）

变体 3：玻璃拟态 + 渐变（流行 2026 风格）

📝 提示词

{
  "type": "glassmorphism landing page",
  "theme_override": {
    "background": "deep purple-to-pink gradient with floating blur orbs",
    "cards": "frosted glass effect (backdrop-blur 20px), 1px white border at 20% opacity",
    "accents": "neon green and hot pink glow",
    "typography": "ultra-bold sans-serif headlines, very thin weight body"
  },
  "section_count": 5,
  "sections": ["Hero", "Feature Cards 3x", "Stats", "Testimonials", "CTA"],
  "vibe": "Y2K x Apple Vision Pro x Linear.app"
}

何时选这个变体

• 设计驱动型品牌 / AI 工具 / 创意产品
• 需要在 SNS 引发设计师转发
• 客户希望做「视觉惊艳」而非「企业稳重」

避免事项

• ❌ section 之间分隔不清 → 必须有 80-120px 留白 + 颜色 / 背景微差
• ❌ 把图表画成纯装饰（必须看起来像真实数据曲线）
• ❌ logo 墙强行造假品牌名（用真实知名品牌或明确标注「示例」）
• ❌ CTA 按钮颜色和品牌色冲突 → 应该是品牌色的 accent 版本
• ❌ Hero 区域过大压扁后续 section（hero ≤ 35% 总高度）
• ❌ 全页只用一种字号 → 必须有 ≥ 4 级 hierarchy（H1 / H2 / Body / Caption）
• ❌ 把模板里的占位文字（"VIEW DETAIL"）原样保留 → 应根据业务替换成真实文案
• ❌ 输出比例选错（如 1:1 会装不下完整长页面，建议 3:4 / 9:16）