Mapa de la ruta
Contenido detallado
🎯 Tu primera app: del problema a localhost
Antes de escribir una línea de código: definir bien el problema, usar la IA como sparring, generar un SOP, aportar referencias visuales, coordinar agentes en paralelo, planificar, guardar el contexto y conectar una base de datos mediante MCP.
La regla «55-5»: de 60 minutos, invierte ~55 en entender el problema y solo ~5 en apresurarte a encontrar la solución. La mayoría de los tutoriales va directo al código: no hagas eso.
Un problema mal definido genera una app que nadie usa. La claridad al principio ahorra horas de retrabajo.
Definición del problema · regla 55-5 · evitar las prisas con el código.
Usa la IA como compañera de práctica: pídele que desafíe tu razonamiento y te ayude a definir el problema. Después, pídele un SOP (procedimiento) breve, de no más de 800 caracteres.
El contrapunto de la IA expone las fallas desde temprano; el SOP se convierte en la guía que orienta la construcción.
Sparring · desafiar el razonamiento · SOP ≤ 800 caracteres.
Alimenta al agente con referencias visuales (capturas de pantalla de sitios que te gustan). La IA es muy buena en diseño, pero funciona mucho mejor con especificidad.
"Haz que se vea bien" es vago; una captura de referencia transmite la intención visual en segundos.
Referencia visual · especificidad · galerías (Awwwards, Dribbble, Mobbin, Land-book).
En Agent Manager puedes gestionar varios agentes y proyectos al mismo tiempo. Cada workspace = un proyecto, y te mueves mucho más rápido.
El paralelismo multiplica tu producción: mientras un agente trabaja, tú revisas o inicias otro.
Agent Manager · workspace por proyecto · paralelismo.
Trata a cada agente como a un empleado: asígnales tareas SEPARADAS. Nunca pongas a dos agentes en la misma tarea: chocan y se estorban.
Es como un equipo donde nadie hace el trabajo de otra persona: menos conflictos, más avances.
División del trabajo · evitar colisiones · un agente, una tarea.
Pon al agente en modo de planificación: propone un plan y tú lo revisas y apruebas como lo harías con un empleado. Las acciones quedan a la espera de aprobación en el inbox.
Aprobar el plan antes de la ejecución evita que el agente se ponga a construir algo equivocado.
Planning mode · revisión · aprobación en el inbox.
Un archivo .md (ej.: Gemini.md) con las reglas del proyecto —fuente, colores, propósito— que el agente vuelve a leer siempre. Sobrevive al "desbordamiento" de la ventana de contexto. Un research.md guarda investigación reutilizable.
Es la memoria a largo plazo del proyecto: el agente no «olvida» tus decisiones.
Archivo de contexto · ventana de contexto · research.md.
MCP (Model Context Protocol) es el «idioma universal» que permite que apps y servicios se comuniquen. Conecta una base de datos (Supabase) mediante un token y el agente crea el proyecto y escribe el SQL por su cuenta.
Con una base de datos conectada, tu app guarda datos reales, sin que tengas que escribir SQL a mano.
MCP · token · Supabase · SQL generado por el agente.
🚀 Publicar y mantener tu app
Saca la app de localhost: conecta GitHub, haz deploy en Vercel, protege las claves con env vars, activa analytics, depura con capturas de pantalla, haz commit siempre, revierte cambios y controla el gasto de la API.
Conecta AntiGravity a GitHub mediante MCP para gestionar y publicar repositorios directamente desde el editor. Requiere un Personal Access Token (fine-grained, con validez) y Docker instalado para que la integración funcione.
Publicar sin salir del editor reduce la fricción y mantiene todo en un solo flujo.
GitHub MCP · Personal Access Token · Docker.
Vercel es el «puente» de GitHub al mundo: alojamiento en producción. Add New → Project → importar el repo → publicar, y la app queda disponible.
Es el paso que convierte un proyecto local en algo a lo que cualquiera puede acceder mediante un enlace.
Hosting · importar repo · producción.
Para proteger las claves de API, el agente solo nombra la variable; tú pegas la clave en Vercel (Settings → Environment Variables) y vuelves a implementar. La clave nunca aparece en el código.
Una clave expuesta en el código es el error de seguridad n.º 1 y puede salir caro.
Env var · nombrar vs. valor · Redeploy.
Habilita Analytics y Speed Insights en el panel de Vercel e instala el paquete desde la terminal (npm). Así podrás monitorear las visitas y el rendimiento, con un generoso plan gratuito.
Sin datos, adivinas. Con datos, mejoras lo que importa.
Analytics · Speed Insights · npm · plan gratis.
Cuando falle el build, toma una captura de pantalla de los logs de error y envíasela al agente: "hubo un error en el deploy, corrígelo". Usa DevTools (Console/Network) y envía una captura del error.
La imagen le da al agente el contexto exacto: así corrige mucho más rápido.
Registros de errores · captura de pantalla · DevTools (Console/Network).
Haz commits con frecuencia. Historia real: programar durante 6 horas sin hacer un commit y perder la mejor versión. El control de versiones es tu red de seguridad.
Cada commit es un punto de retorno seguro: nunca pierdes más que el último fragmento.
Commit frecuente · historial · punto de retorno.
En Vercel: Deployments → elige la versión estable anterior → Redeploy. Es «volver en el tiempo». También puedes revertir desde GitHub.
Un deploy fallido deja de ser motivo de pánico: restauras la versión buena en segundos.
Deployments · versión estable · Redeploy · revertir en GitHub.
Define un presupuesto de gasto en la API para evitar una factura enorme. Y vuelve privado el repositorio después de publicarlo.
Un límite de gasto evita sorpresas en la factura; un repo privado protege tu código y tus claves.
Presupuesto de API · límite de gasto · repositorio privado.