Power Design
Presentaciones HTML y páginas de aterrizaje de marca según 20 reglas de diseño codificadas y numéricas.
Probado · Funciona
Qué hace
Genera HTML autocontenido — presentaciones o sitios web responsivos — en el lenguaje de diseño de una marca, combinando una biblioteca de 72 sistemas de marca preconstruidos (o ADN de marca extraído con Firecrawl) con dos libros de reglas de 20 reglas cada uno respaldadas por investigación y con umbrales numéricos. Se activa cuando se solicita una página de aterrizaje, un sitio de marketing o una presentación que debe tener un aspecto de marca. La salida es un único archivo HTML con tokens semánticos, temática clara/oscura y un mínimo WCAG AA.
Informe de la prueba
Tarea: una página de aterrizaje para la fintech ficticia Ledgerly con la marca Stripe, ruta B (sitios web) con la marca de la biblioteca. Se ejecutaron ambas versiones a través de un script de medición personalizado para 20 verificaciones objetivas más el cálculo de contraste WCAG: la línea base obtuvo 1/20, la versión de SKILL.md — 20/20. Detalles de la línea base: sin skip-link, sin puntos de referencia semánticos, sin tokens en :root, sin modo oscuro, sin clamp(), sin meta descripción/OG/JSON-LD, entrada de 14px (Safari móvil hace zoom), objetivos de toque de menos de 44px, marcador de posición en lugar de etiqueta — y tres fallos de contraste AA: #777 sobre blanco 4.48:1, #999 sobre blanco 2.85:1, blanco sobre degradado púrpura 4.07:1. Además, la línea base lanzó exactamente el héroe con degradado púrpura que el libro de reglas prohíbe como primer elemento. Versión de la skill — 0 fallos de contraste (17.37:1 / 4.75:1 / 6.19:1), tokens reales de Stripe de brands/stripe/brand-style.md (#533afd, #061b31, peso 300 en pantalla, sombra azulada rgba(50,50,93,.25)). Las afirmaciones de README se verificaron y confirmaron: exactamente 72 carpetas de marca, 20+20 reglas en TL;DR, las 21 imágenes en su lugar; pero no verifiqué la ruta de extracción de marca de firecrawl — se necesita una clave de pago, y la renderización del navegador está bloqueada en este entorno, por lo que la ausencia de desplazamiento horizontal solo se confirmó estáticamente.
Probado el: 2026-07-16 · Claude Code 2.x (agent harness)
Instalación
git clone https://github.com/ItsssssJack/power-design.git mkdir -p ~/.claude/skills cp -r power-design ~/.claude/skills/power-design
Comandos y prompts de ejemplo
/power-designPresentaciones HTML y páginas de aterrizaje de marca según 20 reglas de diseño codificadas y numéricas.
Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):
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