skills.rest
Aradotso
AradotsoOFFICIAL
Explore all skills by this author →
Website𝕏@aradotsoGitHub

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
One-click install
npx skills add https://github.com/Aradotso/design-skills --skill power-design-slides
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
gooseworks-aigooseworks-ai
1.1k

visual-brand-extractor

Extract colors, typography, and layout patterns into slide presets and brand config JSON.

Official
Advanced
elbrunoelbruno
2

presentation-skill

Convert Markdown slide sources into self-contained HTML deck files.

Community
Intermediate
eduardoabreu81eduardoabreu81
6

brand-guidelines

Apply configured brand colors, typography, and formatting rules to visual artifacts.

Community
Intermediate
pekralpekral

frontend-slides

Generate self-contained HTML presentation decks with vanilla CSS and JavaScript.

Community
Intermediate