Una web puede parecer impecable y seguir siendo un pequeño campo de minas para quien navega con teclado, rellena un formulario o necesita entender un error. Web Design Guidelines de Vercel audita el código de una interfaz contra más de 100 reglas de accesibilidad, rendimiento y UX, pero no diseña por ti ni convierte automáticamente una web mediocre en una buena web.
TL;DR: El resumen sin rodeos
- Qué es: una skill de Vercel que revisa código de interfaces contra más de 100 reglas de accesibilidad, rendimiento y UX.
- Qué detecta: fallos de accesibilidad, formularios, foco, animación, imágenes, navegación, internacionalización y otros detalles de UX.
- Qué exige: un agente que pueda revisar el código de la interfaz.
- Límite decisivo: auditar reglas no equivale a crear una identidad visual ni acredita por sí solo cumplimiento legal o WCAG.
En este artículo
| Qué es | Skill que audita tu interfaz web contra más de 100 reglas de diseño, accesibilidad y UX. |
|---|---|
| Web oficial | https://skills.sh/vercel-labs/agent-skills |
| Repositorio | repo |
| Licencia | MIT |
| Precio | open source |
| Alternativa a | revisión manual de UI con checklist de accesibilidad y UX |
| Estrellas en GitHub | 31.434 |
| Año de lanzamiento | 2025 |
| Quién lo mantiene | vercel-labs (organización) |
Revisado el 2026-09-25
Esta herramienta forma parte de estos recopilatorios: Skills de diseño para Claude Code y Codex · Skills para Claude Code, Codex y otros agentes de código
El problema que resuelve
Web Design Guidelines de Vercel encuentra defectos que una revisión puramente visual suele dejar pasar. Tiene más de 100 reglas sobre HTML semántico, etiquetas ARIA, navegación con teclado, estados de foco, formularios, animaciones, tipografía, imágenes, rendimiento, modo oscuro e internacionalización. No se queda precisamente en mirar si el botón es bonito.
En cristiano: le enseñas el código de tu web a un agente y este busca cosas que funcionan mal aunque la captura quede monísima. Un botón sin nombre accesible, un formulario que explica fatal sus errores o una animación que ignora prefers-reduced-motion no suelen salir en la reunión donde todo el mundo contempla el degradado. Pero el usuario se los come.
Ficha rápida
- Responsable: vercel-labs.
- Formato: skill abierta para agentes de código.
- Licencia declarada: MIT en el README, aunque no se ha localizado un archivo LICENSE independiente en la evidencia revisada.
- Repositorio: las estrellas que muestra GitHub corresponden al repositorio completo, NO a usuarios ni instalaciones de esta skill.
- Precio: código abierto; cualquier coste del agente o suscripción utilizada va aparte.
Encaja especialmente bien como complemento de unas skills de diseño para agentes de IA. Una skill puede ayudarte a construir y esta puede entrar después con la linterna, el checklist y bastante poca paciencia.
Cómo se pone en marcha
La instalación documentada utiliza la CLI de Skills. El repositorio oficial del paquete indica el comando npx skills add vercel-labs/agent-skills. Ese comando añade la colección completa.
La página pública del paquete incluye web-design-guidelines. Una vez instalada la colección, puedes pedir al agente que revise la interfaz, la accesibilidad, el diseño o la UX.
La documentación revisada no explica cómo desinstalar únicamente esta skill. ¿Mi consejo? Consulta la ayuda de la versión de la CLI que tengas instalada antes de tocar carpetas a mano. Inventar un comando de borrado queda muy valiente hasta que desaparece lo que no tocaba.
Copia esto y pégalo en Claude Code, Cursor o tu asistente de código favorito:
Instala web-design-guidelines desde https://github.com/vercel-labs/agent-skills. Audita las páginas y componentes del proyecto, indicando regla, fichero, línea y corrección propuesta. No cambies código todavía: entrega primero un informe priorizado y señala qué no pudiste comprobar.
La instalación está documentada. La configuración y las pruebas que pueda realizar después dependerán del asistente y del acceso que tenga al proyecto.
MCP de Web Design Guidelines de Vercel
En el dossier revisado no aparece ninguna integración MCP oficial. Lo documentado es una skill que se instala mediante la CLI, sin servidor MCP propio, credenciales ni un proceso de conexión independiente.
Eso importa porque ambas cosas se confunden demasiado. Una skill aporta instrucciones al agente; un MCP conecta el agente con herramientas o datos externos mediante un protocolo. Aquí lo documentado es una revisión del código de la interfaz. Ponerle la etiqueta MCP porque queda moderna sería vender otra cosa.
Usándola en marketing real
¿Dónde le veo sentido en una agencia o un equipo pequeño? En auditar una landing page antes de mandarla a campañas. La skill revisa el código y señala problemas concretos de formularios, foco, imágenes, interacción táctil, navegación o estado en la URL.
Mi lectura es que su valor está en convertir una revisión difusa de "échale un ojo" en una lista de problemas concretos. También obliga a separar dos conversaciones que suelen mezclarse: si la página tiene criterio visual y si está bien resuelta al usarla. La primera necesita dirección de arte. La segunda admite reglas mucho más verificables.
Dani no ha ejecutado una prueba reproducible y el dossier tampoco incluye un protocolo comparativo. Así que podemos acreditar qué revisa, cómo se instala y qué categorías cubre. Prometer que encontrará todos los fallos o que mejorará conversiones ya sería sacar la bola de cristal. No hay métricas para sostener semejante pirueta.
Lo que no te cuentan
Web Design Guidelines de Vercel no genera una identidad visual. Puede detectar una mala práctica en el código y aun así dejarte una web correcta, accesible y bastante sosa. Auditoría no significa dirección creativa. Parece obvio, pero conviene dejarlo por escrito.
Tampoco acredita cumplimiento legal o conformidad WCAG por sí sola. Sus comprobaciones pueden ayudar a localizar problemas, pero una lista de reglas automatizada no sustituye pruebas con teclado, lectores de pantalla, distintos dispositivos y revisión humana especializada.
Hay otra condición: el agente tiene que revisar el código correcto. Si analiza medio proyecto, la conclusión nace recortada. El informe debe dejar claro qué inspeccionó y qué quedó fuera. Sin ese perímetro, ver un fichero y una línea muy concretos puede dar más confianza de la que toca.
El dossier verificado no incluye opiniones públicas que podamos usar. Hablar de consenso, satisfacción o uso extendido sería inventar. La promoción oficial explica qué pretende hacer la skill, pero no demuestra cómo se comporta en cada proyecto.
Alternativas
La alternativa verificada es hacer una revisión manual de UI con un checklist de accesibilidad y UX. Lleva más tiempo y exige criterio técnico. A cambio, permite probar recorridos completos, tecnología asistiva, mensajes ambiguos y decisiones de negocio que una regla aislada ni huele.
No son caminos excluyentes. Yo usaría la skill para barrer el código y reservaría la revisión humana para validar los hallazgos, recorrer la interfaz y decidir prioridades. Si el problema real es crear el diseño, antes miraría recursos centrados en construcción y dirección visual, como Frontend Design de Anthropic. Para entender dónde encaja dentro del ecosistema, está la guía de skills para Claude Code, Codex y otros agentes.
Veredicto
Recomiendo Web Design Guidelines de Vercel para equipos que ya tienen una interfaz y quieren someterla a una revisión sistemática antes de publicarla o iterarla. Es concreta, abierta y cubre muchas zonas donde el diseño bonito se hace el sueco.
No la usaría como sustituto de un diseñador, una auditoría legal de accesibilidad o pruebas con personas. Su sitio está en medio del proceso: después de construir, antes de dar por bueno. La web puede verse bien y seguir fallando al usarla. Esta skill ayuda a descubrir dónde. El criterio para arreglarlo sigue siendo tuyo.
