product-showcase

产品展示生成器

生成一个真正能教会人们了解 Web 应用功能的营销网站。不只是一个主视觉区和功能网格，而是一个多页网站，包含真实截图、展示工作流的动画 GIF、功能深度介绍，以及从“这是什么”到“具体如何运作”的渐进式内容。

对于复杂应用、Agentic AI 工具，以及任何无法通过静态截图展现其价值的产品，这尤其有用。

深度级别

深度	输出	时长
quick	单页——主视觉区、功能、CTA。与之前相同。	15-20 分钟
standard	多页网站——主页、功能页面、带截图的工作原理页面。	1-2 小时
thorough	全面的网站——主页、各功能页面、动画 GIF 演示、用例、对比页面、文档风格的演示。	3-6 小时

默认：standard

浏览器工具检测

开始前，检测可用的浏览器工具：

1. Chrome MCP (mcp__claude-in-chrome__*) — 适用于需要身份验证的应用
2. Playwright MCP (mcp__plugin_playwright_playwright__*) — 适用于公开应用
3. playwright-cli — 适用于脚本化流程

工作流

1. 收集输入

字段	必填	示例
应用 URL	是	https://app.example.com 或 http://localhost:5173
应用名称	是	“Acme CRM”
标语	否	“让你轻松管理客户关系的 CRM”
目标受众	否	“小型企业主”
定价信息	否	免费套餐，专业版 $29/月
CTA 文案 + URL	否	“免费开始试用” → 注册页面
用户评价	否	由用户提供或跳过此部分

2. 捕获截图

使用 capture-screenshots（随附于 bin/ 中）捕获应用截图。与每次都生成 Playwright 脚本相比，这种方式更快、更一致。

快速捕获（一次捕获所有关键页面）：

capture-screenshots http://localhost:5173 \
  --pages /,/dashboard,/contacts,/settings \
  --output showcase/screenshots \
  --prefix screen \
  --mobile --dark

每个页面都会在一次运行中生成桌面版（1280x720）、移动版（375px）和深色模式变体。

对于需要身份验证的应用：

capture-screenshots https://app.example.com \
  --pages /,/dashboard,/settings \
  --auth user:password \
  --output showcase/screenshots \
  --mobile --dark

捕获内容：

a. 第一印象 — 主页面/仪表盘将作为主视觉图。记录其能立即展现的价值主张。

b. 功能 — 每个主要部分。使用 --pages 指定所有导航路径。捕获 6-10 个能够讲述产品故事的关键画面。

c. “工作原理”流程 — 按顺序展示主要工作流。沿着流程步骤导航时，多次运行 capture-screenshots，并使用 --prefix workflow-step。

d. 细节截图 — 放大特定 UI 元素。对于可滚动内容，使用 --full-page。

e. 两种模式 — --dark 标志会自动捕获浅色和深色变体。为主视觉区选择效果最佳的模式。

捕获后的优化：

img-process batch showcase/screenshots --action optimise --max-width 1920 -o showcase/screenshots-opt

f. 提炼价值主张

不要只列出功能。对于每项功能，都要回答：用户为什么会在意？

• 不佳：“联系人管理页面”
• 良好：“在一个视图中查看每位客户、他们的历史记录，以及需要关注的事项”
• 不佳：“搜索功能”
• 良好：“几秒内找到任何内容——语义搜索能理解你的意思，而不只是你输入的文字”

3. 生成网站

快速模式：单页（与之前相同）

一个 HTML 文件：主视觉区 + 功能网格 + CTA。适用于 MVP 和快速营销。

标准模式：多页网站

showcase/
├── index.html              # Home — hero, overview, feature highlights, CTA
├── features.html           # All features with screenshots and descriptions
├── how-it-works.html       # Step-by-step workflow walkthrough with screenshots
├── screenshots/            # All captured images
│   ├── hero.png
│   ├── feature-*.png
│   ├── workflow-step-*.png
│   └── *.gif               # Animated walkthroughs
└── styles.css              # Shared styles (or inline Tailwind CDN)

主页：主视觉区包含动画 GIF 或关键截图、3-4 个功能亮点（不包含所有功能，只展示最出色的部分）、“工作原理”概要（3 个步骤）和 CTA。

功能页面：为每项功能配上真实截图和侧重收益的说明。如果功能有 6 项或以上，按类别分组。为每项功能留出足够空间，充分说明其作用。

工作原理页面：将主要工作流制作为分步骤的可视化指南。每个步骤都包含一张截图（或动画 GIF）、一个标题和 2-3 句话。此页面要回答：“好吧，但实际使用起来是什么样的？”

详尽模式：全面的网站

