Design Systems + Claude Code: genera componentes web sin escribir código
Ven a descubrir todo lo que puedes construir con Claude Code a partir de un Design System open‑source o desde tu propio Design System en apenas 3 horas —the old-fashioned way— en persona, codo a codo, sin prisas y con foco.
📌 ¿A quién está dirigido?
Este taller está pensado para diseñadores de Figma que quieren aprender a usar Claude Code para convertir sus diseños en código real, sin escribir ni una sola línea. Claude Code hará TODO por nosotros… ¡Suena bien, ¿verdad?!
📌 ¿Qué NO es este taller?
No es un curso de programación. No vas a salir sabiendo React. No necesitas saber HTML, CSS ni JavaScript. Tampoco estarás picando código.
📌 ¿Es requisito haber hecho el primer taller?
Respuesta simple: no. Pero fíjate que en el primero nos dedicamos más tiempo a explicar cosas más básicas: el terminal, cómo instalar paquetes, los modelos, las IDEs, etc.; en el segundo también lo comentamos, pero más rápidamente.
📌 Lo que aprenderás
Pasaremos rápidamente por el porqué del terminal, qué es Claude Code, el setup inicial y el Figma MCP y otros MCPs
¿Tu librería de Figma ya es un Design System? Aclaramos qué es y qué no, y cómo se relaciona con los Styles Guides y el Atomic Design
Vamos a repasar rápidamente algunos términos populares: components, design tokens, frameworks JavaScript
Dedicaremos tiempo a repasar algunos repositorios públicos de design systems open source y para hablar del Storybook y el Chromatic
Generar código sin codear: con Claude Code, vamos a crear un Design System a partir de los componentes diseñados en Figma
Al terminar, crearemos una página completa con componentes JavaScript desde un Design System — el nuestro o uno open source
📌 Cómo lo haremos
Primero lo haré yo de principio a fin, siempre abierto a preguntas o cambios a propuesta de los asistentes. Y sí, Claude a veces se equivoca — veremos cómo corregirlo y cómo eso también forma parte del proceso. Después, facilitaré a todos el vídeo completo del taller, todos los prompts utilizados y una copia del código generado, para que cada uno pueda, a su ritmo, repetir cada paso en casa y llevárselo a su portfolio o integrarlo en su flujo de trabajo. Además, tendremos un espacio en Slack donde todos los asistentes podrán seguir el tema y resolver dudas.
📌 Qué vas a necesitar
Puedes venir solo a observar —habrá pantallas compartidas— o traer tu portátil si quieres ir probando cosas en directo (dedicaremos los primeros minutos a preparar los equipos de quienes traigan portátil. En este caso, necesitarás una suscripción Pro o Max de Claude). La conexión a internet la proporciona el espacio. Habrá café, té, agua y algo más, pero siéntete libre de traer tu bocadillo o algo para picar.
📌 Agenda
17:30–18:00 · Puertas abiertas: merienda y calentando motores
18:00–21:00 · Sesión práctica con pausa intermedia incluida
21:00–21:30 · Un momento para picar algo y conocernos un poco mejor
🚀 Sobre el organizador
Carlos Alberto es Senior UX Designer en el Grupo Alpega. Años atrás organizaba los meetups de Sketch App en Barcelona y, como tantos, acabó migrando a Figma. Desde hace meses —y eso es mucho en el mundo de la IA— genera código a partir de sus diseños en Figma, especialmente para el Design System de su empresa, y dedica las noches a su side project open source. Después de probar Copilot, Cursor y Claude… ya tiene su favorito. 😄