Power Design

A Claude skill for decks and websites that don't look like AI made them.

Brand DNA × codified design principles → beautiful HTML, on demand. 20 rules for slides, 20 for the web.

See the principles → · Join the community →

What it does

Power Design is a Claude Code skill that makes two kinds of output — presentation decks and full responsive websites — combining two things every other AI generator misses:

1. Brand DNA — extracted live from any URL via Firecrawl, or picked from 72+ pre-built brand systems (Stripe, Apple, Linear, Spotify, Vercel, Notion, Tesla, Airbnb…)
2. Codified design principles — research-backed rules with numeric thresholds. 20 for slides (Tufte, Reynolds, Duarte, Williams, Refactoring UI, Müller-Brockmann, Mayer, WCAG 2.2) and 20 for the web (Marcotte, Krug, Bringhurst, Utopia, Baymard, NN/g, Core Web Vitals, WCAG 2.2).

The result: every output is both on-brand and objectively well-designed. Decks with no purple gradients, no six-bullet heroes, no drop-shadowed bars. Websites that are mobile-first, fast (Core Web Vitals-budgeted), accessible (WCAG 2.2 AA), and built to convert.

One skill, two paths. It asks "deck or website?" first, then routes to the right rulebook off the same brand engine.

The 20 slide rules, illustrated

Every slide passes the same 20 checks. Read the full field manual →

The 20 web rules

A slide is a fixed frame. A page is a fluid, interactive, indexable system — so websites pass a second rulebook, built for the four questions a slide never has to answer: does it hold up from 360px to 1440px, is it fast, can everyone use it, does it convert? Read the full ruleset →

For the build stack behind modern web output — design tokens, shadcn/ui, Tailwind v4, Radix, OKLCH, motion, theming — see the sister repo power-design-web.

Install

git clone https://github.com/ItsssssJack/power-design ~/.claude/skills/power-design

Then in Claude Code:

> use power-design — make me a deck for stripe.com about our new product launch
> use power-design — build me a landing page in linear.com's style for my new app

The skill will:

1. Ask deck or website?, then which brand (paste URL, pick from library, or skip for default)
2. Extract brand DNA via Firecrawl (~30 seconds)
3. Ask a short brief (deck: headline + 3–5 points · site: type, goal, sections)
4. Generate slides.html or a responsive site.html, applying brand DNA × the right 20 rules
5. Open in browser. Refine via natural conversation.

Brand library — 72 pre-built systems

Each entry is a single brand-style.md file: colors, type, voice, components, source URL. Add your own using brands/_template.md.

How the skill works (under the hood)

   ┌────────────────────────────────────────────────┐
   │  0. Deck or website?    → routes the rulebook  │
   ├────────────────────────────────────────────────┤
   │  1. Brand DNA           (URL → Firecrawl)      │
   │     OR pick from        brands/.md        │
   ├────────────────────────────────────────────────┤
   │  2. Design rules        design-principles.md   │
   │                         OR web-principles.md   │
   ├────────────────────────────────────────────────┤
   │  3. Compose             brand × rules → HTML    │
   └────────────────────────────────────────────────┘
                       ↓
              slides.html  ·  site.html

The skill's runbook lives in SKILL.md. The design principles — with research citations and numeric thresholds — live in principles/design-principles.md (slides) and principles/web-principles.md (web).

Credits

• Brand library — forked and restructured from VoltAgent/awesome-design-md, with permission and credit.
• Design research (slides) — Edward Tufte, Garr Reynolds, Nancy Duarte, Robin Williams (CRAP), Adam Wathan & Steve Schoger (Refactoring UI), Josef Müller-Brockmann, Matthew Butterick, Robert Bringhurst, Richard Mayer, Nielsen Norman Group, WCAG 2.2.
• Design research (web) — Ethan Marcotte, Luke Wroblewski, Brad Frost, Steve Krug, Utopia (Trys Mudford & James Gilyead), Björn Ottosson (OKLCH), Baymard Institute, Nielsen Norman Group, Google Core Web Vitals, W3C WCAG 2.2 & Design Tokens CG.
• Illustrations — generated via Kie.ai nano-banana 2.

License

MIT — see LICENSE.

Built by Jack Roberts · Vercel showcase · Community