Cómo usar Bolt.new: de la idea a la app desplegada, paso a paso
Un recorrido completo por Bolt.new, reconstruido a partir de una creación real de principiante — primer prompt, iteraciones con capturas, analíticas, inicio de sesión con Google vía Firebase y despliegue. Cada paso con captura de pantalla.
Bolt.new en corto
- Empieza con una idea general y las funciones que quieres — «registrar sesiones de trabajo, añadir tareas, guardar sesiones» — no con un pliego de requisitos. En un minuto aproximadamente hay una app funcionando.
- Itera con prompts cortos, una función cada vez: botón de fin, pestaña de analíticas, gráfico circular, modo oscuro. Si un cambio falla, dilo de otra forma — al segundo intento suele salir.
- Los cambios pueden romper cosas. Cuando un botón deje de responder, describe el bug con palabras sencillas o pide volver a la última versión buena — casi todo se arregla con un prompt.
- El inicio con Google necesita Firebase: crea un proyecto, activa el proveedor Google, pega la firebaseConfig en Bolt y autoriza tu dominio desplegado en los ajustes de Firebase.
Building an App from Scratch with Bolt.new
Vídeo original de:Brock Mesarich · AI for Non Techies16:02
Las capturas proceden del vídeo original y llevan crédito con enlaces por minuto exacto. El texto es redacción propia basada en la transcripción completa; los hechos coinciden con el vídeo.
Este tutorial es un resumen ilustrado e independiente para quien prefiere leer. Para apoyar al creador, mira el vídeo original del canal AI for Non Techies, enlazado arriba.
Crea una app en Bolt.new, paso a paso
- 1
Describe tu idea en un prompt
Abre bolt.new y escribe una idea general más las funciones que quieres — no un pliego de requisitos. El ejemplo: «Créame una app que registre sesiones de trabajo. Llamémosla FocusFlow. La idea es registrar bloques de trabajo, añadir las tareas completadas en la sesión y guardar esas sesiones.» Demasiado detalle al inicio frena la primera versión.
El primer prompt de FocusFlow en bolt.new: idea general, pocas funciones.Ver en 0:30 - 2
Mira nacer la primera versión — y refínala con una captura
Un minuto después Bolt ya ha escrito y ejecutado el código: temporizador, formulario de tareas y estadísticas. Haz una captura de la parte que no te gusta, adjúntala y di qué cambiar — «vamos a hacer esta parte de la app un poco más sencilla». Ese feedback visual vale más que describir posiciones de píxeles con palabras.
La primera vista previa y un prompt de mejora con captura adjunta.Ver en 1:40 - 3
Añade categorías a las tareas
Pide una columna de categorías con ejemplos concretos — admin, creación de contenido, finanzas, investigación, desarrollo de apps. Bolt lo convierte en una cuadrícula de botones y cada tarea lleva una etiqueta de color — eso es lo que hará útiles las analíticas de después.
La cuadrícula de categorías con etiquetas de color en las tareas.Ver en 2:30 - 4
Pide un botón de fin de sesión
El temporizador corre pero no se guarda nada. Prompt: «Añade la capacidad de terminar una sesión.» Bolt crea componentes nuevos (SessionControls, SessionSummary), los conecta a la app y al cerrar la sesión muestra un resumen con duración, tareas completadas y categoría principal.
Bolt planifica y crea los componentes de fin de sesión.Ver en 3:00 - 5
Deja los resúmenes en el panel principal
Por defecto, terminar una sesión salta a otra página. Si no te gusta ese flujo, dilo sin rodeos: «No me gusta que me lleve a una página nueva al terminar la sesión — mantenlo en el panel normal.» La tarjeta de resumen aparece ahora dentro de la pantalla principal.
Session Complete vive ahora en el panel principal.Ver en 4:00 - 6
Añade una pestaña de analíticas
Pide una pestaña Session Analytics que liste cada tarea por día más los totales del día. Bolt la coloca junto a Current Session y cada sesión terminada se despliega en su historial de tareas — aquí empiezan a pagar las etiquetas de categoría.
La nueva pestaña Analytics junto a Current Session.Ver en 4:30 - 7
Registra el tiempo por tarea
Las analíticas necesitan datos: pide que las tareas se marquen como completadas por defecto y añade el tiempo dedicado a cada una. Bolt suma campos de horas y minutos (luego sustituidos por un deslizador hasta una hora) y pasa los números a las analíticas.
Los campos de tiempo dedicado entran en el formulario de tareas.Ver en 6:00 - 8
Visualiza el tiempo con gráficos circulares
Prompt: «Añadamos analíticas con gráficos circulares que muestren cuánto tiempo se dedicó a cada cosa.» El primer gráfico llega en tamaño absurdo — «hazlo un poco más pequeño» lo arregla al segundo intento. Esos retoques diminutos de interfaz son donde Bolt brilla.
El gráfico circular diario tras corregir el tamaño.Ver en 6:25 - 9
Corrige regresiones hablando claro
A mitad de construcción los cambios chocan: los botones dejan de funcionar o un efecto divertido de estela del cursor rompe la maquetación. Describe el bug con palabras sencillas, pide borrar lo que no te guste o usa Deshacer. Las listas de arreglos del propio Bolt — seis puntos aquí — suelen dejarlo todo resuelto de una pasada.
Una lista de seis arreglos repara el temporizador y quita el brillo.Ver en 9:30 - 10
Añade inicio de sesión con Google
Para convertir la app en un producto de verdad hacen falta cuentas. Prompt: «Añade la capacidad de iniciar sesión con Google.» Bolt responde con una tarjeta de trabajo — actualizar package.json, instalar dependencias, crear el contexto de autenticación — más las instrucciones de Firebase para hacer fuera de Bolt.
La tarjeta de trabajo Add Google Authentication de Bolt.Ver en 11:00 - 11
Crea el proyecto de Firebase
Sigue el enlace de Bolt a la consola de Firebase, crea un proyecto nuevo (ponle nombre, elige cuenta) y continúa a la consola cuando esté listo. El plan gratuito Spark cubre este tutorial.
Proyecto de Firebase listo — continuar a la consola.Ver en 11:30 - 12
Activa Google en los métodos de acceso
En la consola: Build → Authentication → Sign-in method. Activa el proveedor Google y también Email/Password, para que los usuarios puedan registrarse de ambas formas. Es exactamente lo que la lista de Bolt pedía configurar.
Google figura ya como proveedor de acceso activado.Ver en 12:00 - 13
Pega tu firebaseConfig en Bolt
En Project settings → Your apps, registra una app web y copia el bloque firebaseConfig en el lugar que Bolt te señala — el archivo de configuración creado por su lista de tareas. Dile «ya añadí mi configuración de Firebase» y lo conecta todo, hasta dejar un botón de registro funcionando.
El bloque firebaseConfig para pegar en el archivo de configuración de Bolt.Ver en 12:30 - 14
Autoriza tu dominio desplegado
Hasta que Firebase confíe en tus URL, el inicio con Google muere con «popup bloqueado». Despliega la app desde Bolt, abre Firebase → Authentication → Settings → Authorized domains y añade localhost, el dominio de tu IDE y la URL desplegada (si se lo preguntas, Bolt te da el dominio exacto).
Dominios autorizados en los ajustes de Firebase.Ver en 14:00 - 15
Sal a producción e inicia sesión
Abre la URL desplegada, pulsa Sign in y continúa con Google — la ventana emergente ya funciona, tu avatar aparece arriba a la derecha y cerrar sesión también va. Tienes una app desplegada con cuentas reales, construida sin escribir una línea de código.
Sesión iniciada en la app FocusFlow desplegada.Ver en 15:00