Design Auditor
Auditoría UI/UX puntuada contra 19 reglas con cálculos de contraste WCAG reales y diffs de código
Probado · Funciona
Qué hace
Audita diseños y código front-end (HTML/CSS/React/Vue/Tailwind) o archivos Figma contra 19 categorías, produciendo una puntuación de 0-100, relaciones de contraste WCAG, problemas clasificados por severidad y diffs de corrección antes/después. Se activa con solicitudes para revisar una UI, verificar la accesibilidad, verificar el contraste de color o ejecutar una auditoría de diseño/heurística. Inglés y coreano.
Informe de la prueba
Se le proporcionó una tarjeta de registro con tres pares de colores fallidos y calculó las relaciones WCAG exactas (#999/#fff = 2.85, #aaa/#fff = 2.32, white/#7c9fe0 = 2.66), todas las cuales coincidieron con una verificación independiente de luminancia en Python con dos decimales. Donde una revisión simple sin habilidad solo decía que el texto 'se veía claro', la habilidad devolvió un informe puntuado de 0-100 que también detectó el padding de 13px fuera de la cuadrícula, texto del cuerpo de menos de 12px, alt de imagen faltante, entradas sin etiquetar y la eliminación de focus outline:none, cada uno con un diff de corrección para copiar y pegar.
Probado el: 2026-07-17 · Claude Code 2.x (agent harness)
Instalación
git clone https://github.com/Ashutos1997/claude-design-auditor-skill mkdir -p ~/.claude/skills cd claude-design-auditor-skill && cp -r . ~/.claude/skills/design-auditor
Comandos y prompts de ejemplo
/design-auditorAuditoría UI/UX puntuada contra 19 reglas con cálculos de contraste WCAG reales y diffs de código
Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):
Can you audit this signup form for WCAG contrast and accessibility issuesScore our landing page against design heuristics and flag what's brokenCheck our Figma file for accessibility problems before we ship it