正在加载项目…
frontend-slides
插件Create beautiful slides on the web using a coding agent's frontend skills
29,851 GitHub Stars1 个插件包2 项组成内容Stars 同步于 2026年9月27日
正在读取官方项目说明…
正在加载项目…
Create beautiful slides on the web using a coding agent's frontend skills
正在读取官方项目说明…
内容来自 GitHub 原始文件，由原作者维护。在 GitHub 查看
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.
New here? This beginner-friendly video walks you through the whole thing, start to finish.
▶️ Watch on YouTube → (beginner-friendly walkthrough and tutorial)
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
beautiful-html-templates, loaded progressively so safe presets still work as the default fallback.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.
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
cp SKILL.md STYLE_PRESETS.md viewport-base.css html-template.md animation-patterns.md ~/.claude/skills/frontend-slides/
cp -R bold-template-pack ~/.claude/skills/frontend-slides/
cp scripts/extract-pptx.py scripts/deploy.sh scripts/export-pdf.sh ~/.claude/skills/frontend-slides/scripts/
Or clone directly:
git clone https://github.com/zarazhangrui/frontend-slides.git ~/.claude/skills/frontend-slides
Then use it by typing /frontend-slides in Claude Code. Standalone skills are not namespaced.
Agents such as Codex, Kimi Code, OpenCode, Gemini CLI, or other local coding assistants can use the same core skill. The simplest path is to send the agent this GitHub repo link and ask it to use the Frontend Slides skill:
https://github.com/zarazhangrui/frontend-slides
If the agent can read GitHub repos or browse files, it should start from SKILL.md and load only the referenced support files it needs:
STYLE_PRESETS.mdviewport-base.csshtml-template.mdanimation-patterns.mdbold-template-pack/scripts/Some agents can also install the skill for you if they have filesystem access and a known local skills directory. If not, they can still follow SKILL.md directly for the current session.
The Claude Code plugin gives Claude Code a custom marketplace-source install flow and /frontend-slides:frontend-slides command. Other agents usually do not use that command surface.
/frontend-slides:frontend-slides
> "I want to create a pitch deck for my AI startup"
If installed manually as a standalone Claude Code skill, use /frontend-slides instead.
In non-Claude agents, ask the agent to use the Frontend Slides skill and point it at this repo or SKILL.md.
The skill will:
/frontend-slides:frontend-slides
> "Convert my presentation.pptx to a web slideshow"
The skill will:
The skill also includes 34 optional bold design systems from
beautiful-html-templates, such as Neo-Grid Bold, Editorial Tri-Tone,
Creative Mode, Broadside, Signal, and Vellum.
During style discovery, the preview set is:
STYLE_PRESETS.mdbold-template-pack/selection-index.jsonThe agent reads the compact bold template index first, then loads only the
shortlisted candidates' small preview.md cards for title-slide previews. It
loads the full design.md for exactly one bold template only after the user
picks that template for the final deck. If the user picks a custom wildcard,
the agent expands that preview's own CSS and layout system into the full deck.
Frontend Slides can now draw from the 34 bold design systems in beautiful-html-templates. Three screenshots per template show how each visual system handles different slide layouts. Click any template name to inspect the source template library.
Cormorant Garamond serif on warm paper with sage, blush, and lemon accents.
Forest green, dusty pink, and warm cream in Source Serif 4 — quiet, intentional quarterly-review aesthetic.
Yellow paper with safety-pin illustrations, ink-blue handwritten Caveat, paper-grain texture.
Vintage Japanese cassette-package aesthetic: cream paper, diagonal rainbow ribbons, condensed bold type, JIS-style spec checkboxes.
Bone paper with stencil-cut headlines and a six-color earth palette: archaeology meets brand.
Electric cobalt italic serifs on a graph-paper canvas, anchored by stair-stepped pixel-glitch decorations and slim hairline rules.
Deep navy canvas with warm-yellow italic Cormorant serifs and a single dusty teal accent. A quiet, scholarly aesthetic.
Magazine-cover business deck: emerald + navy + paper with double-rule masthead ornaments and a heavy Bodoni-style display serif.
Editorial neo-brutalism with a single neon yellow accent on off-white paper.
Three-color editorial system: dusty pink, mustard cream, and deep burgundy, set in Bricolage + Instrument Serif.
Cream paper canvas with confident multi-color (green, pink, orange, yellow) accents and Archivo Black display.
Ivory ledger paper with all-black type; Lora serif headlines, Jost body, no color at all.
Activist poster energy: blue, orange, red on cream, with Alfa Slab + Caveat Brush.
Black canvas, hot pink accent, pearl-cream paper, Instrument Serif headlines: late-night editorial luxury.
Pixel-art neon arcade aesthetic on a deep navy void.
Neobrutalist deck with pastel-neon color blocks and chunky black borders.
Cream paper background with electric cobalt blue accents; clean modern professional.
Editorial poster aesthetic with massive Shrikhand display and a single fire-engine red accent.
Dark editorial canvas with a single fire orange accent and bilingual Latin/Chinese type stack.
Modular pill-shaped cards on warm bone with a full pastel-pop palette.
Quiet warm-neutral palette with classical Playfair serifs; tasteful and unhurried.
Cream and coral on near-black, set in oversized Bebas Neue.
Cheerful pastel deck with hand-drawn daisies, stars, and rainbows. Friendly, soft, and warm.
Forest-green canvas with cream type, classical Playfair serifs, and a single rust accent.
Dark sage canvas with bone paper and burnt-orange accent; mid-century modern with wood undertones.
Sun-warm peach background with Syne display: a friendly indie launch deck.
Neo-brutalist deck with thick borders, offset shadows, and a pink/sage/ink palette.
Windows 95 chrome: gray title bars, MS Sans Serif, pixel typography, full nostalgia.
Beige paper with green accent and Bebas Neue + Caveat: a riso-printed zine in HTML form.
Post-it inspired: pastel sticky notes, Caveat handwriting, Shrikhand and Zilla Slab type stack.
Deep navy canvas with bone paper and a single muted-gold accent; institutional with quiet weight.
Black canvas with electric-yellow type; high-voltage design studio aesthetic.
Solar yellow on warm parchment with deep indigo serif and atmospheric sun-glow gradients. Dutch-editorial poster energy.
Warm cream and rust-red supper-club aesthetic with bold uppercase grotesk headlines, italic Fraunces, and pill-shaped outlined buttons.
This skill uses progressive disclosure — the main SKILL.md is a workflow map, with supporting files loaded on-demand only when needed:
| File | Purpose | Loaded When |
|---|---|---|
SKILL.md | Core workflow and rules | Always (skill invocation) |
STYLE_PRESETS.md | 12 curated visual presets | Phase 2 (style selection) |
bold-template-pack/selection-index.json | Compact bold template metadata for candidate selection | Phase 2 (style selection) |
bold-template-pack/templates/*/preview.md | Tiny style cards for shortlisted bold previews | Phase 2 after shortlisting |
bold-template-pack/templates/*/design.md | Full design system for the selected bold template | Phase 3 after user selection |
viewport-base.css | Mandatory fixed-stage CSS | Phase 3 (generation) |
html-template.md | HTML structure and JS features | Phase 3 (generation) |
animation-patterns.md | CSS/JS animation reference | Phase 3 (generation) |
scripts/extract-pptx.py | PPT content extraction | Phase 4 (conversion) |
scripts/deploy.sh | Deploy to Vercel | Phase 6 (sharing) |
scripts/export-pdf.sh | Export slides to PDF | Phase 6 (sharing) |
Maintenance-only source metadata and regeneration helpers live outside the user-facing skill package. Normal users do not need them.
This design follows agent-skill best practices: give the agent a map first, then reveal only the specific files needed for the current choice.
This skill was born from the belief that:
You don't need to be a designer to make beautiful things. You just need to react to what you see.
Dependencies are debt. A single HTML file will work in 10 years. A React project from 2019? Good luck.
Generic is forgettable. Every presentation should feel custom-crafted, not template-generated.
Comments are kindness. Code should explain itself to future-you (or anyone else who opens it).
After creating a presentation, the skill offers two ways to share it:
One command deploys your slides to a permanent, shareable URL that works on any device — phones, tablets, laptops:
bash scripts/deploy.sh ./my-deck/
# or
bash scripts/deploy.sh ./presentation.html
Uses Vercel (free tier). The skill walks you through signup and login if it's your first time.
Convert your slides to a PDF for email, Slack, Notion, or printing:
bash scripts/export-pdf.sh ./my-deck/index.html
bash scripts/export-pdf.sh ./presentation.html ./output.pdf
Uses Playwright to screenshot each slide at 1920×1080 and combine into a PDF. Installs automatically if needed. Animations are not preserved (it's a static snapshot).
/frontend-slides:frontend-slides commandpython-pptx libraryCreated by @zarazhangrui.
MIT — Use it, modify it, share it.