En los propios términos del Skill
Web Design Reviewer conduce un sitio web en ejecución a través de una herramienta de automatización de navegador, lo inspecciona visualmente y repara lo que encuentra en el código fuente. Cubre sitios estáticos, SPAs en React, Vue, Angular o Svelte, frameworks full-stack como Next.js y Nuxt, plataformas CMS como WordPress y Drupal, y cualquier otra aplicación web.
El flujo de trabajo consta de cuatro fases: reunir contexto y detectar automáticamente el framework y el método de estilos, inspeccionar las páginas según una lista de verificación visual, corregir problemas priorizados de P1 a P3, y luego reverificar y repetir. Los hallazgos se agrupan en diseño, responsividad, accesibilidad y consistencia visual, cada uno con una severidad. Las correcciones siguen principios de cambio mínimo y terminan en un informe de revisión en markdown.
Qué produce
- Un informe de resultados de revisión en markdown titulado Web Design Review Results.
- Una tabla resumen que cubre la URL objetivo, el framework detectado, los estilos, los viewports probados, los problemas detectados y los problemas corregidos.
- Entradas por problema con prioridad, página, elemento, descripción, ruta del archivo corregido, detalles de la corrección y capturas de pantalla antes/después.
- Una sección de problemas sin corregir que indica el motivo por el que se dejó cada problema y una acción recomendada para el usuario, además de recomendaciones generales.
Cómo funciona
- 01Reunir Contexto y Detectar el Stack
Solicita la URL si no se proporciona ninguna, luego intenta la detección automática a partir de archivos del workspace como package.json, tsconfig.json, tailwind.config, next.config, vite.config y nuxt.config, y pregunta qué páginas están dentro del alcance.
- 02Navegar y Capturar
Abre la URL objetivo, toma capturas de pantalla, obtiene la estructura del DOM o un snapshot cuando es posible, y recorre páginas adicionales a través de la navegación del sitio.
- 03Inspeccionar según la Lista de Verificación Visual
Los problemas de maquetación, capacidad de respuesta, accesibilidad y consistencia visual se comprueban recorriendo una lista de verificación de referencia, que se vuelve a usar después de aplicar las correcciones.
- 04Localizar el Origen de Cada Problema
Los elementos problemáticos se rastrean hasta su origen buscando en el código base nombres de clase o IDs, localizando el componente a partir del texto o la estructura del elemento, y filtrando patrones de archivos de estilos, componentes y páginas.
- 05Corregir y Volver a Verificar
Las correcciones se aplican siguiendo las indicaciones específicas del framework; después se recarga el navegador o se espera al HMR del servidor de desarrollo, se vuelven a capturar capturas de pantalla de las áreas corregidas y se comparan el antes y el después.