Cómo crear Apps usando tu Design System e IA (Vibe Coding)

Описание: En este vídeo aplicamos tu Design System creado con IA para generar un dashboard funcional usando tokens, variables y componentes (control total sin dejar que la IA decida por ti). Verás cómo copiar tu librería a un nuevo proyecto en Antigravity, crear páginas (projects/reports/settings), iterar con prompts y hasta cambiar un token para actualizar toda la UI. Además, conectamos Figma Dev Mode vía MCP para convertir un componente en HTML/CSS y hacerlo interactivo con animaciones.

Únete al grupo de whatsapp para estar al día de todo: https://chat.whatsapp.com/JNmUZX5aRUB...


00:00 IA crea el dashboard con tus tokens y menos trabajo (introducción)
00:58 Contexto: parte 3 del sistema de diseño con IA (qué se vio en vídeos 1 y 2)
02:00 De Figma a herramientas de “vibe coding” para generar HTML/CSS (lo veremos hoy)
03:17 Tour del UI kit: tokens, estilos y componentes creados por IA
05:21 Cómo llevar el Design System a un proyecto nuevo (carpetas, CSS/JS/tokens/README)
07:02 Prompt para generar un dashboard funcional usando tus componentes
08:19 Comunidad: formato, mentorías, masterclasses y quedadas semanales
11:32 Resultado: dashboard generado + correcciones con prompts
12:40 Crear el resto de páginas (projects/reports/settings) con los mismos tokens
15:04 Cambiar un token (color) y ver el impacto global en todo el dashboard
17:29 De Figma a IA con MCP: exportar un componente/pantalla a HTML/CSS
20:13 Conectar MCP de Figma en Antigravity + pegar link de selección
22:15 Iteración: añadir animaciones e interactividad al componente exportado
24:36 Conclusión: diseñador → product designer + ideas de apps futuras


❤️ Curso Figma Completo : https://oscarrgb.com/curso-diseno-web...

✅ Descarga Figma en: https://oscarrgb.com/empezar-figma

🏆 Suscríbete para más:
   / @oscarrgb