Power Design
HTML prezentace a vstupní stránky s ohledem na značku, podle 20 kodifikovaných, numerických designových pravidel.
Otestováno · Funguje
Co umí
Generuje samostatné HTML — prezentační balíčky nebo responzivní webové stránky — v designovém jazyce značky, kombinující knihovnu 72 předpřipravených brandových systémů (nebo brand DNA extrahované Firecrawl) se dvěma soubory 20 výzkumem podložených pravidel, z nichž každé nese numerické prahové hodnoty. Spouští se, když požádáte o vstupní stránku, marketingový web nebo pitch deck, který by měl vypadat v souladu se značkou. Výstupem je jediný HTML soubor se sémantickými tokeny, světlým/tmavým tématem a WCAG AA podlahou.
Testovací report
Úkol: vstupní stránka pro fiktivní fintech Ledgerly ve značce Stripe, cesta B (webové stránky) se značkou z knihovny. Obě verze jsem spustil přes vlastní měřicí skript pro 20 objektivních kontrol plus výpočet kontrastu WCAG: základní verze získala 1/20, verze SKILL.md — 20/20. Specifika základní verze: žádný skip-link, žádné sémantické orientační body, žádné tokeny v :root, žádný tmavý režim, žádný clamp(), žádný meta description/OG/JSON-LD, 14px vstup (mobilní Safari zoomuje), tap targets menší než 44px, placeholder místo labelu — a tři selhání kontrastu AA: #777 na bílé 4.48:1, #999 na bílé 2.85:1, bílá na fialovém gradientu 4.07:1. Navíc základní verze nasadila přesně fialovo-gradientový hero, který pravidla zakazují jako první položku. Verze skillu — 0 selhání kontrastu (17.37:1 / 4.75:1 / 6.19:1), skutečné Stripe tokeny z brands/stripe/brand-style.md (#533afd, #061b31, váha 300 na displeji, modře tónovaný stín rgba(50,50,93,.25)). Tvrzení z README byla zkontrolována a potvrzena: přesně 72 složek značek, 20+20 pravidel v TL;DR, všech 21 obrázků na místě; ale nezkontroloval jsem cestu extrakce značky Firecrawl — je potřeba placený klíč a vykreslování prohlížeče je v tomto prostředí blokováno, takže absence horizontálního posouvání byla potvrzena pouze staticky.
Testováno: 2026-07-16 · Claude Code 2.x (agent harness)
Instalace
git clone https://github.com/ItsssssJack/power-design.git mkdir -p ~/.claude/skills cp -r power-design ~/.claude/skills/power-design
Příkazy a ukázkové prompty
/power-designHTML prezentace a vstupní stránky s ohledem na značku, podle 20 kodifikovaných, numerických designových pravidel.
Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):
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