Deja de adivinar los prompts: crea especificaciones repetibles de diseño web con IA

Resumen

El cuello de botella en el diseño web con IA no es el modelo; es el contexto que las agencias le proporcionan. Este artículo explica por qué los prompts genéricos fallan y cómo construir un flujo de especificaciones repetible para distintos clientes: contratos de página, tokens de diseño legibles por máquina, heurísticas calibradas, compuertas de aprobación humana y un bucle de aprendizaje. Basado en investigaciones del Baymard Institute, el Nielsen Norman Group, Smashing Magazine, Gartner y MIT Technology Review Insights, muestra cómo obtener fiabilidad sin renunciar al criterio. Obtendrás una lista de verificación práctica para convertir los generadores de páginas con IA de un juguete a una herramienta de producción que funcione cliente tras cliente. Léelo si estás cansado de reescribir los resultados de la IA y quieres que el resultado coincida con tus estándares antes de revisarlo.

Lo peor que puedes hacer con un generador de páginas con IA es darle un buen prompt. Un gran prompt no deja de ser un deseo disfrazado de sintaxis: le dice al modelo lo que quieres ver, no cómo decidir. Para una agencia que gestiona varios clientes, esa distinción es la diferencia entre una herramienta que ahorra una semana y una forma costosa de generar los mismos problemas más rápido.

La investigación detrás del diseño asistido por IA sigue llegando a la misma verdad incómoda: el modelo rara vez es el cuello de botella; el contexto que le das lo es. El Nielsen Norman Group sostiene que, a medida que la IA genera elementos de interfaz directamente, los entregables de diseño evolucionan de documentos de especificación estáticos para desarrolladores humanos a contextos y reglas estructurados que guían la generación. El Baymard Institute descubrió que los prompts genéricos y no calibrados de IA solo capturan entre el 14 y el 26 % de los problemas reales de usabilidad, mientras que basar los mismos modelos en heurísticas de UX estructuradas y probadas por humanos eleva la precisión al 95 %. Esa brecha no es calidad del modelo; es calidad del contexto.

Si diriges una agencia, no tienes el lujo de cuidar cada resultado. Cada hora que pasas volviendo a especificar después de que la IA genere es una hora que el modelo debería haber usado antes de generar. Así que este artículo es una lista de verificación para cerrar esa brecha. Vas a reemplazar la adivinanza de prompts por un flujo de especificaciones que funcione en todos los clientes: un contrato de una página, tokens de diseño legibles por máquina, una verificación heurística calibrada, compuertas de aprobación humana, un bucle de retroalimentación y una definición más precisa de lo que se debe y no se debe automatizar.

	Prompt genérico	Flujo basado en especificaciones
Entrada	Un párrafo de deseos	Contrato de página, tokens, especificaciones de componentes, heurísticas
Salida	Plausible, promedio	Alineado al contexto, fiel a la marca, orientado a la conversión
Errores de usabilidad detectados	14–26 % de los problemas reales (Baymard Institute)	~95 % con heurísticas estructuradas (Baymard Institute)
Repetibilidad	Empieza de cero con cada cliente	Mejora de proyecto en proyecto
Control humano	Limpieza después del desastre	Integrado en las compuertas de aprobación

Escribe el contrato antes del prompt

Antes de que el modelo genere un solo píxel, escribe una página que no tenga nada que ver con la herramienta: el contrato de página. Nombra el objetivo comercial en una frase, la audiencia en unas pocas viñetas, las secciones obligatorias en orden, la prueba que el cliente puede respaldar legalmente y las restricciones que no son negociables. Este es el documento que escribirías si la IA no existiera y tuvieras que dar instrucciones a un freelancer que nunca ha oído hablar del cliente.

Para un cliente de fontanería regional, el contrato podría decir: el objetivo es reservar llamadas de cita; la audiencia son propietarios de viviendas de 40 a 65 años en un radio de 25 millas; las secciones obligatorias son punto de dolor, lista de servicios, prueba de licencia y seguro, testimonios y un formulario de contacto; la restricción es no incluir precios porque los presupuestos dependen de una inspección en el sitio. Entrégale esto a la IA en lugar de “hazme una página de aterrizaje moderna de fontanería”. El resultado será diferente no porque el modelo sea más inteligente, sino porque el espacio de decisión es más pequeño.

