Power Design
On-brand HTML decks en landingspagina's tegen 20 gecodificeerde, numerieke ontwerpregels.
Getest · Werkt
Wat het doet
Genereert zelfstandige HTML — presentatiedecks of responsieve websites — in de designtaal van een merk, waarbij een bibliotheek van 72 vooraf gebouwde merksystemen (of Firecrawl-geëxtraheerde merk-DNA) wordt gecombineerd met twee regelboeken van elk 20 op onderzoek gebaseerde regels met numerieke drempels. Activeert wanneer u vraagt om een landingspagina, marketingsite of pitchdeck dat on-brand moet ogen. Output is een enkel HTML-bestand met semantische tokens, light/dark theming en een WCAG AA vloer.
Testrapport
Taak: een landingspagina voor fictieve fintech Ledgerly in Stripe merk, pad B (websites) met merk uit bibliotheek. Voerde beide versies uit via een aangepast meetscript voor 20 objectieve controles plus WCAG contrastberekening: baseline scoorde 1/20, SKILL.md versie — 20/20. Baseline specifieke punten: geen skip-link, geen semantische landmarks, geen tokens in :root, geen donkere modus, geen clamp(), geen meta description/OG/JSON-LD, 14px input (mobiele Safari zoomt), tap targets kleiner dan 44px, placeholder in plaats van label — en drie AA contrastfouten: #777 op wit 4.48:1, #999 op wit 2.85:1, wit op paars verloop 4.07:1. Bovendien rolde baseline precies de paars-verloop hero uit die het regelboek verbiedt als eerste item. Skill versie — 0 contrastfouten (17.37:1 / 4.75:1 / 6.19:1), echte Stripe tokens van brands/stripe/brand-style.md (#533afd, #061b31, weight 300 op display, blauw getinte schaduw rgba(50,50,93,.25)). Claims uit README werden gecontroleerd en bevestigd: precies 72 merkmappen, 20+20 regels in TL;DR, alle 21 afbeeldingen aanwezig; maar ik heb het firecrawl merkextractiepad niet gecontroleerd — een betaalde sleutel is nodig, en browser rendering is geblokkeerd in deze omgeving, dus de afwezigheid van horizontale scroll werd alleen statisch bevestigd.
Getest op: 2026-07-16 · Claude Code 2.x (agent harness)
Installatie
git clone https://github.com/ItsssssJack/power-design.git mkdir -p ~/.claude/skills cp -r power-design ~/.claude/skills/power-design
Commando's en voorbeeldprompts
/power-designOn-brand HTML decks en landingspagina's tegen 20 gecodificeerde, numerieke ontwerpregels.
Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):
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