Power Design
On-brand HTML-decks og landingssider mod 20 kodificerede, numeriske designregler
Testet · Virker
Hvad det gør
Genererer selvstændig HTML — præsentationsdecks eller responsive websites — i et brands designsprog, der kombinerer et bibliotek af 72 forudbyggede brandsystemer (eller Firecrawl-ekstraheret brand-DNA) med to regelbøger med hver 20 forskningsbaserede regler, der hver bærer numeriske tærskler. Udløses når du beder om en landingsside, marketing-site eller pitch deck, der skal se on-brand ud. Output er en enkelt HTML-fil med semantiske tokens, lys/mørk tematisering og et WCAG AA-gulv.
Testrapport
Opgave: en landingsside for fiktiv fintech Ledgerly i Stripe-brand, sti B (websites) med brand fra bibliotek. Kørte begge versioner gennem et brugerdefineret målescript for 20 objektive kontroller plus WCAG-kontrastberegning: baseline scorede 1/20, SKILL.md-version — 20/20. Baseline-specifikke: ingen skip-link, ingen semantiske landemærker, ingen tokens i :root, ingen mørk tilstand, ingen clamp(), ingen meta description/OG/JSON-LD, 14px input (mobil Safari zoomer), trykmål mindre end 44px, placeholder i stedet for label — og tre AA-kontrastfejl: #777 på hvid 4.48:1, #999 på hvid 2.85:1, hvid på lilla gradient 4.07:1. Plus baseline udrullede præcis den lilla-gradient hero, som regelbogen forbyder som det første element. Skill-version — 0 kontrastfejl (17.37:1 / 4.75:1 / 6.19:1), ægte Stripe-tokens fra brands/stripe/brand-style.md (#533afd, #061b31, weight 300 on display, blue-tinted shadow rgba(50,50,93,.25)). Påstande fra README blev kontrolleret og bekræftet: præcis 72 brand-mapper, 20+20 regler i TL;DR, alle 21 billeder på plads; men jeg kontrollerede ikke firecrawl brand-ekstraktionsstien — en betalt nøgle er nødvendig, og browser-rendering er blokeret i dette miljø, så fraværet af horisontal scroll blev kun bekræftet statisk.
Testet: 2026-07-16 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/ItsssssJack/power-design.git mkdir -p ~/.claude/skills cp -r power-design ~/.claude/skills/power-design
Kommandoer og eksempelprompter
/power-designOn-brand HTML-decks og landingssider mod 20 kodificerede, numeriske designregler
Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):
Build a landing page for my fintech product using Stripe's brand styleGenerate a pitch deck in HTML that passes WCAG AA contrast checksMake an on-brand marketing site with dark mode and no purple gradient hero