design-review

Resumen de design-review

Qué hace design-review

design-review es una skill de QA de diseño para detectar inconsistencias visuales, problemas de espaciado, fallos de jerarquía, patrones de AI-slop y una pulida interacción demasiado lenta en una base de código real, y luego corregirlos de forma iterativa con verificación. Es ideal para equipos que quieren una skill de design-review capaz de pasar de “algo no encaja” a cambios concretos en el código fuente y validación antes/después.

Quién debería usarlo

Usa la skill de design-review cuando necesites un agente con criterio de UX para auditar una interfaz en producción, pulir una implementación o revisar una UI que ya existe en código. Encaja especialmente bien con product designers, front-end engineers y agentes que trabajan en apps donde la consistencia visual importa más que generar layouts completamente nuevos.

Qué la diferencia

A diferencia de un prompt genérico para UX Audit, esta guía de design-review entiende el flujo de trabajo: está pensada para identificar problemas, hacer correcciones atómicas y volver a comprobar el resultado. También admite separación en plan mode, algo importante cuando quieres revisar antes de implementar y no editar de inmediato.

Cómo usar la skill de design-review

Instala y enruta la tarea

Empieza con el comando de instalación de design-review desde tu gestor de skills y después apunta al agente al repositorio que contiene la UI que quieres revisar. Si estás trabajando en plan mode, enruta a /plan-design-review; si quieres cambios en el código, usa la ruta de revisión activa descrita en la skill.

Dale a la skill la entrada correcta

Un buen prompt para usar design-review nombra la pantalla, el flujo de usuario y el fallo que te importa. Mejor: “Revisa el modal de checkout por espaciado, jerarquía y claridad de los botones en móvil, y luego corrige los peores problemas.” Peor: “Haz que esto se vea mejor.” El primero le da a la skill un objetivo, una restricción y una condición de éxito.

Lee primero estos archivos

Para una guía de design-review que de verdad te ayude a decidir si encaja o no, lee primero SKILL.md y después cualquier archivo de plantilla generado, como SKILL.md.tmpl, si existe. También conviene inspeccionar el árbol del repositorio para ver convenciones de routing de prompts o helpers, porque este repositorio está centrado en el cuerpo de la skill más que en scripts o documentación de apoyo.

Úsala como un ciclo de revisión

Usa la skill en ciclos cortos: inspeccionar, corregir, verificar, repetir. Pídele que muestre qué cambió y por qué, y prioriza una sola clase de problema por pasada, como tipografía, espaciado o latencia de interacción. Eso mantiene la revisión enfocada y hace más fácil detectar regresiones.

Preguntas frecuentes sobre la skill de design-review

¿design-review es solo para el pulido final?

No. La skill de design-review sirve para pulir sitios en producción, limpiar una base de código y hacer comprobaciones tipo UX Audit donde la calidad visual ya existe pero necesita ajuste fino. Es menos útil para ideación temprana de conceptos que para corregir y validar una interfaz ya implementada.

¿Necesito ser diseñador para usarla?

No, pero sí necesitas describir con claridad la pantalla y el problema. Quienes no son diseñadores obtienen mejores resultados cuando especifican qué se siente mal, quién es el usuario y cómo se ve el éxito, en lugar de pedir un rediseño vago.

¿En qué se diferencia de un prompt normal?

Un prompt normal puede generar sugerencias; design-review está orientado a encontrar problemas en el código, cambiarlos y comprobar el resultado. Si solo quieres consejo, puede que la skill sea más de lo que necesitas; si quieres una reparación medible de la UI, encaja mucho mejor.

¿Cuándo no debería usar design-review?

Evítala cuando la tarea sea puramente estratégica, a nivel de marca o solo de contenido, sin ninguna interfaz que inspeccionar. También encaja peor si no puedes acceder a la base de código o no puedes verificar capturas tras los cambios, porque el valor de la skill viene de la validación iterativa.

Cómo mejorar la skill de design-review

Empieza con un objetivo de revisión específico

Los mejores resultados con design-review salen de un objetivo acotado: una página, un componente o un flujo de usuario. Dale a la skill el viewport, el contexto del dispositivo y la prioridad principal, por ejemplo: “página de ajustes en escritorio, céntrate en alineación y escaneabilidad” o “tarjeta de precios en móvil, céntrate en la claridad táctil”.

Dile qué debe optimizar

Si te importa más la consistencia, la accesibilidad, la claridad para convertir o la velocidad de interacción, dilo desde el principio. Eso ayuda a la skill de design-review a elegir entre correcciones que compiten entre sí, especialmente cuando un cambio mejora un área pero debilita otra.

Vigila los fallos típicos

Las entradas débiles más comunes son “hazlo más limpio”, “mejora el diseño” y “audita todo”. Esos prompts invitan a respuestas amplias y con poca señal. Las entradas más fuertes nombran la clase de defecto, el componente y el margen de cambio aceptable, lo que reduce ediciones innecesarias y mejora el ciclo de uso de design-review.

Itera con evidencia

Después de la primera pasada, pide los principales problemas que quedan, los archivos exactos que se cambiaron y cualquier regresión visible en capturas. Si el resultado está cerca pero no termina de encajar, afina el brief con una restricción más precisa: “mantén el layout sin cambios”, “no alteres la paleta de color” o “corrige solo jerarquía y espaciado”.