Frontend Slides - 前端幻灯片

创建零依赖、动画丰富的HTML演示文稿，完全在浏览器中运行。

核心原则

零依赖 — 单个HTML文件，内联CSS/JS。无需npm，无需构建工具。
展示，而非告知 — 生成视觉预览，而非抽象选择。人们通过看到来发现他们想要的东西。
独特设计 — 拒绝泛泛的“AI千篇一律”。每份演示都必须感觉是定制的。
渐进式揭示 — 首先读取轻量级样式索引。对于Bold模板，使用小预览卡进行样式预览，仅在用户选择该模板后加载完整的design.md。
固定16:9舞台（不可协商） — 每份演示使用1920×1080的幻灯片画布，整体缩放到视口。幻灯片必须在所有屏幕（包括手机）上保持16:9。不要重新流动幻灯片内容以适应设备。

设计美学

你倾向于收敛于泛化、“按分布”的输出。在前端设计中，这造成了用户称之为“AI千篇一律”的审美。避免这一点：创造具有创意和特色的前端，令人惊喜和愉悦。

重点关注：

字体：选择美观、独特且有趣的字体。避免Arial和Inter等通用字体，而选择能提升前端美感的特色字体。
颜色与主题：坚持有凝聚力的美学。使用CSS变量保持一致性。主导色配尖锐强调色比色调均匀分布更出色。从IDE主题和文化美学中汲取灵感。
动效：使用动画实现效果和微交互。优先使用纯CSS解决方案。在React中可使用时使用Motion库。专注于高影响时刻：一个有精心编排的页面加载（带有交错揭示，如animation-delay）比分散的微交互更能带来愉悦感。
背景：营造氛围和深度，而非默认使用纯色。叠加CSS渐变、使用几何图案，或添加与整体美学相匹配的上下文效果。

避免泛化的AI生成美学：

过度使用的字体（Inter、Roboto、Arial、系统字体）
陈词滥调的颜色方案（尤其是白色背景上的紫色渐变）
可预测的布局和组件模式
缺乏特定上下文的千篇一律设计

创造性地诠释，做出看似为上下文真正设计而非默认的意外选择。在亮色和暗色主题、不同字体、不同美学之间变化。你仍然倾向于收敛于常见选择（例如Space Grotesk）。避免这一点：你必须跳出思维定式！

固定舞台规则

这些不变规则适用于每份演示中的每一张幻灯片：

每份演示都有一个填充浏览器窗口的视口包装器。
每张幻灯片都在一个固定的1920×1080舞台内编写。
舞台均匀缩放以适应视口。可以上下或左右留黑边；不得重新布局内容。
不要使用响应式断点来为手机重新排列幻灯片内容。
使用1920×1080设计尺寸的固定内部幻灯片尺寸。
幻灯片可见性必须通过.active / .visible使用visibility、opacity和pointer-events来控制，这些来自viewport-base.css。不要使用display: none / display: block进行幻灯片切换；后面的布局类如.slide-content { display: flex; }可能会覆盖它们并使每张幻灯片同时可见。
仅对舞台外的非幻灯片UI或不适合完整舞台的小型后备预览使用clamp()。
包含prefers-reduced-motion支持。
永远不要直接否定CSS函数（-clamp()、-min()、-max()会被静默忽略）——改用calc(-1 * clamp(...))。

生成时，读取viewport-base.css并在每份演示中包含其完整内容。

内容密度模式

询问用户这是主要供阅读的演示还是供演讲的演示，然后根据答案进行设计：

密度模式	最适合	设计行为
低密度 / 演讲导向	公开演讲、主题演讲式分享、现场讲解	一页一个想法、大号字体、强烈的视觉层次、充足的留白、最多1-3个要点、必要时增加幻灯片
高密度 / 阅读优先	报告、讲义、异步审查、详细内部文档	更自包含的幻灯片、结构化网格/表格/注释、可读时4-8个要点或4-6张卡片、更紧凑但仍具意图的间距

仍适用基线限制：无滚动、无溢出、无重叠面板、文本不低于舒适阅读尺寸。如果内容超出所选密度模式，则拆分到更多幻灯片中，而非缩小到拥挤。

