Power Design
Markenkonforme HTML-Decks und Landingpages nach 20 kodifizierten, numerischen Designregeln.
Getestet · Funktioniert
Was es kann
Generiert eigenständiges HTML — Präsentations-Decks oder responsive Websites — in der Designsprache einer Marke, kombiniert eine Bibliothek von 72 vorgefertigten Markensystemen (oder Firecrawl-extrahiertes Marken-DNA) mit zwei Regelwerken von jeweils 20 forschungsgestützten Regeln, die numerische Schwellenwerte enthalten. Wird ausgelöst, wenn Sie nach einer Landingpage, einer Marketing-Website oder einem Pitch Deck fragen, das markenkonform aussehen soll. Die Ausgabe ist eine einzelne HTML-Datei mit semantischen Tokens, Light/Dark-Theming und einem WCAG AA-Standard.
Testbericht
Aufgabe: eine Landingpage für das fiktive Fintech Ledgerly im Stripe-Brand, Pfad B (Websites) mit Brand aus der Bibliothek. Beide Versionen wurden durch ein benutzerdefiniertes Messskript für 20 objektive Prüfungen plus WCAG-Kontrastberechnung ausgeführt: Baseline erzielte 1/20, SKILL.md-Version — 20/20. Baseline-Spezifika: kein Skip-Link, keine semantischen Landmarks, keine Tokens in :root, kein Dark Mode, kein clamp(), keine Meta-Beschreibung/OG/JSON-LD, 14px Input (mobiles Safari zoomt), Tap-Ziele kleiner als 44px, Platzhalter statt Label — und drei AA-Kontrastfehler: #777 auf Weiß 4.48:1, #999 auf Weiß 2.85:1, Weiß auf Lila-Verlauf 4.07:1. Außerdem rollte die Baseline genau den lila-verlaufenden Hero aus, den das Regelwerk als erstes Element verbietet. Skill-Version — 0 Kontrastfehler (17.37:1 / 4.75:1 / 6.19:1), echte Stripe-Tokens aus brands/stripe/brand-style.md (#533afd, #061b31, Gewicht 300 auf Anzeige, blau getönter Schatten rgba(50,50,93,.25)). Behauptungen aus README wurden überprüft und bestätigt: genau 72 Brand-Ordner, 20+20 Regeln in TL;DR, alle 21 Bilder vorhanden; aber ich habe den Firecrawl-Brand-Extraktionspfad nicht überprüft — ein kostenpflichtiger Schlüssel ist erforderlich, und Browser-Rendering ist in dieser Umgebung blockiert, sodass das Fehlen von horizontalem Scrollen nur statisch bestätigt wurde.
Getestet am: 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
Befehle & Beispiel-Prompts
/power-designMarkenkonforme HTML-Decks und Landingpages nach 20 kodifizierten, numerischen Designregeln.
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
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