Cómo conseguir que la IA diseñe webs que no parezcan hechas por IA

Las webs generadas con IA se reconocen a simple vista: degradados morados, tarjetas con sombra suave, iconos en círculos de color y un titular centrado sobre un fondo difuminado. No es que el modelo no sepa diseñar. Es que, si no le enseñas otra cosa, recurre a la media de todo lo que ha visto. Y la media es, por definición, genérica.

Hace unos días, Vox (@Voxyz_ai) compartió en X un método para conseguir que Claude Code produzca diseño de calidad. La idea central es sencilla: la IA hace buen diseño si primero le enseñas buen diseño. En este artículo repasamos el método paso a paso, lo que nos parece útil, lo que matizaríamos y cómo encaja en un proyecto Drupal con componentes SDC.

Por qué la IA diseña webs que parecen hechas por IA

Cuando pides a un agente "hazme una landing moderna", no le das ninguna referencia. El modelo rellena ese hueco con los patrones más frecuentes de su entrenamiento: plantillas de SaaS, kits de UI populares y tutoriales. El resultado es correcto, pero intercambiable.

La solución no pasa por escribir prompts más largos con adjetivos como "elegante" o "minimalista". Esas palabras significan cosas distintas para cada persona. Lo que funciona es darle referencias visuales concretas y valores medibles: tamaños de fuente, pesos, colores, espaciados y radios de borde.

Paso 1: elige referencias y pide un análisis antes de escribir código

Selecciona entre 3 y 5 webs que te gusten en galerías como Godly, Refero u One Page Love. Haz capturas, arrástralas a Claude Code y pídele que analice qué hace bien cada una.

La clave está en que no toque código todavía. Este es el prompt que propone Vox, traducido:

Estas son capturas de webs que me gustan. No toques código todavía:
1. Para cada una, dime qué hace bien: maquetación, tipografía, color,
   espaciado y espacio en blanco.
2. Enumera lo que tienen en común, pregúntame qué partes quiero
   y espera mi respuesta antes de seguir.
3. Escribe un DESIGN.md en la raíz del proyecto basado en lo que elija,
   con valores reales: tamaños de fuente, pesos, códigos de color,
   espaciado y radio de borde. Marca como estimación lo que no puedas
   deducir de las capturas. No te lo inventes. Que sea breve,
   una pantalla como máximo.
4. Importa DESIGN.md en el CLAUDE.md raíz con una línea @, no dentro
   de comillas invertidas. Después añade una regla: cada vez que
   termines una página, ejecuta /impeccable polish.

El punto 2 es el más importante. Obliga al agente a detenerse y deja la decisión en manos de una persona. Sin ese freno, la IA elige por ti y vuelves a obtener la media.

Paso 2: convierte el análisis en un DESIGN.md

El DESIGN.md es un documento corto con las reglas visuales del proyecto: paleta, escala tipográfica, espaciado, radios y comportamiento de los componentes. Al importarlo en CLAUDE.md, el agente lo carga en cada sesión y todas las páginas siguen las mismas reglas.

# CLAUDE.md
@DESIGN.md

Un detalle técnico que mucha gente pasa por alto: Claude Code no procesa las importaciones con @ que están dentro de bloques de código. Si escribes `@DESIGN.md` entre comillas invertidas, el archivo no se carga. Por eso el prompt insiste en ello.

Un buen DESIGN.md contiene valores y decisiones, no adjetivos. Más abajo tienes un ejemplo real.

Paso 3: añade dos skills de diseño

Las skills son paquetes de instrucciones que el agente carga cuando la tarea lo requiere. Para diseño, las dos más populares ahora mismo son estas:

• taste-skill (más de 90.000 estrellas en GitHub). Se usa durante la construcción para evitar los patrones de plantilla. Analiza el encargo, deduce un lenguaje visual y ajusta tres parámetros: variación, movimiento y densidad.
• Impeccable (más de 75.000 estrellas). Aporta un vocabulario de diseño compartido con el agente mediante comandos como /impeccable polish, audit, critique o typeset.

