power-design-slides

Generate brand-aligned HTML slide decks with WCAG contrast checks.

3|Updated May 16, 2026

Search Tags:#typography #accessibility #HTML #design systems #generate #brand design #presentation slides

Ready to run

npx skills add https://github.com/Aradotso/design-skills --skill power-design-slides

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: power-design-slides
Source: https://github.com/Aradotso/design-skills/tree/main/skills/power-design-slides
Command: npx skills add https://github.com/Aradotso/design-skills --skill power-design-slides

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents slide decks from looking generic or cluttered by enforcing brand identity plus research-backed design rules, so your presentations feel polished and professional.

Core Features & Use Cases

Brand DNA extraction or reuse: create slides using a pre-built brand system or by extracting colors and typography from a URL.
20 codified design principles: automatically apply layout, typography, contrast, whitespace, and chart/data-ink checks (including WCAG-oriented contrast).
Self-contained HTML output: generate a ready-to-share slides.html deck with a consistent visual mode (minimal or rich).
Use case: launch a new product by generating a structured deck for a known brand (e.g., Stripe) while guaranteeing glanceability, spacing, and readable hierarchy.

Quick Start

Use power-design to generate a deck for stripe.com about our product launch with a headline and 3-5 key points.

Frequently Asked Questions about power-design-slides

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate brand-aligned presentation slides from a website?▼

Generate brand-aligned presentation slides by extracting brand DNA like colors and typography from a URL via Firecrawl, then applying codified design principles to output a self-contained slides.html file.

What design rules are enforced when generating HTML slide decks?▼

HTML slide decks enforce 20 codified design principles including one-idea-per-slide layout, typography and spacing constraints, whitespace checks, and WCAG-oriented contrast thresholds for accessibility.

Can I create presentation slides using a pre-built design system instead of a URL?▼

Yes, you can generate presentation slides from a pre-built brand system instead of extracting brand DNA from a URL, applying the same design rules to produce a consistent slides.html output.

Does generating presentation slides with this method support charts and data visualizations?▼

Yes, generating presentation slides supports chart and data-ink checks alongside layout and typography rules, allowing you to create structured data slides within multi-section longer decks.

What is the best way to ensure my slide deck is accessible and readable?▼

Ensure slide deck accessibility and readability by enforcing WCAG-oriented contrast checks, glanceability, spacing constraints, and readable hierarchy during the HTML generation process.

Are there limitations to generating self-contained HTML slides for presentations?▼

Self-contained HTML slides output in a single slides.html file with a consistent visual mode, meaning they are designed for web viewing and sharing rather than native PowerPoint or PDF formats.