- Con la aparición de las herramientas de prototipado con IA, los diseñadores están pasando de los mockups estáticos a un flujo de trabajo en el que crean directamente prototipos interactivos e incluso implementaciones reales en código
- En startups clave como Perplexity y Vercel, los diseñadores ya se encargan incluso de escribir código frontend y desplegarlo en producción usando herramientas de IA como Cursor, Claude, Lovable y V0
- En branding, también construyen directamente con Lovable herramientas para generar sistemas gráficos y las entregan al cliente, automatizando la expansión de patrones y el mantenimiento de la marca
- La intuición de producto (product intuition) y los fundamentos del diseño gráfico (color, espaciado, criterio visual) siguen siendo capacidades esenciales, mientras que la IA actúa como un acelerador de ejecución
- El rol del diseñador se expande de “dibujar rectángulos” a “comunicar visión y tomar decisiones”, y la claridad de ideas y la velocidad para decidir pasan a ser más importantes que solo dominar herramientas
Flujo de trabajo de branding basado en herramientas de IA
- Nick Patterson (encargado de branding en Lovable, Craft, Maven, etc.) usó Lovable para crear en una hora una herramienta de generación de sistemas gráficos de marca
- En un proyecto de branding para el procesador de pagos Flow Glad, construyó una herramienta Pattern Architect basada en patrones geométricos islámicos
- Una herramienta interactiva que permite al cliente ajustar en tiempo real el radio, la densidad de estrellas, el grosor de línea, el espaciado y más
- En un sprint de 2 semanas (10 días), desarrolló varias versiones de la herramienta de generación de patrones y se la entregó al cliente
- Ahora es posible presentar visuales muy pulidos desde la etapa de moodboard
- Antes se dependía principalmente de referencias del trabajo de otros diseñadores; ahora las piezas creadas por uno mismo ocupan el centro del moodboard
- Ya para el día 2 estaban integrando tipografía y patrones estilo mapa de metro
- Una nueva forma de handoff: entregar herramientas al cliente
- Después de construir la marca, se entrega la propia herramienta para que el cliente pueda expandir y transformar los patrones por su cuenta
- Cuando el cliente pide un “punto medio”, puede expresar su intención ajustando directamente los parámetros
- Esto permite que empresas que se mueven rápido implementen y escalen su marca de inmediato
Uso práctico de herramientas de prototipado con IA
- Pranati Perry (design lead de Vercel V0) usa V0 para generación de assets y prototipado de interacciones
- Creación de un componente tipo cartucho para portafolio: generar un SVG en Figma → convertirlo en una herramienta dinámica en V0
- Con un solo prompt, implementó cambios de color en gradientes SVG, texto dinámico, efectos de transparencia y más
- También creó animaciones con sprites y se prepara para hacer un juego RPG basado en web
- Flujo de trabajo de diseño de producto: etapas previa (Pre), durante (During) y posterior (Post)
- Previa: exploración de ideas en Figma y V0; Figma ya no es la única fuente de verdad del UI
- Durante: escritura de código de producción con Claude, con diseñadores implementando directamente la mayor parte del diseño
- Posterior: Vercel Agent deja comentarios automáticos en los PR para apoyar la revisión de código
- Alcance de uso de V0
- Para prototipos complejos como flujos de billing: en lugar del prototipado spaghetti en Figma, se define el flujo de modales en lenguaje natural
- Herramienta para generar efectos de cubo con dithering para anuncios de conferencias de Next.js y headers de email (trabajo del brand designer Dan)
- Animaciones de botones CTA finalizadas en V0 y entregadas directamente al design engineer
- Tendencias entre usuarios de V0
- Al principio, se usaba sobre todo para landing pages, gráficos y shaders
- Más recientemente, equipos de ventas y PM lo usan para crear software personal para el trabajo
- Los PM generan mockups interactivos para complementar PRD, conectándolos con datos en vivo e integrando IA más allá de los prototipos estáticos
Integración de herramientas de IA en diseño de producto
- Henry Modiset (VP of Design de Perplexity) define el rol del diseñador como resolver problemas + comunicar visión
- Las herramientas de IA se usan como herramientas de comunicación interactiva, enfocadas no en mockups perfectos de apps sino en visualizar direcciones posibles
- Permiten explorar ideas de forma rápida y barata antes de pedir trabajo a ingeniería
- Estado actual del uso de IA en el equipo de diseño de Perplexity
- Equipo de branding: experimenta y combina toda clase de herramientas bajo los principios de velocidad (velocity) y volumen (volume)
- Equipo de diseño de producto: escribe código de producción todos los días con Cursor y Claude Code
- Algunos diseñadores ajustan animaciones en sandboxes de prototipos antes de pasarlas a ingeniería
- Equipo de diseño de juegos: colaboración entre diseñador de mecánicas, diseñador UI y diseñador enfocado en generación musical
- La herramienta más adoptada: Cursor
- Es la herramienta más plenamente integrada desde la perspectiva de diseño de producto
- Para explorar unidades pequeñas (como una animación específica), se usan herramientas sandbox como V0 o Lovable
- El equipo de branding armó un pipeline que va de Midjourney → Sora (video) → generación musical → Frame.io
- El espectro técnico de los diseñadores
- Quienes llevan años escribiendo código de producción usan la IA como acelerador principal
- Diseñadores sin experiencia en código están empezando a aprender para afinar animaciones y agregar detalles de marca
- Gunnar (diseñador), que no tenía experiencia programando, ahora escribe componentes UI en Svelte con Cursor
Cómo contribuyen los diseñadores al codebase
- Implementar ya se volvió table stakes (una capacidad básica esperada de los diseñadores)
- Al aumentar la velocidad de implementación, se puede dedicar más tiempo al pensamiento creativo
- Trabajo de seguimiento que antes tomaba 2 o 3 semanas ahora puede resolverse en 1 semana
- Definir el alcance del prototipo es clave
- Prototipar todo el flujo es ineficiente; en una etapa intermedia conviene generar un PR y pasar a implementación real
- Las herramientas de IA son más efectivas para el prototipado puntual de interacciones
- Para edge cases, describir condiciones en lenguaje natural es más eficiente que hacer mockups uno por uno
- Enfoque para revisión de código y aprendizaje
- Hay que evolucionar más allá del “blind coding” y realmente entender el código que escribe el LLM
- Conviene tratar al LLM como a un “intern”: si se le dan instrucciones técnicas concretas, mejora la calidad del resultado
- En Claude Memory, se puede indicar: “Soy diseñador y quiero aprender cómo funciona el código”, para convertirlo en una oportunidad de aprendizaje
- Para no afectar al equipo de ingeniería, se fija como meta minimizar la huella (footprint)
Evolución del rol del diseñador y criterios de contratación
- Competencias clave del diseñador en la era de la IA
- Intuición de producto (product intuition): capacidad de decidir qué construir y decirle “no” a la mayoría de las ideas
- “¿Por qué usaría la gente esto? ¿Funciona de manera intuitiva? ¿Encaja en el mercado? ¿Es lo bastante atractivo como para dejarlo en la pantalla de inicio?”
- Fundamentos del diseño gráfico: color, espaciado, definición de carácter y capacidad de juzgar qué está bien y qué está mal
- Señales que observa Perplexity al contratar
- Experiencia como founding designer o freelance en solitario: personas acostumbradas a tomar decisiones de manera independiente
- Talento con dualidad entre intuición de producto y dirección de arte
- Voluntad de aprendizaje continuo: como las herramientas cambian rápido, la adaptabilidad es crucial
- Redefinición del rol del diseñador
- Si el diseñador se queda atrapado en “dibujar rectángulos”, no tiene poder
- Con herramientas de IA, puede comunicar con mucha más fuerza la visión que tiene en la cabeza
- La principal ventaja de que los diseñadores programen: “es más fácil hacer directamente algo que explicar lo que estoy pensando”
- Ahora pueden producir en pocos días resultados interactivos y profundos
Estructuras de colaboración y consejos prácticos
- Un entorno donde tanto PM como diseñadores pueden prototipar
- En el peor de los casos genera confusión; en el mejor, produce mejor software
- Hay que volver a los primeros principios: “planear software con herramientas de imágenes estáticas no tiene sentido”
- Los prototipos interactivos son la forma natural de diseñar software
- Hace falta una cultura clara de decisión y definición de ownership
- Cuando cualquiera puede construir, se requiere capacidad de decisión aún más rápida
- La fortaleza del diseñador está en elegir dirección en medio de la incertidumbre
- Consejos para aplicarlo en la práctica
- La idea es 80% y el uso de herramientas es 20%
- Hace 2 o 3 años se programaba sin IA, pero hoy el cambio ya es difícil de imaginar
- Con conversación en lenguaje natural, una lista de ideas puede convertirse en un prototipo
- Es importante aprender a través del error, y hace falta una cultura organizacional que ofrezca espacio para experimentar
Conclusión — El espectro del diseño que la IA está ampliando
- La IA no actúa solo como una herramienta para acelerar a los diseñadores, sino como un medio para ampliar el rango de resultados creativos
- Ahora los diseñadores evolucionan de usuarios de herramientas a creadores de herramientas, moviéndose entre código, IA y gráficos
- La era del diseño después de Figma se está moviendo hacia la creación de “ideas que interactúan, no imágenes estáticas”
- Con la masificación de la IA, estamos entrando en una era en la que importa más “qué quieres construir” que “quién puede implementarlo”
Aún no hay comentarios.