技能介绍

解决的具体问题

在技术分享或产品演示中，传统的 PPT 往往受限于本地环境和笨重的依赖，而通用 AI 生成的幻灯片则容易陷入“AI 审美疲劳”——排版千篇一律、色彩呆板，且在移动端极易出现内容溢出或滚动问题。Zara Frontend Slides 旨在解决这些痛点，通过生成零依赖、强适配的单文件 HTML 演示，让设计既保持独特性，又能完美运行在任意现代浏览器中。

核心能力与关键步骤

该技能将演示文稿的生成转化为一个结构化的工程流：

交互式风格发现：摒弃抽象的选项，技能会基于受众期望的情绪（如专业、激发、平静）生成 3 个独立的单页 HTML 视觉预览，让用户“所见即所得”地选择设计方向。
严格的视口适配：强制要求每页 height: 100vh 且 overflow: hidden。所有字体和间距均使用 clamp() 动态计算，确保在 700px 至 500px 等不同断点下内容绝不溢出。
内容密度控制：内置每页内容上限（如内容页仅限 4-6 个要点）。若内容超出限制，技能会自动触发分页逻辑，拒绝“硬塞”内容。
全链路交付：支持从 PPTX 提取文本与图片进行转换，最终输出单文件 HTML，并可进一步部署至 Vercel 生成移动端友好的分享链接，或导出为 PDF。

适用边界与注意点

内容密度限制：该技能对单页信息量有严格限制，适合要点化、视觉化的演示。若需展示大量密集文字，需主动拆分为多页。
CSS 依赖：生成代码强依赖 viewport-base.css 的规范。在后续增强或修改现有演示时，必须重新校验视口约束与内容密度，否则极易破坏布局。
设计约束：技能明确避免使用 Inter、Roboto 等通用字体及紫白渐变等刻板配色，这意味着其视觉风格会偏向独立定制，可能与传统企业模板存在差异。