Saltar al contenido
kenjtecJournal
Buscar en el Journal

Diseño web con IA: usar Stitch para explorar tres direcciones en lugar de un único borrador

Tres borradores solo resultan interesantes cuando priorizan tareas distintas. La página de una biblioteca ofrece un encargo concreto para una comparación de diseño justa.

Ana ordena las mismas tarjetas en tres bandejas siguiendo tres órdenes distintos. Ilustración creada con IA.

El primer borrador de la IA parece coherente. Tiene un titular grande, colores amables y un botón llamativo. Precisamente por eso merece la pena hacerse una segunda pregunta: ¿por qué está arriba justo esta acción? Una pantalla convincente puede hacer que una prioridad arbitraria parezca tan evidente que ya nadie la discuta.

El 18 de marzo de 2026, Google Labs describió un enfoque ampliado de Stitch para el diseño de interfaces asistido por IA en un lienzo compartido. Se trata de un anuncio de herramienta más antiguo, no de una noticia actual de octubre. En este artículo práctico, lo usamos como punto de partida para un ejercicio de diseño propio: tres direcciones que difieren en contenido, todas construidas sobre los mismos hechos confirmados.

Una variante necesita un propósito distinto

Nuestra biblioteca de barrio ficticia tiene seis contenidos: búsqueda de libros, horario de apertura, eventos, inscripción, ubicación e información para una primera visita. La primera dirección prioriza la búsqueda. La segunda empieza con la próxima fecha de un evento. La tercera ayuda a quienes nunca han estado allí.

Estas diferencias van más allá de cambiar el redondeo de las esquinas o el color de acento. Cada dirección responde a una suposición distinta sobre por qué la gente visita la página. En cuanto la suposición se dice en voz alta, se puede cuestionar. Quizá una biblioteca con muchos usuarios habituales deba ponderarse de forma distinta que una institución nueva que primero tiene que ayudar a la gente a orientarse.

Mientras lo haces, mantén los hechos fijos. Un borrador no debe parecer más convincente solo porque se invente un horario más amplio u omita una condición de participación difícil. El diseño organiza la información; no recibe licencia para amoldarla.

Un encargo que de verdad pide tres direcciones

Puedes completar la siguiente plantilla, que es nuestra, con tus contenidos confirmados. Describe un encargo de trabajo, no una salida de Stitch que se haya producido realmente.

Desarrolla tres puntos de entrada distintos para la misma página de la biblioteca. A prioriza la búsqueda de libros; B, la próxima fecha de un evento; C, la orientación antes de la primera visita. Usa solo los hechos proporcionados. Mantén sin cambios el horario de apertura y las condiciones de participación. Para cada variante, explica qué tarea se apoya primero y qué queda más relegado como consecuencia.

La última pregunta importa. Una prioridad cuesta espacio y atención en otro lugar. Quien solo pregunta por las ventajas de una variante obtendrá fácilmente tres justificaciones positivas. Hacer visible la contrapartida ayuda a tomarse la decisión en serio.

Pide primero el orden y las relaciones entre los distintos contenidos, no más decoración en la imagen. Un esquema sencillo a menudo ya muestra si las direcciones difieren en lo sustancial. Después, los colores y la ilustración pueden apoyar la intención elegida.

Una tarea común hace la comparación más justa

Antes de juzgar, elige una tarea concreta: encontrar una fecha de evento adecuada y averiguar cómo puedes participar. Observa la misma tarea en las tres versiones. ¿Dónde está la fecha? ¿Cómo se hace visible la condición? ¿Adónde lleva la acción destacada?

Anota las dificultades observables. «La inscripción solo se reconocía tras volver a leer» es algo con lo que se puede trabajar. «Parece anticuado» necesita primero una explicación más precisa. No se trata de prohibir el gusto. Simplemente no debería ser la única justificación de una decisión sobre la información.

Una revisión editorial de este tipo todavía no es un estudio de usabilidad. Si más adelante hay personas que prueban realmente las variantes, hay que documentar las tareas, el entorno y las observaciones. Este artículo no finge que se hayan realizado sesiones de prueba ni que haya resultados.

La elección se convierte en un traspaso preciso

Tras la comparación, anota el punto de entrada preferido, su tarea principal y los detalles que aún faltan. Añade las preguntas abiertas que haya. Quizá la dirección de eventos funcione bien para una página de campaña, mientras que la página de inicio habitual debería priorizar la búsqueda. Una elección razonada puede tener matices.

El texto de traspaso vale más que una captura de pantalla aislada. Explica qué relación entre contenido e interacción debe conservarse. Así, una persona desarrolladora que tome el relevo, u otra IA, tiene que adivinar menos a partir de la apariencia.

Un borrador de interfaz todavía no es una aplicación completa. Las conexiones de datos, el comportamiento y la accesibilidad requieren su propio trabajo. La fortaleza del ejercicio está antes de ese punto: hace visibles las alternativas mientras todavía es fácil cambiar la dirección básica. Así, el primer borrador atractivo sigue siendo una posibilidad entre varias, en lugar de convertirse discretamente en el único camino concebible.

Fuentes y estado

Investigación y documentación a fecha de 25 de octubre de 2026. Introducing vibe design with Stitch.

Hamburgo es nuestro punto de partida.

Lo útil viaja contigo.

IA práctica desde Hamburgo, explicada para todos.

Artículos guardados