Usa IA para mejorar diseño web y uso móvil
Empieza con web-design-guidelines para localizar problemas de controles, formularios, teclado y móvil. Usa review-animations si queda un problema de movimiento.
Empieza con la habilidad web-design-guidelines
Para botones difíciles de encontrar, formularios confusos o móvil incómodo, elige web-design-guidelines de Vercel Agent Skills. Aporta instrucciones y revisa los archivos indicados según reglas actuales.
Revisa teclado, etiquetas, respuestas de formularios, tacto y diseño. Da archivos de una página y pide ubicaciones antes de cambiar. La recomendación se basa en esa habilidad, no en estrellas de todo el paquete.
Prepara antes de empezar
Una captura ayuda a comentar lo visual, pero la habilidad revisa código. Pide hallazgos antes de editar. No entregas claves al sitio ni necesitas un nuevo servicio de pago.
- Archivos o carpeta de una página, sus usuarios, tarea e interacción a mejorar.
- Un asistente compatible. Sigue el README de Vercel y elige web-design-guidelines, sin instalar todas las habilidades.
- Una vista previa local accesible y, si es posible, el teléfono. Tras revisar código, comprueba navegador y móvil; necesitas herramienta de navegador para inspeccionar páginas.
Copia este primer prompt
Usa web-design-guidelines para revisar [archivos o carpeta]. La página ayuda a [usuarios] a [tarea]. Obtén las reglas actuales y revisa botones, formularios, teclado y móvil. Ordena por impacto con archivo, línea, problema y cambio mínimo. Informa sin editar. Si usas navegador, indica URL y ancho; marca lo no observado como pendiente.¿Cómo verificar la mejora?
- Cada hallazgo debe señalar código y acción, como foco visible con Tab o errores que expliquen el siguiente paso.
- Tras editar, revisa escritorio y ancho móvil: texto desbordado, botones, campos y errores. Confirma en un teléfono real si necesitas validar dispositivos.
- Para animaciones, repite acciones rápidas y comprueba movimiento reducido. Guarda antes y después y distingue revisión de código, vista previa y dispositivo real.
Ejemplo real
¿Cuándo cambiar a review-animations?
Para diálogos lentos, respuestas incómodas o transiciones entrecortadas, usa review-animations de Emil Kowalski Skills. Revisa propósito, duración, interrupción y movimiento reducido.
Da código del componente y una pregunta concreta. Es una revisión de animación, no prueba de usabilidad móvil de toda la página. Mantén la revisión general para formularios y diseño.
Fuentes y siguiente paso
Fuentes revisadas el 2026-10-13. Se recomiendan dos habilidades concretas y un primer prompt. Evalúa cambios según hallazgos y comprobaciones observados.