Power Design
Zgodne z marką prezentacje HTML i strony docelowe, oparte na 20 skodyfikowanych, numerycznych zasadach projektowania.
Testowano · Działa
Co robi ten skill
Generuje samodzielny HTML — prezentacje lub responsywne strony internetowe — w języku projektowym marki, łącząc bibliotekę 72 gotowych systemów marki (lub DNA marki wyodrębnione przez Firecrawl) z dwoma zbiorami 20 zasad opartych na badaniach, z których każda zawiera numeryczne progi. Uruchamia się, gdy prosisz o stronę docelową, stronę marketingową lub prezentację, która powinna wyglądać zgodnie z marką. Wynikiem jest pojedynczy plik HTML z tokenami semantycznymi, motywem jasnym/ciemnym i minimalnym poziomem WCAG AA.
Raport z testu
Zadanie: strona docelowa dla fikcyjnej firmy fintech Ledgerly w marce Stripe, ścieżka B (strony internetowe) z marką z biblioteki. Uruchomiono obie wersje przez niestandardowy skrypt pomiarowy dla 20 obiektywnych kontroli plus obliczenia kontrastu WCAG: linia bazowa uzyskała 1/20, wersja SKILL.md — 20/20. Szczegóły linii bazowej: brak skip-linku, brak semantycznych punktów orientacyjnych, brak tokenów w :root, brak trybu ciemnego, brak clamp(), brak meta description/OG/JSON-LD, input 14px (mobilne Safari powiększa), cele dotykowe mniejsze niż 44px, placeholder zamiast etykiety — i trzy błędy kontrastu AA: #777 na białym 4.48:1, #999 na białym 2.85:1, biały na fioletowym gradiencie 4.07:1. Ponadto linia bazowa wprowadziła dokładnie fioletowo-gradientowy bohater, który podręcznik zasad zabrania jako pierwszy element. Wersja umiejętności — 0 błędów kontrastu (17.37:1 / 4.75:1 / 6.19:1), prawdziwe tokeny Stripe z brands/stripe/brand-style.md (#533afd, #061b31, waga 300 na wyświetlaczu, niebiesko-przyciemniony cień rgba(50,50,93,.25)). Twierdzenia z README zostały sprawdzone i potwierdzone: dokładnie 72 foldery marki, 20+20 zasad w TL;DR, wszystkie 21 obrazów na miejscu; ale nie sprawdziłem ścieżki ekstrakcji marki firecrawl — potrzebny jest płatny klucz, a renderowanie przeglądarki jest zablokowane w tym środowisku, więc brak poziomego przewijania został potwierdzony tylko statycznie.
Testowano: 2026-07-16 · Claude Code 2.x (agent harness)
Instalacja
git clone https://github.com/ItsssssJack/power-design.git mkdir -p ~/.claude/skills cp -r power-design ~/.claude/skills/power-design
Komendy i przykładowe prompty
/power-designZgodne z marką prezentacje HTML i strony docelowe, oparte na 20 skodyfikowanych, numerycznych zasadach projektowania.
Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):
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