Probada en una tarea realOficial del fabricanteDiseño y front end

Web Interface Guidelines Review

Una lista línea por línea de qué arreglar en el código de tu página, revisada contra las reglas de interfaz de Vercel.

Instala Web Interface Guidelines Review gratis

Deja tu email y los pasos de instalación se abren aquí mismo: un prompt para pegar en tu herramienta de IA. Sirve para las 149 skills.

Nuestra nota: 6/10
Funciona en: Claude, ChatGPT+7 más
Claude Code, Claude app, Codex, ChatGPT, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf y más de 60 herramientas de IA que leen skills.
¿Hace falta programar?: Un poco
Tiempo hasta el resultado: 14 min
Creado por: Vercel
Probada: 19 oct 2026

Revisión de diseño — La revisión: 19 hallazgos ordenados por importancia, 12 reales y arreglados, el resto marcados como opcionales o no problemáticos.

La respuesta corta

Web Interface Guidelines Review es la skill oficial de Vercel que hace que Claude descargue la lista actual de reglas de interfaz de Vercel (accesibilidad, formularios, foco, modo oscuro, textos y más) y revise el código de tu página contra cada una, reportando cada problema con su línea exacta. Le sirve a quienes ya tienen una página o app en código y quieren una pasada de pulido antes del lanzamiento. Nuestro veredicto es 6/10: en nuestra prueba detectó un error real y 11 arreglos más pequeños, pero 7 de sus 19 hallazgos fueron ruido o preferencias de estilo, e ignora huecos de contenido como precios o políticas faltantes.

Ideal para: Alguien con una página o app existente en código que quiere una pasada de pulido y accesibilidad antes del lanzamiento con los lugares exactos que cambiar.

¿Quieres este resultado en tu propio trabajo?

Regístrate gratis e instala Web Interface Guidelines Review en un minuto. Un solo email abre los pasos de instalación de todas las skills del sitio.

Cuándo vale la pena usarla

Pule una página de reservas antes del lanzamiento

En nuestra prueba, la dueña de un taller de cerámica hizo revisar una página de reservas de talleres. Claude encontró que los nombres largos de clientes quedaban cortados en la pantalla de confirmación del teléfono y que no había forma de enlazar directo a un taller, y luego arregló ambas cosas más 10 problemas menores.

Revisa un formulario de registro o contacto

Apúntala al archivo de tu formulario. Recibes una lista de las líneas exactas donde las etiquetas, los tipos de campo, el autocompletado, los mensajes de error o los contornos de foco rompen las reglas, para que un desarrollador o Claude los arregle rápido.

Audita detalles de modo oscuro y móvil

La lista de reglas cubre los colores del navegador en modo oscuro, el comportamiento al tocar en teléfonos, las zonas seguras alrededor de la muesca y el zoom. Útil cuando tu sitio se ve bien en tu laptop pero no revisaste estos detalles finos.

Cómo conseguir un gran resultado

Instálala (pasos abajo)
Asegúrate de que Claude tenga acceso a internet, porque la skill descarga de nuevo la lista de reglas de Vercel cada vez que corre.
Apúntala a tus archivos
Nombra la página o los archivos a revisar, por ejemplo tu index.html o un componente de formulario. Si no nombras ninguno, la skill le indica a Claude que te pregunte qué archivos revisar.
Pide orden de prioridad y palabras simples
La salida por defecto de la skill son notas escuetas de desarrollador como 'index.html:452 - missing overflow-wrap'. Pídele a Claude que ordene los hallazgos por importancia y marque cuáles son problemas reales en tu página.
Pídele a Claude que arregle los reales
Haz que Claude arregle solo los hallazgos que marcó como reales y deja las preferencias de estilo para ti. En nuestra prueba arregló 12 problemas sin cambiar el aspecto de la página.
Prueba la página arreglada
Abre la página en un teléfono o pídele a Claude que la pruebe a ancho de teléfono, incluidos casos extremos como un nombre muy largo. Así es como nuestra prueba confirmó el error del nombre cortado y su arreglo.

Este es el prompt exacto con el que empezamos nuestra prueba:

El prompt que usamos

Revisa mi página de reservas de talleres según pautas profesionales de diseño web y dime exactamente qué arreglar, empezando por lo más importante. Luego arregla los problemas principales.

