# 前端幻灯片技巧创建完全在浏览器中运行的零依赖、动画丰富的 HTML 演示文稿。这项技能可以帮助非设计师通过视觉探索（“展示，而不是讲述”）发现他们喜欢的美学，然后生成生产质量的幻灯片。 ## 核心理念 1. **零依赖** — 具有内联 CSS/JS 的单个 HTML 文件。没有 npm，没有构建工具。 2. **展示，不要告诉**——人们在看到之前并不知道自己想要什么。生成视觉预览，而不是抽象选择。 3. **独特的设计** — 避免通用的“AI slop”美学。每一次演示都应该给人量身定制的感觉。 4. **产品质量** — 代码应该有良好的注释、可访问且高性能。 5. **视口适配（关键）** — 每张幻灯片必须完全适合视口。永远不要在幻灯片中滚动。这是没有商量余地的。 ** ** ## 关键：视口拟合要求 **本节对于所有演示都是强制性的。每张幻灯片都必须完全可见，无需在任何屏幕尺寸上滚动。** ### 黄金法则每张幻灯片 = 恰好一个视口高度 (100vh/100dvh) 内容溢出？ → 分成多张幻灯片或减少内容切勿在幻灯片内滚动。 ### 内容密度限制为了保证视口适合，请对每张幻灯片强制执行以下限制：幻灯片类型|最大内容 ---|--- 标题幻灯片 | 1 个标题 + 1 个副标题 + 可选标语内容幻灯片| 1 个标题 + 4-6 个要点或 1 个标题 + 2 个段落特征网格| 1 个标题 + 最多 6 张卡片（2x3 或 3x2 网格）代码幻灯片 | 1 个标题 + 最多 8-10 行代码报价幻灯片| 1 条引言（最多 3 行）+ 出处图片幻灯片| 1 个标题 + 1 个图像（最大 60vh 高度） **如果内容超出这些限制 → 分成多张幻灯片** ### 所需的 CSS 架构每个演示文稿都必须包含用于视口适配的基本 CSS： /* ============================================= 视口适配：强制底座样式这些风格必须包含在每个演示文稿中。它们确保幻灯片完全适合视口。 ============================================= */ /* 1. 将 html/body 锁定到视口 */ html，正文{ 高度：100%；溢出-x：隐藏； } html{ 滚动捕捉类型：y 强制；滚动行为：平滑； } /* 2. 每张幻灯片 = 精确的视口高度 */ .幻灯片{ 宽度：100vw；高度：100vh；高度：100dvh； /* 移动浏览器的动态视口高度 */ 溢出：隐藏； /* 关键：防止任何溢出 */ 滚动对齐：开始；显示：柔性；弹性方向：列；位置：相对； } /* 3. 具有用于居中的 Flex 的内容容器 */ .幻灯片内容{ 弹性：1；显示：柔性；弹性方向：列；调整内容：居中；最大高度：100%；溢出：隐藏； /* 双重防止溢出 */ 填充：var(--slide-padding); } /* 4. 所有排版都使用clamp() 进行响应式缩放 */ ：根{ /* 标题从移动设备缩放到桌面设备 */ --标题大小：clamp(1.5rem, 5vw, 4rem); --h2-尺寸：夹具（1.25rem，3.5vw，2.5rem）； --h3-尺寸：夹具（1rem，2.5vw，1.75rem）； /* 正文 */ --body-size: 夹具(0.75rem, 1.5vw, 1.125rem); --小尺寸：夹具(0.65rem, 1vw, 0.875rem); /* 与视口的间距比例 */ --slide-padding: 夹子(1rem, 4vw, 4rem); --内容间隙：夹子（0.5rem，2vw，2rem）； --元素间隙：夹子（0.25rem，1vw，1rem）； } /* 5. 卡片/容器使用相对于视口的最大尺寸 */ .card、.container、.content-box { 最大宽度：最小（90vw，1000px）；最大高度：最小（80vh，700px）； } /* 6. 列出视口自动缩放 */ .feature-list, .bullet-list { 间隙：钳位（0.4rem，1vh，1rem）； } .feature-list li, .bullet-list li { 字体大小：var(--body-size); 行高：1.4； } /* 7. 网格适应可用空间 */ .网格{ 显示：网格；网格模板列：重复（自动调整，minmax（min（100％，250px），1fr））；间隙：夹具（0.5rem，1.5vw，1rem）； } /* 8. 图像限制在视口 */ img, .image-container { 最大宽度：100%；最大高度：最小（50vh，400px）；对象适合：包含； } /* ============================================= 响应断点针对较小视口的积极缩放 ============================================= */ /* 短视口（< 700px 高度） */ @media（最大高度：700px）{ ：根{ --滑动填充：夹子（0.75rem，3vw，2rem）； --内容间隙：夹子（0.4rem，1.5vw，1rem）； --标题大小：clamp(1.25rem, 4.5vw, 2.5rem); --h2-尺寸：夹具（1rem，3vw，1.75rem）； } } /* 非常短的视口（< 600px 高度） */ @media（最大高度：600px）{ ：根{ --滑动填充：夹子（0.5rem，2.5vw，1.5rem）； --内容间隙：夹子（0.3rem，1vw，0.75rem）； --标题大小：clamp(1.1rem, 4vw, 2rem); --body-size: 夹子(0.7rem, 1.2vw, 0.95rem); } /* 隐藏非必要元素 */ .nav-dots, .keyboard-hint, .decorative { 显示：无； } } /* 极短（横向手机，< 500px 高度） */ @media（最大高度：500px）{ ：根{ --slide-padding: 夹子(0.4rem, 2vw, 1rem); --标题大小：clamp(1rem, 3.5vw, 1.5rem); --h2-尺寸：夹具（0.9rem，2.5vw，1.25rem）； --body-size: 夹具(0.65rem, 1vw, 0.85rem); } } /* 窄视口（< 600px 宽度） */ @media（最大宽度：600px）{ ：根{ --标题大小：clamp(1.25rem, 7vw, 2.5rem); } /* 垂直堆叠网格 */ .网格{ 网格模板列：1fr； } } /* ============================================= 减少运动尊重用户偏好 ============================================= */ @media（首选减少运动：减少）{ *，*::之前，*::之后{ 动画持续时间：0.01ms！重要；过渡持续时间：0.2s！重要； } html{ 滚动行为：自动； } } ### 溢出预防清单在生成任何演示文稿之前，请在心里验证： 1. ✅ 每个`.slide`都有`height: 100vh;高度：100dvh；溢出：隐藏；` 2. ✅ 所有字体大小均使用 `clamp(min, Preferred, max)` 3. ✅ 所有间距均使用 `clamp()` 或视口单位 4. ✅ 内容容器有“最大高度”约束 5. ✅ 图像具有 `max-height: min(50vh, 400px)` 或类似内容 6. ✅ 网格使用“auto-fit”和“minmax()”来响应列 7. ✅ 高度存在断点：700px、600px、500px 8. ✅ 内容元素没有固定的像素高度 9. ✅ 每张幻灯片的内容遵守密度限制 ### 当内容不合适时如果您发现自己的内容太多： **做：** * 分成多张幻灯片 * 减少要点（每张幻灯片最多 5-6 个） * 缩短文本（目标是每个项目符号 1-2 行） * 使用较小的代码片段 * 创建“续”幻灯片 **不要：** * 将字体大小减小到可读限制以下 * 完全删除填充/间距 * 允许任意滚动 * 临时填充适合的内容 ### 测试视口适配生成后，建议用户测试以下尺寸： * 桌面：1920×1080、1440×900、1280×720 * 平板电脑：1024×768、768×1024（纵向） * 手机：375×667、414×896 * 横屏手机：667×375、896×414 ** ** ## 阶段 0：检测模式首先，确定用户想要什么： **模式 A：新演示** * 用户想要从头开始创建幻灯片 * 进入第一阶段（内容发现） **模式B：PPT转换** * 用户有要转换的 PowerPoint 文件（.ppt、.pptx） * 进入第四阶段（PPT提取） **模式 C：现有演示增强** * 用户有一个 HTML 演示文稿并希望对其进行改进 * 阅读现有文件，了解结构，然后增强 ** ** ## 第 1 阶段：内容发现（新演示文稿）在设计之前，先了解内容。通过 AskUserQuestion 提问： ### 步骤 1.1：演示上下文 **问题 1：目的** * 标题：“目的” * 问题：“这个演示的目的是什么？” * 选项： *“推介材料”——向投资者/客户推销创意、产品或公司 *“教学/教程”——解释概念、操作指南、教育内容 *“会议演讲”——在活动中演讲、技术演讲、主题演讲 *“内部演示”——团队更新、战略会议、公司更新 **问题 2：幻灯片计数** * 标题：“长度” * 问题：“大约有多少张幻灯片？” * 选项： *“短篇（5-10）”——快速的演讲，闪电般的演讲 *“中（10-20）”——标准演示 *“长篇（20+）”——深入探讨、全面讨论 **问题3：内容** * 标题：“内容” * 问题：“您准备好内容了吗？还是需要帮助来构建内容？” * 选项： *“我已准备好所有内容”- 只需要设计演示文稿 *“我有粗略的笔记”——需要帮助组织成幻灯片 *“我只有一个主题”——需要帮助创建完整的大纲如果用户有内容，请他们分享（文本、要点、图像等）。 ** ** ## 第二阶段：风格发现（视觉探索） **关键：这是“展示，而不是讲述”阶段。** 大多数人无法用语言表达设计偏好。我们不会问“您想要简约还是大胆？”，而是生成迷你预览并让他们做出反应。 ### 用户如何选择预设用户可以通过**两种方式**选择样式： **选项 A：引导式发现（默认）** * 用户回答心情问题 * 技能根据他们的答案生成 3 个预览文件 * 用户在浏览器中查看预览并选择他们最喜欢的 * 这最适合没有特定风格的用户 **选项 B：直接选择** * 如果用户已经知道他们想要什么，他们可以按名称请求预设 * 示例：“使用粗体信号样式”或“我想要深色植物”之类的东西 * 立即跳至第 3 阶段 **可用预设：** 预设|氛围|最适合 ---|---|--- 大胆的信号|自信、高影响力 |推介材料、主题演讲电动工作室|干净、专业|机构介绍创意电压|充满活力、复古现代 |创意推介深色植物 |优雅、精致 |优质品牌笔记本标签 |社论，组织|报告、评论粉彩几何|友善、平易近人 |产品概述分裂粉彩|俏皮、现代 |创意机构复古社论|机智、个性驱动 |个人品牌霓虹网络|未来派、科技感 |科技初创公司航站楼绿色 |以开发者为中心 |开发工具、API 瑞士现代|最小，精确 |企业、数据纸张与油墨 |文艺、有思想|讲故事 ### 步骤 2.0：样式路径选择首先，询问用户想要如何选择自己的风格： **问题：款式选择方法** * 标题：“风格” * 问题：“您希望如何选择演示风格？” * 选项： *“显示选项”——根据我的需要生成 3 个预览（推荐给大多数用户） * “我知道我想要什么”——让我直接从预设列表中选择 **如果“显示选项”** → 继续步骤 2.1（情绪选择） **如果“我知道我想要什么”** → 显示预设选择器： **问题：选择预设** * 标题：“预设” * 问题：“您想使用哪种风格？” * 选项： *“大胆信号”——黑暗中充满活力的卡片，自信且具有高影响力 *“Dark Botanical”——优雅的深色搭配柔和的抽象形状 *“笔记本选项卡”——带有彩色部分选项卡的社论论文外观 *“粉彩几何”——带有装饰丸的友好粉彩（如果用户选择一个，请跳到第 3 阶段。如果他们想查看更多选项，请显示其他预设或继续引导发现。） ### 步骤 2.1：情绪选择（引导发现） **问题1：感觉** * 标题：“氛围” * 问题：“观众在观看你的幻灯片时应该有什么感受？” * 选项： *“印象深刻/自信”——专业、值得信赖，这个团队知道他们在做什么 *“兴奋/充满活力”——创新、大胆，这就是未来 *“冷静/专注”——清晰、深思熟虑、易于遵循 *“启发/感动”——情感丰富、讲故事、令人难忘 * multiSelect: true (最多可以选择2个) ### 步骤 2.2：生成样式预览根据他们的心情选择，在临时目录中生成 **3 个不同风格的预览** 作为迷你 HTML 文件。每个预览应该是一个单一标题幻灯片，显示： * 版式（字体选择、标题/正文层次结构） * 调色板（背景、强调色、文本颜色） * 动画风格（元素如何进入） * 整体美感 **要考虑的预览风格（根据心情选择 3 种）：** 心情 |风格选项 ---|--- 印象深刻/自信 | 《大胆的信号》、《电气工作室》、《黑暗植物》兴奋/充满活力 | 《创意电压》、《霓虹网络》、《分裂粉彩》冷静/专注 | “笔记本标签”、“纸张与墨水”、“瑞士现代” 受到启发/感动| “黑暗植物”、“复古社论”、“柔和的几何” **重要提示：切勿使用这些通用模式：** * 白色背景上的紫色渐变 * Inter、Roboto 或系统字体 * 标准蓝色基色 *可预测的英雄布局 **相反，使用独特的选择：** * 独特的字体配对（Clash Display、Satoshi、Cormorant Garamond、DM Sans 等） * 具有凝聚力的个性色彩主题 * 大气背景（渐变、微妙图案、深度） * 标志性动画时刻 ### 步骤 2.3：呈现预览在以下位置创建预览：`.claude-design/slide-previews/` .claude-设计/幻灯片预览/ ├── style-a.html # 第一个样式选项 ├── style-b.html # 第二个样式选项 ├── style-c.html # 第三个样式选项 └── assets/ # 任何共享资产每个预览文件应该是： * 独立（内联 CSS/JS） * 一张展示美感的“标题幻灯片” * 动画展示动作风格 * ~50-100 行，不是完整的演示呈现给用户：我创建了 3 种风格预览供您比较： **样式 A：[名称]** — [1 句话描述] **样式 B：[名称]** — [1 句话描述] **样式 C：[名称]** — [1 句话描述] 打开每个文件以查看它们的运行情况： - .claude-design/slide-previews/style-a.html - .claude-design/slide-previews/style-b.html - .claude-design/slide-previews/style-c.html 看看并告诉我： 1. 哪种风格最能引起共鸣？ 2.你喜欢它什么？ 3. 你有什么想要改变的吗？然后使用 AskUserQuestion： **问题：选择你的风格** * 标题：“风格” * 问题：“您更喜欢哪种风格的预览？” * 选项： *“样式A：[名称]”—[简要说明] *“样式B：[名称]”—[简要说明] *“样式C：[名称]”-[简要说明] *“混合元素”——结合不同风格的方面如果“混合元素”，请询问具体细节。 ** ** ## 第 3 阶段：生成演示文稿现在根据以下内容生成完整的演示文稿： * 第一阶段的内容 * 第二阶段的风格 ### 文件结构对于单个演示： presentation.html # 独立的演示文稿资产/ # 图片，如果有的话对于具有多个演示文稿的项目： [演示文稿名称].html [演示文稿名称]-资产/ ### HTML 架构所有演示均遵循以下结构： <头> <元字符集=“UTF-8”> 演示文稿标题 <风格> /* ============================================= CSS 自定义属性（主题）易于修改：更改这些即可改变整体外观 ============================================= */ ：根{ /* 颜色 */ --bg-primary: #0a0f1c; --bg-次要：#111827； --文本主：#ffffff； --文本辅助：#9ca3af； -- 口音：#00ffcc； --强调发光: rgba(0, 255, 204, 0.3); /* 版式 - 必须使用钳位（）进行响应式缩放*/ --font-display: '冲突显示', sans-serif; --font-body: '中本聪', sans-serif; --标题大小：clamp(2rem, 6vw, 5rem); --字幕大小：clamp(0.875rem, 2vw, 1.25rem); --body-size: 夹子(0.75rem, 1.2vw, 1rem); /* 间距 - 必须使用钳位() 进行响应式缩放 */ --slide-padding: 夹子(1.5rem, 4vw, 4rem); --内容间隙：夹子（1rem，2vw，2rem）； /* 动画 */ --ease-out-expo: 三次贝塞尔曲线(0.16, 1, 0.3, 1); --正常持续时间：0.6s； } /* ============================================= 基本款式 ============================================= */ * { 保证金：0；填充：0；框大小：边框框； } html{ 滚动行为：平滑；滚动捕捉类型：y 强制；高度：100%； } 身体{ 字体系列：var(--font-body); 背景：var(--bg-primary); 颜色：var(--text-primary); 溢出-x：隐藏；高度：100%； } /* ============================================= 滑动容器关键：每张幻灯片必须完全适合视口 - 使用高度：100vh（不是最小高度） - 使用溢出：隐藏来防止滚动 - 内容必须根据clamp()值进行缩放 ============================================= */ .幻灯片{ 宽度：100vw；高度：100vh； /* 精确的视口高度 - 不滚动 */ 高度：100dvh； /* 移动设备的动态视口高度 */ 填充：var(--slide-padding); 滚动对齐：开始；显示：柔性；弹性方向：列；调整内容：居中；位置：相对；溢出：隐藏； /* 防止任何内容溢出 */ } /* 防止溢出的内容包装 */ .幻灯片内容{ 弹性：1；显示：柔性；弹性方向：列；调整内容：居中；最大高度：100%；溢出：隐藏； } /* ============================================= 响应断点调整内容以适应不同的屏幕尺寸 ============================================= */ @media（最大高度：600px）{ ：根{ --slide-padding: 夹子(1rem, 3vw, 2rem); --内容间隙：夹子（0.5rem，1.5vw，1rem）； } } @media（最大宽度：768px）{ ：根{ --标题大小：clamp(1.5rem, 8vw, 3rem); } } @media（最大高度：500px）和（方向：横向）{ /* 对于横向手机来说非常紧凑 */ ：根{ --标题大小：clamp(1.25rem, 5vw, 2rem); --滑动填充：夹子（0.75rem，2vw，1.5rem）； } } /* ============================================= 动画通过 .visible 类触发（由 JS 在滚动时添加） ============================================= */ .揭示{ 不透明度：0；变换：翻译Y（30px）；过渡：不透明度 var(--duration-normal) var(--ease-out-expo), 变换 var(--duration-normal) var(--ease-out-expo); } .slide.visible .reveal { 不透明度：1；变换：翻译Y(0)； } /* 错开孩子 */ .reveal:nth-child(1) { 转换延迟: 0.1s; } .reveal:nth-child(2) { 转换延迟: 0.2s; } .reveal:nth-child(3) { 转换延迟: 0.3s; } .reveal:nth-child(4) { 转换延迟: 0.4s; } /* ...更多样式... */ <正文>

演示文稿标题

副标题或作者

<节类=“幻灯片”>

幻灯片标题

内容...

<脚本> /* ============================================= 幻灯片演示控制器处理导航、动画和交互 ============================================= */ 类幻灯片演示 { 构造函数（）{ // ... 初始化 } // ... 方法 } // 初始化新的幻灯片演示（）； ### 必需的 JavaScript 功能每个演示文稿都应包括： 1. **SlidePresentation类**——主控制器 * 键盘导航（箭头、空格） * 触摸/滑动支持 * 鼠标滚轮导航 * 进度条更新 * 导航点 2. **Intersection Observer** — 用于滚动触发的动画 * 幻灯片进入视口时添加`.visible`类 * 高效触发CSS动画 3. **可选增强功能**（基于样式）： * 带轨迹的自定义光标 * 粒子系统背景（画布） * 视差效果 * 悬停时 3D 倾斜 * 磁性按钮 * 计数器动画 ### 代码质量要求 **评论：** 每个部分都应该有明确的评论解释： * 它的作用 * 为什么存在 * 如何修改 /* ============================================= 自定义光标创建一个跟随鼠标并具有轨迹效果的风格化光标。 - 使用 lerp（线性插值）实现平滑运动 - 将鼠标悬停在交互元素上时会变大 ============================================= */ 类自定义游标{ 构造函数（）{ // ... } } **辅助功能：** * 语义 HTML（`

`、`

`） * 键盘导航有效 * 在需要的地方添加 ARIA 标签 * 减少运动支持 @media（首选减少运动：减少）{ .揭示{ 过渡：不透明度 0.3s 缓动；变换：无； } } **响应式和视口适配（关键）：** **请参阅上面的“关键：视口适配要求”部分，了解完整的 CSS 和指南。** 快速参考： * 每个`.slide`必须有`height: 100vh;高度：100dvh；溢出：隐藏；` * 所有排版和间距必须使用 `clamp()` * 遵守内容密度限制（最多 4-6 个项目符号、最多 6 张卡片等） * 包括高度断点：700px、600px、500px * 当内容不适合时 → 分成多张幻灯片，切勿滚动 ** ** ## 第四阶段：PPT转换转换 PowerPoint 文件时： ### 步骤4.1：提取内容使用 Python 和 `python-pptx` 来提取：从 pptx 导入演示文稿 from pptx.util import 英寸、Pt 导入 json 导入操作系统导入base64 def extract_pptx(文件路径, 输出目录): ”“” 从 PowerPoint 文件中提取所有内容。返回包含幻灯片、文本和图像的 JSON 结构。 ”“” prs = 演示文稿（文件路径）幻灯片数据 = [] # 创建资产目录 asset_dir = os.path.join(output_dir, 'assets') os.makedirs（assets_dir，exist_ok = True）对于slide_num，幻灯片枚举（prs.slides）：幻灯片数据 = { “数字”：slide_num + 1， '标题': '', “内容”：[]， “图像”：[]， '注释'：'' } 对于 Slide.shapes 中的形状： # 提取标题如果 shape.has_text_frame: 如果形状==幻灯片.形状.标题： Slide_data['标题'] = shape.text 其他： Slide_data['内容'].append({ '类型'：'文本'， '内容'：形状.文本 }) # 提取图像 if shape.shape_type == 13: # 图片图像=形状.图像图像字节=图像.blob 图像_扩展 = 图像. 扩展 image_name = f"幻灯片{slide_num + 1}_img{len(slide_data['images']) + 1}.{image_ext}" image_path = os.path.join(assets_dir, image_name) 将 open(image_path, 'wb') 作为 f： f.write(image_bytes) Slide_data['图像'].append({ '路径': f"资产/{image_name}", '宽度'：形状.宽度， 'height': 形状.高度 }) # 提取注释如果slide.has_notes_slide：笔记框架=幻灯片.笔记_幻灯片.笔记_文本_框架 Slide_data['notes'] =notes_frame.text Slides_data.append(slide_data) 返回幻灯片数据 ### 步骤4.2：确认内容结构将提取的内容呈现给用户：我从您的 PowerPoint 中提取了以下内容： **幻灯片 1：[标题]** - 【内容概要】 - 图片：[计数] **幻灯片 2：[标题]** - 【内容概要】 - 图片：[计数] ... 所有图像均已保存到资产文件夹中。这看起来正确吗？我应该继续进行款式选择吗？ ### 步骤 4.3：风格选择继续进入第二阶段（风格发现），牢记提取的内容。 ### 步骤 4.4：生成 HTML 将提取的内容转换为所选样式，并保留： * 所有文字内容 * 所有图像（从资产文件夹引用） * 幻灯片顺序 * 任何演讲者注释（作为 HTML 注释或单独文件） ** ** ## 第五阶段：交付 ### 最终输出演示完成后： 1. **清理临时文件** * 删除`.claude-design/slide-previews/`（如果存在） 2. **打开演示文稿** * 使用 `open [filename].html` 在浏览器中启动 3. **提供摘要** 您的演示文稿已准备好！ 📁 文件：[文件名].html 🎨 风格：[风格名称] 📊 幻灯片：[计数] **导航：** - 箭头键 (← →) 或空格键进行导航 - 滚动/滑动也可以 - 单击右侧的点可跳转到幻灯片 **定制：** - 颜色：在顶部查找 `:root` CSS 变量 - 字体：更改 Fontshare/Google Fonts 链接 - 动画：修改`.reveal`类计时您想让我做一些调整吗？ ** ** ## 风格参考：效果 → 感觉映射使用本指南将动画与预期感受相匹配： ### 戏剧/电影 * 缓慢淡入（1-1.5s） * 大规模转变 (0.9 → 1) *带有聚光灯效果的深色背景 * 视差滚动 * 全出血图像 ### 科技/未来主义 *霓虹灯发光效果（带有强调色的盒子阴影） * 粒子系统（画布背景） * 网格图案 * 等宽字体用于重音 * 故障或混乱的文字效果 * 青色、洋红色、电蓝色调色板 ### 俏皮/友善 * 弹性缓动（弹簧物理） * 圆角（大半径） * 柔和或明亮的颜色 * 浮动/摆动动画 * 手绘或插图元素 ### 专业/企业 * 微妙、快速的动画（200-300ms） * 干净的无衬线字体 * 海军蓝、石板色或木炭背景 * 精确的间距和对齐 * 最少的装饰元素 * 数据可视化重点 ### 平静/最小 * 非常缓慢、微妙的运动 * 高空白 * 柔和的调色板 * 衬线字体 * 宽大的填充物 * 专注于内容，不受干扰 ### 社论/杂志 * 强大的排版层次结构 * 引用和标注 * 图文互动 * 打破网格的布局 * 衬线标题，无衬线正文 * 黑色和白色，带有一种口音 ** ** ## 动画模式参考 ### 入口动画 /* 淡入淡出 + 向上滑动（最常见） */ .揭示{ 不透明度：0；变换：翻译Y（30px）；过渡：不透明度 0.6s var(--ease-out-expo), 变换 0.6s var(--ease-out-expo); } .visible .reveal { 不透明度：1；变换：翻译Y(0)； } /* 缩小 */ .reveal-scale { 不透明度：0；变换：缩放（0.9）；过渡：不透明度 0.6s，变换 0.6s var(--ease-out-expo); } /* 从左滑动 */ .reveal-left { 不透明度：0；变换：translateX(-50px); 过渡：不透明度 0.6s，变换 0.6s var(--ease-out-expo); } /* 模糊处理 */ .reveal-blur { 不透明度：0；滤镜：模糊（10px）；过渡：不透明度 0.8s，滤镜 0.8s var(--ease-out-expo); } ### 背景效果 /* 渐变网格 */ .gradient-bg { 背景：径向渐变（20% 80% 处的椭圆，rgba(120, 0, 255, 0.3) 0%，透明 50%），径向渐变（椭圆 80% 20%，rgba(0, 255, 200, 0.2) 0%，透明 50%）， var(--bg-primary); } /* 噪声纹理 */ .噪声-bg { 背景图像：url（“数据：图像/ svg + xml，...”）; /* 内联 SVG 噪声 */ } /* 网格图案 */ .grid-bg { 背景图像：线性渐变（rgba（255,255,255,0.03）1px，透明1px），线性渐变（90deg，rgba（255,255,255,0.03）1px，透明1px）；背景大小：50px 50px； } ### 互动效果 /* 悬停时 3D 倾斜 */ 类倾斜效果 { 构造函数（元素）{ this.element = 元素； this.element.style.transformStyle = 'preserve-3d'; this.element.style.perspective = '1000px'; this.bindEvents(); } 绑定事件() { this.element.addEventListener('mousemove', (e) => { const rect = this.element.getBoundingClientRect(); const x = (e.clientX - 矩形.left) / 矩形.宽度 - 0.5; const y = (e.clientY - 矩形顶部) / 矩形高度 - 0.5; this.element.style.transform = ` 旋转Y(${x * 10}度) 旋转X(${-y * 10}度) `; }); this.element.addEventListener('mouseleave', () => { this.element.style.transform = 'rotateY(0)rotateX(0)'; }); } } ** ** ## 故障排除 ### 常见问题 **字体未加载：** * 检查 Fontshare/Google 字体 URL * 确保 CSS 中的字体名称匹配 **动画未触发：** * 验证 Intersection Observer 正在运行 * 检查是否添加了`.visible`类 **滚动捕捉不起作用：** * 确保 html/body 上有 `scroll-snap-type` * 每张幻灯片都需要 `scroll-snap-align: start` **移动问题：** * 在 768px 断点处禁用重效果 * 测试触摸事件 * 减少粒子数或禁用画布 **性能问题：** * 谨慎使用“will-change” * 更喜欢“transform”和“opacity”动画 * 油门滚动/鼠标移动处理程序 ** ** ## 相关技能 * **learn** — 生成演示文稿的 FORZARA.md 文档 * **前端设计** — 适用于幻灯片之外的更复杂的交互式页面 * **design-and-refine:design-lab** — 用于迭代组件设计 ** ** ## 会话流程示例 1. 用户：“我想为我的人工智能初创公司创建一个宣传材料” 2. 技能询问目的、长度、内容 3. 用户分享他们的要点和关键信息 4.技能询问想要的感觉（印象深刻+兴奋） 5.技能生成3种风格预览 6. 用户选择Style B（Neon Cyber），要求背景较暗 7. 技能生成所有幻灯片的完整演示 8. Skill 在浏览器中打开演示文稿 9. 用户请求对特定幻灯片进行调整 10. 发表最终演讲 ** ** ## 转换会话流程 1. 用户：“将我的幻灯片.pptx 转换为网络演示文稿” 2.技能从PPT中提取内容和图像 3.技能与用户确认提取的内容 4.技能询问想要的感觉/风格 5.技能生成风格预览 6. 用户选择风格 7. Skill 使用保留的资源生成 HTML 演示文稿 8. 最终演示

前端幻灯片

包含技能