Plataforma de desarrollo web full-stack impulsada por IA de StackBlitz que genera, ejecuta y despliega aplicaciones completamente en el navegador.
| Comando | Descripción |
|---|
Navegar a bolt.new | Abrir Bolt.new en el navegador |
| Iniciar sesión con GitHub o Google | Crear cuenta para persistencia de proyectos |
| Escribir un prompt en el chat | Comenzar a construir una aplicación |
| Hacer clic en “Deploy” cuando esté listo | Desplegar en Netlify u otros hosts |
| Hacer fork a StackBlitz | Continuar editando en el IDE de StackBlitz |
| Descargar proyecto | Obtener código fuente como zip |
Arquitectura de Bolt.new:
1. Describes lo que quieres en lenguaje natural
2. La IA genera el proyecto completo (frontend + backend + config)
3. WebContainer ejecuta la app en el navegador (no se necesita servidor)
4. La vista previa en vivo se actualiza mientras la IA hace cambios
5. Iteras chateando — la IA modifica el código en tiempo real
6. Despliega directamente a Netlify o descarga el código fuente
Tecnología: Se ejecuta en WebContainers de StackBlitz
- Node.js se ejecuta EN el navegador (no en un servidor remoto)
- npm install, build y dev server se ejecutan localmente
- Sin Docker, sin VMs, sin cómputo en la nube
| Estilo de Prompt | Descripción |
|---|
| ”Build a todo app with React and Tailwind” | Especificar framework y estilos |
| ”Create a REST API with Express and MongoDB” | Prompt enfocado en backend |
| ”Make a landing page for a SaaS product” | Prompt enfocado en diseño |
| ”Add authentication with email/password” | Agregar funcionalidades a proyecto existente |
| ”Fix the bug where the form doesn’t submit” | Depurar problemas existentes |
| ”Change the color scheme to dark mode” | Modificaciones de estilo |
| ”Add a dashboard page with charts” | Solicitud de nueva página/funcionalidad |
| ”Refactor the code to use TypeScript” | Mejoras de calidad de código |
Buenos prompts:
"Build a blog platform with Next.js, Tailwind CSS,
and MDX support. Include a homepage listing posts,
individual post pages, and a tag filtering system."
"Create a weather dashboard using React that fetches
from the OpenWeatherMap API. Show current weather,
5-day forecast, and a search by city feature."
Malos prompts:
"Make me a website" → Demasiado vago
"Build Facebook" → Demasiado amplio
"Fix everything" → Sin objetivo específico
Consejos:
- Especifica el stack tecnológico (React, Vue, Svelte, etc.)
- Describe las funcionalidades que necesitas
- Menciona preferencias de estilo (Tailwind, CSS modules)
- Referencia APIs o fuentes de datos específicas
- Divide apps grandes en prompts incrementales
| Framework | Descripción |
|---|
| React | Biblioteca de UI basada en componentes |
| Next.js | Framework de React con SSR/SSG |
| Vue.js | Framework progresivo de JavaScript |
| Nuxt | Framework de Vue con SSR/SSG |
| Svelte | Framework reactivo en tiempo de compilación |
| SvelteKit | Framework full-stack de Svelte |
| Astro | Constructor de sitios estáticos enfocado en contenido |
| Solid.js | Biblioteca de UI reactiva de grano fino |
| Angular | Framework completo de TypeScript |
| Framework | Descripción |
|---|
| Express.js | Framework web mínimo para Node.js |
| Fastify | Framework web rápido para Node.js |
| Hono | Framework ligero edge-first |
| NestJS | Framework empresarial de TypeScript |
| tRPC | APIs con seguridad de tipos de extremo a extremo |
| Remix | Framework full-stack de React |
| Biblioteca | Descripción |
|---|
| Tailwind CSS | Framework CSS utility-first |
| shadcn/ui | Biblioteca de componentes React |
| DaisyUI | Biblioteca de componentes Tailwind |
| Material UI | Sistema de diseño de Google para React |
| Chakra UI | Componentes React accesibles |
| Radix UI | Componentes accesibles sin estilos |
| Comando | Descripción |
|---|
| Hacer clic en archivo en la barra lateral | Abrir archivo en el editor |
| Editar código directamente | Cambios manuales de código |
Ctrl + S | Guardar cambios del archivo |
| Clic derecho en archivo → New File | Crear nuevo archivo |
| Clic derecho en archivo → Delete | Eliminar archivo |
| Clic derecho en carpeta → New Folder | Crear directorio |
| Los cambios de archivo se detectan automáticamente | El hot reload actualiza la vista previa |
| Comando | Descripción |
|---|
| Hacer clic en el panel de terminal en la parte inferior | Acceder al terminal de WebContainer |
npm install package | Instalar paquetes npm |
npm run dev | Iniciar servidor de desarrollo |
npm run build | Compilar para producción |
npx prisma migrate dev | Ejecutar migraciones de Prisma |
node script.js | Ejecutar scripts de Node.js |
| Comando | Descripción |
|---|
| ”Add a navbar with logo and links” | Agregar nuevos componentes |
| ”Make the button bigger and blue” | Modificaciones de estilo |
| ”Add form validation for email” | Agregar funcionalidad |
| ”The page crashes when I click submit” | Reportes de errores |
| ”Show loading spinner while data fetches” | Mejoras de UX |
| ”Add error handling for the API call” | Robustez |
| ”Make it responsive for mobile” | Diseño responsive |
| ”Add dark mode toggle” | Cambio de tema |
| Comando | Descripción |
|---|
| El historial del chat muestra todos los cambios | Rastrear lo que la IA modificó |
| ”Undo the last change” | Revertir modificaciones de la IA |
| ”Go back to the version with the blue header” | Referencia a estados anteriores |
| Descargar proyecto en cualquier momento | Guardar instantáneas localmente |
| Hacer fork a StackBlitz para git | Integración completa con git |
| Comando | Descripción |
|---|
| Hacer clic en el botón “Deploy” | Iniciar proceso de despliegue |
| Conectar cuenta de Netlify | Autorizar acceso a Netlify |
| Compilación y despliegue automáticos | Obtiene una URL en vivo en segundos |
| Soporte de dominio personalizado | Configurar en el panel de Netlify |
| HTTPS incluido | Certificados SSL automáticos |
| Comando | Descripción |
|---|
| Descargar proyecto → desplegar manualmente | Cualquier proveedor de hosting |
| Fork a StackBlitz → conectar CI/CD | Despliegue basado en GitHub |
| Fork a GitHub → auto-deploy en Vercel/Netlify | Flujos de trabajo basados en git |
Descargar → npm run build → subir dist/ | Hosting estático manual |
Flujo de trabajo de despliegue:
1. Hacer clic en "Deploy" en Bolt.new
2. Seleccionar Netlify (o conectar cuenta)
3. Bolt.new compila el proyecto
4. Sube a Netlify automáticamente
5. Obtener tu URL en vivo: https://your-app.netlify.app
Para dominios personalizados:
1. Desplegar primero para obtener la URL de Netlify
2. Ir al panel de Netlify → Configuración de dominio
3. Agregar tu dominio personalizado
4. Actualizar registros DNS en tu registrador
| Característica | Descripción |
|---|
| Node.js se ejecuta en el navegador | No se necesita servidor remoto |
| Soporte de npm/yarn/pnpm | Gestión completa de paquetes |
| Sistema de archivos en el navegador | Sistema de archivos virtual |
| Servidor de desarrollo en el navegador | Hot reload con URLs locales |
| No requiere Docker | Todo se ejecuta en el lado del cliente |
| Funciona sin conexión (después de cargar) | No se necesita internet continuo |
Lo que se ejecuta en WebContainers:
✓ Node.js (LTS más reciente)
✓ npm, yarn, pnpm
✓ Compilación de TypeScript
✓ Vite, Webpack, esbuild
✓ Express, Fastify, Hono
✓ SQLite (en memoria)
✓ Prisma (con SQLite)
✓ Operaciones del sistema de archivos
Lo que NO se ejecuta:
✗ Contenedores Docker
✗ PostgreSQL / MySQL / MongoDB
✗ Dependencias binarias nativas
✗ Python / Ruby / Go
✗ Operaciones a nivel de sistema
✗ Procesos en segundo plano de larga duración
| Base de Datos | Descripción |
|---|
| SQLite (en memoria) | Funciona directamente en WebContainer |
| Prisma + SQLite | ORM con base de datos local |
| Supabase (remota) | PostgreSQL vía API |
| Firebase (remota) | NoSQL vía Firebase SDK |
| Turso (remota) | SQLite en el edge vía libSQL |
| PlanetScale (remota) | MySQL vía API |
Para desarrollo local en Bolt.new:
SQLite + Prisma es la mejor combinación
- Se ejecuta completamente en WebContainer
- No se necesitan servicios externos
- ORM completo con migraciones
Para producción:
Conectar a una base de datos alojada
- Supabase (tier gratuito: 500MB)
- Turso (tier gratuito: 9GB)
- PlanetScale (tier gratuito: 5GB)
Establecer cadenas de conexión como variables de entorno
| Plantilla | Descripción |
|---|
| ”React + Vite + Tailwind starter” | SPA moderna de React |
| ”Next.js app with shadcn/ui” | React full-stack |
| ”Express API with Prisma + SQLite” | Backend de API REST |
| ”Vue + Nuxt + Tailwind” | Vue full-stack |
| ”Svelte + SvelteKit” | Svelte full-stack |
| ”Astro blog with MDX” | Sitio de contenido |
| ”Landing page with Tailwind” | Página de marketing |
-
Comienza con un prompt claro y específico — Describe el stack tecnológico, las funcionalidades y las preferencias de diseño desde el principio. “Build a task manager with React, Tailwind, and localStorage persistence” obtiene mejores resultados que “make a todo app.”
-
Construye incrementalmente — Comienza con la funcionalidad principal, verifica que funcione, luego agrega funcionalidades una a la vez. Cada prompt debe enfocarse en una cosa en lugar de solicitar todo a la vez.
-
Referencia el código al depurar — En lugar de “it doesn’t work,” di “the handleSubmit function in ContactForm.tsx doesn’t send the POST request” para correcciones más específicas.
-
Usa el terminal para verificación — Revisa la salida del terminal en busca de errores de compilación, dependencias faltantes o problemas de ejecución antes de pedir a la IA que depure.
-
Descarga respaldos regularmente — Descarga tu proyecto periódicamente como red de seguridad. Los proyectos basados en navegador pueden perderse si borras los datos del navegador.
-
Especifica versiones de paquetes cuando sea necesario — Si necesitas una versión específica de una biblioteca, menciónalo: “Use react-query v5” o “Use Tailwind CSS v3, not v4.”
-
Haz fork a StackBlitz para edición avanzada — Cuando necesites git, múltiples terminales o flujos de trabajo más complejos, haz fork del proyecto al IDE completo de StackBlitz.
-
Usa variables de entorno para secretos — Nunca escribas claves de API directamente en los prompts. Pide a la IA que use variables de entorno y configúralas en la plataforma de despliegue.
-
Elige SQLite para bases de datos en el navegador — Dado que los WebContainers no pueden ejecutar PostgreSQL o MySQL, usa SQLite con Prisma para desarrollo local y cambia a una BD alojada para producción.
-
Aprovecha la paleta de comandos — Presiona Ctrl + K para buscar archivos rápidamente, ejecutar comandos y navegar tu proyecto sin hacer clic en menús.
