¿Por qué mejorar un sitio web existente con habilidades?

Si alguna vez has tenido una interfaz generada por una IA, conoces el resultado. Fuente Inter, degradado de púrpura a azul, tarjetas anidadas, texto gris sobre fondo de color, héroe centrado y morfismo de vidrio para una apariencia moderna. El mismo sitio aparece en todas partes, independientemente del proyecto.

Este fenómeno a menudo se denomina pendiente de la IA.

El problema no es que los modelos sean incapaces. Conocen la tipografía, los contrastes OKLCH y los ritmos verticales. Pero no los aplican de forma espontánea. Carecen de vocabulario de liderazgo y de una lista clara de lo que deben evitar.

Las habilidades cambian eso. Proporcionan comandos especializados a Claude Code para auditar, corregir y pulir una interfaz existente sin empezar desde cero.

Requisitos previos para comenzar

Antes de comenzar, asegúrese de tener estos elementos.

  • Una cuenta Claude Pro activa

  • Claude Code instalado en su máquina

  • Un proyecto de sitio web ya existente en su computadora.

Guía paso a paso

Paso 1: abre Claude Code en la carpeta de tu proyecto

Inicie su terminal, vaya a la raíz del proyecto, luego escriba el comando claude para iniciar la sesión.

Paso 2: instalar la habilidad de diseño

En su terminal, ejecute el comando npx skills add pbakaus/impeccable.

La habilidad se carga automáticamente. Obtienes 23 controles especializados que impulsan cada dimensión del diseño, como tipografía, color, diseño, movimiento, microinteracciones y copia de UX.

Paso 3: Defina el contexto de su proyecto

En Claude Code, escriba el comando /impeccable Teach.

La habilidad te plantea una serie de preguntas estructuradas. Busca comprender a quién está dirigido su sitio, qué estilo desea adoptar y qué estética rechaza explícitamente.

Las respuestas se guardan en los archivos PRODUCT.md y DESIGN.md en la raíz del proyecto. Estos archivos se vuelven a leer con cada pedido, por lo que nunca se repite el mismo encargo.

Paso 4: Auditar el sitio en su estado actual

Escriba el comando de auditoría /impeccable. También puede apuntar a una página específica con un comando como /impeccable audit landing.

La habilidad escanea su código, lo compara con 25 antipatrones documentados y luego le envía un informe clasificado por gravedad de P0 a P3. Por ejemplo, puede informar sobre degradados morados, fuentes usadas en exceso, tarjetas anidadas, contrastes insuficientes o jerarquías tipográficas rotas.

Este es el diagnóstico. Todo empieza desde ahí.

Paso 5: tipografía y diseño correctos

Luego continúe con /composición tipográfica impecable, luego /diseño impecable.

El primer comando establece la jerarquía tipográfica, los tamaños y los ritmos verticales. También evita las fuentes populares, a menos que su archivo DESIGN.md las justifique explícitamente.

El segundo comando corrige el espaciado, las alineaciones, la longitud de las líneas y las áreas de tamaño insuficiente en las que se puede hacer clic.

Paso 6: Afirmar la dirección visual

Dependiendo del resultado deseado, elija el comando que corresponda al gesto de diseño.

  • /impecable más atrevido para hacer una sección más asertiva

  • /impecable más silencioso para calmar una zona ruidosa

  • /colorize impecable para reelaborar la paleta en OKLCH

  • /deleite impecable para agregar microinteracciones justificadas

Cada pedido sabe en qué modo funciona, marca o producto, y adapta su vocabulario en consecuencia. Una página de destino no es un panel de control.

Paso 7: Lanza el pase final

Escriba el comando /pulido impecable en la página que desea entregar.

Este comando alinea su código con los tokens existentes, ejecuta el detector antipatrón nuevamente y le devuelve una página lista para enviar.

Paso 8: Prueba en una página existente

Abra un archivo de su sitio, luego pídale a Claude Code que use la habilidad impecable para auditar la página, corregir los antipatrones en P0 y P1, aplicar un pulido final y luego proponer una variante más asertiva del héroe en modo marca.

Llega más lejos con la IA y el diseño

Esta guía le muestra cómo transformar un sitio web genérico en una interfaz más profesional utilizando las habilidades de Claude. Para continuar, puede aplicar el mismo método a sus páginas de ventas, paneles de control o pantallas de productos existentes.

Leer siguiente

Para relacionar este tema con un flujo de trabajo empresarial más concreto: