¿Qué hace ai-visual-audit-skill?
Asistente de mejora visual con IA: skill para agente que sugiere revisiones de diseño.
Descripción
Este skill permite que agentes de IA realicen auditorías visuales automáticas de interfaces de usuario (UI) y proporcionen sugerencias concretas de mejora de diseño. Está diseñado para integración con herramientas de desarrollo como Claude Code, Cursor o Codex.
Cómo funciona
El agente recibe como entrada una imagen o descripción de la interfaz de usuario. Luego, aplica heurísticas de diseño basadas en principios UI/UX comunes:
- Alineación: Verifica que los elementos estén correctamente alineados.
- Contraste: Evalúa la legibilidad del texto y la accesibilidad de colores.
- Jerarquía visual: Asegura que los elementos importantes tengan más peso visual.
- Consistencia: Comprueba que estilos, espaciados y tipografía sean uniformes.
- Espaciado: Revisa márgenes y rellenos adecuados.
Salida esperada
El agente genera un informe estructurado en markdown que incluye:
- Resumen: Cantidad de problemas encontrados y severidad general.
- Problemas detectados: Lista con descripción, ubicación, severidad (baja/media/alta).
- Recomendaciones: Sugerencias accionables para cada problema.
- Código de ejemplo: Fragmentos de CSS o HTML corregidos (si aplica).
Plataformas compatibles
- Claude Code
- Cursor
- Codex (GitHub Copilot)
- Otros agentes que soporten SKILL.md
Ejemplo de uso
# El agente procesa una captura de pantalla y devuelve el informe
# Informe de auditoría visual
## Resumen
- Problemas encontrados: 3
- Severidad general: Media
## Problemas
### 1. Contraste insuficiente en botón primario
- **Ubicación**: Botón "Enviar"
- **Severidad**: Alta
- **Descripción**: El texto blanco sobre fondo amarillo claro tiene una relación de contraste de 2.5:1, por debajo del mínimo recomendado de 4.5:1.
- **Recomendación**: Cambiar el color de fondo a un tono más oscuro (ej. #0066CC) o usar texto negro.
### 2. Márgenes inconsistentes
- **Ubicación**: Sección de tarjetas
- **Severidad**: Media
- **Descripción**: Los márgenes entre tarjetas varían (12px vs 24px).
- **Recomendación**: Unificar a 16px.
Consideraciones
- El skill solo analiza aspectos visuales; no reemplaza pruebas de usabilidad con usuarios reales.
- Para mejores resultados, proporciona capturas de pantalla nítidas y representativas.
- Las sugerencias son basadas en heurísticas generales; adapta según el contexto del proyecto.