产品总结面板 / Launch Summary Panel

已废弃（0.1.2）：改用 bento-infographic。使用者点名要本 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

阶段一：

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

<panel-brief.md 全文>

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

确认之后我生成 panel.html。

阶段二：

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

- 版式：<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