Frontend Slides 深度解析

📖项目概述

Frontend Slides 是一个由 @zarazhangrui 在 Claude Code 中创建的技能，专注于生成精美的、无依赖的、动画丰富的 HTML 演示文稿。

核心承诺

💡核心设计理念

1. 零依赖架构 (Zero Dependencies)

2. 渐进式披露 (Progressive Disclosure)

主文件 SKILL.md 仅 180 行，作为「地图」而非「千页手册」：

3. 视口适配 (Viewport Fitting) — 核心约束

/* 锁定 html/body 到视口 */
html, body {
    height: 100%;
    overflow-x: hidden;
}

html {
    scroll-snap-type: y mandatory;
}

/* 每个幻灯片 = 精确视口高度 */
.slide {
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* 动态视口高度 */
    overflow: hidden; /* 关键：禁止溢出 */
}

所有字体和间距必须使用 clamp()：

--title-size: clamp(1.5rem, 5vw, 4rem);
--slide-padding: clamp(1rem, 4vw, 4rem);

4. 视觉风格发现 (Visual Style Discovery)

传统方式：询问用户「你想要什么风格？」→ 用户难以用语言描述

Frontend Slides 方式：

1. 询问用户「观众应该有什么感受？」
2. 根据情绪生成 3 个视觉预览
3. 用户直接「点选」喜欢的风格
4. 生成完整演示

5. 内容密度限制 (Content Density Limits)

6. 反 AI Slop 设计 (Anti-AI-Slop)

明确禁止的通用 AI 模式：

• 字体：Inter, Roboto, Arial, 系统字体
• 配色：#6366f1 (通用靛蓝)、白色背景上的紫色渐变
• 布局：完全居中、通用英雄区、相同的卡片网格
• 装饰：逼真插图、过度玻璃拟态

推荐字体：Archivo Black, Manrope, Syne, Space Mono, Cormorant, Bodoni Moda, Fraunces 等

⚙️技术架构

响应式策略

多维度断点处理不同设备：

/* 短视口 (< 700px) */
@media (max-height: 700px) { ... }

/* 很短视口 (< 600px) */
@media (max-height: 600px) { ... }

/* 极短视口 (< 500px) */
@media (max-height: 500px) { ... }

/* 窄视口 (< 600px) */
@media (max-width: 600px) { ... }

动画系统

基于 Intersection Observer 的滚动触发动画：

/* 淡入+上滑动画 */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s var(--ease-out-expo),
                transform 0.6s var(--ease-out-expo);
}

.slide.visible .reveal {
    opacity: 1;
    transform: translateY(0);
}

/* 延迟实现交错效果 */
.reveal:nth-child(1) { transition-delay: 0.1s; }
.reveal:nth-child(2) { transition-delay: 0.2s; }
.reveal:nth-child(3) { transition-delay: 0.3s; }

CSS 函数否定陷阱

正确：right: calc(-1 * clamp(28px, 3.5vw, 44px));

无障碍支持

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.2s !important;
    }
    html { scroll-behavior: auto; }
}

🎨12个设计预设

暗色主题 (4个)

亮色主题 (4个)

特色主题 (4个)

🚀创新点分析

1. 情绪驱动的设计选择

传统 PPT 工具让用户选择「风格」，而 Frontend Slides 让用户选择「感受」：

• Impressed/Confident → 专业可信
• Excited/Energized → 创新大胆
• Calm/Focused → 清晰思考
• Inspired/Moved → 情感难忘

2. 内联编辑的精细实现

4种交互方式让编辑触手可及：

• 点击悬停热区边缘
• 点击编辑切换按钮
• 直接点击热区
• 键盘快捷键 (E)

400ms 延迟防止悬停链断裂，导出时自动剥离编辑状态。

3. 视觉风格锚定

通过生成单页预览让用户「所见即所得」选择：

• 保存到 .claude-design/slide-previews/
• 每个预览 ~50-100 行代码
• 自动打开供用户比较

4. 分享与导出

• Vercel 部署：一键部署到永久 URL，支持任何设备
• PDF 导出：Playwright 截图拼接，支持压缩

🎯适用场景

✅ 最佳场景

• 技术演讲 / 会议演示
• 产品发布会
• 创业 pitch deck
• 教学 / 教程演示
• 个人作品集展示
• 需要独特品牌视觉的场合

❌ 不适用场景

• 需要复杂动画特效的演示
• 需要精确打印输出的文档
• 协作编辑场景
• 超长演示（50+ 幻灯片）

⚖️与现有 PPT 技能对比

📝核心可借鉴设计点

🎓总结