Back to Details

product-showcase

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Product Showcase Generator

产品展示生成器

Generate a marketing website that shows off a running web app. Unlike the 
landing-page
skill (which works from a brief), this skill explores the actual app via browser automation, captures real screenshots, discovers features, and builds a showcase page from what the product actually does.
生成一个展示运行中Web应用的营销网站。与
landing-page
技能（基于文本简介生成）不同，本技能通过浏览器自动化探索实际应用、捕获真实截图、发现功能特性，并基于产品的实际功能构建展示页面。

How It Differs from 
landing-page

与
landing-page
的区别

landing-page
product-showcase
Works from a text briefWorks from a running app
Placeholder imagesReal screenshots from the app
User describes featuresFeatures discovered by browsing
No browser automationRequires browser automation
Generic marketing structureStructured around app's actual workflows
landing-page
product-showcase
基于文本简介生成基于运行中的应用生成
使用占位图片使用应用的真实截图
用户描述功能特性通过浏览自动发现功能特性
无需浏览器自动化需要浏览器自动化
通用营销页面结构围绕应用实际工作流程构建

Browser Tool Detection

浏览器工具检测

Before starting, detect available browser tools:
  1. Chrome MCP (
    mcp__claude-in-chrome__*
    ) — preferred for authenticated apps
  2. Playwright MCP (
    mcp__plugin_playwright_playwright__*
    ) — for public apps
  3. playwright-cli — for scripted flows
开始前，先检测可用的浏览器工具：
  1. Chrome MCP (
    mcp__claude-in-chrome__*
    ) — 适用于需要身份验证的应用，为首选工具
  2. Playwright MCP (
    mcp__plugin_playwright_playwright__*
    ) — 适用于公开访问的应用
  3. playwright-cli — 适用于脚本化流程

Workflow

工作流程

1. Gather Input

1. 收集输入信息

FieldRequiredExample
App URLYes
https://app.example.com
or 
http://localhost:5173
App nameYes"Acme CRM"
TaglineNo"The CRM that gets out of your way"
Target audienceNo"Small business owners"
Pricing infoNoFree tier, $29/mo pro
CTA text + URLNo"Start Free Trial" → signup page
TestimonialsNoUser provides or skip section
字段是否必填示例
应用URL是
https://app.example.com
或 
http://localhost:5173
应用名称是"Acme CRM"
标语否"不添乱的CRM系统"
目标受众否"小企业主"
定价信息否免费版，专业版29美元/月
CTA文本+链接否"开始免费试用" → 注册页面
客户评价否用户提供或跳过该板块

2. Explore the App

2. 探索应用

Navigate the app and capture the story:
浏览应用并记录产品特性：

a. First Impression

a. 第一印象采集

  • Load the app's main page/dashboard
  • Screenshot at 1280x720 — this becomes the hero image
  • Note the immediate value proposition (what does the user see first?)
  • 加载应用主页/仪表盘
  • 截取1280x720尺寸的截图 — 作为Hero区图片
  • 记录核心价值主张（用户首次看到的核心内容）

b. Discover Features

b. 发现功能特性

Navigate through each major section:
  • Click every nav item, tab, and major UI element
  • For each feature area, take a clean screenshot showing it in action
  • Note what the user can DO (actions, not just views)
  • Capture 6-10 key screens that tell the product story
浏览每个主要板块：
  • 点击所有导航项、标签页和主要UI元素
  • 为每个功能区域截取清晰的实际操作截图
  • 记录用户可执行的操作（而非仅页面内容）
  • 选取6-10个能体现产品核心价值的关键界面

c. Identify the "How It Works" Flow

c. 梳理核心工作流程

Find the main workflow (the thing a user does most):
  • Screenshot 3-4 steps in sequence
  • These become the "How It Works" section
  • Example: "1. Add a contact → 2. Set up a pipeline → 3. Track your deals → 4. See your dashboard"
找出用户最常用的核心流程：
  • 截取3-4个流程步骤的截图
  • 这些将作为"工作流程"板块的内容
  • 示例："1. 添加联系人 → 2. 设置销售管道 → 3. 跟踪交易 → 4. 查看仪表盘"

d. Capture Detail Shots

d. 捕获细节截图

For the feature grid, capture focused screenshots:
  • Zoom into specific UI elements that showcase polish
  • Dark mode version if available (shows design quality)
  • Mobile view if the app is responsive
为功能网格板块采集聚焦截图：
  • 放大展示设计细节的特定UI元素
  • 若支持深色模式则截取深色版本（体现设计质感）
  • 若应用支持响应式，截取移动端视图

3. Generate the Showcase

3. 生成展示页面

Produce a single HTML file with Tailwind CDN (same pattern as 
landing-page
):
生成包含Tailwind CDN的单页HTML文件（与
landing-page
技能模式一致）：

Sections

页面板块

Hero
  • App name + tagline
  • Primary screenshot in a browser-frame mockup
  • Primary CTA button
  • Optional: secondary CTA ("Watch Demo", "View Pricing")
How It Works
  • 3-4 steps with screenshots
  • Numbered or arrowed flow
  • Brief description under each step
  • Shows the main user journey
Feature Grid
  • 4-6 features in a responsive grid
  • Each: screenshot + heading + 1-2 sentence description
  • Screenshots in browser-frame mockups (smaller than hero)
  • Features extracted from actual app exploration
