🎯 El problema antes de la solución
La mayor trampa para quien empieza es correr hacia el código. Hay una regla sencilla para evitarlo: la regla 55-5. De cada 60 minutos, invierte alrededor de 55 entendiendo el problema y solo 5 en la solución apresurada. La mayoría de los tutoriales hace lo contrario y genera apps que nadie usa.
⏱️ La regla 55-5
Piensa en un presupuesto de tiempo. En qué lo inviertes define la calidad de lo que construyes:
- •55 min en el problema — para quién es, qué le duele, qué resultado importa.
- •5 min en la solución — cuando el problema está claro, la solución casi se escribe sola.
- •No te saltes el código antes de saber qué está resolviendo.
✓ Empieza por el problema
- ✓Define quién sufre el problema y por qué
- ✓Escribe el resultado deseado en una frase
- ✓Solo entonces piensa en la pantalla y las funciones
✗ La trampa de programar demasiado pronto
- ✗"Voy a empezar a programar y veré sobre la marcha"
- ✗Tutoriales que abren el editor en el minuto cero
- ✗Una app bonita que resuelve el problema equivocado
💡 Consejo práctico
Antes de abrir el editor, completa la frase: "Esta app existe para que [quién] pueda lograr [resultado] sin [el dolor de hoy]." Si no puedes completarlo, aún estás en los 55 minutos.
problema × solución
siente el dolor
en una frase
el código temprano
🥊 La IA como sparring → SOP
La IA no sirve solo para escribir código: es una excelente compañera de entrenamiento. En lugar de pedir una respuesta lista, pídele que desafía tu razonamiento. Después de definir mejor el problema, pide un SOP (procedimiento operativo) breve, de como máximo 800 caracteres.
Presenta el resultado deseado
"Este es el resultado que quiero: […]." Indica el destino, no el camino.
Pide una opinión contraria
"Cuestiona mi razonamiento y ayúdame a definir claramente el problema." Deja que la IA encuentre las fallas.
Genera el SOP
"Crea un SOP para esto, con un máximo de 800 caracteres." Este procedimiento breve se convierte en la guía de construcción.
💡 Por qué limitarlo a 800 caracteres
Un SOP breve fuerza la claridad: solo cabe lo esencial. Es fácil pegarlo en un archivo de contexto y que el agente lo vuelva a leer sin "desbordar" la memoria.
entrenamiento, no respuesta
encontrar fallas
procedimiento
caracteres
🎨 Inspiración de diseño
La IA es excelente en diseño, pero funciona mucho mejor con especificidad. En lugar de pedir "hazlo bonito", dale al agente referencias visuales: capturas de pantalla de sitios que te gustan. Una imagen comunica una intención en segundos.
🎯 Arma una lista seleccionada
Guarda una pequeña lista de sitios de referencia — Awwwards, Dribbble, Mobbin, Land-book son buenos puntos de partida. Cuando vayas a construir, elige 1 o 2 capturas que representen el «ambiente» visual que deseas y entrégaselas al agente.
screenshot
no «bonito»
seleccionadas
visual claro
⚡ Agent Manager y agentes paralelos
O Agent Manager te permite gestionar varios agentes y proyectos al mismo tiempo. La regla es simple: cada workspace = un proyecto. Con agentes en paralelo, avanzas mucho más rápido: mientras uno trabaja, tú revisas o inicias otro.
🗂️ Un workspace por proyecto
Separar los proyectos en workspaces mantiene limpio cada contexto y evita que un agente desordene el trabajo de otro.
- •Workspace A: el rastreador de precios
- •Workspace B: un sitio personal
- •Cada uno con su agente, su contexto y su historial.
| Modo | Cómo es | Velocidad |
|---|---|---|
| Un agente a la vez | tú esperas cada tarea | lento |
| Agentes paralelos | varios trabajan juntos | rápido |
| Workspace por proyecto | contexto aislado | organizado |
ves todo
= 1 proyecto
varios a la vez
más producción
👥 Agentes = empleados
Trata a cada agente como un empleado de tu equipo. La regla de oro: da jobs separados. Nunca pongas dos agentes en la misma tarea — chocan, sobrescriben el trabajo de los demás y generan confusión. Es como un equipo donde nadie hace el trabajo de los demás.
✓ Tareas separadas
- ✓El agente A se encarga del front-end
- ✓El agente B se encarga de la base de datos
- ✓Cada uno con una responsabilidad clara
✗ Dos en la misma tarea
- ✗Editan los mismos archivos al mismo tiempo
- ✗Uno deshace lo que hizo el otro
- ✗Resultado: conflicto y trabajo repetido
🧠 Piensa como gestor
Antes de poner en marcha a los agentes, haz un pequeño «organigrama»: enumera las tareas y asigna cada una a un agente. Si dos tareas afectan el mismo archivo, hazlas en secuencia, no en paralelo.
con función
jobs distintos
archivos distintos
cada uno en lo suyo
📋 Modo de planificación e inbox
Antes de dejar que el agente ejecute, ponlo en modo de planificación. Propone un plan; tú revisa y aprueba, exactamente como lo harías con un empleado. Las acciones quedan a la espera de tu aprobación en la bandeja de entrada.
El agente planifica
En planning mode, describe los pasos antes de tocar cualquier archivo.
Revisas
Lee el plan como gerente: ¿tiene sentido? ¿falta algo? ¿está en el orden correcto?
Apruébalo en la bandeja de entrada
Las acciones sensibles requieren aprobación. Solo entonces el agente ejecuta lo acordado.
🛡️ Por qué aprobar antes
Aprobar el plan evita que el agente construya algo equivocado durante horas. Cinco minutos de revisión ahorran todo un retrabajo.
antes de actuar
como gestor
aprueba acciones
solo después de la aprobación
📝 Archivo de contexto (Gemini.md)
La ventana de contexto del agente es limitada: en proyectos largos, «se desborda» y olvida lo que acordaron. La solución es un archivo de contexto (p. ej.: Gemini.md): un .md con las reglas del proyecto que el agente vuelve a leer siempre.
| Archivo | Guarda | Para qué |
|---|---|---|
| Gemini.md | reglas: fuente, colores, propósito | mantener el estándar del proyecto |
| research.md | investigación reutilizable | no investigar lo mismo 2× |
# Projeto: rastreador de preços Propósito: acompanhar 5 produtos e mostrar a variação de preço de forma calma. Fonte: Inter. Cores: fundo escuro, acento azul. Regra: nada de alertas barulhentos; UI sóbria. Banco: Supabase (tabela "produtos").
💡 Memoria a largo plazo
El archivo de contexto sobrevive a que se llene la ventana: incluso cuando el agente "olvida" la conversación, vuelve a leer el Gemini.md y vuelve al rumbo. Es la memoria duradera del proyecto.
reglas del proyecto
no olvides
al desbordarse
investigación guardada
🔌 MCP + Supabase
Para que la app guarde datos de verdad, necesita una base de datos. El MCP (Model Context Protocol) es el "lenguaje universal" que permite que las apps y los servicios se comuniquen. Conecta una base de datos (Supabase) mediante un token y el agente crea el proyecto y escribe el Solo SQL.
🔗 El camino hacia los datos
- 1.Habilita el MCP de Supabase y pega el token de acceso.
- 2.Pídele al agente: «crea un proyecto llamado [nombre]».
- 3.Crea las tablas y escribe el SQL — no escribes la base de datos a mano.
lengua universal
la base de datos
la conexión
el agente escribe
🔬 Ejemplo práctico
Vamos a construir una app que sigue 5 productos y muestra la variación de precio de forma tranquila y atractiva. El camino sigue exactamente el orden del módulo:
- Define el problema — "quiero saber cuándo vale la pena comprar, sin ansiedad por recibir una alerta por cada centavo".
- Genera el SOP (≤ 800 caracteres) con la IA como sparring.
- Inspiración visual — elige 1 captura de pantalla de un panel sobrio que admires.
- Construye en local — agente en planning mode, base de datos en Supabase vía MCP, app ejecutándose en localhost.
Fíjate: 4 de las 5 etapas ocurren antes de «hacer la app». Ahí está la calidad.
🏋️ Ejercicio
Toma una idea tuya y llévala del problema a localhost:
- Define el problema con la IA — pídele que desafíe tu razonamiento.
- Genera un SOP de máximo 800 caracteres.
- Construye una app sencilla que se ejecute en localhost — empieza con algo pequeño, una sola pantalla.
En la Ruta 2.2, publicaremos esta misma app en el mundo.
⚡ Prompts listos
Copia, pega en tu asistente de IA y adapta a tu caso.
Este es el resultado deseado: "[describe el resultado que quieres]". Desafía mi razonamiento y ayúdame a definir claramente el problema. Haz las preguntas que faltan antes de proponer cualquier solución.
Crea un SOP para esto, de no más de 800 caracteres. Enumera los pasos en orden y el resultado esperado de cada uno.
Pesquise o que os melhores [tipo de app] têm em comum (estrutura, telas, padrões de uso) e salve num arquivo research.md que eu possa reusar nos próximos projetos.
Usando o MCP do Supabase, crie um projeto chamado [nome]. Crie as tabelas necessárias e escreva o SQL você mesmo.
✅ Resumen del módulo
Siguiente módulo:
2.2 — Publicar y mantener tu app