Las mejores herramientas de IA design-to-code, ordenadas según tu punto de partida

Una publicación en el foro de la comunidad de Figma describe cómo, al seleccionar una biblioteca de componentes y variables en Figma Make, se obtuvieron «colores casi sin contraste y tamaños de fuente que no tienen ningún sentido». El mismo usuario cuenta que los resultados fueron cerca de un 90 % mejores sin ninguna biblioteca seleccionada. Ese es el fallo con el que medir cualquier herramienta: o construye con los componentes que tu equipo ya tiene, o construye una UI paralela que tendrás que reconciliar más adelante.

Las mejores herramientas de IA design-to-code no compiten en una sola escala, porque parten de entradas distintas. Una captura de pantalla, un archivo de Figma, un prompt escrito y una base de código existente contienen cantidades de estructura muy diferentes.

Elige según lo que tengas en la mano. Un archivo de Figma va a un conversor como la generación de código integrada de Figma, Anima o Builder.io Visual Copilot. Una captura de pantalla va a screenshot-to-code. Un prompt va a v0, Lovable o Bolt. Una base de código existente va a un agente de programación que lee tu design system a través del Model Context Protocol (MCP).

TL;DR

• Usa la generación de código integrada de Figma si pagas Figma; screenshot-to-code solo cuando no exista ningún archivo de diseño; v0, Lovable o bolt.diy según el destino de despliegue, la facturación y si necesitas tus propias claves de modelo; y Figma MCP con mapeo de Code Connect cuando tengas una base de código y un design system.
• Antes de adoptar cualquier herramienta, genera una pantalla para la que ya tengas componentes y revisa el resultado en busca de colores hexadecimales y valores en píxeles fijados en el código, y de componentes declarados de nuevo donde debería haber imports de tu biblioteca.
• Puedes ejecutar bolt.diy, screenshot-to-code y Penpot en un servidor que controles, pero cada uno tiene su salvedad: los commits de bolt.diy se pausaron de febrero a octubre de 2026 y su última versión etiquetada es de mayo de 2025, screenshot-to-code necesita una clave API de un modelo, y Penpot autoalojado va por detrás de la versión en la nube.
• La reutilización de componentes es mayor cuando la herramienta tiene un mapeo explícito, como Figma MCP con Code Connect o la indexación del design system de Builder.io, pero el código generado sigue necesitando revisión, así que reserva tiempo de limpieza en cualquier camino.

Elige la herramienta según tu punto de partida

Una captura de pantalla contiene píxeles y nada más. Un archivo de Figma añade nombres de componentes, variables y reglas de layout, y una base de código contiene los propios componentes, así que la entrada decide qué tipo de herramienta tiene algo con lo que trabajar.

La prueba de una pantalla para reutilizar componentes y tokens

El usuario de Make que obtuvo mejores resultados sin ninguna biblioteca seleccionada no necesitó una semana de uso para encontrar el problema. Apareció en las primeras páginas generadas, y por eso basta una sola pantalla para probar cualquier candidata:

1. Elige una pantalla que tu equipo haya construido con componentes existentes, como un formulario de ajustes o una tarjeta de precios.
2. Genera esa pantalla con la herramienta que estás valorando, usando el mismo tipo de entrada que usarías para un trabajo nuevo.
3. Busca en el resultado valores fijados en el código: colores hexadecimales en bruto como #3B82F6, tamaños de fuente en píxeles como font-size: 14px y espaciados fijos. Compáralo con la frecuencia con la que usa tus nombres de tokens, variables CSS o clases de tema.
4. Revisa los imports. Un resultado que declara un Button o un Card nuevos en lugar de importar los tuyos desde la biblioteca de componentes ha construido una UI paralela.
5. Confirma que el framework y el enfoque de estilos coinciden con el repositorio. HTML plano con estilos inline es una reescritura, se vea como se vea la vista previa.

En la encuesta para desarrolladores 2025 de Stack Overflow, el 66 % de los desarrolladores señaló «soluciones de IA que casi aciertan, pero no del todo» como su mayor frustración con la IA. Es un dato sobre las herramientas de programación con IA en general, no un estudio de design-to-code, pero una pantalla que parece correcta mientras fija cada color en el código es «casi acertada» exactamente en ese sentido.

