high-quality-slides

High-Quality Slides

A Claude Code skill that produces decks worth sending — not "AI-looking" slide soup.

Inspired by reverse-engineering Genspark AI Slides and similar high-quality AI presentation tools, this skill teaches Claude to behave like a slide art director: research first, narrative second, system third, slides last.

The goal is simple: when someone says "make me a deck," the output should look designed, not generated.

---

What this skill does

When triggered, Claude follows a 5-phase workflow with mandatory gates between phases. The phases are deliberately frontloaded — most low-quality AI decks fail by skipping straight to "make pretty slides" without doing research or narrative work first.

Phase	Output	Gate
1. Strategy	Audience, action, format, slide count	Asks the user if anything is unclear
2. Substance	research-notes.md — every fact with a source	No invented stats
3. Structure	Numbered outline: headline + supporting fact + visual per slide	User approves outline
4. Design system	design-tokens.css, style preset choice, sample slide	User approves sample
5. Build	deck.html, self-contained, viewport-locked, keyboard-navigable	Self-check passes

The deliverable is an HTML deck by default. Optionally exports to .pptx by composing with Claude's pptx skill.

---

Why HTML

• Pixel-perfect rendering, no PowerPoint version drift
• Keyboard navigation + deep linking via URL hash
• Self-contained single file — no build step, no dependencies
• Trivial to convert to PDF or screenshots for sharing
• HTML/CSS is what Claude is best at writing

If you need editable .pptx for a colleague who lives in PowerPoint, the skill can hand off to the pptx skill using the HTML as the design spec.

---

Installation

As a personal skill (recommended)

git clone https://github.com/andyqiu847-ai/high-quality-slides.git ~/.claude/skills/high-quality-slides

Restart your Claude Code session. The skill will be auto-discovered.

As a project-level skill (team sharing)

cd your-project
mkdir -p .claude/skills
git clone https://github.com/andyqiu847-ai/high-quality-slides.git .claude/skills/high-quality-slides
git add .claude/skills/high-quality-slides
git commit -m "Add high-quality-slides skill"

Everyone on the team gets the skill on next git pull.

Verify

ls ~/.claude/skills/high-quality-slides/
# SKILL.md  layouts.md  html-template.md  README.md  LICENSE

In Claude Code, open a new session and ask: "What skills do you have available for making slides?" — it should list this one.

---

Usage

Just describe what you want naturally. The skill auto-triggers on prompts like:

• "做一份关于 X 的高质量 PPT"
• "Make me a Genspark-style pitch deck for our Q4 review"
• "Turn this report into a 10-slide presentation" (with a PDF/docx attached)
• "I need an investor deck for tomorrow"

Claude will then walk you through Phase 1 questions (audience, action, length), do its research, propose a narrative arc, ask you to pick a visual style from a few previews, and only then start building slides.

You can also short-circuit if you know what you want:

"Make a 12-slide HTML deck in the swiss-modern preset about our user research findings. Audience is the design team. Sources are in ~/Documents/research-notes/."

---

What's in the skill

high-quality-slides/
├── SKILL.md            # Workflow + gates + anti-patterns (loaded on trigger)
├── layouts.md          # 14 layout patterns + 12 style presets (Phase 4–5)
├── html-template.md    # HTML scaffold, chart rendering, export paths (Phase 5)
├── README.md           # This file
└── LICENSE

The skill uses progressive disclosure — SKILL.md is a ~180-line map, and the larger reference files load only when their phase begins. This keeps Claude's context window lean and the routing predictable.

Layout patterns (14)

cover, section-divider, headline-only, three-stat-strip, quote-hero, two-column-compare, timeline, process-flow, 2x2-matrix, chart-focus, image-with-caption, data-table-clean, kpi-grid, closing-cta.

Each pattern is a recipe with a clear "when to use this" rule. Claude picks per slide based on the content's semantic shape — comparisons get two-column-compare, processes get process-flow, single decisive numbers get headline-only.

Style presets (12)

Dark: bold-signal, electric-studio, creative-voltage, dark-botanical. Light: notebook-tabs, pastel-geometry, split-pastel, vintage-editorial. Specialty: neon-cyber, terminal-green, swiss-modern, paper-and-ink.

Each preset encodes color palette, type pairing, grid system, and motion. They're real design systems, not vague style labels.

---

Design philosophy

Three rules that override everything else: