power-design-slides

# Power Design Slides > Skill by [ara.so](https://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 ```bash # 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: ```bash 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: 1. Load Stripe's brand DNA from `brands/stripe.md` 2. Ask for content brief (headline + 3-5 key points) 3. Generate `slides.html` applying brand × 20 rules 4. Open in browser ### 2. Extract Brand from URL ``` > use power-design — create slides using the brand from example.com ``` Requires Firecrawl API key: ```bash 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`: ```markdown # 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: ```python # 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 ```python # 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: ```html <!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 ```bash # 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 ```