Nota: haz esta comprobación antes de extender una herramienta a todo el equipo. Una pantalla generada cuesta unos minutos; un mes de código fusionado con valores fijos cuesta un sprint de limpieza.

Esta comprobación lee el código. Si la pantalla renderizada sigue coincidiendo con el diseño es otra cuestión, para una herramienta autoalojable como BackstopJS, que hace pruebas de regresión visual.

Si tienes un archivo de Figma terminado

Todas las herramientas de IA Figma-to-code de este grupo parten del mismo archivo, y la diferencia práctica entre ellas es dónde acaba el código: en el lienzo, en un prototipo alojado o en una exportación de terceros.

La generación de código integrada de Figma

Seleccionas un frame, un componente o una sección en Figma Design, abres el agente y pides HTML y CSS, componentes de React o un framework concreto. Figma dice que puedes dirigir el agente a tu design system para que el resultado haga referencia a tus tokens, variables y estructura de componentes en lugar de a marcadores genéricos. La misma página indica que está disponible en todos los planes de pago de Figma. A fecha de octubre de 2026 está en beta abierta, así que el consumo de créditos y los límites pueden cambiar.

El resultado se queda en el archivo como un hilo que tus desarrolladores pueden abrir. No hay alojamiento ni paso de despliegue, lo que es una limitación si querías un prototipo funcionando y una ventaja si querías código para pegar en tu repositorio.

Figma Make

Figma Make es una superficie aparte, guiada por prompts. Según Figma, Make genera HTML, CSS y JavaScript para prototipos de front-end, con un editor integrado para hacer cambios. Puedes probarlo en el plan gratuito Starter, y admite una integración con Supabase para simular datos reales.

Las superficies propias de Figma hacen trabajos distintos. Make produce un prototipo funcional a partir de un prompt y un frame. El generador del lienzo convierte los frames seleccionados en código usando la biblioteca del archivo. Figma MCP permite que un agente de programación en tu repositorio lea directamente componentes y variables.

Anima, Builder.io Visual Copilot y Locofy

Visual Copilot de Builder.io anuncia salida para React, Qwik y Angular, además de Kotlin y Flutter para móvil, con estilos en Tailwind CSS o CSS Modules. Para la reutilización, la misma página menciona Custom Component Mapping, que vincula los componentes de Figma con los componentes de tu base de código. La documentación de Builder marca ahora el mapeo manual de componentes como obsoleto en favor de la indexación de componentes y lo presenta como una función del plan Enterprise, así que revisa primero la documentación actual y tu plan.

El plan gratuito de Anima permite 5 generaciones de código en el plugin de Figma, junto con 5 mensajes de chat al día y 5 importaciones de Figma en su AI Playground. A fecha de octubre de 2026, el precio de Enterprise empieza en 500 $ al mes, con pago anual.

Anima también ofrece un servidor MCP, y el código generado a través de él cuenta para el mismo cupo de generación de código. Locofy es otro conversor de archivos de Figma de esta categoría.

Con qué conversor de Figma empezar

Empieza por la generación de código integrada de Figma si tu equipo paga Figma: lee la biblioteca del archivo sin paso de exportación, y en un plan de pago la prueba de una pantalla no añade ninguna suscripción nueva. Cambia a Builder.io Visual Copilot cuando quieras un resultado que importe los componentes de tu base de código (consulta su documentación para ver cómo se aplica el mapeo o la indexación de componentes a tu plan), o cuando quieras la salida móvil en Kotlin o Flutter que menciona expresamente.

Usa Figma Make para un prototipo clicable que vayas a enseñar. El código que piensas fusionar pertenece a la generación de código en el lienzo de Figma o a Builder.io Visual Copilot.

Si solo tienes una captura de pantalla

screenshot-to-code es aquí la opción open source por defecto: licencia MIT, unas 80.000 estrellas en GitHub y todavía recibe commits en 2026. Dale una imagen y devuelve HTML con Tailwind o CSS, React o Vue, entre otros stacks. Hay una versión alojada en screenshottocode.com si prefieres no ejecutar nada.

Una IA screenshot-to-code solo puede trabajar con lo que muestra la imagen, así que el límite está en la entrada. Una captura no lleva identidad de componente, ni variables, ni estados hover o focus, ni breakpoints responsive. Lo que devuelve es la reconstrucción de un único frame estático a un único ancho, y cada token hay que adivinarlo a partir de los colores de los píxeles.

screenshot-to-code es la herramienta adecuada cuando no existe ningún archivo de diseño, por ejemplo para replicar un layout de referencia o reconstruir una página antigua de la que nadie tiene archivo de Figma. Si existe un archivo de Figma, parte de él, porque contiene la información que la captura descarta.

Si solo tienes un prompt

Sin un design system con el que cuadrar, los compromisos se desplazan a otros tres puntos: cómo te cobra la herramienta, cuánto del código puedes editar y hasta dónde puede crecer la app generada.

v0

El plan gratuito de v0 incluye un límite de 7 mensajes diarios, además de despliegues en Vercel, sincronización con GitHub y un Design Mode visual. El uso de pago se factura por token, y las tarifas por token de los modelos de v0 varían entre cuatro niveles de modelo, desde v0 Mini hasta v0 Max Fast. El coste de una sesión depende del nivel que elijas y de cuánto se alargue la conversación.

Lovable

Lovable cobra en créditos. En Default Mode el coste varía según la complejidad de la tarea, mientras que Plan Mode cuesta 1 crédito por mensaje. El plan gratuito incluye una asignación diaria de 5 créditos de build, con un tope de 30 al mes.

Un usuario, en un hilo de Reddit que compara Bolt y Lovable, escribió que Bolt daba «un control casi total» sobre el código, mientras que Lovable parecía mostrar solo diffs del código «sin acceso de edición». Es la experiencia de un solo usuario, así que revisa el editor actual antes de dar por hecho que sigue siendo así.

Bolt.new y bolt.diy

Bolt.new es el producto alojado. bolt.diy es su equivalente open source, que te permite elegir el LLM para cada prompt entre más de 21 proveedores, incluidos modelos locales a través de Ollama. No exige ninguna base de datos; Supabase es una integración opcional. Revisa su historial de commits y las condiciones de su licencia antes de construir sobre él.

Google Stitch

Google relanzó Stitch en marzo de 2026 con un lienzo infinito, interacción por voz y un agente de diseño, según el artículo de Winbuzzer sobre el rediseño. El mismo artículo dice que los diseños se exportan al formato de Figma o a frameworks de código como React, y que un servidor MCP conecta Stitch con Claude Code, Gemini CLI, Cursor y Antigravity. Eso sitúa a Stitch entre el camino del prompt y el de la base de código: parte de un prompt, pero puede pasar los diseños a un agente que trabaja en tu repositorio.

Con qué herramienta de prompts empezar

En una discusión de Hacker News sobre Lovable y Bolt, un comentarista sostenía que, con el backend delegado en Supabase, el techo para construir software útil con esas dos herramientas es «increíblemente bajo». Ese comentarista reconoció que estaba desarrollando un producto de la competencia, así que tómalo como una opinión informada pero interesada, no como una medición.

Tener un archivo de Figma tampoco descarta automáticamente este camino. En el mismo hilo de Reddit sobre Bolt y Lovable, otro usuario dijo que nunca había metido Figma porque le parecía «más difícil y más molesto que simplemente escribir prompts» para el diseño que quería.

Elige v0 cuando tu equipo despliega en Vercel y quiere sincronización con GitHub desde el primer día. Elige Lovable cuando quieras planificar un build con mensajes de Plan Mode de coste fijo antes de gastar créditos de build, y revisa antes su editor si piensas cambiar código a mano.

Elige bolt.diy cuando necesites usar tus propias claves de modelo o ejecutar un modelo local, y trátalo como una herramienta de prototipado mientras su nueva actividad no se consolide. Prueba Stitch cuando quieras diseños generados por prompt que luego puedas pasar a un agente de programación en tu repositorio a través de su servidor MCP.

Si ya tienes una base de código y un design system