Todo lo que creó

Cada pieza de abajo es un resultado real de nuestra prueba, abierto tal como lo abrirías tú.

La página de reservas arreglada: los nombres largos ahora pasan a la línea siguiente, y enlaces como ?workshop=mug la abren con ese taller ya elegido.

Cómo fue la sesión

La conversación de nuestra prueba, resumida. Unos 14 minutos desde el primer prompt hasta el resultado final.

Tú: Revisa mi página de reservas de talleres según pautas profesionales de diseño web y dime exactamente qué arreglar, empezando por lo más importante. Luego arregla los problemas principales.
AI: Escribí review.md en el formato de la skill, ordenado por importancia. 19 hallazgos: 12 reales, 1 regla opcional de estilo de la casa (Title Case en botones), 6 que coinciden con una regla pero no son problemas reales en esta página (por ejemplo "enfocar el primer campo con error" cuando la página ya usa un resumen de errores con enlaces). La página ya estaba en buena forma: etiquetas, anillos de foco, mensajes de error, movimiento reducido y...
AI: Listo. Algo que las pautas no cubren es el mayor hueco antes del lanzamiento: los horarios de inicio, el pago, la política de cancelación y lo que incluye siguen siendo [placeholder], y el botón Confirmar es simulado hasta que se conecte a un servicio de reservas real. Notas: la skill son solo instrucciones más un enlace a la lista de reglas de Vercel. Todo el criterio (qué coincidencias son reales, en qué orden arreglar) vino de...

Qué funcionó y dónde se quedó corta

Qué funcionó

Encontró un error real: un nombre de cliente largo quedaba cortado en la pantalla de confirmación del teléfono (se midieron 361px de texto en una caja de 301px)
Encontró una función faltante útil: no había un enlace que abriera la página con un taller ya seleccionado, ahora resuelto con enlaces ?workshop= y ?date=
La lista de reglas es amplia y actual (foco, formularios, modo oscuro, fechas, textos), así que se detectaron pequeños detalles de pulido como el color de la barra del navegador en modo oscuro y fechas escritas a mano
Los arreglos fueron seguros y comprobables: sin cambios de layout, sin errores en consola, la página sigue cabiendo a 375px

Dónde se quedó corta

6 de 19 hallazgos eran coincidencias con reglas que aquí no son problemas reales, y 1 más es una preferencia de estilo de la casa (Title Case), así que una persona o Claude tiene que filtrar la lista
WebFetch, que la skill dice usar, devolvió solo un resumen condensado de las reglas, así que una ejecución literal puede pasar por alto reglas específicas y el formato exacto de salida
La skill solo revisa el código contra reglas de interfaz: no dice nada de los placeholders sin completar (horarios de inicio, pago, política de cancelación), que son lo que más importa en esta página, y su salida archivo:línea está escrita para desarrolladores

¿Quieres este resultado en tu propio trabajo?

Regístrate gratis e instala Web Interface Guidelines Review en un minuto. Un solo email abre los pasos de instalación de todas las skills del sitio.

Prompts que funcionan

Cambia las partes entre corchetes por tus propios datos. No hace falta nombrar la skill: pide el trabajo y tu herramienta de IA la usa sola.

Revisa y arregla una página

Revisa mi [página de reservas / landing page] en [nombre del archivo] según pautas profesionales de diseño web y dime exactamente qué arreglar, empezando por lo más importante. Luego arregla los problemas principales.

Revisa solo un formulario

Usa las pautas de diseño web para revisar el formulario de [registro / contacto / checkout] en [nombre del archivo]. Explica cada problema con palabras simples y di cuáles notaría de verdad un cliente.

Pasada de accesibilidad antes del lanzamiento

Antes de lanzar, revisa [archivo o carpeta] contra las pautas de interfaz web en cuanto a accesibilidad y uso con teclado. Marca cada hallazgo como real o no relevante para mi página, y luego arregla los reales.

Revisión de modo oscuro y móvil

Revisa [nombre del archivo] contra las pautas de interfaz web, enfocándote en modo oscuro, pantallas de teléfono y uso táctil. Pruébala a ancho de teléfono con un nombre y un email muy largos en el formulario.

Consejos de nuestra prueba

