• CRÍTICO
  • ADVERTENCIA
  • CONSEJO
  • HUMANO

Cómo validar especificaciones de UI con tu IA

Conecta Accessibility Prover a tu cliente de IA. Analiza tus especificaciones de diseño para detectar fallos de accesibilidad antes de pasar a producción.

Pregunta a la IA sobre esta página

Respuesta rápida

¿Puede mi IA revisar la accesibilidad de mis diseños de UI?

Sí. Tu IA utiliza la herramienta validate_accessibility para comparar las especificaciones de tus componentes con los requisitos WCAG 2.2 AA. Recibirás un desglose de los fallos específicos que debes corregir.

Donde se registran todos los problemas.

Los resultados de tu análisis.

La IA categoriza cada hallazgo según su gravedad y el tipo de solución necesaria.

CRÍTICO

Violaciones directas

La IA señala elementos específicos que incumplen las reglas WCAG 2.2 AA. Son errores innegociables que debes solucionar.

ADVERTENCIA

Fallos potenciales

La IA identifica especificaciones que podrían causar problemas según cómo se programen. Requieren verificación humana.

CONSEJO

Mejores prácticas

La IA sugiere mejoras para optimizar la usabilidad. No son violaciones estrictas, pero ayudan a mejorar la experiencia de usuario.

HUMANO

Revisión manual

La IA marca especificaciones ambiguas cuando no tiene datos suficientes para decidir. Deberás inspeccionarlas tú mismo.

El flujo

Lo que hace tu IA al recibir la especificación.

La IA gestiona la comparación técnica para que no tengas que revisar cada propiedad manualmente.

  1. Leer especificaciones

    Tu cliente de IA procesa los datos de diseño o las propiedades de los componentes que le proporciones.

    validate_accessibility

  2. Ejecutar controles WCAG

    La IA compara tus datos con el conjunto de reglas WCAG 2.2 AA.

    validate_accessibility

  3. Identificar brechas

    La IA detecta fallos específicos, como un contraste de color deficiente o áreas táctiles insuficientes.

    validate_accessibility

  4. Informar hallazgos

    La IA presenta una lista estructurada de lo que cumple y lo que no cumple la validación.

    validate_accessibility

Pruébalo

Copia estos ejemplos para empezar.

Pega estos textos en tu chat para iniciar el proceso de validación.

Puntos de partida

Estas son frases iniciales. Sustituye el texto entre corchetes por los datos de tu componente o el contenido de tu archivo de diseño.

WCAG 2.2 Connector

Todo listo. Elige tu cliente MCP y sigue las instrucciones de configuración.

Enlace del conectorhttps://edge.vinkius.com/vk_preview_Z4jgihFSGVmVid2ldA4mxeRfY0ki8hZy1vHx94N4/mcp

Claude Desktop

Sigue los pasos siguientes para conectarte en segundos.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — WCAG 2.2 capabilities are ready to use.
Configuración · claude_desktop_config.jsonCopiar
{
  "mcpServers": {
    "accessibility-prover-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_Z4jgihFSGVmVid2ldA4mxeRfY0ki8hZy1vHx94N4/mcp"
    }
  }
}
Copia en el chat04

  • Valida la accesibilidad de este componente de botón: [pegar especificaciones del componente].

  • Comprueba este menú de navegación frente a los estándares WCAG 2.2 AA: [pegar especificaciones del menú].

  • ¿Hay problemas de contraste de color en esta especificación de paleta: [pegar datos de la paleta]?

  • Revisa estas especificaciones de campos de formulario para el cumplimiento de accesibilidad: [pegar especificaciones del formulario].

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Empieza aquí

Conecta Accessibility Prover una vez y luego pregunta.

Conecta tu cliente al MCP con un solo clic. Tus credenciales permanecen cifradas en nuestro sistema.

Conectar Accessibility Prover a tu IA

FAQ

Cómo funciona esta tarea.

  • 01

    ¿La IA corrige mis archivos de diseño?

    No. La IA solo identifica los fallos de accesibilidad. Debes realizar los cambios reales en tu herramienta de diseño.

  • 02

    ¿Puede escanear la URL de un sitio web en vivo?

    No. Esta herramienta valida las especificaciones de componentes específicos que proporciones en el chat.

  • 03

    ¿Qué pasa si la especificación está incompleta?

    La IA marcará la ambigüedad como un elemento de revisión manual, indicando que no puede confirmar el cumplimiento sin más datos.

  • 04

    ¿Es compatible con WCAG 2.1?

    No. Está diseñada específicamente para validar contra los estándares WCAG 2.2 AA.

  • 05

    ¿Puede la IA borrar mis datos de diseño?

    No. La IA solo lee los datos que proporcionas para realizar la validación.

  • ¿Tienes más dudas sobre Accessibility Prover? La página del conector tiene las respuestas. Ver todo lo que puede hacer el conector Accessibility Prover

Conecta WCAG 2.2 a Claude, Cursor, ChatGPT y más