showcase/
├── index.html              # Home — hero, overview, value proposition
├── features/
│   ├── index.html          # Feature overview grid
│   ├── [feature-1].html    # Deep-dive: one page per major feature
│   ├── [feature-2].html    # Each with screenshots, GIFs, use cases
│   └── [feature-n].html
├── how-it-works.html       # Full workflow walkthrough
├── use-cases/
│   ├── [use-case-1].html   # Scenario: "A day in the life of..."
│   └── [use-case-2].html   # Scenario: "When a new client calls..."
├── compare.html            # "Why [app] vs alternatives" (optional)
├── screenshots/
│   ├── hero.png
│   ├── feature-*/           # Per-feature screenshot sets
│   └── workflows/           # Animated GIFs
└── styles.css

深入介绍各项功能的页面：每项主要功能都有自己的页面，包含：

• 展示该功能实际使用效果的主视觉截图
• “功能介绍”——用 1-2 段文字说明其价值
• “工作原理”——配合截图或 GIF 分步骤说明
• “重要意义”——说明该功能解决的问题
• 边界情况或高级用户技巧
• 指向下一项功能的链接（串联各页面）

使用场景页面：以故事为主线，展示应用在真实场景中的使用方式：

• “周一早上，你打开仪表板，看到……”
• 配合每一步的截图，介绍真实的工作流
• 展示使用结果——用户使用该应用后有什么变化
• 对于难以解释的应用，这类页面最有说服力

对比页面（可选）：“为什么选 [app] 而不是 [alternatives]”——客观对比，不要堆砌营销辞藻。提供功能表、主要差异，以及最适合的用户群体。

4. 动画 GIF 演示

静态截图无法展现工作流。对于关键功能，请录制展示实际交互过程的动画 GIF：

录制方法（使用 Playwright 或 Chrome MCP）：

1. 导航到起始状态
2. 以约 2 fps 的速度开始录制截图
3. 执行工作流（点击、输入、导航）
4. 停止录制
5. 将帧合成为 GIF

生成 GIF——依次截取屏幕截图，然后合并：

# Capture each step with a sequential prefix
capture-screenshots http://localhost:5173/clients \
  --prefix workflow-01 --output .jez/screenshots
# ... navigate to next state ...
capture-screenshots http://localhost:5173/clients/new \
  --prefix workflow-02 --output .jez/screenshots

# Combine frames into GIF (Python one-liner using Pillow)
python3 -c "
from PIL import Image; import glob
frames = [Image.open(f) for f in sorted(glob.glob('.jez/screenshots/workflow-*.png'))]
frames[0].save('showcase/screenshots/workflows/create-client.gif',
    save_all=True, append_images=frames[1:], duration=500, loop=0)
"

适合制作动画的内容：

• 主要的“创建内容”流程（2-4 秒）
• 搜索/筛选交互（展示结果逐渐出现）
• 拖放或重新排序操作
• 深色模式切换（视觉效果令人愉悦）
• 应用执行出色操作的任何“惊艳时刻”（AI 分类、即时搜索、实时更新）

GIF 指南：

• 最长 10 秒 / 20 帧——越短越好
• 以 1280x720 录制，以 640x360 显示（缩小一半以减小文件体积）
• 在最终状态停留片刻（3 帧），让观看者看清结果
• 连续循环播放——无需“点击播放”
• 如果 GIF 超过 5MB，请减少帧数或裁剪到相关区域

在 HTML 中显示：

<div class="browser-frame">
  <div class="browser-frame-bar">
    <span class="browser-frame-dot"></span>
    <span class="browser-frame-dot"></span>
    <span class="browser-frame-dot"></span>
  </div>
  <img src="screenshots/workflows/create-client.gif"
       alt="Creating a new client in 3 clicks"
       loading="lazy" width="640" height="360">
</div>

5. 介绍 Agentic / AI 应用

Agentic 应用尤其难以推广，因为其价值不可见——AI 完成了用户看不到的工作。标准截图只会展示聊天界面，这并不吸引人。

适用于 Agentic 应用的有效模式：

模式	展示内容	示例
前后对比	用户过去手动完成的工作与 Agent 完成的工作	“过去：在 3 个系统间复制粘贴。现在：Agent 在后台完成。”
时间线	随时间发生的事情——展示 Agent 在数小时或数天内的工作	“上午 8 点：Agent 检查收件箱。上午 9 点：分类 47 封邮件。上午 10 点：标记 3 封紧急邮件。”
成果展示	略过过程，直接展示结果	“Agent 从 1,200 封邮件中挖掘出 → 89 位客户、340 位联系人、2,100 条知识事实”
并排对比	将 Agent 的工作与人工完成的工作并列展示	分屏显示：左侧是原始邮件，右侧是提取出的结构化数据
惊艳时刻 GIF	用一段动画展示最令人印象深刻的功能	用户提问 → Agent 搜索知识库 → 返回附有来源的答案

Agentic 应用文案技巧：

• 突出成果，而非技术（“了解每位客户的历史”而不是“AI 驱动的 CRM”）
• 展示处理量（“已处理 1,200 封邮件”比“处理你的邮件”更令人印象深刻）
• 使用时间对比（“原本需要 2 小时，现在只需 30 秒”）
• 避免术语（“在你的数据中发现联系”而不是“使用 RAG 的语义向量搜索”）

5. 截图展示

截图使用 CSS 显示在浏览器框架样机中：

.browser-frame {
  border-radius: 8px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.1);
}
.browser-frame-bar {
  background: #f1f5f9;
  padding: 8px 12px;
  display: flex;
  gap: 6px;
}
.browser-frame-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e2e8f0;
}

这样无需编辑图片，就能让截图呈现精致的“浏览器中的应用”效果。

6. 网站导航（多页面）

多页面网站需要统一的导航：

<nav>
  <a href="/">Home</a>
  <a href="/features/">Features</a>
  <a href="/how-it-works.html">How It Works</a>
  <a href="/use-cases/">Use Cases</a>  
  <a href="#pricing">Pricing</a>
  <button>Get Started</button>
</nav>

• 所有页面均显示固定导航栏
• 高亮显示当前页面
• 移动端汉堡菜单
• 导航栏中始终显示 CTA 按钮

7. 输出

生成后，告知用户：

• 预览：运行 python3 -m http.server -d showcase，然后打开 http://localhost:8000
• 部署：将 showcase/ 文件夹拖到 Cloudflare Pages、Netlify 或任意静态托管平台
• 列出所有需要替换的占位内容
• 说明生成了哪些 GIF 及其文件大小

设计模式

配色：如果应用有鲜明的品牌色，提取该颜色并用作主色。否则，默认使用中性色调（石板灰／蓝色）。

排版：使用系统字体栈（不发起外部请求）。采用与 landing-page 相同的方法。

响应式：移动优先，截图应能平滑缩小。在移动设备上，截图应垂直堆叠，而不是使用网格。

深色模式：提供三态切换（浅色／深色／跟随系统），并使用 CSS 自定义属性。

性能：延迟加载截图。使用 Tailwind CDN 进行样式设置。无需构建步骤。

打造高级质感

截图优化

• 数据真实：截图前，确保应用中有真实感的数据，不要使用“Test Client”和“[email protected]”之类的内容
• 统一窗口尺寸：所有截图使用相同的视口宽度（1280x720）
• 截图中不显示浏览器界面：使用 CSS 浏览器窗口框架模拟，而不是截取 Chrome 工具栏
• 突出操作：如果截图展示某项功能，请确保该功能处于活动或打开状态（打开模态框、应用筛选条件、选中项目）

视觉叙事

• 以仪表盘开场：主视觉截图应展示填充了数据的应用，让人感觉它真实、有用
• 展示应用如何工作：展示结果的截图胜过空白表单的截图
• 循序渐进地呈现：主视觉展示全貌，“工作原理”展示流程，“功能”展示细节
• 以成果收尾：CTA 之前的最后一个部分应展示最终成果，例如生成的报告、已完成的任务或已管理的客户

混合使用截图和模型图

真实截图能证明产品真实存在，模型图能展现产品的精致感。两者兼用：

• 主视觉：在浏览器窗口框架模型图中放入真实截图，证明应用确实存在且外观出色
• 工作原理：流程步骤可使用简化的模型图示（CSS 形状、图标、箭头），细节部分则使用真实截图
• 功能网格：使用真实截图，用户想看到实际的 UI
• 移动端展示：在移动端截图外加上 CSS 设备框架模型图（手机轮廓）
• 仪表盘／概览：使用真实截图——这是最吸引人的展示画面

手机模型框架（CSS）：

.phone-frame {
  border: 8px solid #1f2937;
  border-radius: 32px;
  overflow: hidden;
  max-width: 280px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.3);
}
.phone-frame-notch {
  background: #1f2937;
  height: 24px;
  border-radius: 0 0 16px 16px;
  width: 120px;
  margin: 0 auto;
}

动画（仅使用 CSS，无需 JS）

/* Fade in sections as user scrolls (intersection observer via CSS) */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.section { animation: fadeInUp 0.6s ease-out both; }

/* Subtle float on hero screenshot */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.hero-screenshot { animation: float 6s ease-in-out infinite; }

渐变点缀

提取应用的主色，并将其用于各部分的微妙渐变背景：

