Power Design
Deck HTML e landing page on-brand secondo 20 regole di design codificate e numeriche
Promosso
Cosa fa
Genera HTML auto-contenuto — deck di presentazione o siti web responsive — nel linguaggio di design di un brand, combinando una libreria di 72 sistemi di brand pre-costruiti (o DNA del brand estratto da Firecrawl) con due manuali di 20 regole basate sulla ricerca, ciascuna con soglie numeriche. Si attiva quando si richiede una landing page, un sito di marketing o un pitch deck che dovrebbe apparire on-brand. L'output è un singolo file HTML con token semantici, temi chiaro/scuro e un livello WCAG AA.
Rapporto di test
Task: una landing page per la fintech fittizia Ledgerly nel brand Stripe, percorso B (siti web) con brand dalla libreria. Eseguite entrambe le versioni tramite uno script di misurazione personalizzato per 20 controlli oggettivi più il calcolo del contrasto WCAG: la baseline ha ottenuto 1/20, la versione SKILL.md — 20/20. Specifiche della baseline: nessun skip-link, nessun landmark semantico, nessun token in :root, nessun dark mode, nessun clamp(), nessuna meta description/OG/JSON-LD, input da 14px (zoom di Safari mobile), tap target inferiori a 44px, placeholder invece di label — e tre fallimenti di contrasto AA: #777 su bianco 4.48:1, #999 su bianco 2.85:1, bianco su gradiente viola 4.07:1. Inoltre la baseline ha implementato esattamente l'hero con gradiente viola che il manuale di regole proibisce come primo elemento. Versione skill — 0 fallimenti di contrasto (17.37:1 / 4.75:1 / 6.19:1), token Stripe reali da brands/stripe/brand-style.md (#533afd, #061b31, peso 300 sul display, ombra bluastra rgba(50,50,93,.25)). Le affermazioni di README sono state controllate e confermate: esattamente 72 cartelle di brand, 20+20 regole in TL;DR, tutte le 21 immagini a posto; ma non ho controllato il percorso di estrazione del brand firecrawl — è necessaria una chiave a pagamento, e il rendering del browser è bloccato in questo ambiente, quindi l'assenza di scroll orizzontale è stata confermata solo staticamente.
Testato il: 2026-07-16 · Claude Code 2.x (agent harness)
Installazione
git clone https://github.com/ItsssssJack/power-design.git mkdir -p ~/.claude/skills cp -r power-design ~/.claude/skills/power-design
Comandi e prompt di esempio
/power-designDeck HTML e landing page on-brand secondo 20 regole di design codificate e numeriche
Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):
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