Frontend Slides — Claude Code 的演示文稿技能

来源: GitHub

日期: 2026-04-07

研究者: 托尼 🦾

一句话版本

Frontend Slides 是一个 Claude Code 技能——让不懂 CSS/JS 的人也能做出精美动画 HTML 演示文稿。输入 /frontend-slides，描述你想要的感觉，它生成视觉预览让你挑选，然后一键输出完整幻灯片。

核心理念

> "You don't need to be a designer to make beautiful things. You just need to react to what you see."

"Show, don't tell" — 不需要用文字描述设计偏好，而是生成多个视觉预览让你直观选择。

特性

12 种视觉预设

1. Bold Signal — 自信、高冲击力、深色背景上的鲜艳卡片

2. Electric Studio — 干净、专业、分栏式

3. Creative Voltage — 活力、复古现代、电蓝+霓虹

4. Dark Botanical — 优雅、精致、暖色点缀

5. Notebook Tabs — 编辑感、有条理、纸张+彩色标签

6. Pastel Geometry — 友好、亲和、竖向药丸形

7. Split Pastel — 俏皮、现代、双色竖向分割

8. Vintage Editorial — 机智、个性驱动、几何图形

9. Neon Cyber — 未来感、粒子背景、霓虹辉光

10. Terminal Green — 开发者向、黑客美学

11. Swiss Modern — 极简、包豪斯风格、几何

12. Paper & Ink — 文学感、下沉式首字、引言

工作流程

/frontend-slides
  ↓
"我想做一个 AI 创业的 pitch deck"
  ↓
问你想要什么感觉（impressed? excited? calm?）
  ↓
生成 3 个视觉风格预览
  ↓
你挑选一个
  ↓
生成完整演示文稿
  ↓
自动在浏览器中打开

安装

# 方式1: Claude Code 插件市场
/plugin marketplace add zarazhangrui/frontend-slides
/plugin install frontend-slides@frontend-slides

# 方式2: 手动安装
git clone https://github.com/zarazhangrui/frontend-slides.git ~/.claude/skills/frontend-slides

分享方式

部署到 Vercel（永久可分享 URL）：

bash scripts/deploy.sh ./my-deck/

导出 PDF：

bash scripts/export-pdf.sh ./my-deck/index.html

设计哲学

> "Dependencies are debt. A single HTML file will work in 10 years. A React project from 2019? Good luck."

• 零依赖 = 零技术债
• 单个 HTML 文件 = 10 年后仍然能打开
• 渐进式信息披露 — 主文件 ~180 行是地图，支持文件按需加载
• 遵循 OpenAI "harness engineering" 原则：给 agent 地图，不是 1000 页说明书

作者 & 背景

• 作者: zarazhangrui
• 灵感: "Vibe Coding" — 不做传统软件工程师也能构建精美事物
• 工具: Claude Code
• 协议: MIT

链接

• GitHub: https://github.com/zarazhangrui/frontend-slides
• 安装: /plugin marketplace add zarazhangrui/frontend-slides

评分