Cómo el prototipado con IA está transformando el diseño en Webflow

A lo largo de los años, aprendí Swift para crear aplicaciones reales de iOS en Airbnb, desarrollé extensiones de Chrome para probar nuevas interfaces en Google y llevé Figma al límite intentando comunicar interacciones complejas, creando suficiente "espagueti" de prototipos como para alimentar a un pequeño pueblo italiano.

Creo que, si bien una imagen vale más que mil palabras, un prototipo vale más que mil reuniones. Hay algo mágico en construir y mostrar cómo se sienten las cosas realmente, en lugar de solo hablar de ellas.

Pero el prototipado tradicional siempre tuvo límites. Probar escenarios empresariales complejos con múltiples roles de usuario y estados del sistema requería una configuración enorme. Ajustar los detalles de interacción que dan vida a las ideas suponía semanas de desarrollo. Validar la usabilidad en flujos realistas de principio a fin consumía mucho tiempo y, a menudo, llegaba demasiado tarde al proceso. Estas limitaciones hacían que, con frecuencia, tuviéramos que imaginar cómo funcionarían las experiencias en lugar de vivirlas.

En los últimos meses, hemos experimentado con herramientas de codificación por IA como Cursor, Augment y Copilot para prototipar. Los resultados nos convencieron de construir algo más sistemático: una plataforma de prototipado que transforma la forma en que trabaja todo nuestro equipo de diseño.

Qué construimos (y por qué)

Creamos una plataforma de prototipado dedicada que cierra la brecha entre las ideas de diseño y los prototipos funcionales. En esencia, es un repositorio de GitHub que empaqueta nuestro sistema de diseño Spring en convenciones compatibles con IA, junto con materiales educativos y una infraestructura de despliegue en Webflow Cloud. La visión era sencilla: permitir que cualquier diseñador pase del concepto al prototipo compartible en menos de una hora.

En lugar de usar nuestra base de código de producción para empezar, creamos esto como un repositorio separado, en parte por velocidad (sin procesos de compilación complejos que ralenticen la experimentación) y en parte por la optimización para IA, dadas las expectativas de rendimiento actuales de los modelos de vanguardia. Los modelos modernos destacan en patrones web comunes como Next.js, React y Tailwind, mientras que nuestras convenciones personalizadas del sistema de diseño requieren un ajuste adicional.

La plataforma de prototipado en sí es engañosamente simple, pero está diseñada estratégicamente:‍

• Base preconfigurada: Una aplicación Next.js con nuestros componentes del sistema de diseño Spring, ya estilizados con clases de Tailwind que la IA entiende. Se acabó el explicar convenciones CSS personalizadas. La IA puede usar inmediatamente patrones familiares con los que ha sido preentrenada.
• Limitaciones inteligentes: Reglas de Cursor que guían a la IA hacia un buen uso del sistema de diseño. La IA sabe usar nuestra biblioteca de iconos, sigue nuestras convenciones de espaciado y estructura los diseños según nuestros patrones.
• Estructura básica de la aplicación: Barra de navegación, área de lienzo, barra lateral izquierda y paneles derechos preconstruidos que reflejan la estructura de nuestro producto para las experiencias de Diseño y Panel de control. Los diseñadores pueden centrarse en su función específica sin tener que reconstruir la interfaz desde cero cada vez. También permite que los diseñadores contribuyan a mejorar la estructura base para que otros la reutilicen, de forma similar a nuestras plantillas de diseño.
• Canal de despliegue: Integrado con Webflow Cloud para que los prototipos se puedan compartir al instante mediante una URL. Se acabaron las grabaciones de pantalla o las capturas estáticas. Las partes interesadas, los colegas y los participantes de la investigación pueden sentir realmente el software interactuando con el prototipo real. También hemos aprovechado la oportunidad para "probar nuestra propia medicina" y dar feedback al equipo de ingeniería sobre cómo mejorar los flujos de trabajo de despliegue en Webflow Cloud.
• Materiales educativos: Se publicaron guías de configuración paso a paso, mejores prácticas de prompts y tutoriales en vídeo para que el equipo se pusiera al día sin problemas. Descubrimos que el proceso de configuración es tan importante como la plataforma en sí. Organizamos un "Día de Construcción" para animar a todo el equipo a incorporarse y crear sus ideas. Planeamos seguir organizando sesiones de día completo con más miembros del equipo de Diseño y otras áreas.

El flujo de trabajo completo es: Clonar repositorio → Abrir en Cursor (u otro IDE) → Empezar a escribir prompts → Desplegar y compartir.

Ejemplos reales de nuestro equipo

La mejor forma de entender este enfoque es a través de los prototipos que hemos construido. Cada uno resolvió un desafío de diseño diferente y nos enseñó algo nuevo sobre lo que es posible cuando puedes construir experiencias funcionales en lugar de describirlas.

Gestión de estado del asistente de IA

¿Cómo comunicas una experiencia de asistente compleja y de múltiples superficies a las partes interesadas? Construimos un prototipo funcional con integración real de la API de Anthropic, gestión del estado de la conversación y puntos de entrada contextuales. En lugar de explicar cómo podría funcionar un Asistente de IA en nuestra plataforma, pudimos mostrarlo y construirlo más rápido que creando pantallas estáticas en Figma.

Comportamiento de la línea de tiempo de interacciones

Necesitábamos validar controles de animación complejos para nuestra nueva línea de tiempo de interacciones. Construimos una versión funcional con controles multipista sofisticados que parecían simples esquemas. Esto nos enseñó que la fidelidad de la interacción puede ser independiente de la fidelidad visual. Pudimos validar el modelo de interacción sin distraernos con detalles visuales. Esos patrones ya se están implementando en producción.

