I’ve been spending a lot of time with coding agents lately — building my second-brain and doppelganger projects. One thing I noticed is that agents are great at generating code, but the output tends to look generic. Ask an LLM to make a presentation and you get purple gradients on white, Inter font, and a symmetric card layout — the AI-slop starter pack.
Then I found frontend-slides, a skill by @zarazhangrui that turns coding agents into legit presentation designers. Here’s why it’s worth studying.
The Core Insight: Show, Don’t Tell
Most people can’t articulate their design preferences. Ask someone “what style do you want?” and you get “clean and modern” — which tells you nothing.
Frontend Slides solves this by generating visual previews first. In Phase 2 (Style Discovery), the agent creates 3 single-slide HTML previews showing different aesthetics — you look at them, pick one, and the agent builds the full deck around that direction.
This is the right abstraction. Instead of describing taste in words, you react to what you see. The agent does the translation.
Zero-Dependency Architecture
Every presentation is a single self-contained HTML file. No npm, no build tools, no frameworks. CSS and JavaScript are inlined. Fonts are loaded from Google Fonts or Fontshare at runtime.
This matters more than it sounds like. A single HTML file from 2026 will still open in a browser in 2036. A React project with 15,000 node_modules files from 2022? Probably broken.
The philosophy is stated directly in the README:
Dependencies are debt. A single HTML file will work in 10 years. A React project from 2019? Good luck.
The Fixed 16:9 Stage
This is the most technically interesting design decision. Every slide is authored at 1920×1080 using fixed pixel values, and the entire stage scales uniformly to fit the viewport — like a video player.
This means:
- No responsive breakpoints reflowing your content
- No slides that look great on desktop and broken on mobile
- Consistent typography proportions regardless of screen size
The CSS uses viewport-base.css which handles the scaling, letterboxing/pillarboxing, and slide visibility via .active/.visible classes (never display: none, which breaks flex layouts).
Anti-AI-Slop Design System
The skill explicitly avoids what it calls “AI slop” — the generic aesthetic that LLMs default to:
Avoid these:
- Inter, Roboto, Arial (overused system fonts)
- Purple gradients on white backgrounds
#6366f1(generic indigo)- Symmetric centered layouts and identical card grids
- Glassmorphism without purpose
Instead, it ships 12 curated style presets and a 34-template bold pack:
| Dark Themes | Light Themes | Specialty |
|---|---|---|
| Bold Signal (orange card on dark) | Notebook Tabs (cream paper, colorful edges) | Neon Cyber (particle bg, cyan glow) |
| Electric Studio (split panel, blue accent) | Pastel Geometry (vertical pill tabs) | Terminal Green (hacker, monospace) |
| Creative Voltage (retro-modern, neon yellow) | Split Pastel (peach × lavender) | Swiss Modern (Bauhaus, red accent) |
| Dark Botanical (warm serif, soft circles) | Vintage Editorial (Fraunces, geometric) | Paper & Ink (drop caps, pull quotes) |
Each preset has a specific font pairing, color system, and signature visual element — so presentations feel deliberately crafted rather than template-stamped.
How the Agent Workflow Works
The skill defines a 6-phase workflow:
- Phase 0: Detect mode — new presentation, PPT conversion, or enhancement
- Phase 1: Content discovery — purpose, length, density, actual content
- Phase 2: Style discovery — generate 3 previews, user picks one
- Phase 3: Generation — build the full deck with the chosen style
- Phase 4: PPT conversion — extract content from PowerPoint files
- Phase 5: Delivery — open in browser, offer revisions
- Phase 6: Share — deploy to Vercel or export to PDF
The progressive disclosure pattern is smart: the agent reads a compact selection index first (selection-index.json), then loads only the preview.md for shortlisted templates, and finally reads the full design.md only for the chosen template. This keeps token usage low while maintaining depth.
What This Means for Agent Tooling
Frontend Slides is interesting beyond presentations. It demonstrates several patterns I want to apply to my own agent work:
- Progressive disclosure — Give the agent a map first, reveal details on-demand
- Visual preference elicitation — Show options instead of asking for abstract descriptions
- Constrained generation — The fixed-stage rules prevent a whole class of layout bugs
- Anti-slop guardrails — Explicit do-not-use lists for fonts, colors, and patterns
It’s also a good example of what I think agent skills should look like: opinionated, well-documented, and designed around how humans actually make decisions — by seeing and reacting, not by specifying from scratch.
If you work with coding agents, I’d recommend reading through SKILL.md and the STYLE_PRESETS.md — even if you never generate a presentation, the pattern for structuring agent workflows is valuable on its own.