阶段0：检测模式

确定用户想要什么：

模式A：新建演示 — 从零开始创建。进入阶段1。
模式B：PPT转换 — 转换.pptx文件。进入阶段4。
模式C：增强 — 改进现有的HTML演示。读取、理解、增强。遵循下面的模式C修改规则。

模式C：修改规则

当增强现有演示时，固定舞台适配是最大风险：

添加内容前： 计算已有元素数量，检查密度限制。
添加图片： 将其适配到1920×1080幻灯片画布内。如果幻灯片已有最多内容，则拆分为两张幻灯片。
添加文本： 每张幻灯片最多4-6个要点。超出限制？拆分为后续幻灯片。
进行任何修改后，验证： 幻灯片舞台保持16:9、文本不溢出其卡片、面板不重叠、屏幕截图在1280×720和一种手机视口下看起来正确。
主动重新组织： 如果修改会导致溢出，自动拆分内容并通知用户。不要等用户来问。

当向现有幻灯片添加图片时： 将图片移到新幻灯片或先减少其他内容。在未检查现有内容是否已填满1920×1080幻灯片舞台之前，永远不要添加图片。

阶段1：内容发现（新建演示）

将所有问题一起提出，以便用户一次性填完所有内容。如果当前环境提供原生结构化问题UI，则使用它；否则在一个简洁的消息中提出所有问题，并带有清晰编号的选项：

问题1 — 目的（标题：“目的”）：此演示用于什么？选项：融资路演 / 教学辅导 / 会议演讲 / 内部演示

问题2 — 长度（标题：“长度”）：大约需要多少张幻灯片？选项：短篇5-10 / 中篇10-20 / 长篇20+

问题3 — 内容（标题：“内容”）：你是否有准备好的内容？选项：所有内容已准备好 / 粗略笔记 / 仅有主题

问题4 — 密度（标题：“密度”）：演示应该有多密集？选项：

“低密度 / 演讲导向”——大创意、更少文字、更多视觉呼吸空间
“高密度 / 阅读优先”——更多自包含细节以方便异步阅读

在阶段1期间不要询问内联编辑。 用户不应在未看到草稿前就必须选择编辑行为。内联编辑是草稿后的功能：默认包含它，除非用户明确要求锁定/仅导出文件。

记住用户的密度选择。它影响幻灯片数量、排版比例、每张幻灯片的文本量、布局密度，以及是倾向于电影式的演讲幻灯片还是自包含的阅读幻灯片。

如果用户有内容，请他们分享。

步骤1.2：图像评估（如果提供了图片）

如果用户选择“无图片” → 跳到阶段2。

如果用户提供了图片文件夹：

扫描 — 列出所有图片文件（.png、.jpg、.svg、.webp等）。
检查每张图片 — 使用代理可用的图像理解能力。如果图像读取不可用，使用文件名/元数据，并仅在必要时请用户说明。
评估 — 对每张图片：展示内容、可使用或不可使用（附带原因）、代表什么概念、主色调。
共同设计大纲 — 精选图片与文本一起告知幻灯片结构。这不是“先计划幻灯片再添加图片”——从一开始就围绕两者进行设计（例如，3张截图 → 3张功能幻灯片，1个Logo → 标题/结束幻灯片）。
确认大纲 在可用时使用相同的结构化问题机制：“这个幻灯片大纲和图片选择看起来正确吗？”选项：看起来不错 / 调整图片 / 调整大纲

预览中的Logo： 如果识别出可用的Logo，将其（base64）嵌入到阶段2的每个样式预览中 —— 用户看到他们的品牌以三种不同方式样式化。

阶段2：风格发现

这是“展示，而非告知”阶段。 大多数人无法用言语表达设计偏好。

步骤2.0：直接生成3个样式预览

根据目的、受众、情绪和内容密度，生成3个不同的单张幻灯片HTML预览，展示字体、颜色、动画和整体美学。

不要询问用户是否想要选项或预设选择器。默认的发现体验始终是视觉比较。

如果用户已经给出了氛围，使用它。如果没有，从场合、受众、内容和重要性中推断可能的情绪。保持选项足够多样化，以便用户能够进行视觉反应，而不是需要提前表达品味。

