power-design-slides

Q: How do I install power-design-slides?

Run npx skills add https://github.com/reason-machines/design-skills --skill power-design-slides in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/power-design-slides/ (personal) or .claude/skills/power-design-slides/ (project).

by reason-machinesDocs & Writing

Generate brand-aligned presentation slides using Claude with 20 codified design principles and 72+ pre-built brand systems

Installs: 154
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

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

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads power-design-slides automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Power Design Slides

Skill by ara.so — Design Skills collection

Power Design is a Claude Code skill that generates presentation slides combining brand DNA (extracted from URLs or 72+ pre-built brand systems) with 20 codified design principles from Tufte, Reynolds, Duarte, Williams, Refactoring UI, and WCAG 2.2. Output is beautiful HTML decks that don't look AI-generated.

What It Does

Extracts brand identity (colors, typography, voice) from any URL via Firecrawl
Applies 20 research-backed design rules to every slide
Generates self-contained HTML presentation files
Includes 72+ pre-built brand systems (Stripe, Apple, Linear, Spotify, Tesla, etc.)
Enforces WCAG contrast ratios, modular scales, data-ink ratios, and F-pattern layouts

Installation

# Clone into Claude skills directory
git clone https://github.com/ItsssssJack/power-design ~/.claude/skills/power-design

# Or manually:
cd ~/.claude/skills
git clone https://github.com/ItsssssJack/power-design power-design

Verify installation:

ls ~/.claude/skills/power-design/SKILL.md

Project Structure

power-design/
├── SKILL.md                          # Skill runbook (this file)
├── principles/
│   ├── design-principles.md          # All 20 rules with citations
│   └── images/                       # Rule illustrations
├── brands/
│   ├── _template.md                  # Template for new brands
│   ├── anthropic-claude.md           # Pre-built brand system
│   ├── stripe.md
│   └── ... (72+ brands)
└── examples/
    └── sample-deck.html              # Reference output

Basic Usage

1. Generate a Deck with Pre-Built Brand

> use power-design — make me a deck for stripe.com about our new product launch

The skill will:

Load Stripe's brand DNA from brands/stripe.md
Ask for content brief (headline + 3-5 key points)
Generate slides.html applying brand × 20 rules
Open in browser

2. Extract Brand from URL

> use power-design — create slides using the brand from example.com

Requires Firecrawl API key:

export FIRECRAWL_API_KEY=your_key_here

The skill extracts:

Primary/secondary/accent colors
Typography (font families, weights, sizes)
Voice/tone
Component patterns
Layout principles

3. Use Default Design System

> use power-design — make a deck about AI safety (no brand)

Falls back to a neutral, high-contrast design system.

The 20 Design Rules

Every slide passes these checks:

#	Rule	Threshold
1	One idea per slide	1 main message
2	Glanceable in ≤3 seconds	≤50 words
3	3–5 visual chunks	Max 7
4	≥40% whitespace ratio	Measured
5	5% edge safe-zone	All sides
6	Modular scale 1.25–1.618	Type sizes
7	Max 4 type sizes per slide	Counted
8	Body ≥24px, title ≥48px	Enforced
9	Line-height 1.4–1.6 body	CSS
10	Line length ≤60 chars	Measured
11	WCAG contrast ≥4.5:1	7:1 aim
12	60-30-10 color split	Measured
13	One accent per slide	Max 1
14	Never hue-only encoding	Patterns/icons
15	8pt grid spacing	All margins
16	Single grid alignment	Consistent
17	Proximity ≤16px related	≥48px unrelated
18	Data-ink ratio ≥80%	Charts only
19	F-pattern layout	Headline top-left
20	Pick one mode (minimal/rich)	Consistent

Full documentation with sources: principles/design-principles.md

Code Examples

Create a Custom Brand System

Create brands/my-company.md:

# My Company Brand System

**Source URL:** https://mycompany.com  
**Last updated:** 2025-01-15

## Colors

