Cómo conseguir un buen diseño web con IA: del brief a la comprobación de la interfaz
Neaptide · 20 de septiembre de 2026 · 13 min de lectura · Actualizado: 3 de octubre de 2026
Cómo preparar un brief para la IA, comparar diseños, elegir imágenes y comprobar la interfaz. Instrucciones prácticas y un taller ficticio como ejemplo.
En este artículo
«Crea una web bonita y moderna» deja demasiadas decisiones en manos del modelo. El modelo no sabe quién visitará la página, qué necesita entender ni qué información le ayudará a decidir. Sin eso es difícil evaluar incluso una propuesta llamativa: puede gustar y no cumplir su función.
Por eso, antes del primer diseño, prepara el contenido de la página, define las reglas visuales y decide cómo evaluarás el resultado. Lo que sigue está pensado para dueños de pequeños negocios, responsables de producto y diseñadores que crean sitios web con IA.
Qué aprovechar del enfoque de Anshu Chimala
En How to turn your AI into a world-class designer, Anshu Chimala propone explorar distintas direcciones creativas, desarrollar la elegida y mejorarla mediante iteraciones. Entre sus técnicas están recurrir a otro agente crítico que examine una captura sin conocer el historial de desarrollo y generar imágenes al servicio de una idea concreta.
Son recomendaciones prácticas del autor, y sus demostraciones no garantizan la misma calidad en cualquier proyecto. Desconfía sobre todo de una nota como «9 sobre 10» concedida por otro modelo. Sirve para comparar versiones. No dice si una persona conseguirá completar su tarea.
Usaremos como ejemplo un taller ficticio de reparación de lámparas. Los briefs, diseños y situaciones son ejemplos didácticos. No hicimos pruebas con usuarios ni medimos indicadores de negocio.
Empieza por la decisión del visitante
Para el taller, «recibir consultas» es un objetivo demasiado general. El visitante necesita saber si pueden reparar su lámpara, qué debe enviar para una valoración preliminar y cómo entregar el objeto. De esas preguntas sale el contenido de la página.
Empieza con una instrucción breve:
Estamos diseñando la web de un taller de reparación de lámparas. El visitante quiere saber si se puede restaurar la suya. La acción principal es enviar fotos y una descripción de la avería para una valoración preliminar. Antes necesita conocer los tipos de reparación, el proceso de consulta y las condiciones de recepción. Enumera los materiales necesarios. Señala por separado la información que falta. No inventes precios, plazos, opiniones ni garantías.Una petición así saca a la luz las carencias antes de diseñar. Si desconoces las condiciones de recepción, pídeselas al taller. Una sección atractiva con una promesa inventada solo aplaza el problema.
El mismo orden, primero entender el problema y después desarrollar soluciones, es la base del Double Diamond del Design Council. Sus cuatro fases son Discover, Define, Develop y Deliver: descubrir, definir, desarrollar y poner a prueba las soluciones para su entrega. Generar propuestas visuales solo cubre una parte del proceso.
Prepara un brief que permita tomar decisiones
Un brief útil ata el aspecto visual al contenido. A nuestro taller le va una presentación sobria centrada en los objetos: fotografías grandes de detalles, textos explicativos claros y una acción visible para enviar fotos. Es lo que elegimos para este ejemplo. No pretende ser un estilo universal para negocios de servicios.
| Parte del brief | Decisión para el taller | Qué comprobar |
|---|---|---|
| Pregunta principal | ¿Pueden reparar mi lámpara? | La respuesta o el siguiente paso se encuentra fácilmente |
| Contenido | Tipos de reparación, ejemplos y proceso | Cada bloque contiene información real |
| Foco visual | Fotografías de objetos y detalles | Las imágenes permiten examinar el trabajo |
| Texto | Explicaciones breves sin jerga técnica | Se entiende qué fotos y datos enviar |
| Acción principal | Enviar fotos para una valoración | El botón lleva al formulario o contacto adecuado |
| Limitación | La estimación preliminar no es el precio final | La diferencia se explica cerca de la consulta |
No conviertas el brief en una larga lista de prohibiciones. «Sin tarjetas» no dice nada sobre la utilidad de la página. Las tarjetas pueden funcionar bien para mostrar servicios. Lo que importa es qué dicen y si permiten comparar.
Compara alternativas con el mismo contenido
Prepara un único conjunto de títulos, servicios e imágenes. Si una versión tiene textos precisos y fotografías detalladas y otra solo contenidos provisionales, estarás comparando varias variables a la vez.
Para el taller podemos organizar la página de tres formas:
- Por tipo de avería. El visitante reconoce su problema y pasa a las condiciones de recepción.
- Por ejemplos de restauración. Los trabajos reales y la explicación de las intervenciones estructuran la página.
- Por el proceso de reparación. Se explica el recorrido desde la primera foto hasta la recogida del objeto.
Las tres opciones siguen lógicas de presentación distintas, así que hay una elección real que hacer. La densidad, los tamaños de imagen y la tipografía se discuten después.
Prepara tres estructuras de página según estos principios. Usa la misma información inicial y la misma acción principal. Explica qué pregunta responde primero cada estructura y qué información queda más abajo. No añadas efectos decorativos todavía. Indica qué materiales faltan para poder decidir.Los tres diseños siguientes abordan el mismo tema. El primero destaca las averías, el segundo el objeto y el tercero el proceso de consulta. También varían las paletas y las composiciones, de modo que tómalos como ilustración de direcciones posibles. No son un experimento controlado. Si quieres evaluar solo la estructura, mantén iguales el estilo y el contenido.
Pide a alguien ajeno al proyecto que encuentre las condiciones de recepción y explique el siguiente paso. Si no lo consigue, vuelve a la estructura. Qué color prefiere se habla aparte.
¿Puede una cadena aleatoria ayudar a generar ideas?
Si las alternativas se parecen demasiado, puedes probar una fuente de asociaciones poco habitual. Chimala propone generar una cadena aleatoria mediante un script externo y utilizarla como punto de partida creativo. Tómalo como un experimento del que puedes prescindir.
Los investigadores de Sakana AI describen String Seed of Thought: el modelo genera primero él mismo una cadena aleatoria y después obtiene la respuesta operando con ella. Estudian cómo siguen los modelos las instrucciones probabilísticas y cuánto varían sus respuestas. El método no necesita un generador externo, y en eso se distingue de la variante práctica de Chimala.
Nada de esto demuestra que una cadena aleatoria haga una web más fácil de usar o aumente las ventas. En un proyecto real basta una comprobación: ¿el experimento produjo una alternativa que resuelve la tarea y merece desarrollarse? Si no, déjala a un lado. La novedad por sí sola no justifica sustituir una navegación comprensible.
Elige las imágenes según su función
La fotografía de una lámpara reparada muestra lo que el taller sabe hacer. Una imagen generada no prueba nada parecido, porque detrás no hay ni un encargo ni una reparación real.
Distingue los usos. Un portafolio necesita fotografías auténticas con permiso para utilizarlas. Un esquema original puede explicar cómo realizar una consulta. Una ilustración conceptual puede servir de portada o aportar ambiente, siempre que se indique su origen.
Antes de generar una imagen, decide dónde irá. Si acompaña a un título, míralos juntos. Si va a recortarse en una pantalla estrecha, asegúrate de que el detalle importante no se quede fuera. Deja los textos, botones y condiciones como elementos normales de la página, que se puedan editar sin tocar la ilustración.
Una instrucción para este ejemplo sería:
Crea un esquema sobre cómo solicitar una valoración preliminar de una lámpara. Tres pasos: fotografiar el objeto completo, mostrar el daño de cerca y describir qué no funciona. Las explicaciones deben ser texto normal de la página. No presentes reparaciones inventadas como portafolio del taller.
Convierte los comentarios en cambios verificables
«El diseño parece barato» no explica qué hay que modificar. Un comentario útil nombra el lugar, el problema y cómo debe comportarse la página una vez corregida.
| Impresión general | Cambio que se puede pedir |
|---|---|
| Hay demasiadas cosas | Localiza bloques repetitivos. Propón cuáles combinar y explica qué información se conservará |
| El botón pasa desapercibido | Comprueba si se encuentra el envío de fotos después de leer las condiciones. Sitúa la acción cerca de ellas |
| En el móvil es incómodo | Revisa etiquetas, saltos de línea, teclado, errores y envío en una pantalla estrecha |
| Las fotos no ayudan | Explica qué aporta cada foto. Sustituye descripciones vagas por información concreta del trabajo |
Puedes encargar a la IA una revisión preliminar. Dale la tarea del visitante, el brief y la pantalla actual. Pídele que separe los problemas visibles de las hipótesis que solo se pueden comprobar en una web que funcione. Con una captura basta para hablar de composición. No te dirá si el formulario se envía.
Lleva un registro breve: qué observaste, qué cambiaste y cómo lo comprobaste. Por ejemplo: «La descripción desaparecía tras un envío fallido → se conservó el texto introducido → se repitió el fallo y se confirmó que la descripción seguía ahí». Un registro así vale más que una nota estética que no para de subir.
Comprueba la interfaz en su contexto de uso
Antes del lanzamiento, completa el recorrido principal de principio a fin. En el taller: encontrar las condiciones, preparar las fotos, rellenar la consulta, corregir un error y recibir una confirmación clara. No te quedes en el camino sin tropiezos. Los campos vacíos y los fallos de carga también necesitan una respuesta clara.
Revisa por separado que el texto se lea bien y que los controles sean fáciles de pulsar. El criterio de contraste de nivel AA de WCAG 2.2 exige al menos 4,5:1 para texto normal y 3:1 para texto grande, con las excepciones previstas. Se considera grande el texto de al menos 18 pt, o 14 pt en negrita. El contraste se mide con los colores reales del texto y del fondo. A simple vista no vale.
Para las áreas de interacción con puntero, el criterio 2.5.8 de nivel AA establece un mínimo de 24 × 24 píxeles CSS. Hay excepciones, entre ellas los objetivos pequeños con espacio suficiente alrededor y los enlaces dentro del texto. Es un suelo. El criterio no recomienda que todos los botones midan exactamente eso.
Superar esas dos comprobaciones no significa cumplir todo el estándar. Recorre también la página con el teclado y mira si el foco se ve, si los campos tienen etiqueta y qué pasa al ampliar el texto. Después pide a una persona de tu público que complete una tarea concreta, sin darle pistas. Anota dónde duda y qué entiende de otra manera que tú.
Decide cuándo dejar de retocar
Para la primera versión, escribe de antemano qué significa «terminado». El visitante encuentra las reparaciones y las condiciones, sabe qué enviar, completa la consulta, conserva los datos tras un error y recibe confirmación. Y una condición más: cada promesa publicada coincide con el funcionamiento real del taller.
Cuando se cumplan esas condiciones, vincula los siguientes cambios a observaciones. Si la gente confunde la estimación preliminar con el precio final, reescribe la explicación. Si no se puede adjuntar una foto, arregla el formulario. Otro tono de color puede esperar.
Empieza por un recorrido y haz que funcione. La siguiente conversación con la IA tendrá entonces algo concreto: un problema que señalar y una manera de comprobar si se ha resuelto.
Fuentes
- Anshu Chimala — How to turn your AI into a world-class designer, Lenny’s Newsletter, 1 de septiembre de 2026. Artículo original. Solo se utilizó la parte de acceso público; no se consultó la continuación para suscriptores.
- Design Council — The Double Diamond. Descripción del proceso. Distingue la comprensión del problema, el desarrollo y la comprobación de soluciones.
- Kou Misaki, Takuya Akiba, Sakana AI — String Seed of Thought: Prompting LLMs for Distribution-Faithful and Diverse Generation. Método y experimentos. Diversidad de generación e instrucciones probabilísticas.
- W3C — Understanding SC 1.4.3: Contrast (Minimum). Contraste del texto.
- W3C — Understanding SC 2.5.8: Target Size (Minimum). Tamaño de los objetivos y excepciones.
- Artículo original
- Descripción del proceso
- Método y experimentos
- Contraste del texto
- Tamaño de los objetivos y excepciones
Fuentes comprobadas el 3 de octubre de 2026. El brief, las instrucciones, las tablas y los esquemas se crearon para este artículo. Describen un proceso propuesto y no deben leerse como los resultados de un experimento.