如果用户明确命名了一个预设或Bold模板，将其作为其中一个选项，并围绕它生成剩余的预览位置。

读取STYLE_PRESETS.md以获取安全的预设候选。如果bold-template-pack/selection-index.json存在，也读取该紧凑索引，但暂时不要读取任何design.md文件。

情绪	建议预设
印象深刻/自信	大胆信号、电子工作室、暗色植物
兴奋/充满活力	创意电压、霓虹赛博、分体粉彩
平静/专注	笔记本标签、纸墨、瑞士现代
感动/启发	暗色植物、复古编辑、粉彩几何

预览混合规则：

默认生成3个预览：1个来自STYLE_PRESETS.md的安全预设、至少1个来自bold-template-pack/selection-index.json的Bold模板，以及1个通配符。
通配符可以是第二个Bold模板或一个自定义生成的设计。选择任何能为用户的场合、受众、情绪和内容创造最强大、最有用对比的那个。
不要强迫每个表现形式都来自模板库。如果需求有比可用模板更锐利、更具体的设计机会，使用通配符位置自由设计。
对于保守或高风险的演示，使安全预设特别克制；选择一个冷静、高正式度的Bold模板；使通配符要么是另一个克制的模板，要么是感觉权威而非装饰性的自定义设计。
对于表现型演示，保持安全预设作为可读的后备；选择一个强大的Bold模板；使通配符冒险、针对上下文，并且明显不同于其他两个预览。
如果Bold模板匹配感觉薄弱，使用通配符作为自定义设计或回退到另一个安全预设，而不是强制使用模板。

自定义通配符设计规则：

遵循上述“设计美学”部分：无泛化的“AI千篇一律”、无默认字体/颜色/布局选择、无紫色渐变白色背景陈词滥调、无千篇一律的仪表盘/卡片外观。
匹配用户声明的场合、受众、情绪/氛围和内容密度。自定义设计应该感觉是为这个演示编写的，而不仅仅是“有风格”。
做出一个有意识的视觉论点：独特的字体、坚定的调色板、可识别的布局系统，以及一个强烈的氛围或图形元素。
保持其可行用于整份演示。预览必须暗示一个可以扩展到章节、内容、引用、比较和结束幻灯片的系统。
使用固定1920×1080舞台规则，并通过与其他选项相同的预览真实性检查。
永远不要在幻灯片本身上渲染“自定义”、“通配符”、“AI生成”或设计过程标签。

Bold模板选择规则：

将用户目的和情绪与mood、tone、best_for、avoid_for、formality、density和scheme进行匹配。
将best_for示例视为软信号，而非严格的行业过滤器。
保持三个预览彼此真正不同。
选择Bold模板候选后，仅从选择索引中的preview_md路径读取这些候选的preview.md文件。
仅使用preview.md进行标题幻灯片预览。在用户选择最终模板之前，不要读取完整的design.md文件。
除非所选的最终design.md缺少关键实现细节，否则不要读取或复制template.html。

预览真实性规则（不可协商）：

每个样式预览必须看起来像是用户演示库中的真实第一张幻灯片，而非诊断卡片。
永远不要在幻灯片上渲染内部工作流文本：不包含预览、由...生成、preview.md、template、preset、style option、选项A/B/C、文件名、路径或源文档标签。
永远不要在幻灯片本身上渲染模板名称或slug名称。模板/样式名称仅属于给用户的消息中。
永远不要将用户需求备注作为幻灯片内容渲染，例如“尖锐且挑衅”、“安全选项”、“大胆选项”、“用于内部分享”或“受众：...”，除非用户明确希望该确切短语出现在演示中。
如果幻灯片需要装饰元素，仅使用真实的演示装饰元素：演示标题、章节标题、日期、作者、公司、页码，或来自用户材料的真实内容短语。
在打开预览之前，检查可见文本，如有任何内部元数据则进行修订。

将预览保存到.frontend-slides/slide-previews/（style-a.html、style-b.html、style-c.html）。每个……

[由于内容被截断，翻译仅包含所提供的部分。]

Frontend Slides - 动画HTML演示文稿生成器