Diseño web con IA: cinco puertas antes de entregar

El diseño web con IA ya produce una página de inicio verosímil en el tiempo que tarda en servirse un café. Esa velocidad es real, y también es la trampa. Una página generada parece terminada mucho antes de estarlo, y las partes sin terminar (contraste, orden de encabezados, layouts espejados, disciplina de tokens) son justo lo que un cliente descubre tres semanas después del lanzamiento. Lo que sigue es la secuencia que usamos para conservar la velocidad y eliminar las sorpresas: cinco puertas, en orden, cada una con un criterio claro de aprobado o suspenso.

¿Por qué una web generada parece terminada sin estarlo?

Porque el modelo optimiza para lo que enseña una captura de pantalla. Hero, tres tarjetas de funcionalidades, una fila de testimonios, un pie de página. Cada una de esas piezas es estadísticamente familiar, así que la página entera se lee como profesional a primera vista. Lo que una captura no muestra es lo que decide si el sitio sobrevive a la entrega al cliente.

Tome la accesibilidad. El informe WebAIM Million 2026 detectó fallos de WCAG 2 en el 95,9% de las páginas de inicio del millón de sitios más visitados, y texto de bajo contraste en el 83,9%. Un modelo entrenado con esa web reproduce esa web. Le entregará un texto gris pálido sobre un fondo crema con total seguridad.

El segundo problema invisible es dónde viven las decisiones de diseño. Una página generada suele llevar sus colores, tamaños y espaciados como valores literales repartidos por el marcado. Si el azul de marca cambia el próximo trimestre, toca buscar en cuarenta bloques. Esa factura de mantenimiento la paga el freelance, no el modelo.

Así que la pregunta útil no es si la IA puede diseñar esta web. Sí puede producir un borrador. La pregunta útil es qué decisiones dejar que tome y dónde comprobar su trabajo. Las cinco puertas responden a eso.

Puerta uno: escriba el briefing antes de abrir la herramienta

La mayoría de los resultados decepcionantes vienen de un prompt de una sola línea. "Una web para una panadería en Sevilla" da permiso al modelo para inventarlo todo: público, tono, lista de páginas, llamadas a la acción. Lo inventará a partir del promedio de todas las panaderías que ha visto.

Un briefing que funciona cabe en media página. Quién visita la web y qué vino a hacer en los primeros diez segundos. Las tres páginas que deben existir. La única acción para la que existe el sitio: reservar, llamar, pedir. Dos sitios que el cliente admira y uno que odia. Los idiomas, incluida la dirección de lectura: si el sitio se publica en árabe o hebreo, dígalo ahora, no después de aprobar el layout.

Esa última línea pesa más de lo que parece. La dirección de lectura de derecha a izquierda es una propiedad del layout, no una tarea de traducción. Un modelo al que no se le dice nada producirá un diseño alineado a la izquierda con el árabe pegado encima. Poner la dirección en el briefing cambia qué layouts propone la herramienta, y cuesta una frase.

Olvídese de los adjetivos "moderno y limpio". No aportan información. "Denso y editorial, como la portada de una sección de periódico" aporta bastante más.

Puerta dos: pida direcciones, nunca páginas

El uso más barato de la IA en todo este trabajo es la exploración. Pida de tres a cinco direcciones distintas como layouts aproximados y combinaciones de tipografías, y elija antes de construir nada. Seis bocetos cuestan unos minutos. Rehacer una página que el cliente rechazó cuesta una tarde.

La disciplina consiste en mantenerlos baratos. No deje que la herramienta renderice páginas completas con fotografía generada para cada dirección: los clientes se enamoran de las fotos y luego no pueden separar el layout de las imágenes. Bloques grises y encabezados reales bastan. Si el cliente no puede elegir entre tres layouts de bloques grises, el problema era el briefing, y lo habrá aprendido gratis.

La categoría de herramienta importa aquí, y conviene ser directo. Los generadores de sitio completo como 10Web construyen un sitio WordPress entero a partir de un prompt, una URL o un archivo de Figma, con planes desde 10 dólares al mes facturados anualmente para un sitio. Los constructores alojados como Durable pasan de unas pocas respuestas a un sitio de pequeña empresa terminado en unos 30 segundos. Ambos son excelentes en la puerta dos y flojos en la cuatro, porque se quedan con las decisiones de diseño en lugar de exponerlas. Úselos para ver opciones. Desconfíe de usarlos como construcción final de un sitio que va a mantener durante años.

Puerta tres: fije el diseño en theme.json antes de construir

Es la puerta que más flujos de trabajo se saltan, y la que separa un sitio que se puede mantener de uno que solo sirve para enseñar. Una vez elegida la dirección, pase sus decisiones a tokens y escríbalos en theme.json: la paleta de colores, las familias y tamaños tipográficos, la escala de espaciado, el ancho del contenido. A partir de ahí, cada bloque referencia un token por su slug, nunca un valor literal.

La referencia de theme.json existe justamente para esto. Da a un tema de bloques un único lugar donde declarar la paleta y las escalas que el editor después ofrece como controles. Cuando cambia el azul de marca, cambia una línea. Cuando el cliente abre el Site Editor, elige de esa paleta en lugar de una rueda de color libre, lo que evita en silencio toda una categoría de ediciones fuera de marca.

