html-presentation-v1

避雷清单 AVOID_LIST.md

⚠️ 本文件与 LAYOUT_RULES.md 同等重要。违反这里的规则，输出就是 AI 烂大街演示文稿。 v2.1 起模板库已恢复原版设计基因（饱和渐变、渐变标题字、慢过渡等家族签名），并在受控例外条款中明确边界；修改模板或生成新演示时，同样不得破例。

一、绝对禁止的配色方案

❌ 死亡配色组合

紫色系渐变 + 白色文字        （最常见，最烂大街）
#6B21A8 / #7C3AED / #8B5CF6  这几个紫色直接拉黑
蓝紫渐变 background          比如 linear-gradient(135deg, #667eea, #764ba2)
coral + teal 撞色
薄荷绿 + 粉色
深蓝 #1a1a2e + 金色 #f0a500  "高级感"模板烂大街配色
黑色背景 + 彩色渐变大标题

❌ 具体禁止的颜色值（单独用也不行）

#6B21A8, #7C3AED, #8B5CF6   （AI 紫）
#667eea, #764ba2            （渐变两端）
#00d4aa, #00b4d8            （AI 青绿）
#ff6b6b                     （过度使用的珊瑚红）

✅ 可用的配色策略

二、绝对禁止的排版模式

三列图标 + 文字对称布局           —— 企业 PPT 模板感
每页都有彩色横条装饰              —— 低质量模板标志
文字块加大圆角半透明卡片滥用       —— 半透明卡片只用于玻璃系的「卡片组件」，一页 ≤3 张
页面四角都有装饰性几何图形
每个要点前都有 emoji
标题 + 六格等分卡片布局
内容区域被分成过多小块             —— 碎片化
标题使用渐变色文字（background-clip: text）—— 仅限封面/结尾 h1 与数据大字（家族签名，见第八节）
大量加粗 + 彩色混排
同一份演示各页标题字号不统一

三、绝对禁止的图标与装饰字符

❌ Unicode emoji 做装饰（🚀📊💡✅⌨️ 等，正文与 UI 一律禁止）
❌ ◆ ★ ▶ 等 dingbat 字符做列表符（列表点一律 CSS ::before 绘制；玻璃系 02 的 ✦ 星符为原版家族签名，见第八节）
❌ Font Awesome / Lucide / Phosphor 等图标库（需外链，违反零依赖）
❌ [IMAGE] / 灰色矩形占位图
✅ 需要图形时：内联 SVG 手绘几何形（圆、线、三角、月牙、齿轮线条）
✅ 大多数情况：不加图标比加劣质图标好

四、绝对禁止的外部资源（零依赖铁律）

<!-- ❌ 全部禁止，无一例外 -->
<link href="https://fonts.googleapis.com/..." rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/lxgw-wenkai..." rel="stylesheet">  <!-- 含霞鹜文楷 CDN -->
<script src="https://unpkg.com/lucide"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/.../prism.min.js"></script>
<img src="https://picsum.photos/...">

<!-- ✅ 一切内联 -->
<style>/* 完整 CSS */</style>
<script>/* 完整 JS */</script>
<!-- 字体走本地字体栈回退；图表手绘 SVG；代码高亮手工 span；图标内联 SVG -->

判断标准：断网双击打开文件，所有功能与视觉必须完好。

五、绝对禁止的动画

animation: bounce ...;      /* 禁 */
animation: spin ...;        /* 装饰性旋转禁 */
animation: shake ...;       /* 禁 */
animation: blink ...;       /* 禁 */
transition: all 1.5s ease;  /* 超过 400ms 的页面切换禁 */

✅ 允许：页面淡入 + ≤24px 轻位移——全家族 600-800ms 优雅慢入（原版节奏，含 0.6s 回弹缓动 cubic-bezier(0.34,1.56,0.64,1)，仅 02）；内容 stagger 50ms；光斑/背景动画周期 ≥15s；必须带 prefers-reduced-motion 降级。

六、绝对禁止的代码错误

  1. 绝对定位居中内容 —— 内容一长就溢出。用 flex/grid 文档流布局。
  2. 固定高度裁切文字 —— 禁止 height: 200px; overflow: hidden 套在正文上。内容多就拆页。
  3. width: 100vw 造成横向滚动 —— 用 width: 100% + 父级 overflow: hidden。
  4. 缺 box-sizing: border-box —— CSS 第一行必须是全局重置。
  5. 幻灯片容器高度不足 —— 玻璃系注意 body 居中容器的 height: min(84vh, 760px) 上限写法。
  6. 中文/回退字体栈缺失 —— 楷体栈、等宽栈见 LAYOUT_RULES 第四节，逐级回退必须完整。
  7. JS 翻页缺边界检查、缺触摸支持、缺 hashchange —— 统一复制模板库现成引擎，不要手写新版。
  8. 快捷键无焦点守卫 —— 页面若含 contenteditable 或表单，引擎必须先判断 e.target 再响应快捷键（见 template08）。
  9. column flex 容器里的 inline-block 徽章忘了 align-self: flex-start —— 会被 stretch 拉满整行（t02/t03 曾踩坑）。

七、绝对禁止的内容密度

单页要点 > 5 条        → 拆分
单页正文 > 80 字       → 精简或拆分
标题 > 14 字或主标题跨行     → 重写更短 / 单行化
图表 + 大段文字 + 多组要点同页 → 拆成 2-3 页
逐页内容量超过被改写模板原页    → 退回

八、玻璃美学的受控例外条款

全部 20 套（01-08 经典 + 09-12 新增 + 13-18 Keynote 变体 + 19 画册 + 20 卷轴）的环境光斑背景、毛玻璃（舞台或全屏玻璃卡片/玻璃画框/玻璃月）、玻璃卡片、渐变标题字、家族签名细节是刻意保留的美学身份，不受部分禁令约束，但必须同时满足：

  1. 光斑：filter blur ≥70px、饱和度低、动画周期 ≥15s，颜色与本套强调色同族或中性暖/冷色（13-18 另有 8s 循环扫光，白透明度浅色 ≤7%、深色 ≤8%；19 画册无彩色光晕，纯纸色底 + 极细噪点，扫光降至 ≤5%；20 卷轴墨绿底 + 远山剪影 + 萤火漂浮，扫光 ≤6%，月晕呼吸 12s）。
  2. 玻璃卡片：一页 ≤3 张（四宫格布局 ≤4 张），仅用于承载真实内容，不做空装饰（19 的玻璃画框一页 ≤1 块，须背后垫大号衬线字或图片做折射，不许空挂；20 的玻璃月/茶盏/屏风为氛围与内容载体，屏风卡一页 ≤5 片且每片必须承载真实章节信息）。
  3. 渐变标题字（background-clip: text）：仅限封面/结尾 h1、数据大字（stat-num），正文与小标题仍禁（19/20 为印刷黑/月白实色标题，禁渐变字）。
  4. 家族签名细节（仅限指定模板，不得扩散）：02 的 ✦ 星形列表符与四色流动背景（15s）；01/09/10/11/12 的「•」大圆点列表符与 45° 渐变标题；04 的 15×2px 短横线列表符与学术眉标；06/07 的多色强调系统（主/副/点缀三色，且每色职责固定）；13-18 的发布会玻璃光影三件套——描边外侧红-橙-蓝棱镜色散光晕、8s 循环扫光（白透明度浅色 ≤7%、深色 ≤8%）、封面 3D 玻璃方块（18 色散尾段偏雾紫、极光带透明度 <12%；17 色散尾段偏冰蓝），以及 13 的焦糖橙+蜂蜜金双色强调、18 的极光青+雾紫双点缀（职责固定）；19 的画册编辑细节——杂志式四角信息（VOL/日期/章节/页码，大字距小号英文小标）、宋体超大标题 + 标题下 1px 细黑线、玻璃画框背后大字折射与一角 ≤10% 极淡色散；20 的卷轴签名——中轴竖排主导（writing-mode: vertical-rl）、章回汉字描边空心大字（壹贰叁肆伍）、五条屏玻璃目录、玻璃月/茶盏/屏风玻璃件、朱砂印章与汉字纪年、双层远山剪影与萤火漂浮、金系色散（金/青/朱渐变 ~30%）——均仅限 20，不得扩散到其他模板。
  5. 除上述四项外，本清单其他条款（禁 emoji、禁外部资源、密度红线、AI 紫色值拉黑）对全家族同样全部生效。

九、交付前自检清单

This site is open source. Improve this page.