Diseño con IA: Claude, Codex, Figma | Guía Completa
Aprende a diseñar con IA usando Claude de Anthropic, Codex de OpenAI, Google Stitch, Mobbin y Figma. Esta guía completa te muestra cómo utilizo herramientas de IA en flujos reales de diseño de productos, desde ideación temprana y pensamiento UX hasta wireframing
Descripción completa
Aprende a diseñar con IA usando Claude de Anthropic, Codex de OpenAI, Google Stitch, Mobbin y Figma. Esta guía completa te muestra cómo utilizo herramientas de IA en flujos reales de diseño de productos, desde ideación temprana y pensamiento UX hasta wireframing, diseño de alta fidelidad, sistemas de diseño, prototipado e interfaz lista para producción. Exploraremos dónde encajan Claude, Codex, Google Stitch, Mobbin y Figma en el proceso de diseño, cómo evitar resultados genéricos generados por IA, y cómo los diseñadores pueden trabajar más rápido, tomar mejores decisiones y consumir menos tokens sin perder estilo, estructura ni control. 🔗 ENLACES CLAVE 📣 ÚNETE A LA COMUNIDAD: https://uicollective.co/ ❎ Sígueme en X: https://x.com/KirkMDesign ¿Por qué unirte a UI Collective Academy? Acceso a cursos premium, descargas premium y mucho más en camino (estoy construyendo esto principalmente solo...intentando hacer la educación de diseño accesible para todos, ¡el apoyo ayuda mucho!). ↪️ ¿Necesitas un sistema de diseño? (también incluido en la academia): https://collectivekit.co/ 🔗 OTROS VÍDEOS DE SISTEMAS QUE VER Construir un Sistema de Diseño: https://youtu.be/opTANvl9G1g Sistema de Diseño Complejo y Configuración de Variables en Figma: https://youtu.be/L-tpK7Eeuow Vídeo de Diseño con Claude: https://youtu.be/eXlSgQmz02E 🔗 MÁS ENLACES Déjanos construir o reparar tu sistema de diseño: https://designsystemlabs.co/ 📣 Ahorra 20% en el plan anual de Mobbin: http://mobbin.com/uicollective Google Stitch: https://stitch.withgoogle.com/ Claude Design: https://claude.ai/design kirkland@uicollective.co 0:00 Una Introducción 0:52 La IA No es una Herramienta, la IA es un Flujo de Trabajo 6:43 La Pila de Diseño con IA 7:32 Claude vs Codex 9:16 Configuración de Diseño con IA (Habilidades de Figma y Figma MCP) 16:31 Google Stitch 21:27 Dónde Uso Stitch en Mi Flujo de Trabajo 23:29 Claude Design 27:01 Salida de Claude Design 28:35 Cuándo Usar Google Stitch con Claude Design 31:44 Limitaciones de Claude Design 32:35 Experimento de Comparación Claude y Codex 38:25 Mejor Uso de Tokens de IA 40:45 Sistemas de Diseño e IA 42:04 Limitaciones de Claude Design en Sistemas de Diseño 45:32 Construir Design Tokens con IA 49:01 Variables de Figma e IA 52:26 Componentes del Sistema de Diseño e IA 58:32 Entrenando IA en Nuestro Sistema de Diseño 1:01:34 Habilidades de Claude para Sistemas de Diseño 1:08:04 Componentes y Habilidades de Claude 1:13:48 Añadiendo Habilidades de Claude a Codex 1:15:09 IA e Investigación de Diseño con Mobbin 1:17:24 Construyendo UI's de Producción con Claude Code 1:22:43 Construyendo UI's con ChatGPT 1:24:26 Refinando Nuestro Diseño con IA 1:25:13 Enviando a Figma y Resultado Final 1:27:08 Conclusión
Capítulos
- 0:00 An Introduction
- 0:52 AI is Not a Tool, AI is a Workflow
- 6:43 The AI Design Stack
- 7:32 Claude vs Codex
- 9:16 AI Design Setup (Figma Skills & Figma MCP)
- 16:31 Google Stitch
- 21:27 Where I Use Stitch In My Workflow
- 23:29 Claude Design
- 27:01 Claude Design Output
- 28:35 When to Use Google Stitch With Claude Design
- 31:44 Claude Design Limitation
- 32:35 Claude and Codex Comparison Experiment
- 38:25 Best Use of AI Tokens
- 40:45 Design Systems and AI
- 42:04 Claude Design Design System Limitations
- 45:32 Building Design Tokens with AI
- 49:01 Figma Variables and AI
- 52:26 Design System Components and AI
- 58:32 Training AI On Our Design System
- 61:34 Design System Claude Skills
- 68:04 Components and Claude Skills
- 73:48 Adding Claude Skills to Codex
- 75:09 AI and Design Research with Mobbin
- 77:24 Building Production UI’s with Claude Code
- 82:43 Building UI’s with Chat GPT
- 84:26 Refining Our AI Design
- 85:13 Pushing to Figma and Final Result
- 87:08 Outro