Power Design

Merketilpassede HTML-presentasjoner og landingssider mot 20 kodifiserte, numeriske designregler

av ItsssssJack · ItsssssJack/power-design

Bestått ★ 9.6/10

Power Design — Merketilpassede HTML-presentasjoner og landingssider mot 20 kodifiserte, numeriske designregler

Hva den gjør

Genererer selvstendig HTML — presentasjonsdekk eller responsive nettsteder — i et merkes designspråk, ved å kombinere et bibliotek med 72 forhåndsbygde merkevaresystemer (eller Firecrawl-ekstrahert merkevare-DNA) med to regelbøker med 20 forskningsbaserte regler, hver med numeriske terskler. Utløses når du ber om en landingsside, markedsføringsside eller pitch-deck som skal se merkevaretilpasset ut. Utdata er en enkelt HTML-fil med semantiske tokens, lys/mørk tematisering og et WCAG AA-gulv.

Testrapport

Oppgave: en landingsside for fiktive fintech Ledgerly i Stripe-merkevare, sti B (nettsteder) med merkevare fra biblioteket. Kjørte begge versjonene gjennom et tilpasset måleskript for 20 objektive sjekker pluss WCAG-kontrastberegning: grunnlinjen scoret 1/20, SKILL.md-versjonen — 20/20. Grunnlinjespesifikasjoner: ingen skip-lenke, ingen semantiske landemerker, ingen tokens i :root, ingen mørk modus, ingen clamp(), ingen meta description/OG/JSON-LD, 14px input (mobil Safari zoomer), trykkmål mindre enn 44px, plassholder i stedet for etikett — og tre AA-kontrastfeil: #777 på hvit 4.48:1, #999 på hvit 2.85:1, hvit på lilla gradient 4.07:1. I tillegg rullet grunnlinjen ut nøyaktig den lilla-gradient-heroen som regelboken forbyr som første element. Ferdighetsversjonen — 0 kontrastfeil (17.37:1 / 4.75:1 / 6.19:1), ekte Stripe-tokens fra brands/stripe/brand-style.md (#533afd, #061b31, vekt 300 på display, blåtonet skygge rgba(50,50,93,.25)). Påstander fra README ble sjekket og bekreftet: nøyaktig 72 merkevaremapper, 20+20 regler i TL;DR, alle 21 bilder på plass; men jeg sjekket ikke firecrawl-merkevareutvinningsstien — en betalt nøkkel er nødvendig, og nettleserrendering er blokkert i dette miljøet, så fraværet av horisontal rulling ble kun bekreftet statisk.

Testet på: 2026-07-16 · Claude Code 2.x (agent harness)

Installer

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-designMerketilpassede HTML-presentasjoner og landingssider mot 20 kodifiserte, numeriske designregler

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):

Build a landing page for my fintech product using Stripe's brand style
Generate a pitch deck in HTML that passes WCAG AA contrast checks
Make an on-brand marketing site with dark mode and no purple gradient hero

Full rapport →