design-guide

name	design-guide
description	演示设计指导——应用视觉设计原则、规划布局策略、 执行质量检查。做 PPT / 幻灯片视觉设计时参考。
metadata	{"version":"0.3.0","tabtin":{"category":"doc","displayName":"TabSlide 设计原则","autoActivateFor":["tabslide"]}}

TabSlide 设计原则

关于"哪些 HTML 模式能被转成可编辑 PPTElement、哪些要走 data-tabslide-rasterize 兜底"——参见 app:tabslide/html-spec。这里只谈视觉设计层面的取舍。

先选主题模板（默认路径，必读）

不要从零手写 CSS 排版——自由发挥的产出普遍是"白底细边框工程师风"，下限很低。 默认走主题模板库：读 references/themes.md，选一套主题 （深色科技 Aurora / 浅色杂志 Journal），整段复制其 <style> 与页型骨架，只替换 内容文字。骨架已保证不出画、版心撑满、配色统一。

只有用户明确指定了模板之外的视觉风格（如品牌 VI、特定配色）时才自行设计， 且仍须遵守下述原则与检查清单。

核心原则

• 一页一重点 — 每张幻灯片聚焦一个核心信息，观众 3 秒内能抓住要点
• 文字精简 — 标题 ≤ 10 字，正文用短句或关键词列表，单页文字不超过 60 字
• 字体层级 — 标题(48px) > 副标题(28px) > 正文(20px) > 标注(14px)，层次分明
• 配色一致 — 同一份演示主色不超过 3 种；多页演示推荐用 var(--slide-*) CSS 变量或固定一套 Tailwind 色板（如 blue-500 / purple-600）保持统一
• 数据可视化 — 数据优先用图表展示，避免大段文字表格
• 呼吸空间 — 内容占页面 60-70%，留白 30-40%，避免密集排列

布局策略

视觉重心

• 封面页：重心居中，标题占据视觉主导
• 内容页：标题在顶部，内容区域左对齐或网格排列
• 数据页：图表占据 60%+ 面积，标题和注释辅助

间距系统

层级	间距	用途
页面内边距	60-80px	内容与边缘的距离
模块间距	32-48px	不同内容块之间
卡片间距	24px	同级卡片之间
卡片内边距	32px	卡片内容与边框
文字行间距	8-16px	段落内行距

配色策略

• 单色方案：主色 + 主色变体（深/浅）+ 中性色，适合商务风格
• 对比方案：主色 + 互补色，适合强调对比（如增长 vs 下降）
• 渐变方案：主色 linear-gradient 背景，适合封面和强调页（仅支持 linear，radial 走 rasterize）
• 背景色：浅色底用 var(--slide-bg-subtle) 或 #F8FAFC；深色底用 linear-gradient
• 颜色写法允许：var(--slide-*)、Tailwind class（bg-blue-500）、Tailwind arbitrary value（bg-[#2563EB]）、直接 hex/rgba。推荐多页统一一种写法，避免某页跳色

图表配色

• 使用 --slide-blue/teal/green/orange/red/purple 六色板
• 同一图表颜色不超过 6 种
• 重点数据用 --slide-primary，其余用低饱和度色

页面结构规范

标准演示文稿结构

1. 封面页 — 标题 + 副标题 + 装饰元素
2. 目录页（可选）— 演示流程概览
3. 内容页 × N — 核心信息，每页一个主题
4. 总结页 — 关键结论 + 行动号召

常见内容页类型

类型	适用场景	推荐布局
KPI 仪表盘	关键指标展示	slide-grid-3/4 + slide-kpi
对比分析	A vs B、优劣势	slide-split + 左右卡片
流程/时间线	步骤、历程	slide-timeline 或 slide-grid-3 + step-number
图文混排	说明 + 配图	slide-split 或 slide-split-40-60
数据图表	趋势、分布	ECharts 图表 + 标题 + 注释
列表要点	特性、优势	slide-list 或图标卡片网格

容量预算（防撑破 1280×720）

写内容时先按预算裁切，宁可多一页也不要塞满：

页型	硬上限
卡片网格（含 icon+标题+说明）	最多 2 行 × 3 列；每卡标题 ≤8 字、说明 ≤28 字
双栏列表	每栏 ≤6 条；每条 ≤36 字
KPI	单行最多 4 个；数字+短标签，不要长段落
图文混排	正文 ≤80 字；大图高度预留 ≤360px
通用	页边距 ≥60px；标题区 + 内容区合计必须落在 720 高内

slide render 会在抽取前做 HTML 布局 lint：html_overflow / html_clipped_text 默认阻断导出。

质量检查清单

• 每页有且仅有一个核心信息
• 文字与背景对比度足够（深底用白字，浅底用深字）
• 元素不超出 1280×720 边界（遵守上方容量预算）
• 卡片间距均匀（推荐 24px）
• 数据用图表或 KPI 卡片展示，而非纯文字
• 新建演示文稿结构：封面 → 目录（可选）→ 内容 → 总结
• 字号层级一致，同级标题字号相同
• 全篇配色方案统一（CSS 变量 / Tailwind class / hex 三种写法任选其一，不要混用）
• 渐变背景上的文字使用白色或深色，确保可读
• 图表有清晰的标题和数据标签
• FA 图标 / 径向渐变 / 毛玻璃等已按 html-spec/§五 包好 data-tabslide-rasterize