HTML前端视频设计规范 — HTML 前端视频设计规范

前端幻灯片 创建零依赖、动画丰富的HTML演示文稿，完全在浏览器中运行。 核心原则 零依赖 —— 单个HTML文件，内联CSS/JS。不需要npm，不需要构建工具。 展示，而不是讲述 —— 生成视觉预览，而不是抽象选择。人们通过看到东西来发现他们想要的。 独特设计 —— 没有通用的“AI乱码”。每个演示文稿必须感觉像定制的。 视口适配（不可商量） —— 每个幻灯片必须完全适配100vh。永远不允许在幻灯片中滚动。内容溢出？分成多个幻灯片。 设计美学 您倾向于收敛到通用的、“按分布”输出。在前端设计中，这会产生用户所谓的“AI乱码”美学。避免这种情况：创建创意、独特的前端，令用户惊讶和愉悦。 关注点： 字体：选择美丽、独特、有趣的字体。避免通用的字体，如Arial和Inter；选择能提升前端美学的独特字体。 颜色和主题：致力于统一的美学。使用CSS变量来保持一致性。主导颜色和鲜明的装饰比胆怯、均匀分布的调色板更出色。从IDE主题和文化美学中汲取灵感。 动画：使用动画来实现效果和微交互。优先使用CSS-only解决方案来实现HTML。使用Motion库来实现React动画。 关注高影响力时刻：一个精心编排的页面加载，带有延迟显示（animation-delay），比分散的微交互更能带来愉悦。 背景：创建氛围和深度，而不是默认使用纯色。分层CSS渐变，使用几何图案，或添加与整体美学相匹配的上下文效果。 避免通用的AI生成美学： 过度使用的字体家族（Inter、Roboto、Arial、系统字体） 陈词滥调的色彩方案（特别是紫色渐变在白色背景上） 可预测的布局和组件模式 缺乏上下文特征的剪切板设计 创造性地解释并做出意外的选择，感觉真正为上下文而设计。 在不同主题、字体、美学之间变化。您仍然倾向于在不同版本中收敛到共同的选择（例如Space Grotesk）。 避免这种情况：至关重要的是，您要跳出思维定式！ 视口适配规则 这些不变量适用于每个演示文稿中的每个幻灯片： 每个.slide必须具有height: 100vh；height: 100dvh；overflow: hidden； 所有字体大小和间距必须使用clamp(min, preferred, max) —— 绝不使用固定px/rem 内容容器需要最大高度约束 图像：最大高度：min(50vh, 400px) 需要高度的断点：700px、600px、500px 包括prefers-reduced-motion支持 永远不要直接否定CSS函数（-clamp()、-min()、-max()被默默忽略）—— 使用calc(-1 * clamp(...))代替 生成时，阅读viewport-base.css并在每个演示文稿中包含其全部内容。 内容密度限制 每张幻灯片 幻灯片类型 最大内容 标题幻灯片 1个标题 + 1个子标题 + 可选标语 内容幻灯片 1个标题 + 4-6个项目符号 或 1个标题 + 2个段落 功能网格 1个标题 + 6个卡片（2x3或3x2） 代码幻灯片 1个标题 + 8-10行代码 引用幻灯片 1个引用（最多3行） + 引用 图像幻灯片 1个标题 + 1个图像（最大60vh高度） 内容超过限制？分成多个幻灯片。永远不要塞满，永远不要滚动。 第0阶段：检测模式 确定用户想要什么： 模式A：新演示文稿 —— 从头开始创建。转到第1阶段。 模式B：PPT转换 —— 转换.pptx文件。转到第4阶段。 模式C：增强 —— 提升现有的HTML演示文稿。阅读它，理解它，增强它。遵循以下模式C修改规则。 模式C：修改规则 在增强现有演示文稿时，视口适配是最大的风险： 在添加内容之前：计算现有元素，检查密度限制 添加图像：必须具有最大高度：min(50vh, 400px)。如果幻灯片已经有最大内容，分成两个幻灯片 添加文本：每张幻灯片最多4-6个项目符号。超过限制？分成继续幻灯片 在任何修改之后，验证： .slide具有overflow: hidden，新元素使用clamp()，图像具有视口相对最大高度，内容适合1280x720 主动重新组织：如果修改会导致溢出，自动分割内容并通知用户。不要等待被要求 在现有幻灯片中添加图像时：将图像移到新幻灯片或减少其他内容。永远不要在检查现有内容是否已经填满视口之前添加图像。 第1阶段：内容发现（新演示文稿） 在单个AskUserQuestion调用中询问所有问题，以便用户一次性填写所有内容： 问题1 —— 目的（标题：“目的”）：此演示文稿的目的是什么？ 选项：推销演示文稿 / 教学-教程 / 会议演讲 / 内部演示文稿 问题2 —— 长度（标题：“长度”）：大约多少张幻灯片？ 选项：短（5-10）/ 中（10-20）/ 长（20+） 问题3