mcpField
S
slide-design-skill

slide-design-skill

github.com/slidespeakDocuments29193 installsUpdated 18w ago
Repository

About slide-design-skill

A skill for designing and rendering presentations from a brief, intended for people who want slides shaped around their content and visual direction. It derives a deck-specific style, plans slides, and renders fixed-size HTML; AI imagery is optional.

Key features

  1. 01Derive a bespoke visual style from a brief
  2. 02Plan slide order and templates
  3. 03Render 1920×1080 HTML slides
  4. 04Support charts, tables, and imagery
  5. 05Optionally generate imagery through fal.ai

Use cases

  1. 01Create investor or sales presentations
  2. 02Apply brand direction to training slides
  3. 03Iterate on deck design using feedback

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/slidespeak/slide-design-skill --skill slide-design-skill

After installing, type/slide-design-skillin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

README.md
CLAUDE.md
LICENSE
.gitignore
docs/
SKILL-FORMAT.md
HANDOVER.md
INTEGRATION.md
docs/plans/
2026-06-04-layout-fit-phase1.md
2026-06-08-generator-composition-fix.md
docs/specs/
2026-06-03-design-variance-brief.md
2026-06-11-mckinsey-anatomy.md
2026-06-09-anti-slop-adoption.md
2026-06-04-layout-fit-model.md
engine/
deck-plan.ts
composition-families.ts
divergence.ts
density.ts
brand-guard.ts
dotmap-data.ts
fal-cache.ts
fal-cost.ts
image-providers.ts
fidelity-data.ts
image-postprocess.ts
image-treatments.ts
icon-kits.ts
occupancy.ts
moodboard.ts
index.ts
prompt-composer.ts

Details

From the project README

Slide Design Skill

A presentation-design engine. Give it a brief — what the deck is about, plus how it should look in any form (a few words, "like stripe.com", a brand URL, or a moodboard) — and it derives a bespoke visual style for that deck, plans the slide sequence, has the host LLM fill fixed slide templates, and renders deterministic 1920×1080 HTML slides with real data-viz, tables, and imagery.

Style is discovered, not chosen. There is no theme menu and no preset to pick: every deck gets its own tokens, slide templates, and look, generated from the brief.

AI images are optional. Hero and background imagery is generated through fal.ai — set a FAL_KEY to turn it on, and it produces consistent, on-brand visuals across the whole deck (and skips the usual AI-image fails). Without a key the skill still works end to end; it just renders the deck without AI imagery. No key is required to install or run it.

When to use

Use when the user wants to create, design, or improve any presentation: a pitch or investor deck, a sales or strategy deck, a keynote, a training or teaching deck, a data or report deck, or generally "make me some slides / a PowerPoint / a deck" — and they care about it looking designed and on-brand.

How to use

  1. npm install
  2. Capture the brief: the topic and content, plus any signal about the look (free text, "in the style of ", a brand URL, reference images). If there is zero style signal, ask one short question about the desired look.
  3. Generate and render a deck through the engine, then review the rendered HTML and iterate on the user's feedback.

See README.md for the pipeline and quality gates, docs/INTEGRATION.md for the engine API, and docs/SKILL-FORMAT.md for the package format.

Design rules — readable type, no empty bands, no logos or trademarks, no invented numbers — are enforced by code gates, not by prompt wording alone.

Comments

Markdown supported