Diseñar siendo desarrolladores: lo que aprendimos usando Stitch
Llegamos a Stitch con una idea, varios prompts y una sospecha incómoda: quizá el diseño no tenía que empezar siempre en Figma. Spoiler: no fue magia. Fue criterio, iteración y bastante cirugía de componentes.
De pantallas sueltas a sistema reutilizable
No estábamos buscando una imagen bonita. Estábamos buscando una base.
La experiencia empezó como empiezan muchas cosas en producto: con una idea más clara en la cabeza que en la pantalla. Queríamos explorar el diseño de una experiencia tipo e-commerce, cercana al flujo de una página de Shopify, pero sin pasar primero por el ritual completo de abrir una herramienta de diseño, crear frames, pelear con márgenes y fingir que todo estaba bajo control.
Stitch nos permitió arrancar desde lenguaje natural: describir la intención, pedir variantes, corregir pantallas, revisar jerarquías, probar estructuras y empujar el diseño hacia algo usable. Pero el aprendizaje real no fue “la IA diseña por usted”. El aprendizaje fue mucho más interesante: la IA puede ayudarle a convertir una idea en un sistema, si usted deja de tratarla como generador de imágenes y empieza a usarla como parte del flujo de desarrollo.
Antes
- Prompts que generaban pantallas agradables, pero no siempre consistentes.
- Diseños que funcionaban solos, pero sufrían al entrar en una app real.
- Detalles visuales cambiando de una pantalla a otra como si tuvieran vida propia.
- La tentación de descargar una imagen y “pegarla” como referencia. Clásico error con buen peinado.
Después
- HTML generado por Stitch usado como insumo técnico, no como simple captura visual.
- Componentes extraídos, normalizados y reutilizados dentro de nuestra herramienta.
- Un sistema de componentes con reglas claras para responsive, dark mode, light mode y accesibilidad.
- Un flujo conectado con Codex, Cursor y una estrategia de prompt engineering más gobernada.
Stitch no reemplazó el diseño. Nos obligó a diseñar mejor.
Google Stitch es una plataforma de diseño con inteligencia artificial que permite generar interfaces para aplicaciones web y móviles desde prompts, referencias visuales o instrucciones iterativas. En la práctica, eso significa que uno puede pasar de una idea escrita a una interfaz visual bastante avanzada en cuestión de minutos.
Y eso, para equipos pequeños o empresas que no tienen un departamento de diseño esperando en una sala con luz cálida y post-its perfectamente alineados, es una ventaja enorme. Stitch baja la barrera de entrada para empezar a visualizar producto. No reemplaza el criterio visual, pero sí elimina una parte pesada del arranque: la pantalla en blanco.
En nuestro caso, el valor apareció cuando dejamos de pedir “una pantalla bonita” y empezamos a pedir decisiones: navegación, jerarquía, estados, comportamiento, layout responsive, modo oscuro, modo claro, patrones de interacción y componentes que pudieran vivir más allá del prototipo.
La IA no nos quitó el trabajo de diseño. Nos quitó la excusa de no diseñar.
La parte bonita fue rápida. La parte seria fue mantener consistencia.
El primer golpe de realidad llegó pronto: Stitch puede generar diseños muy agradables, pero no siempre mantiene la uniformidad entre pantallas. Cambian tamaños, espaciados, comportamientos, estilos de cards, navegación, densidad visual o decisiones de color. Nada dramático, pero suficiente para que una app empiece a sentirse como si cada pantalla hubiera sido criada por una familia distinta.
Ahí entendimos algo clave: la IA sirve muy bien para explorar, pero el sistema lo construye el equipo. El diseño generado necesitaba curaduría. No bastaba con decir “me gusta”. Había que preguntarse: ¿esto escala?, ¿esto se puede convertir en componente?, ¿esto funciona en móvil?, ¿esto respeta accesibilidad?, ¿esto aguanta dark mode y light mode?, ¿esto se puede mantener cuando el producto crezca?
Esa fue la diferencia entre usar Stitch como juguete visual y usarlo como parte de un flujo de desarrollo real.
Tres aprendizajes que nos cambiaron el flujo
La experiencia terminó dejando una idea bastante clara: el diseño con IA no se trata de pedir pantallas y rezar. Se trata de construir un contexto que la IA pueda entender, repetir y mejorar.
El prompt dejó de ser una orden y se volvió brief de producto
Mientras más claro era el objetivo, el usuario, la intención visual y las restricciones, mejores eran los resultados. El prompt no era “haga una página bonita”. Era una mini especificación de experiencia.
El HTML sirvió más que la imagen
Descargar una captura ayuda a mirar. Pero usar el HTML generado permitió que Codex leyera estructura, patrones y estilos para convertirlos en componentes reales. Menos póster, más producto.
El sistema importó más que el prototipo
Una pantalla puede verse bien. Un sistema tiene que repetirse bien. El salto ocurrió cuando empezamos a extraer componentes reutilizables, reglas visuales y patrones consistentes.
No copiamos una imagen. Convertimos una intención en sistema.
Y ahí es donde Stitch empezó a ser realmente útil para desarrollo.DESIGN.md: cuando el diseño deja de vivir solo en la cabeza
Uno de los descubrimientos más interesantes fue DESIGN.md. La idea es poderosa por simple: documentar las reglas del sistema visual en un formato que una inteligencia artificial pueda leer y reutilizar.
En vez de explicarle al agente una y otra vez qué color usar, cómo deben comportarse los botones, qué tono visual tiene la interfaz, cómo se maneja el espaciado o cuál es la intención de cada componente, DESIGN.md ayuda a convertir esas decisiones en una referencia persistente.
Dicho en lenguaje PLG: es como darle al agente un manual de convivencia visual para que no llegue cada mañana creyendo que la app es un carnaval nuevo.
- Stitch
- DESIGN.md
- HTML/CSS
- Codex
- Cursor
- Component System
- Dark Mode
- Light Mode
- Responsive UI
- Accessibility
Nuestro flujo real: de idea a aplicación completa
Después de varios intentos, ajustes y diseños curados, logramos pasar de prototipos sueltos a una aplicación completa construida sobre las pantallas generadas y refinadas con Stitch. El flujo no fue lineal ni perfecto. Fue más parecido a una conversación larga entre producto, diseño, código y criterio técnico.
Partimos de la idea
Primero describimos la intención del producto, el tipo de experiencia, la estructura esperada y los comportamientos principales. La idea no entró como wireframe cerrado, sino como dirección de diseño.
Iteramos con prompting
Pedimos variantes, corregimos jerarquías, ajustamos pantallas, revisamos navegación y fuimos afinando el diseño desde el chat. No fue “un prompt y listo”. Fue conversación, crítica y edición.
Usamos el HTML como puente técnico
En lugar de quedarnos con una imagen de referencia, tomamos el HTML generado como material de trabajo para que Codex pudiera leer, reorganizar y convertir patrones en componentes.
Extraímos componentes reutilizables
Cards, botones, layouts, barras, estados, módulos y patrones visuales empezaron a convertirse en piezas reutilizables. Ahí nació la base de nuestro sistema de componentes.
Integramos, validamos y corregimos
Probamos el diseño en diferentes resoluciones, revisamos dark mode, light mode, accesibilidad y consistencia visual. La IA propuso. El equipo decidió.
Lo recomendamos, pero no como juguete de moda
Stitch puede ser una herramienta muy potente para empresas que están empezando, especialmente si no cuentan con un equipo de diseño dedicado. Permite explorar ideas, visualizar producto, comparar direcciones y acelerar la construcción de interfaces sin depender de un proceso tradicional completo desde el día uno.
Pero hay una condición: hay que gobernar el contexto. Si no se definen reglas, métricas, variaciones permitidas, componentes base y criterios de accesibilidad, la herramienta puede producir cosas visualmente agradables pero difíciles de sostener.
Nuestra opinión: Stitch funciona mejor cuando se combina con una estrategia de prompting, documentación de diseño, revisión técnica y agentes de programación. Ahí deja de ser una plataforma para “sacar pantallazos bonitos” y se convierte en parte de una cadena de producción de producto digital.
Diseñar con IA no es saltarse el diseño.
Es cambiar el punto de partida. Ya no siempre necesitamos comenzar con una herramienta visual compleja, una mesa de diseño completa o una maqueta perfecta. Podemos empezar con una idea bien expresada, convertirla en interfaz, revisar sus fallas y empujarla hacia un sistema real.
Para nosotros, Stitch fue útil no porque hiciera todo perfecto, sino porque nos permitió pensar más rápido, equivocarnos más barato y convertir pantallas en componentes reutilizables.
La IA acelera el diseño. Pero el sistema, la coherencia y el criterio todavía los pone el equipo.
Y esa, honestamente, es la parte interesante. Porque diseñar producto no se trata de tener una pantalla linda. Se trata de construir algo que pueda crecer sin romperse cada vez que alguien cambia un botón.