Instalación:

# taste-skill
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

# Impeccable (desde la raíz del proyecto)
npx impeccable install
# y después, dentro de Claude Code:
/impeccable init

Ten en cuenta que /impeccable init genera un PRODUCT.md con el contexto del producto: público, objetivo, tono y restricciones. Encaja bien con el DESIGN.md, porque uno define para quién y el otro cómo se ve.

Paso 4: revisión final con subagentes antes de publicar

El método se completa con una lista de 20 comprobaciones que el autor recomienda repartir entre 5 subagentes, uno por bloque. Los subagentes solo revisan, y el agente principal aplica todas las correcciones para que dos agentes nunca editen el mismo archivo. Resumida, la lista es esta:

• Coherencia visual: cada color, tamaño y radio sigue el DESIGN.md. Los elementos del mismo tipo se ven iguales. Texto legible sobre fondos claros y oscuros.
• Móvil: sin scroll horizontal, menú adaptado, botones con tamaño suficiente para pulsar y maquetación estable al ampliar el texto.
• Estados: carga, vacío y error con diseño propio. Hover, pulsado y deshabilitado en cada botón. Errores de formulario junto al campo.
• Uso real: recorrer los flujos principales de principio a fin, detectar botones que no hacen nada y enlaces rotos, y comprobar que todo funciona solo con teclado.
• Antes del lanzamiento: una frase clara en la portada que explique qué haces, una acción principal por página, título, descripción y favicon en todas las páginas, y nada de texto de relleno.

Añade una instrucción importante al final: que te muestre la lista de problemas antes de cambiar nada y espere tu confirmación.

Un ejemplo real: Nido

Para ver cómo se nota la diferencia, este es Nido, un prototipo que hemos diseñado con Claude. Es una aplicación en la que subes fotos de una estancia y cuatro agentes de IA la decoran a partir del catálogo de una tienda de muebles:

• Escáner: mide la sala y detecta lo que ya tienes.
• Estilista: propone una dirección y la justifica.
• Comprador: cruza el catálogo con el presupuesto y el stock de tu tienda.
• Encajador: comprueba que todo cabe de verdad y te pide que decidas cuando hay un conflicto.

Lo interesante no es la idea, sino que no parece una plantilla. Y no es casualidad: el prototipo tiene un sistema de diseño explícito, con valores concretos y una razón detrás de cada decisión.

Convertido a DESIGN.md, cabe en una pantalla:

# DESIGN.md · Nido

## Color
- Terracota sobre pizarra fría. El acento recoge la madera y el cobre
  de las fotos de interior. El resto de la interfaz es frío para no
  competir con ellas.
- Claro: fondo #e9ebe9 · panel #fbfcfb · tinta #121614 · apagado #6d7571
- Oscuro: fondo #141815 · panel #1c211e · tinta #e9ede9 · apagado #8d968f
- Acento: #c2452a (oscuro #e0644a). Un solo acento en toda la aplicación.
- Estado: #2f6b4f. El verde solo comunica estado, nunca decora.
- Contraste comprobado: blanco sobre acento 6,9:1. Todo por encima de AA.

## Tipografía
- Titulares y cifras grandes: Familjen Grotesk 600
- Interfaz: Instrument Sans 400 y 600
- Monoespaciada del sistema solo en la traza de los agentes
- Escala (px / interlineado): 34/1,1 · 28/1,15 · 16/1,3 · 14/1,5 · 12,5/1,45 · 11,5/1,4
- Toda cifra que se compare lleva tabular-nums

## Radios
- Controles y campos 6px. Paneles, tarjetas e imágenes 12px.
- Chips y avatares en píldora. Sin excepciones.

## Estados
- El punto de color solo aparece en el estado que está vivo.
- Los demás se distinguen por icono y texto, para leerse sin color.

