---
name: launch-summary-panel
description: 已废弃，改用 bento-infographic（发布会 bento 信息图）。原用途：当使用者贴出产品资料、发布稿、规格表、卖点清单或网页摘录，说"做一张产品总结面板"、"生成发布会那种 summary slide"、"把这些卖点做成一张图"、"bento 风格的产品总览"时使用。分两步：先产出 panel-brief.md（定位、核心卖点、支撑卖点、数字锚点、信息分组、每条的来源或未确认标记、版式建议、舍弃项与原因），等使用者确认后再产出单文件 panel.html（16:9 横版、内联 CSS、bento 卡片布局、light/dark 双主题、适合截图）。只借鉴信息层级与面板结构，不复制任何厂商的资产、商标、截图或图标。不编造参数，无出处的数字标注或省略。
category: coding-helper/ui-design
version: 0.1.2
status: deprecated
priority: P1
compatible_agents:
  - claude-code
  - cursor
  - codebuddy
  - generic-llm-agent
display_name: 产品总结面板
outputs:
  - chat
max_rounds: 20
suggest_hint: 已废弃。要把卖点或研究结果收成一张图，用「发布会 bento 信息图」
---

# 产品总结面板 / Launch Summary Panel

> **已废弃（0.1.2）**：改用 [`bento-infographic`](../bento-infographic/SKILL.md)。使用者点名要本 skill 时，说明一句，改用它。

把一堆散落的产品资料，收成一张能直接截图用的 16:9 总结面板。

**必须分两步走。** 第一步只产出策划稿，第二步才产出 HTML。中间要等使用者确认。
一步到位的做法看起来快，实际是把"哪些卖点值得上、哪条数字有出处"这些判断藏进了 HTML 里，
使用者要么全盘接受，要么推倒重来。

## 何时使用 / When to use

- 手上有产品资料、发布稿、规格表、卖点清单或网页摘录，要收成一张总览
- 需要一张适合截图、发群、放进 PPT 的产品总结图
- 已有一张面板要改版式或换主题

**不适用于** / Not for：

- 只要一段产品文案，不要图 → 直接写就行
- 要整套演示片（发布会、讲座那种一页页讲下去的片子）→ 用 `keynote-deck-builder`，这个技能只出一张 16:9 的静态面板
- 要做完整的落地页 → 不在本库范围
- 要给项目定一整套视觉语言 → 用 `ui-design-system-builder`

## 输入格式 / Input

使用者给什么都行，越原始越好：

- 官方规格表、发布稿全文、产品页摘录
- 手写的卖点清单
- 竞品对比表
- 几张截图里的文字

**需要问的只有两件事**，其余从材料里读：

1. 面向谁（终端消费者 / 采购方 / 内部评审），这决定卖点排序
2. 有没有必须出现的卖点或必须回避的说法

材料不足时说清楚缺什么，不要用常识补齐。

## 阶段一：panel-brief.md

用 `templates/panel-brief.md` 起草。这一步不写任何 HTML。

必须包含的几块：

| 块 | 要求 |
|---|---|
| 产品名称与一句话定位 | 定位不超过 20 字，说清是什么、给谁 |
| 核心卖点 | 3 到 5 条，每条一个短标题加一句话 |
| 支撑卖点 | 6 到 12 条，构成面板的中小卡片 |
| 数字锚点 | 48MP、4K120、3x、2000 nits 这类，逐条标出处 |
| 信息分组 | Design / Display / Performance / Camera / AI / Battery / Safety / Ecosystem 之类，按材料实际有的分，不硬凑 |
| 来源标记 | 每条卖点后面跟出处；材料里没有的写 **【未确认】** |
| 版式建议 | hero 区放什么、哪一条上最大卡、哪几条上大卡、哪些进小卡 |
| 舍弃项 | 哪些信息没上，为什么 |

舍弃项那一块不能省。使用者最常见的反馈是"某某卖点怎么没了"，写清楚为什么被舍弃，
比等他问一遍再解释省事。

写完停下，等确认。**不要在同一轮里顺手把 HTML 也生成了。**

## 阶段二：panel.html

确认之后，用 `templates/panel.html` 填充。

### 技术要求

- 单文件，CSS 全部内联，不引任何外部资源（字体、图标、CDN 一律不引）
- 舞台固定 1600×900，`overflow: hidden`，截图即所见
- 字体走系统栈，不下载字体文件
- light / dark 双主题，`<html data-theme="light">` 是默认，切换按钮放在舞台外面，
  这样截图里不会出现按钮

### 层级要求

一张面板只有一个视觉重心：

- **1 个最大卖点**：占最大格，配一个大字号数字或一句短话
- **3 到 5 个大卖点**：中等格，标题加一行说明
- **若干小规格**：小格或规格条，只放数字和单位

三档之间的字号要拉开差距，不要三档挨着。挨着就等于没有层级。

### 文案长度

发布会 summary slide 的语感，短。

| 位置 | 上限 |
|---|---|
| 最大卖点标题 | 12 字 |
| 大卡标题 | 8 字 |
| 大卡说明 | 24 字 |
| 小卡标签 | 6 字 |
| 数字锚点 | 数字加单位，不带句子 |

超了就是没想清楚。长段落一律拆或删，不要缩小字号硬塞。

### 视觉原则

- 卡片圆角统一在 16 到 24px 之间，小规格卡也一样；卡片之间留 16 到 24px 缝隙
- 阴影要柔，用低透明度的大模糊半径，不要黑边框
- 背景是极浅的中性色，卡片比背景亮一档（暗色模式反过来）
- 主色只用一支，用在最大卖点和数字上，其余靠灰阶
- 数字加 `font-variant-numeric: tabular-nums`
- 留白宁多勿少。卡片塞满了就减内容，不是减 padding

## 事实校验规则 / Fact checking

这一节优先于所有视觉要求。

1. **每个数字都要能指回材料**。指不回去的，要么标 **【未确认】**，要么不放。
2. **不做换算、不做推算、不做四舍五入**。材料写 4K120 就写 4K120，不改写成"最高 4K 120fps 录制"这类看似等价的说法。
3. **限定条件跟着数字走**。"最长 22 小时视频播放"里的"视频播放"不能丢，丢了就是夸大。
4. **对比性说法要有对比对象**。"快 3 倍"必须写清比什么快，材料里没写就标未确认。
5. **未确认项在面板上要可见**，用小号标注，不要只写在 brief 里自己知道。
6. 材料互相矛盾时，两个数都列进 brief 让使用者定，不要自己选一个。

## 禁止事项 / Prohibited

- **不使用任何厂商的资产**：商标、logo、产品截图、官方摄影、专有字体、系统图标一律不用。
  hero 位放占位图，由使用者自己替换成有权使用的图。
- **不模仿到冒充的程度**。借鉴的是信息层级和 bento 面板结构。做出来的东西不能让人误以为
  是某家厂商的官方物料。
- **不编造参数**，包括看起来很合理的补全。
- **不写长段落**。这是面板不是详情页。
- **不引外部资源**，离线打开必须完全一致。
- **不在阶段一就生成 HTML**。

## 输出格式 / Output

阶段一：

```markdown
已经把材料收成一版策划稿，你看看要不要调整分组和取舍：

<panel-brief.md 全文>

**我拿不准的：**
- <标注 1>
- <标注 2>

确认之后我生成 panel.html。
```

阶段二：

```markdown
面板已生成：<文件路径>

- 版式：<hero 位置、最大卖点是哪条>
- 主题：默认 light，切换按钮在舞台外面，截图不会带进去
- 未确认项：<在面板上的哪几处，怎么标的>
- 需要你替换的：hero 占位图
```

## Token 控制 / Token discipline

- 长材料先摘要成 brief，不要把发布稿全文带进阶段二
- 阶段二只读 brief 和模板，不重读原始材料
- 改版式时改模板里对应的 grid 区域，不重生成整个文件

## 变更记录 / Changelog

| 版本 | 日期 | 变更 | 类型 |
|---|---|---|---|
| 0.1.2 | 2026-10-10 | 废弃，由 `bento-infographic` 取代：它按苹果总结片的实测比例排版、用 Chrome 渲染并自检，先出清单再出图的两步走和事实校验规则已搬过去。本文件保留到删除那一版，不再维护 | patch |
| 0.1.1 | 2026-09-26 | 模板与示例的小规格卡圆角 14px 改为 16px，与正文「卡片圆角 16–24px」一致；「不适用于」里要整套演示片时点名 `keynote-deck-builder`，落地页注明不在本库范围 | patch |
| 0.1.0 | 2026-08-12 | 初始草稿，最小可用版本 | minor |