CodeIA Logo
Inicio
¿Qué es la Ingeniería de Contexto?ExperienciaProyectos realizados
Comunidad
FeedMiembrosCuadro de HonorCalendarioBolsa de trabajoEncuestasProyectos de la Comunidad
NoticiasPrecios
Formación
CursosLecciones
Co-Projects
Propuestas de proyectosEnviar propuesta de proyecto
RoadmapGlosarioContacto
Iniciar Sesión
CodeIA Logo

Transformando ideas en software profesional con IA. La nueva era del desarrollo ágil.

Legal

Política de PrivacidadTérminos de ServicioTérminos de SuscripciónAviso LegalCookies

Sígueme

Contactar

© 2026 CodeIA. Todos los derechos reservados.

Hecho con♥por sn4p.dev

Volver al catálogo
Tu navegador no soporta video.
0:000:00

Lección 3 - Cocinando Fase 1

Aprender a ejecutar planes de código de forma automatizada, diseñar estructuras de bases de datos seguras y auditar el comportamiento de la IA para asegurar que cumpla con los estándares de calidad y flujos de trabajo profesionales (Git).

TutorialPrincipiante
Hace 2 meses57m 42s17 visualizaciones
Iniciar sesión para comenzarCrear cuenta

🎯 Objetivo de la Lección

Aprender a ejecutar planes de código de forma automatizada, diseñar estructuras de bases de datos seguras y auditar el comportamiento de la IA para asegurar que cumpla con los estándares de calidad y flujos de trabajo profesionales (Git).


Módulo 1: Automatización y Delegación ("Cook" y Permisos)

▶️ Inicio de la ejecución

Una vez validado el plan, se utiliza el comando cook en ClaudeKit junto con el flag auto para que la IA inicie el desarrollo de las fases automáticamente, evitando hacer preguntas repetitivas en cada paso.

🧑‍💻 El Agente Full Stack Developer

La IA asume el rol de un desarrollador completo con reglas y restricciones estrictas, trabajando fase por fase de forma independiente.

⛓️ Ejecución autónoma y encadenamiento (Bypass Permissions)

Para flujos de trabajo avanzados, se pueden saltar las confirmaciones manuales de permisos. Esto permite encadenar agentes (por ejemplo, un agente programa, otro hace testing, otro revisa accesibilidad o SEO) de forma ininterrumpida, permitiendo al desarrollador supervisar visualmente el progreso desde herramientas como Discord o Telegram.


Módulo 2: Arquitectura de la Base de Datos y Prevención de Conflictos

🔧 Gestión del entorno local

Al trabajar con bases de datos (como PostgreSQL con Prisma), el desarrollador debe estar atento a los puertos asignados para evitar conflictos con otras bases de datos locales. En caso de conflicto, se le debe instruir a la IA que modifique el puerto (por ejemplo, del 5432 al 5436).

💥 Efecto Cascada y Set Null

Se debe diseñar la base de datos previendo el borrado de elementos. Si se elimina un registro principal (como una web o prototipo), las dependencias deben eliminarse en cascada para no dejar datos huérfanos, o bien establecerse en null.

🗑️ Soft Delete (Papelera de reciclaje)

Como buena práctica, en lugar de borrar datos permanentemente, se puede implementar un soft delete. Esto significa crear un estado de “papelera de reciclaje” que oculte el registro, permitiendo su recuperación futura si el borrado fue accidental.


Módulo 3: Intervención Dinámica y Estrategia de Interfaz

🔄 Cambios de herramientas en caliente

El desarrollador puede interrumpir el ciclo de trabajo de la IA si necesita cambiar la pila tecnológica. Por ejemplo, instruir a la IA para que deje de usar npm y migre todo a bun en pleno proceso para mejorar la velocidad, obligando a la IA a refactorizar dependencias y comandos de ejecución.

🎨 Estrategia de Componentes UI

Antes de maquetar el diseño visual definitivo, es recomendable crear primero una “página de componentes” genérica. En ella se centralizan elementos reutilizables como botones, formularios o cards, garantizando un diseño uniforme en todo el proyecto.

📂 Modularidad en Plantillas

Las plantillas base de los prototipos se diseñan para ser escalables. Utilizando otras IAs, una misma plantilla (ej. para clínica) se puede derivar en múltiples versiones (minimalista, moderna, animada), multiplicando fácilmente las opciones a ofrecer al cliente.


Módulo 4: Disciplina, Auditoría y Flujo de Trabajo en Git

⚠️ Llamadas de atención a la IA

A veces, el modelo de lenguaje intentará ir demasiado rápido (“como una moto”), saltándose tareas o asumiendo que fases completas están listas sin verificarlas. El desarrollador debe actuar como un líder de equipo, exigiendo a la IA que detenga su avance, marque las tareas (checks) reales y no pase a la siguiente fase sin levantar la base de datos o compilar el código.

