html-ppt-taste-editorial

HTML PPT — 编辑极简主义

一套 16:9 的幻灯片，适合那些厌恶霓虹风格的简报：投资者动态、设计评审、内部宣言、讲座幻灯片。读起来像印刷刊物的增刊，而不是 SaaS 落地页。

源文件

提炼自 Leonxlnx/taste-skill — skills/minimalist-skill/SKILL.md。幻灯片系统遵循项目的幻灯片约定：每个 .slide 都是一个 100vw × 100vh 区块，当前幻灯片带有 .active / .is-active，内置示例在图库 iframe 内支持键盘、滚轮、触摸和圆点导航。无脚本和打印回退模式会让每张幻灯片都保持可见。请参阅此目录中的 example.html。

硬性规则

• 底色： 暖调米白色 #FBFBFA / #F7F6F3。前景色为近黑色 #1A1A19。绝不使用纯白或纯黑。
• 字体搭配： 标题使用衬线字体（Instrument Serif / Newsreader / Lyon），正文使用无衬线字体（Inter Tight / Switzer），元信息使用等宽字体（JetBrains Mono）。
• 每张幻灯片的标题字号： 标题使用可设为斜体的衬线字体，字号为 clamp(56px, 6.5vw, 96px)，行高 1.05，字距 -0.025em。
• 仅用细线： 1px solid #EAEAEA——用于边框、分隔线、表格单元格。不使用投影。
• 一种强调色，从低饱和的柔和色搭配中选择（例如，鼠尾草绿 #346538 搭配 #EDF3EC，或红色 #9F2F2D 搭配 #FDEBEC）。少量使用——眉题圆点、图表填充色、提示标签。绝不用作幻灯片背景。
• 幻灯片内边距： 留白充足（至少 72px 96px）。标题宽度最多为 14ch。
• 眉题： 每张幻灯片开头都要有一行等宽大写眉题，letter-spacing: 0.18em，并带有章节编号 01 / 09。
• 页码： 使用等宽字体，置于右下角。

禁用项

• Inter（如果必须使用 Inter，请用 Inter Tight，但优先选择 Switzer / SF Pro）。不使用 Roboto、Open Sans。
• 厚重的投影、发光效果、渐变文字。
• 三张等宽卡片组成的功能展示行。改用不等宽、以细线分隔的列。
• 文本中或作为项目符号的表情符号——使用 — 或不加标记。
• 每张幻灯片都使用全幅摄影图。使用一到两张图片幻灯片，并留出空间。
• AI 陈词滥调文案（“Elevate”“Unleash”“Seamless”“Next-Gen”）。
• 比淡入更花哨的幻灯片转场。

必备幻灯片原型（建议共 10–12 张）

1. 封面 — 衬线标题、句中斜体强调、等宽字体元信息页脚。
2. 眉题 + 论点 — 左侧放一句正文导语；右侧放等宽字体编号目录。
3. 编号宣言 — 三或四条以细线分隔的论点。
4. 便当盒式数据页 — 不等宽的 6 列网格，间隙用细线分隔；一项数据使用衬线字体，辅助信息使用等宽字体。
5. 引语 / 摘录 — 一句大号衬线文字，署名使用等宽字体，上下以细线分隔。
6. 对比 — 两列之间以垂直细线分隔；标题可用“没有 / 有”或“之前 / 之后”。
7. 表格或索引 — 使用 display: grid; gap: 1px，颜色采用细线色。
8. 图表或分类 — 扁平的水平条形图，标签使用等宽字体，仅最新一条使用强调色填充。
9. 团队 / 版权页 — 等宽字体键值列表，不使用头像。
10. 结尾页 — 衬线字体的收尾语句，使用斜体；CTA 使用幽灵按钮；签名使用等宽字体。

动效

• 运行时导航：键盘、滚轮 / 触控板、触摸滑动和圆点按钮都必须更新同一当前幻灯片状态。淡入时间保持在大约 400ms cubic-bezier(0.16, 1, 0.3, 1)。
• 静态 / 打印回退：运行时尚未启动或文档正在打印时，保持每张幻灯片都可见。
• 不使用位移、模糊或自动播放。

上线前检查

• 底色为暖调米白色；前景色为近黑色；绝不使用纯黑 / 纯白
• 标题使用衬线字体，正文使用无衬线字体，元信息使用等宽字体——三种字体，各司其职
• 只用一种强调色，整套幻灯片最多使用三次
• 每张幻灯片都有眉题 + 章节编号 + 页码
• 至少有一个以细线网格呈现的表格或对比模块
• 不使用投影、渐变、表情符号或禁用字体
• 键盘、滚轮 / 触控板、触摸滑动和圆点导航都能切换一张幻灯片，并保持当前圆点与当前幻灯片同步