Social Proof (if testimonials provided)
  • 2-3 testimonial cards
  • Or skip this section entirely if no testimonials
Pricing (if provided)
  • 2-3 tier cards
  • Or skip if not provided
CTA Banner
  • Full-width call-to-action
  • Repeat the primary CTA
  • Urgency or benefit statement
Footer
  • App name, links, legal placeholders
Hero区
  • 应用名称+标语
  • 嵌入浏览器框架模型的主截图
  • 主CTA按钮
  • 可选：次要CTA（"观看演示"、"查看定价"）
工作流程区
  • 3-4个带截图的步骤
  • 带编号或箭头的流程展示
  • 每个步骤下方配简短说明
  • 呈现用户核心使用路径
功能网格
  • 4-6个功能的响应式网格布局
  • 每个功能包含：截图+标题+1-2句描述
  • 截图嵌入浏览器框架模型（尺寸小于Hero区）
  • 功能均来自实际应用探索结果
社交证明区（若提供客户评价）
  • 2-3个评价卡片
  • 若无评价则完全跳过该板块
定价区（若提供定价信息）
  • 2-3个定价套餐卡片
  • 若无定价则跳过该板块
CTA横幅
  • 通栏式行动号召
  • 重复主CTA内容
  • 添加紧迫感或价值声明
页脚
  • 应用名称、链接、法律占位文本

4. Screenshot Presentation

4. 截图展示方式

Screenshots are shown in browser-frame mockups using CSS:
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;
}
This gives screenshots a polished "app in a browser" look without needing to edit the images.
使用CSS将截图嵌入浏览器框架模型：
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;
}
无需编辑图片即可为截图增添专业的"浏览器中应用"视觉效果。

5. Output

5. 输出结果

Save to a 
showcase/
directory:
showcase/
├── index.html          # The showcase page
└── screenshots/        # All captured screenshots
    ├── hero.png
    ├── step-1.png
    ├── step-2.png
    ├── step-3.png
    ├── feature-contacts.png
    ├── feature-reports.png
    └── ...
The HTML references screenshots with relative paths (
screenshots/hero.png
).
After generating, tell the user:
  • Preview: 
    open showcase/index.html
    or 
    python3 -m http.server -d showcase
  • Deploy: drag the 
    showcase/
    folder to Cloudflare Pages, Netlify, or any static host
  • List any placeholder content that needs replacing
保存至
showcase/
目录：
showcase/
├── index.html          # 展示页面
└── screenshots/        # 所有捕获的截图
    ├── hero.png
    ├── step-1.png
    ├── step-2.png
    ├── step-3.png
    ├── feature-contacts.png
    ├── feature-reports.png
    └── ...
HTML文件使用相对路径引用截图（
screenshots/hero.png
）。
生成完成后，告知用户：
  • 预览方式：
    open showcase/index.html
    或 
    python3 -m http.server -d showcase
  • 部署方式：将
    showcase/
    文件夹上传至Cloudflare Pages、Netlify或任何静态主机
  • 列出需要替换的占位内容

Design Patterns

设计模式

Colour: If the app has a clear brand colour, extract it and use it as the primary. Otherwise default to a neutral palette (slate/blue).
Typography: System font stack (no external requests). Same approach as 
landing-page
.
Responsive: Mobile-first, screenshots scale down gracefully. On mobile, screenshots stack vertically instead of grid.
Dark mode: Three-state toggle (light/dark/system) with CSS custom properties.
Performance: Lazy-load screenshot images. Tailwind CDN for styling. No build step.
色彩：若应用有明确品牌色，提取并作为主色调；否则使用中性调色板（石板灰/蓝色系）。
排版：系统字体栈（无外部请求），与
landing-page
技能保持一致。
响应式：移动端优先设计，截图可自适应缩放。在移动端，截图改为垂直堆叠而非网格布局。
深色模式：三态切换（浅色/深色/跟随系统），使用CSS自定义属性实现。
性能：截图图片懒加载。使用Tailwind CDN实现样式，无需构建步骤。

Quality Rules

质量规则

  1. Only screenshot real features — don't fabricate capabilities the app doesn't have
  2. Choose the best screenshots — not every page is showcase-worthy. Pick the ones that tell the product story.
  3. Write benefit-focused copy — "See all your contacts in one place" not "Contact list page"
  4. Browser frames on screenshots — always wrap in the CSS mockup for professional appearance
  5. Consistent screenshot size — all at 1280x720 for the captures, CSS handles display sizing
  6. No fake testimonials — leave the section out if none provided
  7. No invented statistics — leave stats blocks empty if no real data
  1. 仅展示真实功能 — 不得编造应用不具备的功能
  2. 精选优质截图 — 并非所有页面都适合展示，选择能体现产品价值的界面
  3. 撰写利益导向文案 — 用"在一处查看所有联系人"而非"联系人列表页面"
  4. 截图必加浏览器框架 — 始终用CSS模型包裹，保证专业外观
  5. 统一截图尺寸 — 所有截图均以1280x720尺寸捕获，由CSS处理显示尺寸
  6. 不使用虚假评价 — 若无评价则跳过该板块
  7. 不编造统计数据 — 若无真实数据则留空统计板块