Un contrato de página también hace concreto el alcance de la conversación con el cliente. En lugar de “usaremos IA para hacer el sitio”, compartes una página que dice qué habrá y qué no. Eso solo evita la mayor parte de la retroalimentación de “esto no se siente como nosotros”, porque el cliente ya aprobó la estructura antes de que existieran los píxeles. Un requisito: no dejes que el cliente escriba el contrato solo. Pide los tres puntos de prueba que realmente pueda verificar, no los tres que desearía que fueran verdad. Si el contrato contiene una afirmación que el negocio no puede respaldar, la IA pondrá una versión segura de esa afirmación en la página, y tú serás quien cargue con esa responsabilidad.

Si te saltas el contrato, cada cliente vuelve a cero. La IA inventará una estructura a partir de la página de aterrizaje promedio que ha visto, que es justo lo que el mercado de tu cliente no es. Luego gastarás el tiempo que creíste haber ahorrado reescribiendo. En una cartera de clientes, esa aritmética nunca funciona.

La habilidad real es la especificación, no el prompting. Deja de hacer prompts, empieza a especificar: páginas de aterrizaje con IA que convierten plantea el mismo caso desde un ángulo diferente.

Dale al modelo un modelo del mundo, no una lista de deseos

A continuación, deja de alimentar al modelo con adjetivos y empieza a alimentarlo con tokens. Un sistema de diseño preparado para IA tiene tres partes: tokens de diseño legibles por máquina para color, espacio, tipografía y movimiento; una especificación estricta de componentes para cada patrón; y verificaciones automatizadas que detecten la deriva. La guía de Smashing Magazine sobre sistemas de diseño preparados para IA señala exactamente este punto: sin tokens legibles por máquina y auditoría automatizada, la deriva visual aparece en el momento en que se automatiza la generación de código. La deriva no es un error del modelo; es una fuga en tu sistema.

Toma la marca del cliente de fontanería. En lugar de “un aspecto limpio y confiable”, codifícalo: color primario #1a3f5c, una escala de espaciado de 8 puntos, una pila de tipografías, tokens de radio de 8 píxeles. Luego escribe la especificación de la tarjeta de testimonio: imagen 1:1, texto de cita no menor a 16 píxeles, atribución con número de licencia, ancho máximo de 640 píxeles. La especificación también debe incluir reglas de contenido. Por ejemplo, la sección de testimonios debe extraer solo de una lista que tú proporciones, no de la memoria del modelo de cómo suena un testimonio de fontanería. Esa única regla evita que la IA invente un cliente que nunca existió.

Guarda el archivo de tokens en el mismo lugar donde guardas el resto de los activos del cliente y referencia ese archivo exacto en cada ejecución de generación. Cuando el modelo genera, no necesita adivinar qué significa “fiel a la marca”; sigue el archivo de tokens. Si un cliente actualiza su color de marca, actualizas el token una vez y la próxima generación lo refleja. Sin esa disciplina, obtendrás una página plausible y equivocada: el valor predeterminado del modelo para una empresa de fontanería es un gradiente azul y una foto de stock de una llave inglesa. Esa página pasa una prueba de vistazo y falla una auditoría de marca, y el cliente lo notará antes de que la página esté en vivo.

Los archivos de tokens de diseño son aburridos. Ese es el punto. Aburrido es lo opuesto a la deriva. Para mantener esa biblioteca saludable entre proyectos, consulta Automatización del mantenimiento de sistemas de diseño con IA.

Calibra al crítico antes de confiar en el crítico

Añade una tercera capa: una lista de verificación heurística que la IA debe usar cuando audita o mejora su propio resultado. La mayoría de los equipos se saltan esto porque suena a tarea; también es la capa con la evidencia más sólida. El Baymard Institute probó la evaluación de UX impulsada por IA y descubrió que las herramientas genéricas de IA y los prompts no calibrados encuentran solo el 14–26 % de los problemas reales de usabilidad. Basa las mismas herramientas en heurísticas estructuradas y probadas por humanos y la precisión alcanza el 95 %, sin que la IA genere sugerencias dañinas de CRO. En otras palabras, el modelo no es poco fiable por naturaleza; es poco fiable cuando está libre.

