Product Showcase Page 是一个面向单产品的长页展示页生成技能,最终产物是一个自包含的 HTML 文件,可直接当作用户的高转化独立落地页使用。
用途 它用于为某一个具体产品构建比标准落地页更长的深度展示页,覆盖买家在下单前需要了解的信息。设计目标是服务预热流量(来自博客文章、评测或对比内容、邮件等),完成最后一步转化推动。它也适合高客单价产品这类需要更多说服内容的场景,并且页面本身可以当作产品评测的网页版。触发场景包括用户要求“build a product showcase page”“product spotlight”“deep-dive page”“feature breakdown page”,或希望为单一产品做一个专门页面。
主要能力 页面结构包含:小型 FTC 披露(位于 hero 之上)、hero 区(主标题、副标题、主 CTA、主视觉、信任栏)、问题陈述、产品概览(三句话描述加关键数据)、特性网格(6 至 12 个特性,纯 CSS 图标加标题与描述)、用例(3 至 5 个真实场景,包含谁在用、怎么用、结果)、社会证明栏(logo、评分、订阅数)、定价对比表(本产品各档位与 2 个竞品对比)、客户评价(2 至 3 张卡片,含引言、姓名、职位)、FAQ 手风琴(6 至 10 个问题,JS 展开收起并可优雅降级)、最终 CTA 区(强标题加快照加主按钮)、页脚(完整 FTC 披露文本与 Affitor 署名)。
CTA 布局规则为:hero 主 CTA(始终可见)、特性网格之后次级 CTA、定价表之后高意向 CTA、客户评价之后带社会证明的 CTA、最终 CTA 区收口 CTA,每页总计 4 至 5 个 CTA。营销角度可选最佳品类、价格价值、速度、简单、结果导向,若未指定会根据产品优势自动判断。
使用方式 输入中 product 为必填,包含名称、描述、奖励值、联盟链接、奖励类型、cookie 天数、标签。可选输入包括:angle(营销角度)、compare_with(竞品数组,含名称、起价、非联盟 URL)、color_scheme(blue/green/purple/orange/dark/hex,默认 blue)、target_audience(如电商店主、自由设计师)、social_proof(类型与值,如 G2 4.8/5、5 万+ 用户、财富 500 强在用)、testimonials(真实评价,含引言、姓名、职位、具体结果)。
工作流程分五步。第一步收集产品数据:若已有数据直接使用,否则用 web_search 研究特性(6 至 12 项)、定价(各档位)、用例、评价(G2/Capterra,不可逐字复制,需转述或使用真实感示例)、竞品(2 至 3 个)、FAQ(6 至 10 个),并整理为核心特性、用例、定价档位、对比维度、社会证明、FAQ 答案。第二步规划页面架构,参考 conversion-principles 文档,为每个区块规划价值,并选择营销角度与标题公式。第三步撰写完整 HTML:所有 CSS 内联于 style 块,不使用外部样式表与 Google Fonts,使用系统字体栈;移动优先响应式(375px、768px、1024px 断点);特性图标使用纯 CSS 几何形状或 Unicode,不用图标库;FAQ 用极简 JavaScript,无 JS 时可降级;配色来自输入或默认蓝色 #2563eb;区块交替背景形成节奏。文案要求 hero 标题 6 至 12 字、聚焦结果;特性标题写成收益而非功能名;用例遵循“问题→方案→结果”结构;定价表第一列为该产品并标为推荐,第二三列为竞品,8 至 10 行对比项,含免费试用与随时取消信号;评价需含可衡量结果,姓名格式为“[名字],[职位] at a [公司类型]”,不编造全名与公司;FAQ 覆盖定价与取消、技术要求、数据安全隐私、与主要竞品对比、上手时间、客服可用性等真实异议。必备元素包括 hero 上方小号 FTC 披露、所有联盟链接带 target="_blank" rel="noopener"、viewport 与基础 SEO meta、meta robots noindex、以及“Built with Affiliate Skills by Affitor”页脚。第四步输出三部分:页面摘要、完整 HTML 代码块、部署说明(保存为 [product-slug]-showcase.html、浏览器预览、替换评价与截图与定价、部署到 Netlify Drop / Vercel / GitHub Pages、加 UTM 参数跟踪)。第五步自检,确认披露、noindex、CTA 数量与位置、链接属性、自包含资源、页脚署名等全部通过。
适用场景 包括为单一产品制作专门页面、高客单价产品的深度说服页、把博客或邮件带来的暖流量转化为成交、以及将产品评测以网页形式呈现。示例场景涵盖标准 SaaS 展示、指定价格价值角度对比竞品、深色主题面向开发者受众等。
限制与说明 资料中未提供该技能的收费与价格信息,暂未提供。页面需通过 web_search 获取产品事实,评价须转述或使用真实感代表性示例,不得逐字复制或编造真实姓名与公司。产品页面设置 noindex,不用于自然搜索收录。若缺少产品则提示先运行 /affiliate-program-search 或提供产品名称;若缺少竞品数据则搜索 1 至 2 个,仍不可得则把对比表替换为单产品定价档位表;高客单价产品强调 ROI 框架并增加预约演示 CTA;有免费计划时突出免费计划并采用“先免费用,合适再升级”的 CTA 模式;B2B 企业版无公开定价时用功能对比替代定价表并使用获取报价或联系销售 CTA 并注明。具体运行环境、依赖版本、部署平台配置等信息资料未提供。