Construí una App Completa en 2 Horas Sin Pasar por Figma
Dos horas. Eso fue lo que tardé en pasar de un terminal en blanco a una aplicación completamente interactiva con micro animaciones, hover states y un design system completo — todo sin abrir Figma ni una sola vez.
Y después subí todo de vuelta a Figma como capas editables.
Sé que esa frase probablemente te cortocircuitó el cerebro si eres diseñador. A mí también. El flujo de trabajo que todos hemos interiorizado — diseñar en Figma, pasárselo a desarrollo, esperar tres semanas, recibir algo que no se parece en nada al mockup — se acaba de dar la vuelta por completo. Primero construyes, después sincronizas con Figma. Diseño desde el código. Y antes de que me digas que esto es un flujo de desarrollador disfrazado de herramienta de diseño, déjame mostrarte lo que realmente construí, porque el resultado engañaría a cualquier director de diseño haciéndole creer que salió del archivo Figma de un diseñador de producto senior.
El secreto es la integración de Claude Code con Figma MCP combinada con un flujo de trabajo que la mayoría de los diseñadores aún no ha descubierto. Pasé una semana probando tres casos de uso específicos — traducción de design systems, prototipado rápido a partir de capturas de pantalla y conversión completa de landing pages — y los resultados me hicieron replantearme qué significa "diseñador" en 2026.
Pero hay un detalle que nadie menciona en los tutoriales: si configuras mal el entorno, te vas a quemar los créditos en una hora. Lo aprendí de la manera cara, y voy a ahorrarte cometer el mismo error.
El Error de Configuración que Cometen Casi Todos los Diseñadores
Lo que confunde a los diseñadores la primera vez que se encuentran con Claude Code es esto: escuchan "Claude," abren claude.ai, seleccionan Opus 4.6 en el selector de modelo y empiezan a escribir prompts para generar código. Treinta minutos después, se quedaron sin créditos y tienen un archivo HTML a medio terminar con el que no pueden hacer nada.
Así no funciona esto. Para nada.
Claude Code se ejecuta dentro de un entorno — piensa en él como un espacio de trabajo que organiza tus archivos, gestiona tus agentes de IA y te da un contexto de desarrollo adecuado. La herramienta funciona mejor cuando se combina con un editor como Cursor, aunque también puedes ejecutarla a través de AntiGravity de Google u otras plataformas similares. Yo uso Cursor porque la gestión de archivos se siente natural si alguna vez has usado VS Code.
El entorno importa porque Claude Code necesita ver la estructura de tu proyecto. Necesita saber dónde está tu CSS, dónde están tus archivos HTML, qué assets has importado. Cuando simplemente chateas con Claude en una ventana del navegador, genera fragmentos de código aislados sin conocimiento del proyecto. Cuando lo ejecutas dentro de un entorno adecuado, genera código que encaja en tu estructura de archivos real, referencia rutas reales y construye sobre lo que ya existe.
La primera vez, configurarlo me llevó unos 15 minutos. Ahora puedo levantar un proyecto nuevo en menos de 3 minutos. Este es el proceso:
Paso 1: Contrata el plan adecuado. Claude Code ofrece planes por niveles. El plan "Pro" funciona para experimentar y aprender. Si estás trabajando en proyectos reales — especialmente con múltiples agentes ejecutándose simultáneamente — el plan "Max" te da créditos ilimitados y soporte para agentes en paralelo. Para diseñadores que están probando, Pro está bien. Cuando te enganches (y te vas a enganchar), actualiza.
Paso 2: Instala Claude Code como extensión dentro de Cursor. Esto conecta la IA directamente a tu espacio de trabajo del proyecto. Cada prompt que escribas tiene contexto completo de tus archivos.
Paso 3: Empieza en local. Crea tu carpeta de proyecto, inicialízala y trabaja en local primero. La integración con GitHub viene después, cuando quieras alojar o compartir. No compliques el inicio.
Ese último punto importa más de lo que parece. He visto a tres amigos diseñadores intentar configurar Claude Code creando primero un repositorio en GitHub, configurando pipelines de despliegue, montando CI/CD — todo antes de escribir una sola línea de código. Estaban siguiendo tutoriales de desarrolladores, no flujos de trabajo de diseñadores. Empieza en local. Haz que tu primera versión funcione en tu máquina. Lo de la nube puede esperar.
Ahora, la sincronización con Figma — esta es la parte que lo cambia todo para los flujos de diseño, y configurarla es más sencillo de lo que esperarías.
Conectando Claude Code con Figma (La Parte que lo Cambia Todo)
Sincronizar Claude Code con Figma requiere un token de acceso personal. Así es exactamente cómo generar uno:
- Abre Figma, ve a la configuración de tu cuenta
- Navega hasta la sección "Personal Access Tokens"
- Genera un nuevo token con permisos completos — lectura, escritura, todo
- Establece la expiración a 90 días (el máximo)
- Copia ese token inmediatamente — Figma solo lo muestra una vez
De vuelta en Claude Code, ejecuta el comando de autenticación con tu token. Una vez conectado, tienes un puente bidireccional entre tu entorno de código y Figma. Los diseños fluyen en ambas direcciones.
¿Por qué importa esto? Porque el flujo de trabajo tradicional es unidireccional. El diseño va a desarrollo. Desarrollo lo interpreta. Las cosas se pierden por el camino. Con la integración de Figma en Claude Code, puedes:
- Extraer especificaciones de diseño directamente de Figma a tus prompts de código
- Enviar HTML/CSS generado de vuelta a Figma como capas vectoriales editables
- Mantener ambos entornos sincronizados mientras iteras
Siendo honesto — cuando escuché por primera vez "enviar código de vuelta a Figma," asumí que crearía alguna captura rasterizada de mala calidad. Pues no. El pipeline de HTML to Design convierte tu código generado en capas reales de Figma. Texto editable. Frames redimensionables. auto-layout correcto. No es pixel-perfect siempre, pero es lo suficientemente preciso para seguir iterando en cualquier dirección.
Ese flujo bidireccional desbloquea algo que no esperaba: la capacidad de prototipar en código (donde las interacciones realmente funcionan) y luego refinar en Figma (donde el pulido visual es más rápido). Lo mejor de ambos mundos. Pero me estoy adelantando — déjame mostrarte los tres casos de uso donde esta configuración realmente brilla.
Caso de Uso 1: Traducir un Design System a Código de Producción
Este fue mi primer experimento, y me convenció del flujo de trabajo completo.
Tenía un design system existente en Figma — escala tipográfica, paleta de colores, definiciones de sombras, variantes de botones, tokens de espaciado. El tipo de base que todo equipo de producto construye y después lucha para traducir a código que realmente coincida. He estado en proyectos donde el archivo Figma del design system y la implementación en CSS empezaron a divergir en dos semanas. Pasa porque mantener ambos manualmente es tedioso y propenso a errores.
Esto es lo que hice: abrí el archivo del design system en Dev Mode de Figma, seleccioné las páginas que contenían mis tokens principales y copié las referencias de los componentes. Después entré en Claude Code con un prompt específico describiendo lo que quería — una implementación completa en CSS del design system con custom properties adecuadas, tipografía responsiva y clases de componentes.
Claude Code generó los archivos CSS y HTML en unos 4 minutos.
La tipografía coincidía. Los colores eran los valores hexadecimales exactos extraídos de las especificaciones de Figma. Las variantes de botones tenían el padding, border-radius y estilos de estado correctos. Abrí el HTML generado en Live Server (una extensión simple de vista previa en navegador) y lo comparé lado a lado con el archivo de Figma.
No era perfecto — los valores de sombra necesitaban un ligero ajuste, y uno de los pesos tipográficos se estableció en 500 en lugar de 600. Pero eran arreglos de 30 segundos. La precisión estructural era algo que le habría tomado a un desarrollador un día entero construir desde cero, asumiendo que interpretara correctamente las especificaciones de Figma.
Consejo profesional: Cuando traduzcas design systems, alimenta a Claude Code una categoría a la vez. No vuelques todo tu sistema en un solo prompt. Haz primero la tipografía, luego los colores, después las sombras y luego los componentes. El resultado es más preciso cuando cada prompt tiene un alcance específico.
La verdadera recompensa llegó dos semanas después cuando un cliente solicitó cambios en el estilo del botón principal. Lo actualicé en Claude Code, el CSS se propagó por todas las páginas que usaban ese componente, y envié el diseño actualizado de vuelta a Figma para la revisión del cliente. Un solo cambio, ambos entornos actualizados. Sin confusión de "¿cuál archivo es la fuente de la verdad?".
Solo esto justificaría el tiempo de configuración. Pero el segundo caso de uso fue donde más me divertí.
Caso de Uso 2: Prototipado Rápido a Partir de Capturas de Pantalla
Imagina esto. Estás navegando por Dribbble, o explorando el sitio de un competidor, o mirando una captura de pantalla que te envió un cliente con la nota "algo así." Normalmente, abrirías Figma, recrearías el layout desde cero, aproximarías los espaciados, adivinarías la escala tipográfica. Una hora después, tienes un mockup estático.
Con Claude Code, tomé una captura de pantalla de un diseño que me gustó — un dashboard SaaS con una barra lateral de navegación, tarjetas de métricas y una tabla de datos — la arrastré a mi prompt de Claude Code y describí lo que quería: "Crea un archivo HTML único con CSS embebido que recree este layout. Incluye animaciones hover en las tarjetas y un toggle suave de la barra lateral."
Noventa segundos después, tenía un prototipo funcional en mi navegador.
No un mockup. No un wireframe. Una página funcional e interactiva con hover states que realmente respondían a mi cursor, una barra lateral que se colapsaba con una transición CSS suave, y tarjetas de métricas que se escalaban correctamente al redimensionar la ventana.
¿Era listo para producción? No. Los datos eran de relleno, los breakpoints responsivos necesitaban trabajo, y algunos espaciados estaban ligeramente desajustados. Pero como punto de partida para exploración — para probar si una dirección de layout se siente bien antes de invertir horas en diseño de alta fidelidad — no tiene rival.
He empezado a usar este flujo de trabajo en llamadas de descubrimiento con clientes. En lugar de presentar mood boards estáticos, muestro prototipos interactivos que construí en los 20 minutos antes de la reunión. Los clientes pueden hacer clic, redimensionar el navegador, ver cómo se mueven las cosas. El feedback es radicalmente mejor porque están reaccionando a algo que se siente real.
La ventaja de velocidad es difícil de exagerar. Una exploración de layout que me tomaba 2-3 horas en Figma ahora toma 5-10 minutos en Claude Code. Puedo generar cuatro enfoques diferentes en el tiempo que antes me tomaba construir uno. ¿Y los que no funcionan? Borro el archivo y sigo adelante. Sin apego emocional a un frame de Figma cuidadosamente elaborado.
Consejo profesional: Para prototipado basado en capturas de pantalla, quédate con archivos HTML únicos con CSS embebido. No le pidas a Claude Code que configure un framework o arquitectura de componentes para exploraciones rápidas. Cuanto más simple sea la estructura de archivos, más rápida será la iteración.
Aquí es donde se pone interesante — porque el tercer caso de uso fue donde encontré los mayores desafíos.
Caso de Uso 3: Convertir una Landing Page Completa de Figma a Código
Esta fue la prueba ambiciosa. Tenía una landing page completa diseñada en Figma — sección hero, grilla de features, testimonios, tabla de precios, footer. Ilustraciones personalizadas, fondos con degradados, la producción completa.
Tomé el enlace de Figma y le pedí a Claude Code que convirtiera el diseño completo a HTML y CSS.
El primer resultado fue... irregular. La estructura estaba bien — cada sección existía, el flujo del layout coincidía con el diseño, la tipografía era correcta. Pero las ilustraciones personalizadas no se tradujeron (esperado — la IA no puede recrear arte vectorial desde una referencia de enlace), y algunos ángulos de degradado estaban desviados.
Esto es lo que aprendí y lo que salvó el proyecto: no envíes la página entera de una vez. Divídela en secciones.
Reinicié el proceso, enviando primero a Claude Code el enlace de la sección hero. El resultado fue significativamente más preciso — el degradado coincidía, la tipografía del titular era correcta, el botón CTA tenía el padding y border-radius correctos. Lo aprobé, luego envié la sección de features, después los testimonios, construyendo la página de forma incremental.
Sección por sección, la landing page tomó forma en unos 45 minutos. Cada prompt estaba enfocado, y Claude Code podía dedicar toda su atención a lograr que una sección quedara bien en lugar de aproximar una página entera.
Las ilustraciones personalizadas fueron la única brecha real. Terminé exportándolas desde Figma como SVGs y colocándolas manualmente en la carpeta del proyecto. Claude Code luego las referenciaba correctamente en los prompts siguientes. No completamente automatizado, pero un paso manual menor en un proceso por lo demás optimizado.
Para el pulido final, usé prompts iterativos: "Añade un toggle de dark mode que transicione suavemente" (tomó 2 minutos), "Haz que las tarjetas de precios se animen al hacer scroll" (90 segundos), "Añade un menú de navegación tipo drawer para móvil" (3 minutos). Cada adición encajó limpiamente porque Claude Code entendía la estructura del código existente.
El producto terminado — una landing page totalmente responsiva, animada y con dark mode — me habría tomado 2-3 días codificarla a mano o 4-5 horas de ida y vuelta con un desarrollador. Tiempo total desde el diseño en Figma hasta el código funcional: unas 2 horas incluyendo el arranque en falso.
Hablemos en Serio: Lo Que Esta Herramienta Aún No Puede Hacer
He estado pintando un panorama bastante optimista, y es porque los resultados genuinamente me impresionaron. Pero estaría mintiendo si dijera que el flujo de trabajo es impecable, y mereces conocer las limitaciones antes de invertir tiempo en configurar esto.
Claude Code genera código front-end. HTML, CSS, JavaScript para interacciones y animaciones. Si tu proyecto necesita un backend — autenticación de usuarios, conexiones a base de datos, lógica del lado del servidor — estás entrando en territorio de desarrollador. La herramienta no va a generar tus API endpoints o esquemas de base de datos desde un archivo de Figma. Para sitios de marketing y prototipos interactivos, esto no importa. Para aplicaciones de producto, seguirás necesitando soporte de backend.
Las ilustraciones personalizadas son un paso manual. Como mencioné, el arte vectorial complejo necesita exportarse de Figma por separado. Claude Code puede referenciar archivos de imagen en tu proyecto, pero no puede recrear ilustraciones dibujadas a mano desde una especificación de diseño. Prepárate para manejar los assets manualmente.
La precisión de Figma-a-código depende de la organización del diseño. Si tu archivo de Figma usa auto-layout adecuado, capas con nombres descriptivos y estructuras de componentes, el resultado de Claude Code es notablemente fiel. Si tu archivo de Figma es un desorden de frames posicionados de forma absoluta con nombres tipo "Frame 247"... el resultado refleja ese caos. Una buena higiene de diseño en Figma lleva a mejor código generado. Igual que con desarrolladores humanos, siendo honesto.
Se requiere iteración. Nunca he obtenido un resultado perfecto en el primer prompt para algo más allá de componentes simples. El flujo es: generar, previsualizar, identificar brechas, pedir correcciones, repetir. Normalmente 2-3 rondas. Eso sigue siendo dramáticamente más rápido que codificar a mano de la forma tradicional, pero no esperes magia al primer intento.
El consumo de créditos varía enormemente. Generar componentes simples apenas impacta tu presupuesto. Convertir una landing page completa con refinamiento iterativo puede consumir el 20-30% de la asignación diaria del plan Pro. Si haces esto profesionalmente, presupuesta el plan Max y ahórrate la ansiedad de ver los créditos bajar a mitad de proyecto.
Una predicción que haré: en los próximos seis meses, la precisión de Figma-a-código mejorará significativamente a medida que estos modelos mejoren su comprensión de relaciones espaciales y design tokens. La brecha entre "generado" y "artesanal" ya es más pequeña de lo que la mayoría asume. Se está cerrando rápido.
Lo Que los Diseñadores Realmente Deberían Medir
Después de una semana usando este flujo de trabajo en proyectos de clientes y experimentos personales, así se ven los números.
Traducción de design systems: 15-20 minutos para un sistema de tokens completo (tipografía, colores, sombras, botones). Equivalente manual: 4-6 horas.
Prototipado rápido desde capturas de pantalla: 5-10 minutos por exploración de layout. Equivalente manual: 2-3 horas por mockup.
Conversión de landing page completa: 1.5-2.5 horas incluyendo iteración. Equivalente manual: 2-3 días de colaboración diseñador-desarrollador.
Viajes de ida y vuelta con Figma: Envié código de vuelta a Figma 8 veces durante la semana. 6 de esas produjeron capas limpias y editables con las que mi equipo pudo trabajar directamente. 2 necesitaron limpieza manual menor en Figma. Eso es una tasa de sincronización limpia del 75%, que honestamente superó mis expectativas.
Tiempo de respuesta del feedback de clientes: Esta es la métrica que más me importa. Prototipos interactivos generados el mismo día significaron que los clientes pudieron dar feedback en la primera reunión en lugar de esperar a una segunda ronda de revisión. Dos proyectos pasaron de descubrimiento a dirección aprobada en una sola sesión. Eso nunca me había pasado con mockups estáticos.
Las victorias rápidas son obvias — velocidad, costo, velocidad de iteración. La ganancia a largo plazo es más sutil pero más importante: los diseñadores que pueden construir prototipos interactivos y front-ends listos para producción tienen una posición fundamentalmente diferente en la industria. No estás esperando a que alguien más dé vida a tu visión. La estás construyendo tú mismo y demostrando que funciona antes de que nadie pueda discutir sobre la viabilidad.
El Flujo de Trabajo que Realmente Funciona
Después de probar todas las combinaciones que se me ocurrieron, este es el flujo de trabajo en el que me he asentado para proyectos de diseño:
Para exploración y trabajo conceptual: Empieza en Claude Code. Genera prototipos rápidos a partir de capturas de pantalla o descripciones verbales. No toques Figma hasta que hayas encontrado una dirección que se sienta bien. Esto es contraintuitivo para diseñadores formados en flujos Figma-primero, pero la velocidad de la exploración basada en código cambia las cuentas.
Para design systems de producción: Construye en Claude Code, sincroniza con Figma para la revisión del equipo. Actualiza en cualquiera de los dos entornos según sea necesario. La sincronización bidireccional significa que ninguno se queda desactualizado.
Para landing pages y sitios de marketing: Diseña las secciones clave en Figma para la aprobación de stakeholders, luego convierte a código sección por sección en Claude Code. Añade interacciones y animaciones en código (donde realmente funcionan), luego envía las versiones finales de vuelta a Figma para documentación.
Para presentaciones a clientes: Siempre muestra la versión interactiva. Los mockups estáticos no hacen justicia a tu trabajo. Una sesión de 5 minutos con Claude Code antes de una reunión puede convertir un diseño plano en un prototipo clickeable que cierra tratos.
El hilo conductor en todo esto: Claude Code no está reemplazando a Figma. Le está dando a Figma un compañero con capacidad de producción. El diseño y el código dejan de ser fases separadas de un proyecto y empiezan a ser dos vistas de la misma cosa.
Si hace un año me hubieras dicho que iba a recomendar a los diseñadores aprender comandos de terminal, me habría reído. Pero el terminal que estoy usando no me está pidiendo que escriba JavaScript desde cero. Me está preguntando qué quiero construir, y luego lo construye mientras yo tomo las decisiones creativas.
Eso no es un flujo de trabajo de desarrollador disfrazado de diseñador. Eso es lo que las herramientas de diseño deberían haber sido desde el principio.
🤝 Trabajemos Juntos
¿Buscas construir sistemas de IA, automatizar flujos de trabajo o escalar tu infraestructura tecnológica? Me encantaría ayudarte.
- 🔗 Fiverr (desarrollos personalizados e integraciones): fiverr.com/s/EgxYmWD
- 🌐 Portfolio: mejba.me
- 🏢 Ramlit Limited (soluciones empresariales): ramlit.com
- 🎨 ColorPark (diseño y branding): colorpark.io
- 🛡 xCyberSecurity (servicios de seguridad): xcybersecurity.io