Tu lista de verificación no necesita ser exótica. Diez preguntas que tu diseñador senior hace cada vez: ¿la propuesta de valor es visible en cinco segundos?; ¿la CTA principal está disponible sin hacer scroll?; ¿el formulario solo pide campos que el equipo de ventas realmente usa?; ¿el contraste es al menos 4.5 a 1?; ¿los objetivos táctiles tienen al menos 44 píxeles?; ¿cada titular tiene sentido sin el texto de apoyo?; ¿hay una única acción obvia a seguir?; ¿los elementos visuales apoyan el escaneo en lugar de competir?; ¿la señal de confianza de la página está cerca del punto de decisión?; y ¿el texto evita la precisión inventada? Para un cliente de logística, el hero generado por IA tenía un titular fuerte pero una CTA debajo del pliegue junto a un video. La verificación heurística lo detectó. Si el prompt hubiera sido “¿es una buena página de aterrizaje?”, el modelo habría dicho que sí, porque un texto pulido puede enmascarar un fallo estructural.

Una advertencia práctica: el hallazgo del Baymard Institute se refiere específicamente a la evaluación heurística, no a la redacción ni a la generación de diseño. Calibrar al crítico no convierte al modelo en un estratega; lo convierte en un inspector confiable. Las heurísticas son la fuente de verdad, no el modelo. El modelo se vuelve más rápido para aplicar la lista de verificación; no se vuelve más sabio sobre cuál debería ser la lista. Así que versiona tu lista de verificación por vertical. Una página de gestión de propiedades y una página de dispositivos médicos no comparten el mismo presupuesto de fricción. La primera puede pedir diez campos de formulario; la segunda debería pedir tres y mover el resto a un seguimiento.

Si te saltas la calibración, la IA propondrá una “victoria rápida” que eleva una micro-métrica mientras destruye la calidad de los leads, y sonará autoritativa mientras lo hace. Su confianza es exactamente lo que la hace peligrosa.

Mantén a un humano en el bucle para decisiones que pueden llevarte a juicio

Añade una compuerta de aprobación humana para exactamente tres tipos de resultado: afirmaciones verificables, manejo de datos personales y cualquier cosa que pueda implicar una garantía o un resultado. El análisis del ciclo de hype de Gartner y MIT Technology Review Insights llegan al mismo punto operativo: la confianza, el consentimiento progresivo de privacidad y la supervisión humana son prerrequisitos para la conversión impulsada por IA, no un pensamiento posterior. En la práctica, la IA puede redactar, pero no puede publicar.

Para un cliente de servicios de salud, el FAQ generado por IA contenía una frase como “normalmente podemos lograr que te aprueben en minutos”. Esa frase puede ser verdadera, falsa o legalmente complicada; un humano tiene que saber cuál es. Fue eliminada. El borrador también colocaba el aviso de privacidad completo al final de la página, donde nadie lo leería, así que el equipo lo reemplazó con un flujo de consentimiento progresivo: pide los datos mínimos en el momento en que se necesitan, explica por qué y permite que los usuarios cambien de opinión. Un humano que conocía a los reguladores del cliente tomó esa decisión. El consentimiento progresivo es un patrón de diseño, no un truco legal, y MIT Technology Review Insights lo vincula directamente con la confianza.

No pongas esta compuerta en la lista de verificación del gerente de proyecto; ponla en el flujo de trabajo mismo. En un proceso simple, el resultado de la IA se enruta al humano solo después de que pase la auditoría heurística. En la práctica, ese orden significa que un borrador visual limpio llega al aprobador en lugar de un montón de primer paso. El revisor humano no necesita volver a litigar el diseño; necesita verificar afirmaciones y decidir si la página hace promesas que el cliente puede cumplir.

Si te saltas esta compuerta, eventualmente publicarás algo legal y dañino, o dañino e ilegal. Una IA que suena segura sobre un resultado que no puede garantizar es un pasivo reputacional con un botón de publicar. El papel humano no es “revisar todo”, es saber qué decisiones el modelo es estructuralmente incapaz de tomar. Humanizando el diseño impulsado por IA enmarca bien esa disyuntiva.

Cierra el bucle para que el tercer cliente sea más rápido que el primero

