一种编程代理技能，用于创建精美的HTML演示文稿——无论是从零开始还是通过转换PowerPoint文件。它作为Claude Code插件打包，核心SKILL.md也可以通过文件系统和shell访问的其他编码代理读取。

📺 观看攻略与教程

新来的吗？这个适合初学者的视频会从头到尾带你完整了解整个过程。

▶️ 在YouTube观看→（适合初学者的攻略和教程）

这会带来什么

前端幻灯片帮助非设计师在不懂CSS或JavaScript的情况下制作精美的网页演示。它采用“展示，不讲”的做法：不要求你用语言描述你的审美偏好，而是生成视觉预览，让你自由选择喜欢的内容。

这里有一副关于该技能的套牌，是通过该技能制作的：

https://github.com/user-attachments/assets/ef57333e-f879-432a-afb9-180388982478

主要特色

• 零依赖 — 单一HTML文件，带内联CSS/JS。无npm，无构建工具，无框架。
• 视觉风格发现 — 无法明确表达设计偏好？没问题。从生成的视觉预览中选择。

Frontend Slides

A coding-agent skill for creating stunning HTML presentations — from scratch or by converting PowerPoint files. It is packaged as a Claude Code plugin, and the core SKILL.md can also be read by other coding agents with filesystem and shell access.

📺 Watch the Walkthrough & Tutorial

New here? This beginner-friendly video walks you through the whole thing, start to finish.

▶️ Watch on YouTube → (beginner-friendly walkthrough and tutorial)

What This Does

Frontend Slides helps non-designers create beautiful web presentations without knowing CSS or JavaScript. It uses a “show, don’t tell” approach: instead of asking you to describe your aesthetic preferences in words, it generates visual previews and lets you pick what you like.

Here is a deck about the skill, made through the skill:

https://github.com/user-attachments/assets/ef57333e-f879-432a-afb9-180388982478

Key Features

• Zero Dependencies — Single HTML files with inline CSS/JS. No npm, no build tools, no frameworks.
• Visual Style Discovery — Can’t articulate design preferences? No problem. Pick from generated visual previews.
• PPT Conversion — Convert existing PowerPoint files to web, preserving all images and content.
• Anti-AI-Slop — Curated distinctive styles that avoid generic AI aesthetics (bye-bye, purple gradients on white).
• Bold Template Pack — Optional design-forward templates from beautiful-html-templates, loaded progressively so safe presets still work as the default fallback.
• Production Quality — Accessible, fixed 16:9, well-commented code you can customize.

Installation

Via Claude Code Custom Marketplace Source

Install directly from this public GitHub repo. Run these as two separate Claude Code messages; do not paste both lines into the prompt at once.

/plugin marketplace add https://github.com/zarazhangrui/frontend-slides

After that finishes, run:

/plugin install frontend-slides@frontend-slides

Use the HTTPS URL. The shorter zarazhangrui/frontend-slides form may make Claude Code try SSH, which can fail if GitHub is not already in your known_hosts file.

Then use it by typing /frontend-slides:frontend-slides in Claude Code. Claude Code namespaces plugin-installed skills as /plugin-name:skill-name.

Claude Code Manual Installation

Copy the skill files to your Claude Code skills directory:

# Create the skill directory
mkdir -p ~/.claude/skills/frontend-slides/scripts

# Copy the user-facing skill files