Menu
从零开始或通过转换 PowerPoint 文件创建精美的、动画丰富的 HTML 演示文稿。当用户想要构建演示文稿、将 PPT/PPTX 转换为网页或为演讲/路演创建幻灯片时使用。帮助非设计师通过视觉探索而非抽象选择发现他们的审美。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | frontend-slides |
| description | 从零开始或通过转换 PowerPoint 文件创建精美的、动画丰富的 HTML 演示文稿。当用户想要构建演示文稿、将 PPT/PPTX 转换为网页或为演讲/路演创建幻灯片时使用。帮助非设计师通过视觉探索而非抽象选择发现他们的审美。 |
| origin | ECC |
创建零依赖的、动画丰富的 HTML 演示文稿，完全在浏览器中运行。
灵感来自 zarazhangrui 作品中展示的视觉探索方法（致谢：@zarazhangrui）。
.ppt 或 .pptx 幻灯片转换为 HTML 演示文稿生成之前，阅读 STYLE_PRESETS.md 了解视口安全的 CSS 基础、密度限制、预设目录和 CSS 陷阱。
选择一个路径：
.ppt 或 .pptx只问最必要的问题：
如果用户有内容，请他们在样式确定前粘贴。
默认使用视觉探索。
如果用户已经知道想要的预设，跳过预览直接使用。
否则：
.ecc-design/slide-previews/ 中生成 3 个单页预览文件。将感觉映射到风格时使用 STYLE_PRESETS.md 中的预设指南。
输出以下之一：
presentation.html[presentation-name].html仅当演示文稿包含提取的或用户提供的图像时使用 assets/ 文件夹。
必需的结构：
STYLE_PRESETS.md 的视口安全 CSS 基础将此视为硬性门控。
规则：
.slide 必须使用 height: 100vh; height: 100dvh; overflow: hidden;clamp() 缩放使用 STYLE_PRESETS.md 中的密度限制和强制 CSS 块。
在以下尺寸检查完成的演示文稿：
如果浏览器自动化可用，使用它验证没有幻灯片溢出且键盘导航正常工作。
在交接时：
使用当前操作系统正确的打开器：
open file.htmlxdg-open file.htmlstart "" file.html对于 PowerPoint 转换：
python3 配合 python-pptx 提取文本、图像和备注。python-pptx 不可用，询问是否安装它或回退到手动/导出工作流。保持转换跨平台。当 Python 可以完成工作时不要依赖仅 macOS 的工具。
包含：
main、section、nav）prefers-reduced-motion除非用户明确要求更密集的幻灯片且可读性仍然保持，否则使用以下最大值：
| 幻灯片类型 | 限制 |
|---|---|
| 标题 | 1 个标题 + 1 个副标题 + 可选标语 |
| 内容 | 1 个标题 + 4-6 个要点或 2 段短文 |
| 特性网格 | 最多 6 张卡片 |
| 代码 | 最多 8-10 行 |
| 引用 | 1 条引用 + 出处 |
| 图像 | 1 张受视口约束的图像 |
-clamp(...)frontend-patterns 用于演示文稿周围的组件和交互模式liquid-glass-design 当演示文稿有意借鉴 Apple 玻璃美学时e2e-testing 如果需要为最终演示文稿进行自动化浏览器验证Kubernetes 工作负载模式、资源管理、RBAC、probes、autoscaling、ConfigMap/Secret 处理，以及面向生产级部署的 kubectl 调试。
完成任何非平凡任务后使用。智能体按 5 个维度自评输出——准确性、完整性、清晰度、可执行性、简洁性——每项都给出具体证据。生成结构化 1-5 评分卡和具体改进建议。
在 competitive-platform-analysis 产出分层竞品集合后使用。按九个加权维度（定位、声音、视觉工艺、offer packaging、证据、enterprise-readiness、thought leadership、定价、客户 strategic tension）为每个竞品评分，使用明确 1–5 rubrics 和 tension-plot。位于 competitive-report-structure 之前。
当品牌需要通过结构化多会话访谈发现或表达身份时使用。通过 laddering、5 Whys 和 projective techniques，覆盖目的、定位、受众、个性、声音、叙事以及 founder-brand 张力 8 个模块。产出可恢复 session、磁盘持久化状态和 master brandbook（90_SYNTHESIS.md）。
通过 CodeScene MCP 提供实时结构性 Code Health——编辑前审查，变更后验证分数变化，门控 commit 和 PR。用于代码质量审查、重构、检查 AI 变更是否降低文件质量，或 commit/PR 前。
用于界定竞争 landscape：在任何 benchmark 开始前，识别、分类并用分数过滤竞品集合。决定谁算竞品、属于哪个 tier、应挖哪些来源。三技能竞争分析流水线第一步；位于 benchmark-methodology 之前。