Después de cada proyecto, dedica una hora a convertir lo sucedido en reglas. Añade una especificación de componente, edita una heurística, escribe un antipatrón. La biblioteca de especificaciones acumulada de la agencia es el producto; la IA es solo el motor de renderizado. Si lo único que se acumula es tu historial de prompts, no has aprendido nada; solo has escrito más.

La página de un cliente de gestión de propiedades seguía reordenando las respuestas del FAQ cada vez que el modelo regeneraba. No era un fallo del modelo; la especificación no decía cuánto debía durar una respuesta. El equipo añadió una regla: respuestas de FAQ de máximo 50 palabras, la primera frase responde la pregunta. Esa regla ahora se aplica a todos los clientes de la misma vertical. La siguiente versión de la página no necesitó corrección porque la especificación lo arregló.

Crea también un archivo de antipatrones. Los resultados rechazados de la IA son datos de entrenamiento para tu propio proceso. El titular “ingenioso” de testimonio de un cliente falló porque los clientes de ese cliente son escépticos por naturaleza; una nota en el archivo de antipatrones te impide forzar el mismo ángulo ingenioso en la próxima audiencia escéptica. El bucle de retroalimentación también debe tocar el contrato. Si las llamadas de ventas de un cliente cambiaron la oferta de servicios, actualiza el contrato de página antes del próximo proyecto, no después. De lo contrario, tu biblioteca de especificaciones se convierte en un museo de suposiciones obsoletas.

Si te saltas esta hora, cada cliente paga por la misma lección. Las agencias que tratan la IA como un generador de una sola vez están pagando el precio completo por una herramienta de descuento. La ventaja de la repetibilidad no es que te vuelvas más rápido escribiendo prompts; es que te vuelves más rápido en todo lo demás después del prompt.

Automatiza las partes que no necesitan criterio

Finalmente, decide qué hace el modelo todo el tiempo y qué nunca decide. Usa la IA para la generación de variantes, el rediseño visual, las reescrituras de tono, las descripciones de accesibilidad y los borradores estructurales. Mantén a un humano en la propuesta de valor única, la prueba y la decisión final. UXmatters y McKinsey describen el cambio del diseño de experiencia en los mismos términos: de “ordenar y ejecutar” a “colaborar e iterar”, donde la plataforma puede predecir y adaptarse, pero una persona mantiene la estrategia.

La generación de variantes es donde el modelo realmente brilla. Dale el mismo contrato de página y pide una versión que enfatice la velocidad, otra que enfatice la seguridad, otra que enfatice el precio. Cada versión se mantiene fiel a la marca porque los tokens y las heurísticas no han cambiado. Con un cliente de logística, puedes pedir cinco variantes de titular para el hero en dos estructuras: una liderada por la curiosidad, una liderada por la prueba. Un humano elige el ángulo según la posición de confianza del cliente. Si dejas que el modelo elija, estás externalizando la estrategia de marca a un promedio estadístico, que es como cada página de aterrizaje con IA termina diciendo “Libera tu potencial”. El modelo puede ser prolífico, pero no puede ser responsable.

El rediseño visual es otra automatización segura: misma estructura, diferentes tokens. Así es como una sola agencia puede producir una página de aterrizaje para un bufete de abogados y una empresa de jardinería sin parecer genérica. Las señales de confianza, las especificaciones de componentes y las heurísticas del bufete hacen la diferenciación; el modelo solo las renderiza más rápido. Automatizar lo incorrecto es peor que no automatizar nada. La velocidad amplifica todo lo que alimentas al sistema, incluidas las brechas de criterio.

Para una mirada más profunda sobre cuándo el modelo debería funcionar y cuándo deberías detenerlo, consulta IA vs. páginas de aterrizaje humanas: un marco de decisión.

El entregable es el contexto

La página ya no es el entregable. El contexto que produce la página de manera confiable es: el contrato, el archivo de tokens, las heurísticas, las compuertas de aprobación y el bucle de retroalimentación. Los generadores de páginas con IA seguirán mejorando y los prompts de hoy eventualmente quedarán obsoletos. El sistema de especificaciones es la parte que sobrevive, y es la parte que hace que la IA funcione igual para el cliente uno que para el cliente diez.