Pídele a Claude que marque cada hallazgo como real, opcional o no relevante. En nuestra prueba 6 de 19 hallazgos coincidían con una regla pero no eran problemas reales en esa página.
Espera sugerencias de Title Case para títulos y botones. Es el estilo de la casa de Vercel, no una regla de usabilidad, así que mantén tu propia voz si prefieres mayúscula solo al inicio.
Pide una prueba con entradas extremas como un nombre muy largo. La revisión marcó el riesgo, y una prueba real en el navegador a ancho de teléfono demostró que el nombre quedaba cortado.
Pregúntale a Claude aparte por el contenido. Las reglas no revisan horarios de inicio, precios ni políticas faltantes, que eran el mayor hueco de nuestra página de prueba.
Si las reglas parecen escasas, pídele a Claude que lea la lista de reglas completa. En nuestra prueba la herramienta de descarga web que nombra la skill devolvió solo un resumen, y la lista completa tiene unas 100 reglas.

Lo que necesitas: El código de tu página (HTML o archivos del proyecto) para que Claude lo lea; una URL en vivo sola no es lo que revisa, Acceso a internet para que Claude descargue la lista de reglas actual cada vez, Claude Code necesita Pro o superior; las skills de la app de Claude funcionan en todos los planes con la ejecución de código activada.

Cómo instalarla

Las skills siguen el estándar abierto Agent Skills, así que esta no depende de una sola empresa. Elige la herramienta de IA que usas. ¿No lo tienes claro? La primera pestaña cubre la mayoría en un solo paso.

Lo más fácil: pega esto en tu herramienta de IA

Instala esta skill para que funcione en todos mis proyectos: ejecuta `npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines -g -y` en mi terminal. Si falta Node.js, dime primero cómo instalarlo. Cuando termines, confirma que la skill quedó instalada y dime cómo empezar a usarla.

O hazlo tú mismo:

Un solo comando instala la skill en las herramientas de IA de tu computadora. Detecta las que tienes y te pregunta en cuáles añadirla: Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, OpenCode y más de 60 más.

$npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines -g

Necesitas tener Node.js instalado (gratis, en nodejs.org). La opción -g hace que la skill esté disponible en todos tus proyectos.

Bueno saber: Una de las skills más instaladas en el registro skills.sh.

Desbloquea los pasos de instalación

Gratis. Deja tu email una vez para abrir los pasos de instalación de las 149 skills y recibir cada mes las mejores skills nuevas.

Cómo lo verificamos

Confirmamos la skill en su fuente original el 18 de octubre de 2026: el SKILL.md está donde debe estar, los archivos se actualizaron en el último año y la licencia () permite usarla. Después, el 19 de octubre de 2026, la instalamos, la usamos en la tarea de arriba sin modificarla y anotamos lo que pasó, incluido lo que salió mal.

Preguntas frecuentes

¿Necesito saber programar para usarla?

No necesitas escribir código, pero sí los archivos de código de tu página, y el informe por defecto está escrito para desarrolladores con nombres de archivo, números de línea y términos de CSS. Pídele a Claude que explique los hallazgos con palabras simples y que haga los arreglos por ti.

¿Qué plan o herramientas necesita?

En Claude Code necesitas un plan Pro o superior. En la app de Claude, las skills funcionan en todos los planes con la ejecución de código activada. En ambos casos Claude necesita acceso a internet para descargar la lista de reglas cada vez.

¿Funciona en Claude.ai o solo en Claude Code?

En ambos. En Claude.ai subes la skill como zip en Personalizar, Skills. En Claude Code la instalas una vez y queda disponible en todos los proyectos.

¿En qué se diferencia de simplemente pedirle a Claude que revise mi página?

Le da a Claude una checklist fija y actual de unas 100 reglas de Vercel, así revisa cosas pequeñas que una revisión rápida suele saltarse, como el color de la barra del navegador en modo oscuro o fechas escritas a mano. Claude igual tiene que juzgar qué coincidencias importan: en nuestra prueba se quedó con 12 de 19.

¿Va a revisar mis textos, precios o diseño general?

Solo un poco. Sus reglas de textos cubren cosas como la voz activa, Title Case y usar números, pero no juzga tu oferta, tu layout ni la información faltante. En nuestra prueba no dijo nada de los horarios de inicio y las políticas sin completar.