Este camino funciona dentro de tu repositorio, donde el agente lee los propios componentes. El precio es el trabajo de configuración, e incluso así los mecanismos documentados mejoran las probabilidades de reutilización; ninguno está documentado como garantía.

Figma MCP

Según el Help Center de Figma, el servidor Figma MCP puede generar código a partir de los frames seleccionados después de leer componentes, variables, datos de layout, contenido de FigJam y recursos de Make. Usa Code Connect para mantener ese código alineado con tus componentes, y el servidor remoto puede escribir de vuelta en el lienzo.

Viene en dos versiones: un servidor remoto, que Figma recomienda para la mayoría de usuarios, y un servidor de escritorio para casos concretos de organizaciones y empresas.

En la práctica, MCP le da a tu agente de programación una fuente estructurada del diseño. Cuando el agente inspecciona un frame, el servidor envía sus componentes, estilos y variables, y el blog de Figma explica que cuando esos elementos están mapeados a código mediante Code Connect, el agente puede tirar de tus recursos de código. Sin ese mapeo, sigue recibiendo el contexto de estilos y escribe el componente desde cero.

El agente lo eliges tú. La guía de configuración de Figma está escrita para Claude Code, y la documentación de MCP de OpenCode cubre servidores locales y remotos. Elegir entre Claude Code u OpenCode se reduce a comodidad gestionada frente a control del proveedor, y nada de esa elección es específico del trabajo de diseño.

Penpot MCP

Penpot es el equivalente open source, y su documentación describe tres piezas clave: un servidor MCP, un plugin MCP que se ejecuta dentro de Penpot y conecta tu archivo abierto, y el cliente MCP donde escribes los prompts. Se configura desde la página Integrations de tu cuenta de Penpot con una clave MCP personal. A través de él, un agente puede leer y modificar componentes, estilos, tokens y capas.

La estructura del proyecto cambió hace poco. El repositorio independiente penpot-mcp muestra un aviso de que se archivó en febrero de 2026, con su contenido integrado en el repositorio principal de Penpot. Las guías escritas para el repositorio antiguo pueden describir una configuración distinta.

Claude Design

Anthropic lanzó Claude Design en abril de 2026 como vista previa de investigación de Anthropic Labs para suscriptores de Pro, Max, Team y Enterprise. Durante el onboarding, Claude crea un design system para tu equipo leyendo tu base de código y tus archivos de diseño, lo aplica a proyectos posteriores y empaqueta los diseños terminados en un paquete de entrega para Claude Code.

UXPin, que vende sus propias herramientas de diseño, escribió esto durante la semana del lanzamiento:

«Los diseñadores que probaron Claude Design esta semana informaron de fuentes equivocadas, colores de botón incorrectos y espaciados inconsistentes en sus primeras sesiones».

Con qué configuración de base de código empezar

Usa Figma MCP con un agente de programación cuando tu design system viva en Figma y estés dispuesto a hacer el mapeo de Code Connect, ya que ese mapeo es lo que separa los componentes importados de las copias con estilos rehechos.

Usa Penpot MCP cuando quieras una herramienta de diseño open source que tu agente pueda leer y editar. Penpot en sí se puede autoalojar, pero su documentación de MCP describe la configuración a través de una cuenta de Penpot, así que confirma el flujo en tu propia instancia antes de depender de él.

Usa Claude Design cuando tu equipo pague Claude y quiera la mínima configuración, y haz la prueba de una pantalla antes de fiarte de su versión de tu design system.

Ejecutar las opciones open source en tu propio servidor

Tres de estas herramientas pueden ejecutarse en un servidor que controles, lo que cambia el alojamiento de un proveedor por tu mantenimiento y, en bolt.diy y screenshot-to-code, un contador de créditos por tus claves de modelo. A octubre de 2026, cada una tiene su contrapartida.

bolt.diy. El proyecto estuvo sin commits del 7 de febrero al 4 de octubre de 2026, y su última versión etiquetada, v1.0.0, salió en mayo de 2025, según el historial de commits del repositorio. El proyecto tiene licencia MIT, pero la API de WebContainers de la que depende (el runtime en el navegador que ejecuta el código generado) requiere licencia para uso en producción en un contexto comercial con ánimo de lucro.