.hero { background: linear-gradient(135deg, var(--primary) 0%, transparent 60%); }
.cta-banner { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; }

部署

展示站点需要托管在实际平台上，而不能只从文件打开。根据可用选项进行选择：

选项 1：Cloudflare Workers 搭配静态资源（推荐）

如果展示的应用已经运行在 Cloudflare 上，也将展示站点部署为 Worker：

# In the showcase/ directory, create a minimal wrangler.jsonc:
{
  "name": "myapp-showcase",
  "main": "src/index.ts",  // or use static-only pattern
  "compatibility_date": "2026-03-01",
  "assets": { "directory": "./" }
}

npx wrangler deploy

也可以绑定自定义域名：showcase.myapp.com 或 myapp.com（如果应用本身位于 app.myapp.com）。

选项 2：Cloudflare Pages（拖放部署）

控制面板 → Pages → Create → Upload assets → 拖入 showcase/ 文件夹。即可立即获得 .pages.dev URL。

选项 3：静态托管平台（Netlify、Vercel、GitHub Pages）

任何静态托管平台都可以——它只包含 HTML + CSS + 图片，不需要服务端代码。

自定义域名

要打造专业的展示站点，务必使用自定义域名：

• myapp.com — 展示站点作为主站，应用位于 app.myapp.com
• www.myapp.com → 展示站点，app.myapp.com → 实际应用

联系／咨询表单

每个展示站点都需要提供联系渠道，方便感兴趣的人咨询。不要只写“给我们发邮件”——添加一个真正的表单。

模式 1：Formspree／Formsubmit（无需后端）

<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
  <input type="text" name="name" placeholder="Your name" required>
  <input type="email" name="email" placeholder="Your email" required>
  <textarea name="message" placeholder="Tell us about your needs"></textarea>
  <button type="submit">Get in Touch</button>
</form>

免费套餐足以应对大多数展示站点的提交量。提交内容会发送到你的电子邮箱。

模式 2：Cloudflare Worker 端点

如果展示站点部署在 Workers 上，可添加一个 /api/enquiry 路由：

app.post('/api/enquiry', async (c) => {
  const { name, email, message } = await c.req.json();
  // Send via SMTP2Go, Resend, or store in D1
  await sendEmail({ to: '[email protected]', subject: `Enquiry from ${name}`, body: message });
  return c.json({ success: true });
});

模式 3：Turnstile + 电子邮件（垃圾信息防护）

添加 Cloudflare Turnstile，防止机器人提交：

<div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY"></div>

在处理提交内容之前，先在服务端验证令牌。

表单应收集的信息

字段	必填	原因
姓名	是	个性化后续跟进
电子邮件	是	回复渠道
公司/职位	否，但有帮助	判断潜在客户的意向
消息 /“您在寻找什么？”	否，但有帮助	为回复提供背景信息
电话	否	有些人更喜欢电话沟通

提交后：跳转到感谢页面，或显示内嵌确认信息。不要只是静默重置表单。

值得生成的其他页面

页面	何时添加	用途
定价	已确定定价时	展示套餐卡片、功能对比和计费常见问题
关于	产品有发展故事时	介绍构建者、构建原因和发展历程（可搭配 jez-voice）
更新日志	已发布的产品	展示近期更新，表明产品仍在积极开发
文档链接	存在 app-docs 时	链接到由 /app-docs 生成的用户指南
博客 / 文章	存在相关内容时	链接到新闻简报存档或介绍产品的博客文章
隐私 / 条款	始终添加	即使只是占位内容，也能体现可信度
状态页面	SaaS 产品	链接到运行时间监控（Cloudflare 健康检查）

SEO 基础

每个展示页面都应包含：

<title>[App Name] — [Tagline]</title>
<meta name="description" content="[One sentence value proposition]">
<meta property="og:title" content="[App Name]">
<meta property="og:description" content="[Value proposition]">
<meta property="og:image" content="screenshots/hero.png">
<link rel="canonical" href="https://myapp.com/">

对于多页面网站：每个页面都要使用自己的标题和描述。不要在所有页面使用相同的元数据。

如果产品面向特定地区，请使用 seo-local-business 技能生成 JSON-LD。

质量规则

1. 只展示真实功能的截图——不要虚构应用不具备的功能
2. 选择最好的截图——并非每个页面都适合作为展示内容。选择最能讲述产品故事的页面
3. 撰写以收益为导向的文案——使用“在一个地方查看所有联系人”，而不是“联系人列表页面”
4. 不要伪造用户评价——如果没有提供评价，就省略该部分
5. 不要编造统计数据——如果没有真实数据，就将统计模块留空
6. 部署到真实 URL——不要只保留为本地文件。展示页面需要能够分享