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
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. ¿Quién visitará la página? ¿Qué necesita entender? ¿Qué información le ayudará a decidir? Sin esas respuestas, resulta difícil evaluar incluso una propuesta llamativa: puede gustar sin cumplir su función.
Para utilizar la IA en diseño, prepara el contenido de la página, define las reglas visuales y decide cómo evaluarás el resultado. Esta guía está dirigida a responsables de pequeños negocios, de producto y a 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. Sus demostraciones no garantizan la misma calidad en cualquier proyecto. Conviene tomar con cautela una nota como «9 sobre 10» concedida por otro modelo: puede ayudar a comparar versiones, pero no demuestra que una persona consiga completar su tarea.
Usaremos como ejemplo un taller ficticio de reparación de lámparas. Los briefs, diseños y situaciones son didácticos. No se han medido resultados de pruebas con usuarios ni 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. Esas preguntas determinan 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.Así puedes detectar 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.
Comprender el problema antes de desarrollar soluciones también 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 relaciona el aspecto visual con el contenido. Para nuestro taller podemos elegir 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 una propuesta para este ejemplo, no 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 relevante es qué información contienen y si permiten compararla.
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.
La lógica de presentación cambia, así que la elección tiene una utilidad concreta. Después puedes hablar de densidad, tamaños de imagen y tipografía.
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: ilustran direcciones posibles, no 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 puede hacerlo, revisa la estructura. Sus preferencias de color son una cuestión 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. Trátalo como un experimento, no como un paso obligatorio. Fuente: Lenny’s Newsletter.
Los investigadores de Sakana AI describen String Seed of Thought: el modelo genera una cadena y realiza operaciones con ella para construir la respuesta. Estudian el seguimiento de instrucciones probabilísticas y la diversidad de las respuestas. Su método no requiere un generador externo, a diferencia de la variante práctica de Chimala.
Estos resultados no demuestran que una cadena aleatoria mejore la usabilidad o las ventas. En un proyecto real conviene hacerse una pregunta más concreta: ¿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 puede mostrar lo que el taller sabe hacer. Una imagen generada no cumple esa función: no hay un encargo ni una reparación real detrás.
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, compruébalos juntos. Si se recortará en una pantalla estrecha, asegúrate de que el detalle importante siga visible. Mantén los textos, botones y condiciones como elementos normales de la página, editables con independencia de 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 señala un lugar, un problema y el resultado esperado tras corregirlo.
| 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 requieren una web funcional. Una captura permite revisar la composición, pero no verificar el envío de un formulario.
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í». Ese registro aporta más que una nota estética cada vez mayor.
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. Prueba también los campos vacíos y los fallos de carga: requieren respuestas comprensibles.
Revisa por separado la legibilidad y los controles. 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. Comprueba los colores del texto y del fondo, en lugar de evaluar la imagen a simple vista. Explicación del criterio 1.4.3 del W3C.
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, con excepciones como el espacio suficiente entre objetivos pequeños o los enlaces dentro del texto. Es un mínimo del criterio, no una recomendación para que todos los botones midan exactamente eso. Explicación del criterio 2.5.8 del W3C.
Superar esas dos comprobaciones no implica cumplir todo el estándar. Recorre la página con el teclado, revisa la visibilidad del foco, las etiquetas y el aumento del texto. Después, pide a una persona del público previsto que complete una tarea concreta sin indicaciones. Anota dónde duda y qué interpreta de forma distinta a la esperada.
Decide cuándo dejar de retocar
Para la primera versión, escribe los criterios de aceptación de antemano: el visitante encuentra las reparaciones y las condiciones, sabe qué enviar, completa la consulta, conserva los datos tras un error y recibe confirmación. Todas las promesas publicadas deben corresponder al funcionamiento real del taller.
Cuando se cumplan esas condiciones, vincula los siguientes cambios a observaciones. Confundir la estimación preliminar con el precio final justifica reescribir la explicación. No poder adjuntar una foto justifica corregir el formulario. Probar otro tono de color puede esperar.
Empieza por un recorrido y haz que funcione. Así tendrás una base concreta para el siguiente intercambio con la IA: 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 20 de septiembre de 2026. El brief, las instrucciones, las tablas y los esquemas se crearon para este artículo. Describen un proceso propuesto, no los resultados de un experimento.