Power Design
Varumärkesanpassade HTML-presentationer och landningssidor mot 20 kodifierade, numeriska designregler.
Testad · Fungerar
Vad den gör
Genererar fristående HTML — presentationsdäck eller responsiva webbplatser — i ett varumärkes designspråk, genom att kombinera ett bibliotek med 72 förbyggda varumärkessystem (eller Firecrawl-extraherat varumärkes-DNA) med två regelböcker med 20 forskningsbaserade regler som var och en bär numeriska tröskelvärden. Utlöses när du ber om en landningssida, marknadsföringssida eller pitch-deck som ska se varumärkesanpassad ut. Utdata är en enda HTML-fil med semantiska tokens, ljus/mörk tematisering och en WCAG AA-nivå.
Testrapport
Uppgift: en landningssida för fiktiva fintech-företaget Ledgerly i Stripe-varumärke, sökväg B (webbplatser) med varumärke från biblioteket. Körde båda versionerna genom ett anpassat mätskript för 20 objektiva kontroller plus WCAG-kontrastberäkning: baslinjen fick 1/20, SKILL.md-versionen — 20/20. Baslinjespecifikationer: ingen skip-länk, inga semantiska landmärken, inga tokens i :root, inget mörkt läge, ingen clamp(), ingen meta-beskrivning/OG/JSON-LD, 14px input (mobil Safari zoomar), tryckmål mindre än 44px, platshållare istället för etikett — och tre AA-kontrastfel: #777 på vit 4.48:1, #999 på vit 2.85:1, vit på lila gradient 4.07:1. Dessutom rullade baslinjen ut exakt den lila-gradient-hjälte som regelboken förbjuder som första objekt. Skill-versionen — 0 kontrastfel (17.37:1 / 4.75:1 / 6.19:1), verkliga Stripe-tokens från brands/stripe/brand-style.md (#533afd, #061b31, vikt 300 på display, blåtonad skugga rgba(50,50,93,.25)). Påståenden från README kontrollerades och bekräftades: exakt 72 varumärkesmappar, 20+20 regler i TL;DR, alla 21 bilder på plats; men jag kontrollerade inte firecrawl-varumärkesextraktionsvägen — en betald nyckel behövs, och webbläsarrendering är blockerad i denna miljö, så frånvaron av horisontell scroll bekräftades endast statiskt.
Testad: 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
Kommandon och exempelprompter
/power-designVarumärkesanpassade HTML-presentationer och landningssidor mot 20 kodifierade, numeriska designregler.
Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):
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