Bolt.new

Bolt.new, de StackBlitz, construye aplicaciones web full-stack a partir de texto y las corre en un entorno de desarrollo completo dentro del navegador. En una frase: la IA escribe el código y lo ejecuta en vivo, instala dependencias y te muestra la app funcionando, pero también te deja meter mano al código cuando haga falta.

El problema que resuelve es la fricción de “tengo una idea, quiero verla corriendo ya”. Las herramientas conversacionales puras te enseñan una previsualización, pero si quieres cambiar algo a nivel código tienes que exportar el proyecto, configurar Node, instalar dependencias y abrir un editor local. Bolt acorta todo eso: la IA y el código viven en la misma pestaña, sin instalar nada.

Le rinde a quien ya programa un poco y quiere acelerar prototipos, a estudiantes que aprenden mejor viendo el código real generado, y a equipos que necesitan validar una idea con stakeholders en cuestión de horas. Le sobra a quien quiere quedarse exclusivamente en lo conversacional sin tocar código (ahí Lovable es más cómodo) y a quien busca solo componentes UI en React dentro del ecosistema Vercel (v0 encaja mejor).

Por qué importa

Antes de Bolt, montar un prototipo web pasaba por una secuencia conocida: clonar un template, instalar Node, instalar dependencias, arrancar el dev server, abrir el editor, picar código. Para alguien con experiencia eran minutos; para alguien con menos práctica, horas o días. Y si el ordenador era flojo o no tenía permisos para instalar nada, directamente bloqueo.

Con un entorno como WebContainers (la tecnología bajo Bolt, de StackBlitz), Node corre dentro del navegador. Eso significa que cualquier dispositivo con un navegador moderno se convierte en un entorno de desarrollo, incluido el portátil del trabajo bloqueado por IT o el iPad de fin de semana. El “después” es radical: abres una pestaña y a los treinta segundos tienes una app instalándose sola.

Lo que cambia en el día a día es la velocidad de iteración con no-técnicos. Cuando estás reunido con un cliente o con marketing, puedes generar una variación de la app delante de ellos, mostrársela funcionando y modificar el copy en directo. Eso transforma reuniones de “te lo mando mañana” en “míralo ahora”.

Cómo se usa en la práctica

El flujo del frontmatter (entrar, describir, ver, iterar, publicar) cubre lo básico. El matiz está en cómo conversas con la IA y cómo decides cuándo abrir el código a mano.

Empieza con un prompt acotado. La tentación es pedir “una app de gestión de inventario completa con usuarios, roles y reportes”, pero los pedidos enormes generan más errores que iterar en pasos pequeños. Mejor pide la primera versión mínima (“una página con un listado de productos en memoria”), confirma que funciona y luego añade capas (persistencia, autenticación, reportes) una a una.

Cuando la IA se atasque (un error de TypeScript, una dependencia que no instala, un componente que no renderiza), no insistas con prompts vagos como “arréglalo”. Abre el código en el editor integrado, mira el error concreto en la consola y o bien lo arreglas a mano si es trivial, o le pegas el error específico a la IA. Eso suele desbloquear más rápido que intentar repetir el prompt.

Para proyectos con identidad visual, importa desde Figma cuando puedas. Bolt acepta diseños y los traduce a componentes; aunque el resultado siempre necesita ajustes, partir de un diseño concreto en lugar de un “que sea bonito” da resultados mucho más cercanos a producción.

Si tu app necesita persistencia real (no solo localStorage del navegador), conecta un backend de servicio gestionado como Supabase o similar. Bolt se entiende bien con esos integradores porque el código generado suele ser estándar (React, Next, Vite) y la conexión es la misma que harías a mano.

A la hora de publicar, Bolt te ofrece despliegue desde el propio entorno o exportar a GitHub y desplegar tú. Para algo serio, exportar a GitHub es lo recomendable: ahí ya entras en el flujo normal de CI/CD, revisiones de código y control de versiones. Para una demo de un día, publicar directo desde Bolt vale.

El uso gratuito tiene un cupo de iteraciones; las sesiones largas con muchos cambios se lo comen rápido. Conviene planificar: piensa qué quieres generar antes de empezar y aprovecha cada turno con prompts concretos, en vez de soltar ideas sueltas.

Casos de uso reales

Validación de idea en una tarde. Un fundador quiere enseñar a tres usuarios potenciales su idea de app. Entra a Bolt, describe la versión mínima, genera, itera con feedback de los usuarios en vivo y al final del día tiene tres opiniones cualificadas y un prototipo navegable. Coste: una tarde y el plan gratuito.

Profesor enseñando React. Un docente quiere mostrar a su clase cómo se monta una app de React de cero. En vez de pedir que todos instalen Node, abre Bolt en su proyector. Genera la app, muestra el código que escribe la IA y va explicando cada pieza. Los alumnos pueden replicarlo en su propio Bolt sin instalar nada en sus ordenadores.

Equipo de producto explorando alternativas de UI. Antes de comprometer al equipo de diseño y desarrollo en una dirección, producto genera tres variantes de pantalla con Bolt para enseñarlas a la dirección. Eligen la que más gusta y solo entonces se entra al ciclo serio. Reduce el riesgo de invertir semanas en un diseño que el cliente final descarta.

Aprendizaje personal. Alguien que viene de no-código y quiere dar el salto a programar usa Bolt para ver el código que generan sus ideas. Al principio solo lee y modifica copy; con el tiempo entiende patrones de React y empieza a tocar lógica. Bolt funciona como una rampa entre dos mundos.

Errores comunes y cómo evitarlos

• Pedir la app entera de golpe y luego no entender por qué hay errores. Pide en pasos pequeños y valida cada uno.
• Ignorar la consola de errores del entorno y volver a darle al chat. La consola suele decir exactamente qué falla; léela.
• Quedarse en el dominio de Bolt para producción seria sin exportar a GitHub. Si el proyecto crece, sácalo de Bolt a tu flujo normal.
• Olvidar las claves de API en el código generado al exportar. Mueve secretos a variables de entorno antes de publicar.
• Consumir el cupo gratuito con prompts vagos. Cada turno debe tener un objetivo claro.
• Subir confiando en que la IA ha entendido los requisitos de seguridad. La autenticación y los permisos pídelos explícitamente y reviéwalos a mano.

Cuándo NO usarla

Si tu proyecto ya está montado en local con tu stack, tus tests y tu equipo trabajando en él, abrir Bolt para tocar una pieza añade fricción en vez de quitarla. Si necesitas integraciones muy específicas con servicios internos detrás de VPN, un entorno en el navegador no te las da. Y si tu app crece a varios cientos de archivos con lógica de negocio crítica, mantenerla dentro de Bolt deja de ser cómodo: en algún momento toca exportar y trabajar como en un proyecto normal.

Combinarla con otras herramientas

Bolt + Figma + un backend gestionado (Supabase u otro) es el combo natural para pasar de idea a app navegable: Figma para el diseño, Bolt para generar la app a partir del diseño, backend para datos reales. Para llevarlo a producción se exporta a GitHub y se mete en el flujo habitual con Vercel o similar. Si tienes Claude Code o Cursor, son perfectos para la fase posterior de mantenimiento y refinamiento del código exportado.

Mini-ejercicio

Abre Bolt y pide una app de notas en React con un campo de texto, un botón de guardar y una lista de notas debajo. Pide después que las notas se persistan al recargar. Edita el color del botón directamente en el código del editor integrado y aplica el cambio. Sabrás que está bien si la app se actualiza en la previsualización al guardar el código a mano y las notas siguen ahí tras recargar la pestaña.