### Primary
- **Brand Blue:** `#0066FF` (rgb(0, 102, 255))
- **Dark Navy:** `#001133` (rgb(0, 17, 51))

### Secondary
- **Warm Gray:** `#F5F5F0` (rgb(245, 245, 240))
- **Cool Gray:** `#E8EBF0` (rgb(232, 235, 240))

### Accent
- **Action Orange:** `#FF6B35` (rgb(255, 107, 53))

### Semantic
- **Success:** `#00CC66`
- **Warning:** `#FFAA00`
- **Error:** `#FF3333`

## Typography

### Font Families
- **Sans:** "Inter", system-ui, sans-serif
- **Mono:** "JetBrains Mono", monospace

### Scale (1.25 ratio)
- **Display:** 64px / 700
- **H1:** 48px / 700
- **H2:** 36px / 600
- **Body:** 24px / 400
- **Caption:** 18px / 400

### Line Heights
- Display/Headings: 1.1
- Body: 1.5

## Voice & Tone

- **Personality:** Technical but approachable
- **Formality:** Professional casual
- **Key phrases:** "Ship fast", "Build trust", "Stay nimble"

## Layout Principles

- 8pt grid system
- 5% minimum edge margins
- Max content width: 1200px
- Card-based components with subtle shadows

Generate Slides Programmatically

If you want to script deck generation:

# deck_generator.py
import subprocess
import os

def generate_deck(brand_name, content_brief, output_path="slides.html"):
    """
    Generate a Power Design deck via Claude CLI
    """
    prompt = f"""
    use power-design
    
    Brand: {brand_name}
    
    Content:
    {content_brief}
    
    Generate slides.html and save to {output_path}
    """
    
    result = subprocess.run(
        ["claude", "code", "--prompt", prompt],
        capture_output=True,
        text=True
    )
    
    if os.path.exists(output_path):
        print(f"✓ Deck generated: {output_path}")
        return True
    else:
        print(f"✗ Generation failed: {result.stderr}")
        return False

# Usage
content = """
Headline: Introducing Data Pipeline v2
Points:
- 10x faster ingestion
- Real-time validation
- Zero-downtime migrations
- Built-in observability
"""

generate_deck("stripe", content, "pipeline-v2-deck.html")

Extract Brand DNA via Firecrawl

# brand_extractor.py
import os
import json
from firecrawl import FirecrawlApp

def extract_brand_dna(url):
    """
    Extract brand identity from website using Firecrawl
    """
    api_key = os.environ.get("FIRECRAWL_API_KEY")
    if not api_key:
        raise ValueError("FIRECRAWL_API_KEY not set")
    
    app = FirecrawlApp(api_key=api_key)
    
    # Scrape with structured extraction
    result = app.scrape_url(url, params={
        "formats": ["markdown", "html"],
        "extract": {
            "colors": "array of hex color codes used prominently",
            "typography": "font families and key sizes",
            "tone": "brand voice description"
        }
    })
    
    return {
        "url": url,
        "colors": result.get("extract", {}).get("colors", []),
        "typography": result.get("extract", {}).get("typography", ""),
        "tone": result.get("extract", {}).get("tone", ""),
        "raw_markdown": result.get("markdown", "")
    }

# Usage
brand_data = extract_brand_dna("https://stripe.com")
print(json.dumps(brand_data, indent=2))

HTML Deck Structure

