Accesibilidad: comprobar un componente

Usted creó un control de diálogo/menú/formulario y desea detectar todos los problemas con anticipación. Un componente que sobrevive a una revisión de accesibilidad.

Claude Design Auditor (Claude Skill) — Instalar & Demo en vivo

Por qué usarlo

Características clave

18 categorías de auditoría: tipografía, contraste, espaciado, jerarquía, coherencia, todo, formularios, movimiento, modo oscuro, responsivo, estados, copia, i18n/RTL, elevación, iconografía, navegación, tokens, ética.
Múltiples formatos de entrada: Figma, HTML/CSS, React/Vue, capturas de pantalla, wireframes, prosa
Puntuación de 0 a 100, etiquetas de gravedad, puntuaciones separadas a11y + ética
Ejemplos de código antes/después de cada solución
Exportaciones: Markdown, Canva, transferencia de desarrollador

Demo en vivo

Cómo se ve en la práctica

claude-design-auditor-skill.replay ▶ listo

0/0

Instalación

Repositorio del autor · Documentación oficial de Skills de Claude

Casos de uso

Usos del mundo real: Claude Design Auditor

Auditar un diseño antes de enviarlo a ingeniería

👤 Diseñadores de productos preparando la transferencia de desarrollo ⏱ ~30 min intermediate

Cuándo usarlo: El diseño está "listo" y desea realizar un barrido final antes de que los desarrolladores comiencen a clonarlo.

Flujo

Invocar a la auditora

Audite este enlace de Figma: <url>. Alcance: completo.✓ Copiado

→ Puntuación + cuestiones clasificadas con referencias a las 18 reglas
Arreglar los críticos

Aplique las 5 correcciones principales de alta gravedad en Figma; mostrar antes/después.✓ Copiado

→ Vistas previas de antes/después de cada corrección
Exportar el traspaso

Exporte una rebaja de transferencia de desarrollo con tokens y todas las notas.✓ Copiado

→ Markdown listo para incluirse en el ticket

Resultado: El diseño llega a dev con sus principales problemas ya cerrados.

Errores comunes

Tratar el marcador como el objetivo — La puntuación mide el cumplimiento de las reglas, no el gusto. Utilice la lista de búsqueda, no solo el número

Combinar con: claude-code-design-skills

Clasifique una interfaz de usuario heredada para las prioridades de rediseño

👤 El diseño lleva a cabo un rediseño ⏱ ~60 min advanced

Cuándo usarlo: Está planeando un rediseño y necesita datos sobre por dónde empezar.

Flujo

Pantallas de feeds o URL

Audite las 10 pantallas principales de la aplicación.<url>. Hallazgos agregados por gravedad.✓ Copiado

→ Resumen multipantalla con puntos calientes
Seleccionar secuenciación

Proponer un plan de secuenciación de rediseño agrupado por categoría de reglas.✓ Copiado

→ Plan vinculado a hallazgos, no a vibraciones

Resultado: Un plan de rediseño respaldado por defectos concretos.

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

claude-design-auditor-skill + claude-code-design-skills

Auditoría → Figma-to-code → volver a auditar el código

Audite Figma, conviértalo a React y luego vuelva a auditar React para verificar la paridad.✓ Copiado

claude-design-auditor-skill + motion-dev-animations-skill

Deje que los expertos en movimiento agreguen/ajusten animaciones y luego ejecute el alcance del movimiento del auditor

Agregue animaciones de primavera por desarrollo de movimiento; luego audite el movimiento + el comportamiento de movimiento reducido.✓ Copiado

claude-design-auditor-skill + figma

Extraiga los activos de Figma a través de MCP, audite y escriba comentarios

Para cada cuadro marcado, agregue un comentario de Figma que resuma el hallazgo.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar	Coste
design-audit (SKILL)	asset (Figma URL / image / code) + optional scope	Antes de la transferencia, en la revisión del código o como parte de un plan de rediseño	0

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: Ninguna
Tokens por llamada: Grande: dominan las capturas de pantalla y los bloques de código largos
Monetario: Gratis
Consejo: Alcance agresivo (solo siempre o solo tipografía) para iteraciones rápidas; Las auditorías completas requieren muchos tokens.

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: Ninguno; Si las URL de Figma son privadas, compártalas mediante exportación de imágenes o use Figma MCP con el alcance adecuado.

Salida de datos: No hay salida de red desde la habilidad; Tus imágenes y código permanecen en el chat.

Una puntuación verde ≠ buen diseño. El auditor hace cumplir las reglas; La adecuación del producto al mercado, la marca y la emoción son suyas para juzgar.
La categoría ética/patrón oscuro es heurística. Úselo como un motivo para discutir, no como un veredicto en la sala del tribunal.

Resolución de problemas

Errores comunes y soluciones

El auditor pasa por alto cuestiones obvias

Aumente el tamaño de entrada o proporcione múltiples ventanas gráficas/capturas de pantalla; las heurísticas son mejores con cobertura.

Verificar: Re-run with extra screenshots

Tokens que advierten sobre demasiada producción

Establezca el alcance en un subconjunto de las 18 reglas.

Verificar: Ask for 'scope: typography + contrast + a11y' only

Las correcciones rompen el sistema de diseño existente.

Indique al auditor que se mantenga dentro de su conjunto de tokens; suministrar tokens.json.

Verificar: Before/after diffs reference token names

Alternativas

Claude Design Auditor vs otros

Alternativa	Cuándo usarla	Contrapartida
claude-code-design-skills	Quiere pasar de Figma al código, no auditar el trabajo existente	Cubre el otro lado de la tubería.
ai-friendly-web-design-skill	Quiere una orientación amplia sobre diseño web, no un auditor estricto	Salida menos estructurada
apple-hig-designer-skill	Estás diseñando específicamente para plataformas Apple.	Específico de plataforma en lugar de universal

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills