WIGTN PPT 生成器
这是一个用于创建包含 WIGTN 品牌标识的 单文件 HTML 演示文稿 的技能。 无需模板（.pptx），只需品牌原则和参考文件，Claude 每次都会重新设计。
核心原则
- 基于原则，不依赖模板 — 不依赖固定模板文件。读取
references/中的品牌令牌和布局原则，每次即时生成。 - 品牌保真度 — 仅使用准确的 HEX 值。禁止使用“近似颜色”。墨水黑
#1E1E28，标志紫（Pantone 265）#9B51E0。 - 标志性紫色圆点重复 — 源自
wigtn.句点的紫色圆点（.）是品牌的标志性元素。每张幻灯片至少一致地重复一次紫色圆点图案（如页码旁的点、章节编号的点、角落的点、进度点等）。 - 浅色/深色双主题 — 根据演示环境选择其中之一。同一演示文稿内不得混用。
- 视口适配 — 所有幻灯片必须精确为
100vh。幻灯片内绝对禁止滚动。 - 禁止纯文本幻灯片 — 每张幻灯片至少包含一个视觉元素（形状、色块、圆点、线条、图标）。
- 展示而非询问 — 不要用文字询问设计建议。只需确定主题/内容后立即生成，通过截图展示后再调整。
- 零依赖 — 单个 HTML 文件。可直接在浏览器中演示（字体仅允许使用一个 CDN
<link>）。
品牌（摘要）
| 令牌 | 值 | 用途 |
|---|---|---|
| 墨水黑（深蓝） | #1E1E28 | 深色背景 / 浅色文字 |
| 紫（Pantone 265） | #9B51E0 | 标志性圆点，强调，链接 |
| 深紫 | #6B2EAA | 圆点阴影，深度，渐变末尾 |
| 白色 | #FFFFFF | 浅色背景 / 深色文字 |
完整调色板（浅色/深色
:root片段）、Logo 变体使用规则、排版、圆点标志规则必须在读取 references/brand.md 后应用。
工作流程（4 个阶段）
阶段 0：主题和内容（一次 AskUserQuestion）
通过 AskUserQuestion 一次性询问：
- 主题 —
浅色（明亮演示厅、文档型）/深色（舞台、主题演讲型）。包含推荐。 - 目的 — 会议 / 团队分享 / 推介 / 培训 / 高管汇报
- 篇幅 — 5–10 张 / 10–20 张 / 20 张以上
- 核心信息和图片 — 要传达的内容，是否包含图片及其位置
同时确认演示者姓名、日期、公司/产品名称等封面元数据。
阶段 1：结构设计
将内容分解为幻灯片地图。密度限制：封面上标题+副标题，正文每张幻灯片最多 4–6 个要点（或同等视觉块）。超出则自动拆分。
基本骨架：封面 → 目录 → （章节分隔 → 正文 N） × 章节 → 结尾（谢谢）。
从 references/design-guide.md 中选择每张幻灯片使用的正文布局。
阶段 2：图表（如有需要）
如果需要流程图或架构图，调用同一插件的 handdrawn-diagram 技能 创建可提交的图表（SVG+PNG）并插入幻灯片。如果手绘风格不合适，则直接用简单的 CSS/SVG 形状绘制。
阶段 3：生成 HTML
- 读取 references/brand.md 和 references/design-guide.md。
- 编写单个 HTML 文件，应用所选主题的
:root令牌。必须遵循的规则：.slide { height: 100vh; height: 100dvh; overflow: hidden; }- 所有字体和间距使用
clamp(min, pref, max)（禁止单独使用固定 px） - 使用基于高度的媒体查询（
max-height: 700px/600px）进行逐步压缩 - 进度条 + 导航圆点（紫色） + 键盘/触摸/滑动支持 +
prefers-reduced-motion - 标志性紫色圆点 在所有幻灯片中重复
- 插入 Logo：遵循下方“Logo 使用”规则
- 填充内容，动画保持克制（专业风格：0.2–0.4 秒淡入/滑动）。
阶段 4：验证和交付
通过截图检查视口适配、品牌一致性以及圆点标志。如果有 Playwright 或 Chrome，渲染每张幻灯片的 PNG 并通过 Read 检查；否则提示用户在浏览器中打开查看。
生成完成：
- HTML: docs/{文件名}-presentation.html （在浏览器中按 F 全屏 → 方向键/滑动）
Logo 使用
WIGTN Logo 是团队专属资产，不提交到公开插件中（已加入 .gitignore）。按以下优先级查找：
${CLAUDE_PLUGIN_ROOT}/skills/wigtn-ppt/assets/logo/— 打包的 Logo（团队本地，*.png因 gitignore 而不在公开仓库克隆中）<project>/docs/images/— 团队本地品牌资产位置（同样因 gitignore 而不包含在公开仓库中）- CSS/SVG 文字商标回退 — 如果以上两个路径没有 PNG（公开克隆或新环境的默认状态），则直接使用字体/SVG 渲染
wigtn+ 紫色圆点（brand.md 中有代码片段）。回退方案始终有效。
使用 Logo 时，将要用到的文件复制到演示文稿工作区（例如 docs/workspace/），然后在 HTML 中使用相对路径引用。主题变体遵循 brand.md 中的映射表（浅色 → 深蓝色 Logo，深色 → 白色 Logo）。
反模式（应避免）
- 使用紫色渐变陈词滥调（
#6366f1），白色背景上的基本紫色/粉色 → 仅使用 WIGTN 紫色#9B51E0 - 将 Inter/Roboto/Arial 作为显示字体使用（破坏品牌调子）
- 所有元素居中对齐，重复相同的卡片网格
- 使用
min-height（允许幻灯片溢出） → 必须使用height - 缺少圆点标志，主题混用，使用“近似颜色”替代
参考
- references/brand.md — WIGTN 品牌系统：浅色/深色调色板、Logo 变体与放置、紫色圆点规则、排版、CSS 文字商标回退
- references/design-guide.md — 各类幻灯片的布局原则（封面/目录/章节/正文/结尾）、视口规则、动画、反模式
design-system-reference技能 — 复用布局密度和排版层次结构创意（瑞士极简、编辑型、极简企业型最接近 WIGTN 调子）。但颜色、圆点、Logo 必须始终使用 WIGTN 令牌覆盖。handdrawn-diagram技能 — 适用于需要图表的幻灯片
检查清单
- 阶段 0：通过 AskUserQuestion 一次性收集主题（浅色/深色）和内容
- 阶段 1：幻灯片地图 + 密度限制
- 阶段 2：识别需要图表的幻灯片（handdrawn-diagram）
- 阶段 3：读取 brand.md + design-guide.md → 生成单个 HTML（视口、紫色圆点、Logo）
- 阶段 4：截图验证 → 交付