https://www.shiftr.pro/

Aprende a conectar Figma y un montón de herramientas más con MCPs, usa Skills y experimenta con la UI generativa. Un curso para automatizar tareas, generar documentación y llevar tu diseño más allá de lo manual.

<aside>

Estado: 🟢 Comienza en enero/febrero 🐥  Actualizado 6 de enero de 2026

</aside>

<aside>

Descripción

MCPs, Skills y UI Generativa para diseñadores

Curso práctico para entender y trabajar con MCPs, skills y MCP-UI, y cómo conectar Figma, IA y flujos diseño–dev para construir interfaces y sistemas preparados para UI generativa.

</aside>

<aside>

Perfil recomendado

• Diseñadores de producto y UI que quieran ir más allá de Figma.
• Diseñadores interesados en IA aplicada al diseño.
• Profesionales que ya trabajan con Design Systems y quieren acelerar flujos.
• Perfiles curiosos con ganas de experimentar con herramientas emergentes. </aside>

<aside>

Características del curso

• Duración total: 8–10 horas de formación.

• Fechas previstas de las sesiones

  Pendiente de calendarizar (enero/febrero)

• Formato:

  • Sesiones en directo con espacio para preguntas y discusión.
  • Grabaciones disponibles para repaso en cualquier momento.
  • Material complementario en formato asíncrono (videos y recursos).

• Metodología: aprendizaje práctico en Figma con MCPs, variables, plugins y orquestadores.

• Notebook LLM: acceso a un cuaderno interactivo con IA para explorar ejemplos, prompts y casos prácticos de forma guiada.

• Colaboradores invitados: profesionales especializados en IA aplicada al diseño.

• Proyecto aplicado: cada alumno construirá un flujo MCP adaptado a un caso real de diseño digital. </aside>

<aside>

Módulos del curso

Módulo 0 · Introducción a MCPs

• Qué son los Model Context Protocol (MCP) y por qué importan en diseño.
• Diferencias con RAG, agentes y APIs clásicas.
• Casos de uso en workflows de producto digital.
• Experimento IA: Claude vs GPT conectados a un mismo MCP.

Módulo 1 · MCPs en Figma

• Tipos de MCPs:
  • Unidireccionales Figma → LLM: extracción de datos, auditorías, documentación.
  • Unidireccionales LLM → Figma: generación, edición y manipulación de nodos.
  • Bidireccionales: sincronización de tokens, comentarios y assets.
• Cómo conectar Figma a un MCP para automatizar tareas de diseño.
• Todas las tools del MCP de Figma (get_code, get_variable_defs, get_code_connect_map, get_screenshot, create_design_system_rules, get_metadata)
• Conectando con Code Connect de Figma en Design Systems.
• Ejemplos: duplicar, auditar, generar variantes, documentar.
• Plugins y librerías: integración con Dev Mode y variables.
• Experimento: prompt-to-edit en Figma vía Claude.

Módulo 2 · Orquestadores de MCPs

• Qué son los orquestadores y cómo permiten combinar múltiples MCPs.
• Ejemplos: Composio, Storm MCP, MCP-Use, Use-MCP, MCP-UI.
• Creación de flujos que integran Figma, Notion, Slack y repositorios.
• Caso práctico: configurador rápido de MCPs con interfaz visual.
• Experimento: pipeline de sincronización tokens ↔ código ↔ diseño.

Módulo 3 · Claude y Claude Code + MCPs

• Uso de Claude como interfaz natural para controlar MCPs.
• Conversaciones multimodales: texto, imágenes y archivos de Figma.
• Cómo diseñar prompts robustos para MCPs.
• Experimento: Claude generando documentación de un sistema directamente desde Figma.

Módulo 4 · Servidores locales y MCPs propios. Skills.

• Configuración de servidores locales para MCPs en entorno seguro.
• Creación de MCPs en local adaptados a flujos de diseño específicos.
• Creación de Skills para Claude, VS Code, Cursor, etc.
• Integración con APIs internas y repositorios privados.
• Experimento: servidor local que audita accesibilidad en archivos de Figma.

Módulo 5 · Casos prácticos avanzados

• Automatización de auditorías de accesibilidad.
• Generación de exploraciones de UI en múltiples estilos de marca.
• Integración con sistemas de control de versiones (GitHub, Linear, etc.).
• Experimento: creación de dashboards de info de DS.

Módulo 6 · Proyecto final

• Construcción de un flujo MCP aplicado a un caso de diseño real.
• Documentación del proceso y entrega de un prototipo funcional.
• Bonus: toolkit de prompts y repositorio de ejemplos compartidos. </aside>

<aside>

Changelog

</aside>

<aside>

FAQ rápida

¿Necesito saber programar?

¿Qué nivel de Figma necesito?

¿Tendré acceso a las grabaciones?

¿Se actualiza el curso?

</aside>

🌐 Comunidad y extras

Acceso directo a la comunidad de Shift+R, donde podrás:

• Compartir avances y proyectos.
• Resolver dudas con profesores y compañeros.
• Acceder a sesiones abiertas y eventos mensuales en distintas ciudades.
• Toolbox de plugins y prompts para trabajar con MCPs en Figma.
• Ejemplos descargables de flujos y configuraciones.
• Acceso prioritario a nuevos workshops y laboratorios sobre IA aplicada al diseño.