# 长页面 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 都长得像真实落地页里会出现的模块。

📝 提示词

```json
{
  "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）

📝 提示词

```json
{
  "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 网页化版

📝 提示词

```json
{
  "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 风格）

📝 提示词

```json
{
  "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）