Aquí la IA se gana el sueldo de otra manera. Dele la dirección elegida y pídale un conjunto de tokens, y luego compruébelo con dos reglas. Cada par de texto y fondo debe alcanzar 4.5:1 para texto normal (el umbral AA de WCAG), así que calcule usted mismo los ratios en lugar de fiarse de lo que afirma el modelo. Y la escala debe ser pequeña: de cinco a seis pasos de espaciado y una escala tipográfica de seis tamaños. Los modelos adoran entregar catorce grises casi idénticos. Borre once.

Una prueba práctica de que esta puerta se cumplió: abra el tema terminado y busque un código hexadecimal en cualquier plantilla. Si lo encuentra, una decisión se escapó del sistema.

Puerta cuatro: construya con bloques nativos y saque al generador del circuito

Ahora sí, construya. La estructura que propuso el modelo suele merecer conservarse: el orden de las secciones, la lógica de columnas, el ritmo entre zonas densas y zonas abiertas. El marcado que produjo normalmente no. Reconstruya la estructura aprobada con bloques del núcleo (Grupo, Columnas, Portada, Bucle de consulta) usando sus tokens, y trate el resultado generado como un dibujo de referencia, no como archivo fuente.

Suena más lento. Según nuestra experiencia, a partir de la segunda página es más rápido, porque los bloques nativos heredan los tokens, responden al Site Editor y se comportan cuando el cliente los edita. El marcado generado que codifica sus estilos a mano lucha contra todo eso. Los constructores de páginas están en el otro extremo de la misma disyuntiva. Divi, rehecho como Divi 5 en febrero de 2026, incluye Divi AI en su nivel Pro a 277 dólares al año, y la salida se queda dentro del sistema de módulos de Divi. Es una opción legítima para una agencia que ha estandarizado en Divi. Es un producto distinto de un tema de bloques, con un coste de salida distinto, y ese coste de salida debe entrar en el presupuesto.

Donde la generación con IA sí tiene sitio dentro de la construcción es en la capa repetitiva: una variante de una sección de precios, texto de relleno con la forma del texto real, disposiciones alternativas del hero para que el cliente compare. Trate cada una como un patrón borrador que hay que ordenar y registrar, nunca como trabajo terminado.

Un límite honesto: si el proyecto necesita interacción real (archivos filtrados, lógica de consulta a medida, cualquier comportamiento con JavaScript), ningún generador la va a resolver. Lo escribe un desarrollador, y la aportación de la IA se queda en los bordes.

Puerta cinco: audite lo que una captura no muestra

Aplique la misma auditoría corta a cada sitio, siempre en el mismo orden, para que se convierta en hábito y no en un estado de ánimo.

Primero, el contraste. Revise los pares reales renderizados, incluido el texto sobre imágenes y los estados deshabilitado y hover que el modelo nunca consideró. Segundo, la estructura de encabezados: un solo H1, encabezados que descienden sin saltarse niveles y ninguno elegido solo porque es grande. Tercero, el teclado: recorra la página completa con el tabulador y compruebe que el foco se ve y que el orden sigue el orden de lectura. Cuarto, el texto alternativo de cada imagen con significado, y alt vacío en las que no lo tienen.

La quinta comprobación es la que distingue este método de una lista de verificación genérica: la dirección. Si el sitio tiene versión en árabe o hebreo, véala de derecha a izquierda y busque lo que no se espejó. Iconos que apuntan en sentido contrario, una imagen principal cuyo sujeto queda ahora contra el texto, un margen escrito como margin-left en lugar de una propiedad lógica como margin-inline-start. Son baratos de corregir si los encuentra en esta puerta, y embarazosos si aparecen en la captura de un cliente.

Guarde la evidencia de la auditoría: un par de capturas antes y después por página, una nota de lo que falló y una nota de lo que cambió. Eso convierte "asistido por IA" de una afirmación vaga en un entregable, y es el párrafo del documento de entrega que justifica su tarifa frente a un cliente que probó un generador por su cuenta el fin de semana.

¿Y qué pasa con los constructores de un solo prompt?

Tienen su sitio, y es un sitio estrecho. Un constructor de un solo prompt sirve para un prototipo desechable para una propuesta comercial, una landing para un evento de fin de semana o un punto de partida visual para un cliente que no sabe describir lo que quiere. Framer combina un generador de sitios con IA con un lienzo libre y un plan gratuito, lo que lo hace bueno para exactamente ese tipo de trabajo visual rápido y descartable, y su plan Basic empieza en 10 dólares al mes.

Evítelos cuando el sitio deba vivir en WordPress, lo vaya a editar un cliente no técnico o se dirija a una audiencia de derecha a izquierda, porque de todos modos tendrá que reconstruir la salida en bloques. El prototipo sí valió la pena; la página no merecía publicarse. Saber en cuál de los dos casos está ahorra más tiempo que cualquier otra cosa.

Qué probar en su próximo briefing

Elija un proyecto real en curso y aplique solo las puertas uno y tres. Escriba el briefing de media página y luego fije la paleta y las escalas elegidas en theme.json antes de que exista una sola página. Mida el tiempo y compárelo con lo que tardó su último sitio en llegar a un diseño estable. Si el resultado se sostiene, añada las otras tres puertas de una en una. ¿Qué puerta le habría ahorrado más dolor en el último sitio que entregó?