Power Design
Présentations HTML et pages de destination conformes à la marque, basées sur 20 règles de conception codifiées et numériques
Testé · Fonctionne
Ce que fait
Génère du HTML autonome — présentations ou sites web responsives — dans le langage de conception d'une marque, combinant une bibliothèque de 72 systèmes de marque pré-construits (ou ADN de marque extrait par Firecrawl) avec deux recueils de 20 règles fondées sur la recherche, chacune comportant des seuils numériques. Se déclenche lorsque vous demandez une page de destination, un site marketing ou une présentation qui doit être conforme à la marque. La sortie est un fichier HTML unique avec des jetons sémantiques, un thème clair/sombre et un niveau WCAG AA.
Rapport de test
Tâche : une page de destination pour la fintech fictive Ledgerly dans la marque Stripe, chemin B (sites web) avec la marque de la bibliothèque. Exécuté les deux versions via un script de mesure personnalisé pour 20 vérifications objectives plus le calcul du contraste WCAG : la base de référence a obtenu 1/20, la version SKILL.md — 20/20. Spécificités de la base de référence : pas de lien de saut, pas de repères sémantiques, pas de jetons dans :root, pas de mode sombre, pas de clamp(), pas de méta description/OG/JSON-LD, entrée 14px (zoom mobile Safari), cibles de tapotement inférieures à 44px, placeholder au lieu de label — et trois échecs de contraste AA : #777 sur blanc 4.48:1, #999 sur blanc 2.85:1, blanc sur dégradé violet 4.07:1. De plus, la base de référence a déployé exactement le héros dégradé violet que le recueil de règles interdit comme premier élément. Version de la compétence — 0 échecs de contraste (17.37:1 / 4.75:1 / 6.19:1), vrais jetons Stripe de brands/stripe/brand-style.md (#533afd, #061b31, poids 300 sur l'affichage, ombre teintée de bleu rgba(50,50,93,.25)). Les affirmations du README ont été vérifiées et confirmées : exactement 72 dossiers de marque, 20+20 règles dans TL;DR, les 21 images en place ; mais je n'ai pas vérifié le chemin d'extraction de marque firecrawl — une clé payante est nécessaire, et le rendu du navigateur est bloqué dans cet environnement, so l'absence de défilement horizontal n'a été confirmée que statiquement.
Testé le: 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
Commandes et exemples de prompts
/power-designPrésentations HTML et pages de destination conformes à la marque, basées sur 20 règles de conception codifiées et numériques
Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :
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