Generated decks follow this pattern:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deck Title</title>
    <style>
        /* Reset */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        /* Base (follows Rule 15: 8pt grid) */
        body {
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 24px; /* Rule 8: body ≥24px */
            line-height: 1.5; /* Rule 9: 1.4-1.6 */
            background: #FFFFFF;
            color: #1A1A1A; /* Rule 11: 7:1 contrast */
        }
        
        /* Slide container */
        .slide {
            width: 100vw;
            height: 100vh;
            padding: 5%; /* Rule 5: 5% safe-zone */
            display: flex;
            flex-direction: column;
            justify-content: center;
            scroll-snap-align: start;
        }
        
        /* Typography (Rule 6: modular scale 1.25) */
        h1 {
            font-size: 64px; /* 24 × 1.25³ */
            font-weight: 700;
            line-height: 1.1; /* Rule 9: display 1.05-1.2 */
            margin-bottom: 48px; /* Rule 17: ≥48px unrelated */
        }
        
        h2 {
            font-size: 48px; /* Rule 8: title ≥48px */
            font-weight: 600;
            margin-bottom: 32px;
        }
        
        /* Max line length (Rule 10: ≤60 chars) */
        p, ul {
            max-width: 40em; /* ~60 chars at 24px */
            margin-bottom: 16px; /* Rule 17: ≤16px related */
        }
        
        /* Accent (Rule 13: one per slide) */
        .accent {
            color: #0066FF;
            font-weight: 600;
        }
        
        /* Navigation */
        .nav {
            position: fixed;
            bottom: 5%;
            right: 5%;
            font-size: 18px;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <!-- Slide 1: Title (Rule 1: one idea) -->
    <section class="slide">
        <h1>Introducing<br><span class="accent">Data Pipeline v2</span></h1>
        <p style="font-size: 32px; opacity: 0.7;">Ship faster. Scale smarter.</p>
    </section>
    
    <!-- Slide 2: Key point (Rule 3: 3-5 chunks) -->
    <section class="slide">
        <h2>10× Faster Ingestion</h2>
        <ul style="font-size: 28px; line-height: 1.6;">
            <li>Parallel processing across 16 workers</li>
            <li>Smart batching with adaptive backpressure</li>
            <li>Zero data loss guarantees</li>
        </ul>
    </section>
    
    <!-- More slides... -->
    
    <div class="nav">Use ← → to navigate</div>
    
    <script>
        // Arrow key navigation
        let currentSlide = 0;
        const slides = document.querySelectorAll('.slide');
        
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowRight' && currentSlide < slides.length - 1) {
                currentSlide++;
                slides[currentSlide].scrollIntoView({ behavior: 'smooth' });
            } else if (e.key === 'ArrowLeft' && currentSlide > 0) {
                currentSlide--;
                slides[currentSlide].scrollIntoView({ behavior: 'smooth' });
            }
        });
    </script>
</body>
</html>

Common Patterns

Refining Generated Decks

After initial generation, refine via natural language:

> make the title slide more dramatic
> add a chart showing adoption growth
> use more whitespace on slide 3
> change accent color to match our new brand
> add a closing slide with call-to-action

The skill maintains context and applies all 20 rules to changes.

Data Visualization Slides

When generating charts:

> add a slide with a bar chart showing revenue by quarter

The skill will:

Apply Rule 18 (data-ink ratio ≥80%): remove gridlines, borders, fills
Use brand accent color for key data point
Add direct labels (no legend)
Ensure WCAG contrast on labels

Multi-Section Decks

For longer presentations:

> create a 15-slide deck with 3 sections: Problem, Solution, Results

The skill adds section dividers with distinct visual treatment while maintaining consistency.

Dark Mode Decks

> generate the deck in dark mode

Applies Rule 20 (two valid modes) by:

Inverting background/foreground
Maintaining 7:1+ contrast
Adjusting accent colors for dark backgrounds

Configuration

Environment Variables

# Required for URL-based brand extraction
export FIRECRAWL_API_KEY=your_firecrawl_api_key

# Optional: default brand when none specified
export POWER_DESIGN_DEFAULT_BRAND=stripe

# Optional: output directory
export POWER_DESIGN_OUTPUT_DIR=~/presentations

Custom Brand Library Location

# Use a custom brand directory
export POWER_DESIGN_BRANDS_DIR=~/my-brands

Then structure as:

~/my-brands/
├── company-a.md
├── company-b.md
└── _template.md

Troubleshooting

"Brand not found in library"

Problem: Requested brand doesn't exist in brands/ directory

Solution:

Check spelling: ls ~/.claude/skills/power-design/brands/ | grep -i "brandname"
Use URL extraction instead: use brand from https://example.com
Create custom brand using brands/_template.md