📚 Control de Reglas (Skills)

Durante el proceso, es vital recordar a la IA sus “skills” o reglas establecidas. Al recordarle la prohibición del uso de useEffect, la IA audita su propio código y justifica su decisión demostrando que lo usó correctamente dentro de un custom hook.

🌿 Estricto Flujo de Git

Se le debe prohibir a la IA hacer cambios desordenados. La norma es que, al terminar cada fase principal, la IA debe:

  1. Hacer un commit descriptivo
  2. Cambiar a la rama develop (git checkout develop)
  3. Realizar un merge para que el código pueda ser probado antes de llegar a producción

Índice de la sesión

00:001:40
Introducción y Preparación del Entorno

El video comienza con la bienvenida a la tercera lección de ProtoWeb, revisando el estado del repositorio y la preparación para un commit inicial. Se explica el uso de comandos personalizados y la configuración del entorno de desarrollo.

01:401:45
Configuración del Plan de Implementación

Se detalla la ejecución del comando 'cook' con el flag 'Auto' para iniciar la implementación automática del plan. Se muestra cómo el agente 'full stack developer' comienza a trabajar en la fase 1 del proyecto.

03:251:55
Roles y Restricciones del Agente

Se explican las reglas, responsabilidades y restricciones del agente 'full stack developer', incluyendo su independencia, el reporte de estado y la habilitación de fases dependientes. Se discute la importancia de las restricciones y la ejecución paralela segura.

05:202:40
Creación de la Aplicación Next.js y Dependencias

El agente procede a crear la aplicación Next.js con las últimas versiones, configurando TypeScript, Tailwind, ESLint y otros elementos. Se instala Prisma y otras dependencias, prestando atención a posibles conflictos de puertos de base de datos.

08:003:40
Modelado de Datos con Prisma

Se revisa el esquema de Prisma, analizando los modelos de usuario, sesión, cuenta, verificación y prototipo. Se discute el concepto de 'delete en cascada' y 'soft delete' para la gestión de datos.

11:408:20
Revisión del Roadmap y Descarte de Ideas

Se analiza el roadmap del proyecto, discutiendo la implementación de dashboards internos, SEO, multilingüismo y la gestión de reservas. Se descartan algunas ideas del roadmap original por estar intrínsecas en otros desarrollos.

20:003:20
Ajustes en el Ciclo de Desarrollo: Npm a Bun

Se decide cambiar el gestor de paquetes de npm a Bun, explicando cómo esto afecta el ciclo de trabajo del agente. Se enfatiza la necesidad de que el agente adapte sus tareas a este cambio.

23:204:10
Generación de Plantillas y Componentes

El agente crea plantillas para diferentes tipos de negocios (clínica, abogados, peluquería) y componentes reutilizables. Se explica la estrategia de crear una página de componentes para mantener un diseño uniforme.

27:304:10
Corrección de Errores y Estrategia de Commits

Se identifican y corrigen errores en el proceso, especialmente relacionados con la verificación de tareas y la estrategia de commits. Se instruye al agente sobre la importancia de realizar commits por fase y mergear a la rama 'develop'.

31:405:00
Manejo de UseEffect y Dependencias

Se aborda el uso de 'useEffect' y cómo el agente debe adherirse a las reglas de no usarlo directamente en componentes. Se verifica la correcta instalación de Bun y se insiste en que el agente marque los 'todos' internos.

36:406:40
Lanzamiento de la Aplicación y Primeras Pruebas

Se lanza la aplicación con Bun, observando su funcionamiento inicial. Se detectan y corrigen errores relacionados con el SDK de IA y la versión de Prisma, asegurando un build limpio.

43:206:40
Resolución de Conflictos de Puertos de Base de Datos

Se resuelve un conflicto de puertos de base de datos, cambiando el puerto de 5432 a 5436 para evitar interferencias. Se otorgan los permisos necesarios a Prisma para la migración de la base de datos.

50:007:36
Finalización de la Fase 1 y Preparación para la Siguiente

Se completa la migración de la base de datos y se verifican los criterios de la fase 1. El agente realiza los commits y el merge a la rama 'develop', dejando el proyecto listo para la siguiente sesión.

Lecciones relacionadas

  • CodeIA2025 - Sesión 1 – Inducción y Mentalidad

    CodeIA2025 - Sesión 1 – Inducción y Mentalidad

    2h 34m 43s

  • CodeIA2025 - Sesión 2 – Data Scraper

    CodeIA2025 - Sesión 2 – Data Scraper

    2h 29m 21s

  • Git y Copilot en Visual Studio Code

    Git y Copilot en Visual Studio Code

    12m 43s

  • Cómo configurar z.ai con tu cuenta de Claude paso a paso

    Cómo configurar z.ai con tu cuenta de Claude paso a paso

    41m 13s