Stop Making Purple Slides: I Built a Token-Based Design System for Claude Code

You know the look. Every AI-generated presentation has it:

Purple gradient on white background

Inter font on everything

Identical box-shadow on every element

Flat solid backgrounds with zero depth

No visual hierarchy whatsoever

I got tired of it. So I built skills-slides — a Claude Code skill with a token-based design system that makes it impossible to generate generic slides.

nghiahsgs / skills-slides

50,000+ unique HTML presentation designs. Zero dependencies. Anti-AI-slop. A Claude Code skill.

slides

A Claude Code skill that generates stunning HTML presentations. Zero dependencies. Works offline. Opens in any browser.

50 aesthetics × 20 palettes × 10 fonts × 5 layouts × 30+ effects = 50,000+ unique design combinations.

Every presentation ships as a single .html file — no build step, no npm, no PowerPoint. Just double-click to present.

Live Demo →

Why this exists

AI-generated slides look the same: purple gradients, Inter font, identical shadows, flat backgrounds. This skill fights that with a token-based design system and a strict anti-slop checklist that catches generic patterns before delivery.

The result: presentations that look intentionally designed, not template-generated.

What's inside

tokens/              # The design system
├── aesthetics.csv       # 50 named styles (startup-pitch, neon-cyber, editorial-minimal...)
├── color-palettes.csv   # 20 palettes with full hex values + WCAG ratios
├── font-pairings.csv    # 10 curated pairs from Google Fonts & Fontshare
├── layout-patterns.csv  # 5 CSS grid

…

View on GitHub

How it works

Instead of letting the AI freestyle (and default to purple gradients), every presentation is built from curated design tokens:

50 aesthetics × 20 palettes × 10 fonts × 5 layouts × 30+ effects = 50,000+ unique combinations

You describe a vibe. The search engine finds matching tokens. You pick a direction. Claude generates a single .html file.

What's in the token library?

50 aesthetics: From startup-pitch to neon-cyber, editorial-minimal to terminal-hacker. Each one defines which palettes, fonts, layouts, and effects are compatible.

20 color palettes: Full systems with bg, surface, text, accents, borders, and glow. Every palette ships with WCAG contrast ratios already verified.

10 font pairings: Curated display + body pairs from Google Fonts and Fontshare. No Inter. No Roboto. No system-ui.

30+ effects: Particles, aurora, gradient mesh, glassmorphism, grid overlay, magnetic cursor, 3D tilt. Complete CSS + JS snippets for each.

The Output

Every presentation is a single self-contained HTML file with:

✅ Keyboard navigation (arrows, space, escape)

✅ Responsive sizing with clamp() — works on any screen

✅ Full ARIA labels and semantic HTML

✅ prefers-reduced-motion support

✅ Optional in-browser editing (double-click any text)

✅ PDF export via Chrome headless

No frameworks. No dependencies. Works offline. Works forever.

DEV Community

I built a Claude Code skill that generates 50,000+ unique slide designs — and killed the "AI slop" aesthetic