Low Contrast Warnings

Problem: Generated slides fail WCAG contrast checks

Solution: The skill auto-corrects to 4.5:1 minimum. If you see warnings:

> increase contrast between text and background
> use darker text color

Or manually edit the generated HTML <style> section.

Firecrawl Extraction Fails

Problem: Brand DNA extraction times out or returns empty

Solution:

Verify API key: echo $FIRECRAWL_API_KEY
Check URL is publicly accessible
Try alternative pages: /about, /brand, /press
Fall back to manual brand creation

Slides Too Text-Heavy

Problem: Generated slides violate Rule 2 (glanceable in ≤3 seconds)

Solution:

> split slide 4 into two slides
> use bullet points instead of paragraphs
> add an icon to represent this concept visually

The skill will redistribute content across more slides.

Typography Not Loading

Problem: Custom fonts in brand system don't render

Solution: Ensure brand .md file includes web-safe fallbacks:

**Sans:** "CustomFont", "Inter", system-ui, sans-serif

Or add @import in generated HTML:

<style>
  @import url('https://fonts.googleapis.com/css2?family=CustomFont:wght@400;600;700&display=swap');
  /* ... rest of styles ... */
</style>

Chart Data-Ink Issues

Problem: Generated charts have too much decoration

Solution:

> remove the chart gridlines
> use direct labels instead of a legend
> make the bars thinner with more space between

Or manually edit SVG/canvas code following Tufte's guidelines in principles/design-principles.md Rule 18.

Advanced Usage

Batch Generation

# Generate multiple decks from a list
for brand in stripe linear vercel; do
  claude code --prompt "use power-design; create a product launch deck for ${brand}; content: New AI features - 3x faster, smarter autocomplete, team collaboration; save as ${brand}-launch.html"
done

CI/CD Integration

# .github/workflows/generate-decks.yml
name: Generate Presentation Decks

on:
  push:
    paths:
      - 'presentations/*.txt'

