DEV Community

nghiahsgs
nghiahsgs

Posted on

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

#claudecode #opensource #webdev #design

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.

GitHub logo 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 →

Title slide — gradient mesh background with particle effects

Feature grid — 6 cards with 3D tilt hover Anti-slop checklist — 10-point quality gate

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.

Quick Start

  1. Clone into Claude Code skills directory:

bash
git clone [https://github.com/nghiahsgs/skills-slides.git](https://github.com/nghiahsgs/skills-slides.git) ~/.claude/skills/slides
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
nghiahsgs profile image
nghiahsgs •

If this is useful, a star would mean a lot. And if you use it to make something cool, I'd love to see it.

Collapse
 
apex_stack profile image
Apex Stack •

The token-based constraint system is a really smart approach. I've been building Claude Skills in a different domain (SEO and financial analysis), and one of the hardest problems is preventing the AI from defaulting to generic output patterns. Your solution of curating the design space upfront and letting the model select within those constraints rather than freestyle is exactly the right architecture.

The combinatorial math is compelling too — 50,000+ unique combinations from a relatively small set of curated tokens means you get variety without sacrificing quality. That's much harder to achieve with prompt engineering alone.

Curious about one thing: how do you handle the compatibility matrix between aesthetics and effects? Like, does the neon-cyber aesthetic automatically exclude certain effects that would clash, or is there a validation layer that checks the combinations before rendering?