Fíjate en lo que tiene y en lo que no. No dice "moderno" ni "elegante". Cada regla se puede comprobar, y varias explican su porqué. Eso es lo que permite que un agente la siga sin reinterpretarla.

El prototipo también cubre buena parte del checklist del paso 4. Los botones tienen reposo, hover, pulsado, inactivo y carga. Los campos muestran el error junto al campo, con un mensaje útil ("Escríbelo en metros, por ejemplo 3,4"). En lugar de lorem ipsum hay textos realistas. Y existe una versión móvil pensada para cada contexto: la captura de fotos y la consulta rápida de la propuesta.

Nido es un prototipo conceptual sin relación con ninguna marca comercial. Los precios, el stock y las referencias que aparecen son datos de muestra.

Lo que matizaríamos

El método funciona, pero conviene aplicarlo con criterio:

• Las capturas no dan valores exactos. Un modelo puede estimar que un titular mide unos 56px, pero no sabe qué fuente es ni el código de color exacto tras la compresión de la imagen. Revisa el DESIGN.md a mano y corrige las estimaciones con datos reales, como la guía de marca del cliente o el inspector del navegador sobre la web de referencia.
• Inspirarse no es copiar. Las referencias sirven para extraer principios (ritmo, jerarquía, contención del color), no para replicar la identidad de otra marca.
• Pulir cada página tiene un coste. Ejecutar /impeccable polish tras cada página consume tiempo y tokens. En páginas sencillas suele bastar con una revisión al final del bloque de trabajo.
• No todas las comprobaciones aplican a todos los proyectos. Los estados de carga y los flujos de compra tienen sentido en aplicaciones y tiendas. En una web corporativa importan más la coherencia, el móvil y los formularios de contacto.
• El criterio sigue siendo humano. La IA acelera la ejecución, pero decidir qué referencias encajan con el negocio y su público es trabajo de diseño.

Cómo aplicarlo en un proyecto Drupal con SDC

En un proyecto nuevo, el método se aplica tal cual. En un proyecto existente hay una diferencia importante: ya tienes un sistema de diseño, aunque no esté documentado. Variables SCSS, propiedades personalizadas de CSS y componentes en el tema. Si generas un DESIGN.md a partir de capturas de otras webs, el agente empezará a introducir valores que contradicen tu tema.

Para estos casos recomendamos invertir el orden:

1. Documenta lo que ya existe. Impeccable incluye /impeccable document, que genera el DESIGN.md a partir del código del proyecto. Pide que referencie los tokens reales (por ejemplo, var(--color-accent) o $spacing-lg) en lugar de copiar valores sueltos.
2. Usa las referencias externas para mejorar, no para sustituir. Compara tu DESIGN.md con el análisis de las capturas y decide qué cambiar de forma consciente.
3. Obliga a reutilizar componentes. Añade una regla en CLAUDE.md para que el agente use los componentes de Single Directory Components del tema antes de crear marcado nuevo. Así el diseño vive en un único sitio y los editores siguen trabajando con los mismos bloques en Layout Paragraphs.

# CLAUDE.md
@DESIGN.md

## Reglas de frontend
- Usa los componentes de web/themes/custom/[tema]/components/ antes de crear marcado nuevo.
- Nunca escribas colores, tamaños ni espaciados literales. Usa los tokens del tema.
- Si falta un token, propónlo en DESIGN.md antes de usarlo.

Si en tu equipo conviven varias herramientas (Claude Code, Codex, OpenCode), recuerda referenciar el DESIGN.md también en el archivo de instrucciones que lea cada una, como AGENTS.md.

Conclusión

La diferencia entre una web que parece hecha por IA y una que no lo parece rara vez está en el modelo. Está en el contexto que le das. Un DESIGN.md con valores reales, referencias elegidas por una persona y una revisión final sistemática bastan para salir de la plantilla genérica.

En Solucionex combinamos diseño, desarrollo Drupal e inteligencia artificial para construir webs con identidad propia. Si quieres incorporar estos flujos en tu equipo o en tu próximo proyecto, hablemos.