技能介绍

解决的问题

做演示稿时，常见痛点是把设计、内容密度和浏览器适配混在一起：PPT 转网页容易溢出，AI 生成页面容易千篇一律，多人协作时又希望文本能直接改、链接可分享。zara-frontend-slides 面向这类场景，目标是产出单文件 HTML 演示：无需 npm、无构建步骤，打开即用，同时保留动画、主题和移动端可访问性。

工作方式与关键步骤

技能按“先内容、再风格、后生成”的流程推进：

新演示：收集用途、页数、内容来源，并询问是否启用浏览器内编辑；可选编辑模式会写入 localStorage 并支持导出。
图像评估：如果提供图片文件夹，它会逐个查看图片，判断可用性、主色和概念，再把图片纳入大纲，而不是最后硬塞进页面。
风格发现：生成 3 个单页预览，让用户基于视觉而非抽象描述选择排版、颜色、动效和整体气质。
生成约束：每张幻灯片必须 100vh 适配、overflow: hidden，字号和间距使用 clamp()，图片设置相对高度；内容超限时拆页而不是滚动。
PPT 转换：可用 python-pptx 提取 .pptx 文本、顺序和图片资源，再转成所选风格，演讲者备注保留为 HTML 注释。
交付与分享：可选部署到 Vercel 得到可手机访问的链接，或导出 PDF。

适用边界与注意点

它适合产品讲解、教学材料、会议分享、内部汇报等需要视觉呈现的文本型演示。需要注意：它默认追求“设计感”，会主动避免 Inter、Roboto 等通用字体和紫色渐变白底这类常见组合；如果用户指定强品牌规范，应以品牌为准。技能强调不塞内容、不滚屏，因此长文档式内容需要拆页；若需要复杂交互、数据实时拉取或多页应用逻辑，单文件 HTML 并非合适载体。