Frontend Slides
用零依赖单文件 HTML 制作动画丰富演示文稿的 Agent 技能：不靠抽象选择、靠 3 张视觉风格预览让用户挑风格，支持 PPT 转换、PDF 导出与 Vercel 一键部署，内置反 AI 泛滥的设计原则与 34 款精选模板。
仓库：zarazhangrui/frontend-slides
热度证据：27.4k star，演示文稿生成技能；27,425 star,演示类技能热门仓库
五维评分
热度5/5
质量5/5
创新5/5
易用4/5
文档5/5
优秀点拆解
- Show-don't-tell 视觉风格发现：Phase 2 直接生成 3 张真实标题页预览（1 安全预设 + 1 大胆模板 + 1 自由 wildcard），用户靠视觉对比而非语言描述选风格，大幅降低非设计师的决策负担
- 固定 1920×1080 舞台 + 整体缩放模型：viewport-base.css 强制所有幻灯片在固定坐标系设计、运行时 translate+scale 适配任意屏幕，配 @media print 与 prefers-reduced-motion，一次创作覆盖投影/手机/打印三种形态
- 踩坑经验固化为规范：把 display:none 切页被 flex 覆盖、CSS ~ 兄弟选择器被 pointer-events 打断、-clamp() 负值被忽略等真实坑写成带原因的禁令，提高 LLM 首遍生成正确率
- 渐进披露对抗上下文膨胀：模板库三级加载（selection-index.json 元数据 → preview.md 预览卡 → 选定后才读 design.md），把省 token 作为一等设计原则
- 全链路交付闭环：python-pptx 提取 PPT、Playwright 截屏合成 PDF（--compact 减 50-70% 体积）、deploy.sh 自动打包本地资源部署 Vercel，每个环节都带 gotchas 文档
可复用的设计模式
- 大型模板/资源库用「元数据索引 + 轻预览 + 重设计」分级加载，按用户决策阶段只读所需层级
- 把反模式与踩坑写成带原因的显式黑名单（字体、配色、实现手法），用「不要做什么」约束生成模型
- 固定设计坐标系 + 整体缩放取代 responsive 断点，简化生成任务并保证跨设备一致性
- 决策面最小化提问：一次性问完所有问题、用视觉选项替代口头描述、提供 Mix elements 兜底
适用场景
从零制作 pitch deck、产品发布、教学教程与内部汇报演示把旧 PPT/PPTX 迁移为现代化网页演示（保留文字、图片、演讲备注）对既有 HTML 演示做增强迭代（Mode C 带防溢出修改规则）快速分享场景：Vercel 部署成任意设备可访问的链接交付静态 PDF：邮件、Slack、Notion、打印
边界与注意：依赖浏览器查看与字体 CDN（Fontshare/Google Fonts），离线环境不可用；PDF 导出不含动画且首次需下载 Chromium（约 150MB）；deploy.sh 只自动打包 src=/href=/url() 引用的资源，CSS background-image 引用可能漏掉需整文件夹部署；外源 HTML 必须使用 .slide 类名才能被导出脚本识别。
完整拆解分析文档
本页为摘要版，完整精读分析（核心机制、逐条优秀点拆解、写作过程）见本地 Markdown 文档：
analysis/frontend-slides.md