The New Full-Stack Designer
📚 Temas principales
- El proceso de diseño con IAMarvin Schwaibold explica cómo pasó de usar Figma como espacio principal a emplearlo como bloc de ideas, mientras herramientas como Codex y Claude Code convierten rápidamente esas ideas en prototipos funcionales. 0:30
- El estudio de diseño de ShopifySu equipo trabaja en la renovación de la experiencia de administración y en Sidekick, que permite a los comerciantes gestionar sus tiendas y hacer cambios mediante conversaciones. 3:37
- Proyectos y proceso creativoMarvin muestra trabajos de su antiguo estudio Molly, un shader de césped creado con IA y un carrusel que requirió 91 intentos para ajustar sus interacciones. 5:44
- Evaluación de sitios webEl equipo revisa sitios de Endstack, SkillSync, Instaplay, Mintlify, Knowlify e Instinct Space, prestando atención a la jerarquía, el movimiento y la facilidad de uso. 31:04
✨ Conclusiones clave
- La IA acelera la ejecución, no el criterioLos diseñadores siguen siendo responsables de dirigir el proceso, evaluar las opciones y decidir qué resultado cumple con el nivel de calidad deseado. 1:33
- Los prototipos ayudan a alinear equiposCrear experiencias tangibles rápidamente facilita compartir ideas, obtener comentarios y avanzar más que depender únicamente de documentos de requisitos. 14:00
- Exponer variables permite iterar mejorHerramientas como DialKit hacen visibles los parámetros de una animación o shader para que el diseñador pueda probar ajustes y detectar errores en sus propias decisiones. 24:54
- Una página debe tener un foco claroLas interfaces deben destacar la acción principal y evitar competir por la atención con demasiados botones, funciones o mensajes simultáneos. 33:08
- Menos contenido puede comunicar másEditar y organizar la información en secciones claras ayuda a que los usuarios entiendan el producto y sepan dónde concentrarse. 50:40
🧠 Lecciones aprendidas
- Diseñar para explorarLa divulgación progresiva permite que los usuarios descubran más contenido sin sentirse abrumados; cada sección de una página puede funcionar como entrada a una exploración más profunda. 8:21
- Las interacciones pequeñas importanAnimaciones y detalles cuidadosamente ajustados pueden transmitir calidad y demostrar el nivel de atención que una empresa pone en su trabajo. 9:23
- Mostrar el producto en acciónLos sitios deben explicar rápidamente qué hace el producto y permitir que las personas experimenten su valor antes de pedirles que se registren. 41:55
- El movimiento debe ayudar a entenderLas animaciones y las ilustraciones deben aportar información; los recursos visuales decorativos que no aclaran el producto pueden distraer. 38:25
- Respetar el desplazamiento naturalEl scroll nativo y las zonas interactivas fáciles de usar hacen que la experiencia se sienta más fluida y menos obstructiva. 56:06
- Tantear y copiar para aprenderMarvin recomienda experimentar con las herramientas de IA, usar referencias visuales y estudiar cómo están construidas las interacciones para desarrollar criterio y habilidades. 29:01
🏁 Conclusión y próximos pasos
- Adoptar un enfoque de diseño más integralLa IA permite que diseñadores, ingenieros y gestores de producto participen más directamente en crear y probar experiencias funcionales. 25:58
- Probar Blossom CarouselMarvin recomienda el componente gratuito y de código abierto Blossom Carousel para crear carruseles más sólidos y adaptables. 1:04:07
Transcript excerpt
0:00 Today, I'm joined by Marvin Schwaibold, who leads the product design studio at Shopify. He'll give us a behind-the-scenes look at his process, >> [music] >> where we'll see how he's using the latest AI tools to bring his designs to life, then review some viewer-submitted websites. Welcome to another episode of Design Review. Marvin, thanks for joining us. >> Thank you for having me. >> Before we get into your work at Shopify, um I'd love to hear more about your
0:30 process and the tools that you're using today to design with AI. >> I feel like the process itself hasn't really changed. It's still extremely iterative uh and and sequenced out. There's a lot of There's a lot of iterations and variations in the work in and of itself, but the tooling has has definitely shifted a lot from tools like Figma uh and working with aesthetic layouts uh into more of an AI-driven um workflow, where I'll I'll use Figma as a scratch pad for some of the ideas I have, um but then very quickly that'll transcend into into into like real demos
🔒 The full, searchable transcript is available with Pro.
Questions & Answers
Common questions about this video
¿Cómo ha cambiado el proceso de diseño de Marvin con las herramientas de IA?
El proceso sigue siendo iterativo, pero ahora usa Figma principalmente como bloc de notas y pasa rápidamente de las ideas a prototipos funcionales con herramientas como Codex y Claude Code. Así puede probar los resultados en el teléfono o la computadora mucho antes. 1:02
¿Qué papel cumple el diseñador cuando la IA puede generar diseños y código?
El diseñador sigue tomando las decisiones y haciendo el control de calidad. Marvin describe su rol como el de editor: la IA puede producir resultados, pero no sabe por sí sola qué se ve bien ni qué dirección conviene seguir. 2:04
¿Cómo usa Marvin Figma en su flujo de trabajo con IA?
Lo usa como un espacio para bosquejar ideas visuales que le resulta difícil explicar con palabras. Luego comparte esos bocetos con la IA para que entienda mejor las interacciones y los cambios que busca. 20:46
¿Qué aprendió Marvin al recrear césped como un shader?
Descubrió que la IA necesitaba entender no solo las briznas de hierba, sino también el terreno debajo de ellas. Al darle un mapa topográfico de las alturas y profundidades, pudo guiarla para recrear una escena más realista. 23:21
¿Qué consejo ofrece Marvin a quienes experimentan con herramientas de IA?
Recomienda experimentar sin rendirse después del primer intento: describir lo que no funciona, compartir referencias visuales y seguir iterando. También sugiere intentar copiar interacciones que admiras, porque el proceso ayuda a comprender cómo están construidas. 29:32
¿Qué principio de diseño destacaron al revisar varias páginas web?
Cada página debería tener un objetivo principal claro y guiar la atención hacia él. Cuando demasiados elementos compiten, el usuario no sabe qué mirar o hacer; conviene reducir el contenido y revelar la información progresivamente. 33:08
¿Por qué Marvin desaconseja el scroll jacking y el desplazamiento suavizado impuesto?
Porque alteran la velocidad y la sensación de desplazamiento a las que la gente está acostumbrada, haciendo que la navegación se sienta lenta y menos receptiva. Recomienda conservar el desplazamiento nativo y no obstaculizar la interacción del usuario. 56:24
¿Qué es Blossom Carousel?
Es un carrusel gratuito y de código abierto que ofrece distintas variantes, permite deslizar y desplazarse con el trackpad, y puede adaptarse a móviles. Marvin lo presenta como una forma de mejorar las interacciones de carrusel. 1:04:07
Related summaries
Why Inference Matters 12x More Than Training | YC Paper Club
This Is How You Should Actually Make Launch Videos
AI Safety Fact vs. Fiction | YC Paper Club
Personal AI Is the New Personal Computer
Why OpenAI Is Racing to Make Computer Use Superhuman