Simulación de control de acceso

Probar estados de permisos granulares en nuestro CMS parecía imposible de documentar con claridad. Un miembro del equipo creó una simulación funcional que nos permitió experimentar cómo se sentirían realmente las jerarquías de permisos complejas para los usuarios. Descubrimos problemas de UX que habrían sido invisibles en las especificaciones escritas; esto fue una exploración funcional de conceptos de producto complejos, no solo maquetas de interfaz.

Mapas de desplazamiento

¿Cómo validas si una visualización analítica compleja será realmente útil para los diseñadores? Necesitábamos probar los mapas de desplazamiento: una vista visual, página por página, de hasta dónde se desplazan los visitantes, con degradados tipo mapa de calor y superposiciones dinámicas. Construimos un prototipo funcional que nos permitió experimentar los patrones de interacción reales, probar la claridad visual de diferentes enfoques de degradado y validar si la regla de desplazamiento persistente se sentiría útil o intrusiva. Esto nos ayudó a ajustar las interacciones y la experiencia de una función tan visual antes de comprometernos con la implementación completa.

Cada prototipo nos enseñó algo nuevo sobre este enfoque y nos proporcionó excelentes demostraciones para las críticas de diseño y las reuniones de presentación a nivel organizacional.

Primeros pasos: lo que hemos aprendido

Empieza por la configuración

La configuración técnica es crucial, pero a menudo se pasa por alto. Invierte tiempo en crear una experiencia de incorporación fluida, porque la fricción puede acabar con la adopción. Tendrás que ayudar a tu equipo a sentirse cómodo usando la terminal y algunos comandos básicos de git.

Integración del sistema de diseño

La IA necesita patrones coherentes. Enséñale sobre tu sistema de diseño, añade componentes, tipografía y reglas de color. Te encontrarás experimentando y actualizando las reglas y los prompts del sistema para obtener mejores resultados con menos intentos.

Saber redactar prompts es una habilidad

Redactar buenos prompts requiere entender tanto el problema de diseño como la forma en que los modelos de IA procesan el contexto. Hemos desarrollado mejores prácticas internas y las compartimos a través de formación. Por ejemplo:

• Evita: "Crea un sistema de comentarios", eso es como pedir "café" cuando en realidad quieres un "espresso venti helado con leche de avena, azúcar moreno y un toque extra de canela".
• Prueba con: "Crea una función de comentarios con un interruptor en la barra de navegación que cambie al modo de comentarios, oculte la barra de herramientas izquierda, reemplace el panel derecho con una lista de comentarios y permita a los usuarios hacer clic en los elementos del lienzo para añadir comentarios en hilo con marcas de tiempo". Planificar los detalles de la interacción desde el principio (cambios de estado, comportamiento de la interfaz, estructura de datos) conduce a resultados mucho mejores que iterar a través de peticiones vagas.

Piensa primero en la interactividad

El mayor cambio de mentalidad es empezar por el comportamiento en lugar de por la apariencia. ¿Cómo debería sentirse esto? ¿Cómo debería responder? El pulido visual puede venir después (nada convence más a un jefe de producto escéptico que un prototipo que realmente responde a sus clics).

Fomenta el intercambio

Creamos un canal de Slack dedicado donde los miembros del equipo comparten sus prototipos, técnicas y aprendizajes. Esto motiva a otros a superar el obstáculo de la configuración inicial, enseña estrategias de redacción de prompts efectivas y entusiasma a todos sobre lo que es posible. Ver a los colegas construir prototipos impresionantes es la mejor publicidad para la plataforma.

La visión general

Compartimos este enfoque porque creemos que representa un cambio fundamental en la forma en que se crean los productos digitales. A medida que la IA facilita la ejecución, las ideas cobran más valor, pero no cualquier idea. Los diseñadores y creadores que puedan transformar rápidamente conceptos centrados en el usuario en prototipos funcionales, y luego validarlos con interacciones reales, tendrán una ventaja enorme.

Tampoco se trata de reemplazar las herramientas de diseño tradicionales. Se trata de añadir una nueva capacidad a nuestro kit de herramientas, que siempre está en expansión y evolución. Figma sigue siendo esencial para el diseño visual, los sistemas de diseño y la colaboración. Pero cuando necesitamos validar flujos de usuario complejos, probar cómo experimentarán realmente los clientes las nuevas funciones o comunicar interacciones sofisticadas, nuestra plataforma de prototipado se ha vuelto indispensable.

Las líneas entre el diseño y el desarrollo se están desdibujando, y eso crea oportunidades para los diseñadores dispuestos a ampliar su caja de herramientas. No nos estamos convirtiendo en desarrolladores. Nos estamos convirtiendo en creadores capaces de combinar el pensamiento de diseño con la capacidad técnica, manteniendo nuestro enfoque en las necesidades del usuario para crear mejores productos para quienes los utilizan.

¿Qué sigue?

Seguimos evolucionando la plataforma basándonos en los comentarios del equipo y explorando formas de compartir lo que aprendemos con la comunidad de diseño en general. También estamos investigando cómo conectar mejor nuestra plataforma de prototipado con el desarrollo de producción, creando caminos más sólidos desde el prototipo validado hasta la función final, aprovechando nuestro sistema de diseño de producto. El futuro del diseño es interactivo, colaborativo y se basa en la experimentación rápida.

La pregunta no es si la IA cambiará nuestra forma de diseñar, sino si aprovecharemos ese cambio para potenciar nuestras capacidades creativas o si veremos cómo el mundo avanza sin nosotros. En Webflow, hemos decidido construir el futuro. ¿Y tú?

‍