Los prototipos y las pruebas de concepto no necesitan esa licencia. En la práctica, bolt.diy es razonable para prototipar con tus claves; vuelve a revisar su actividad antes de construir un producto sobre él.

screenshot-to-code. Ejecutarlo por tu cuenta requiere al menos una clave de un proveedor de modelos, de OpenAI, Anthropic o Gemini, además de un servidor que mantengas tú. El coste de funcionamiento es el uso del modelo por cada generación, facturado por el proveedor cuya clave configures.

Penpot. Penpot se autoaloja con Docker Compose o con el chart oficial de Helm en Kubernetes, OpenShift o Rancher. Su documentación señala que las imágenes de Docker autoalojadas se publican poco después de las actualizaciones del SaaS, así que una nueva función de la nube llega a tu instancia con retraso.

Dónde ejecutarlas depende de quién las use. Un portátil basta para probar bolt.diy o screenshot-to-code en solitario. Un servidor encaja cuando un equipo comparte una instancia de Penpot, o cuando las herramientas tienen que seguir accesibles con el portátil cerrado.

No hay un mínimo oficial para bolt.diy, así que toma unos 4 GB de RAM y 2 vCPU con almacenamiento NVMe como punto de partida para una sola app de Node como esta. El centro de ayuda de Penpot dice que 4 CPU y 16 GB de RAM son suficientes para dar servicio a miles de usuarios y que puedes ser prudente al asignar recursos; para la instancia de un equipo pequeño más un agente de programación en el mismo servidor, empezar más bien con 8 a 12 GB de RAM es razonable. Si el agente también va a correr en un IDE en el navegador en esa máquina, el dimensionamiento de Code Server con Claude Code es un cálculo aparte.

Autoalojar significa que tú gestionas el servidor, aplicas las actualizaciones y proteges las claves de modelo. Si prefieres saltarte la instalación, ofrecemos despliegues en un clic de bolt.diy para montar un entorno de prototipado y de Penpot para un espacio de diseño compartido, en un VPS Linux con acceso root. Los agentes de programación como Claude Code y OpenCode se despliegan igual, como apps independientes. El mantenimiento sigue siendo tuyo; la configuración no.

Preguntas frecuentes

¿Qué es mejor, Figma Make o v0?

Lo decide tu punto de partida. Figma Make funciona dentro de Figma, toma un frame más un prompt y genera HTML, CSS y JavaScript para prototipos de front-end. v0 parte solo de un prompt, despliega en Vercel y se sincroniza con GitHub. Elige Make cuando el diseño existe en Figma y v0 cuando partes de una descripción.

¿Puede la IA convertir una captura de pantalla en código que funcione?

Sí. El proyecto open source screenshot-to-code convierte una captura de pantalla en código HTML, React o Vue usando una clave API de OpenAI, Anthropic o Gemini. Eso sí, el resultado es la reconstrucción de un único frame estático, sin identidad de componente, estados de interacción ni breakpoints responsive, así que un archivo de Figma es mejor entrada cuando existe.

¿Hay una alternativa open source a v0, Bolt o Lovable?

Sí. bolt.diy es el equivalente open source de Bolt.new y la opción autoalojable entre las herramientas de prompt a app que vemos aquí. Tiene licencia MIT y funciona con tus claves de modelo, incluidos modelos locales a través de Ollama. Sus commits se pausaron de febrero a octubre de 2026, y su dependencia de WebContainers requiere una licencia comercial para uso en producción con ánimo de lucro, así que revisa tanto su actividad como la licencia antes de construir un producto sobre él.

¿Por qué el código generado por IA ignora mi design system?

Muchas herramientas ven tu diseño como píxeles o como un frame aplanado y, a partir de ahí, aproximan sus colores, fuentes y espaciados. Las herramientas que leen directamente las variables y la estructura de componentes, como Figma MCP, pueden importar tus componentes reales cuando están mapeados a código mediante Code Connect. Sin ese mapeo, el agente usa tus estilos como contexto y escribe componentes nuevos.