jobs:
  generate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Install Power Design
        run: |
          git clone https://github.com/ItsssssJack/power-design ~/.claude/skills/power-design
      
      - name: Generate Decks
        env:
          FIRECRAWL_API_KEY: ${{ secrets.FIRECRAWL_API_KEY }}
        run: |
          for brief in presentations/*.txt; do
            claude code --prompt "use power-design; brand: our-company; content from ${brief}; output: ${brief%.txt}.html"
          done
      
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./presentations

API Integration (Python)

# power_design_api.py
import subprocess
import tempfile
import os

class PowerDesignAPI:
    def __init__(self, brands_dir=None):
        self.brands_dir = brands_dir or os.path.expanduser(
            "~/.claude/skills/power-design/brands"
        )
    
    def list_brands(self):
        """Return list of available pre-built brands"""
        brands = []
        for f in os.listdir(self.brands_dir):
            if f.endswith('.md') and f != '_template.md':
                brands.append(f.replace('.md', ''))
        return sorted(brands)
    
    def generate(self, brand, content, output_path=None):
        """
        Generate deck with Power Design
        
        Args:
            brand: Brand name from library or URL
            content: Dict with 'headline' and 'points' list
            output_path: Where to save HTML (temp file if None)
        
        Returns:
            Path to generated HTML file
        """
        if output_path is None:
            fd, output_path = tempfile.mkstemp(suffix='.html')
            os.close(fd)
        
        headline = content.get('headline', 'Untitled')
        points = content.get('points', [])
        points_text = '\n'.join(f"- {p}" for p in points)
        
        prompt = f"""
        use power-design
        
        Brand: {brand}
        
        Headline: {headline}
        
        Key points:
        {points_text}
        
        Generate slides and save to: {output_path}
        """
        
        result = subprocess.run(
            ["claude", "code", "--prompt", prompt],
            capture_output=True,
            text=True,
            timeout=120
        )
        
        if os.path.exists(output_path):
            return output_path
        else:
            raise RuntimeError(f"Generation failed: {result.stderr}")

# Usage
api = PowerDesignAPI()

print("Available brands:", api.list_brands()[:5])

deck_path = api.generate(
    brand="stripe",
    content={
        "headline": "Introducing Stripe Tax",
        "points": [
            "Automate sales tax calculation",
            "150+ jurisdictions supported",
            "Real-time rate updates",
            "One-click integration"
        ]
    }
)

print(f"Deck generated: {deck_path}")

Resources

Full principles with citations: principles/design-principles.md
Brand library: brands/ (72+ pre-built systems)
Example deck: examples/sample-deck.html
Community: https://bit.ly/3PATPoL
Showcase site: https://power-design.vercel.app

Key Takeaways for Agents

Always apply all 20 rules — they're non-negotiable and research-backed
Brand DNA comes first — extract or load before generating content
One idea per slide — split complex topics across multiple slides
Contrast is critical — aim for WCAG AAA (7:1), minimum AA (4.5:1)
Whitespace is content — 40%+ ratio makes slides glanceable
Grid everything — 8pt spacing, single alignment system
Modular type scale — use 1.25–1.618 ratio, max 4 sizes per slide
Data-ink ratio for charts — remove all non-essential decoration
F-pattern layout — headline and key visual top-left
Consistent mode — pick minimal or rich, stay there

When in doubt, refer to principles/design-principles.md for specific thresholds and research citations.

FAQ

What does the power-design-slides skill do?

Generate brand-aligned presentation slides using Claude with 20 codified design principles and 72+ pre-built brand systems

How do I install power-design-slides?

Run npx skills add https://github.com/reason-machines/design-skills --skill power-design-slides in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/power-design-slides/ (personal) or .claude/skills/power-design-slides/ (project).

Which AI agents can use power-design-slides?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is power-design-slides safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains power-design-slides?

It is published by reason-machines in reason-machines/design-skills. It has 154 recorded installs.

Popular docs & writing skills

View category →

grill-with-docs

mattpocock/skills

A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.

Docs & Writing1.2M installs

lark-markdown

open.feishu.cn

飞书 Markdown：查看、创建、上传、编辑和比较飞书中的原生 Markdown 文件。当用户要操作飞书 Markdown 文件，或比较其远端版本及本地草稿时使用。纯本地 Markdown 文件操作不触发本 skill。不负责将 Markdown 导入为飞书在线文档，也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。

Docs & Writing778.7K installs

writing-beats

mattpocock/skills

Writing, exploit; assemble raw material into a journey of beats, grounding each term before a beat leans on it.

Docs & Writing490.7K installs

writing-shape

mattpocock/skills

Writing, exploit: shape raw material into an article, paragraph by paragraph.

Docs & Writing490.2K installs

writing-fragments

mattpocock/skills

Writing, explore: mine raw fragments, no structure yet.

Docs & Writing489.6K installs

writing-for-agents

mattpocock/skills

Writing documents for agents. Use when creating or editing skills, or modifying AGENTS.md or CLAUDE.md.

Docs & Writing479.3K installs

power-design-slides

Install

Install

Describe the task

Review the result

SKILL.md

Power Design Slides

What It Does

Installation

Project Structure

Basic Usage

1. Generate a Deck with Pre-Built Brand

2. Extract Brand from URL

3. Use Default Design System

The 20 Design Rules

Code Examples

Create a Custom Brand System

Generate Slides Programmatically

Extract Brand DNA via Firecrawl

HTML Deck Structure

Common Patterns

Refining Generated Decks

Data Visualization Slides

Multi-Section Decks

Dark Mode Decks

Configuration

Environment Variables

Custom Brand Library Location

Troubleshooting

"Brand not found in library"

Low Contrast Warnings

Firecrawl Extraction Fails

Slides Too Text-Heavy

Typography Not Loading

Chart Data-Ink Issues

Advanced Usage

Batch Generation

CI/CD Integration

API Integration (Python)

Resources

Key Takeaways for Agents

FAQ

More from reason-machines/design-skills

Popular docs & writing skills