1. Los flujos
1.1 Flujo 1: Stitch → HTML → Figma → Framer → Publicación
1.2 Flujo 2: Stitch → Lovable → Publicación
2. Resultados
3. Conclusión
4. Reflexión final
En los últimos meses hemos estado probando muchas herramientas de IA para acelerar las tareas de diseño y generar material de mejor calidad. Uno de los retos que teníamos era poder generar prototipos rápidos y totalmente funcionales partiendo de una idea.
Nos propusimos hacer una propuesta de rediseño de una web ya existente, y analizar el proceso de trabajo, los tiempos empleados, y los resultados obtenidos.
Probamos dos enfoques principales que usan Google Stitch (https://stitch.withgoogle.com/) como punto de partida. Ambos flujos parten de analizar una web existente, pero divergen bastante en el camino y sobre todo en los resultados.
Los flujos
Flujo 1: Stitch → HTML → Figma → Framer → Publicación
Este fue el primer camino que exploramos y, aunque lleva más pasos manuales, es el que nos ha dado mejores resultados visuales y de control.
- Le pedimos a Grok (https://grok.com/) que analizara la URL de la web que queríamos rediseñar. Le pasamos también una web de referencia (con el estilo que nos gustaba), le indicamos que queríamos un look moderno y simple, con dos colores principales específicos, textos en negro y fondos en blanco.
- Grok generó un prompt muy detallado optimizado para Google Stitch (https://stitch.withgoogle.com/).
- Metimos ese prompt en Stitch (usando la versión Gemini 3 Flash, que es la más rápida) y generamos los diseños de todas las páginas principales. En unos 20-30 minutos teníamos un set completo de pantallas con un estilo parecido al que buscábamos.
- Exportamos las páginas a HTML desde Stitch (con la versión 3 Flash no se puede copiar directamente a Figma).
- Importamos ese HTML a Figma (https://www.figma.com/) usando el plugin html.to.design (https://html.to.design/home). Esto convierte el código en capas editables (no es perfecto al 100 %, pero mantiene bastante bien la estructura, tipografía y espaciados).
- En Figma limpiamos lo que hizo falta, ajustamos detalles que no estaban bien recogidos y exportamos las pantallas a Framer (https://www.framer.com/).
- En Framer terminamos el trabajo más manual:
– Ajustamos cabeceras y footers que se rompían en la importación.
– Corregimos elementos que perdían responsive.
– Configuramos los breakpoints (mobile, tablet, desktop).
– Añadimos interacciones básicas y probamos el flujo navegable.
- Publicamos la web directamente desde Framer.
Tiempo total aproximado: 4–6 horas (dependiendo del número de páginas y ajustes).
Flujo 2: Stitch → Lovable → Publicación
El segundo enfoque buscaba máxima velocidad y menos intervención manual.
- Igual que antes: usamos Google Stitch para generar los diseños base (con el mismo prompt detallado que nos ayudó a crear Grok).
- En vez de exportar HTML, cargamos las pantallas generadas en Lovable, subiendo todas las capturas (en .jpg) para que el programa pudiera tener como referencia tanto visual como de contenido.
- Le pedimos a Grok otro prompt específico para Lovable: cómo interpretar los diseños de Stitch, mantener el estilo moderno/simple, colores, etc., y generar la web completa (estructura, responsive, navegación).
- Metimos el prompt junto a las imágenes de Stitch en Lovable (https://lovable.dev/) y generamos la web.
- La IA generó la web entera (frontend + responsive básico + publicación).
- Hicimos ajustes menores vía chat con la IA (cambiar textos, mover algún elemento) y publicamos directamente.
Tiempo total aproximado: 2-3 horas.
Resultados
Conclusión
Si buscamos calidad y control nos quedamos con Figma + Framer. Vale la pena el tiempo extra porque el resultado final se ve mucho más profesional, el responsive funciona de verdad y podemos iterar con precisión.
Si necesitamos velocidad para validar una idea o enseñar algo rápido Lovable es más efectivo. Pero hay que estar preparados para que el diseño sea más “genérico IA” y aparezcan bugs o limitaciones en la edición.
En nuestro caso, para prototipos que queremos mostrar a clientes o usar como base real, elegimos el flujo Figma-Framer. Para experimentos internos o “pruebo esta idea en una tarde”, Lovable nos ahorra muchísimo tiempo.
Reflexión final
Los procesos de diseño y prototipado con IA nos sirven para agilizar los trabajos manuales (documentación, generar autolayouts, generar código, etc) pero los resultados tienen que ser supervisados por un ojo experto para asegurar que el diseño cumple con los mínimos de calidad.