Lección 1 - Research

Lección introductoria del proyecto ProtoWeb: un generador de prototipos de alta fidelidad por sectores que automatiza la captación de leads mediante agentes de IA, chat interactivo y código generado con Next.js, FastAPI y LangGraph.

SesiónIntermedio

Hace 2 meses42m 22s80 visualizaciones5.0(1 reviews)

Tecnologías

JavaScriptPlanningAsistente IA para código

Herramientas IA utilizadas

Claudez.ai

Iniciar sesión para comenzar Crear cuenta

1. Introducción y Concepto del Proyecto

Definición de ProtoWeb: No es un constructor de sitios finales, sino un generador de prototipos de alta fidelidad para cualificar leads de forma automática.

Propósito: Entregar valor inmediato al usuario mediante un prototipo funcional y automatizar la captación de datos para un equipo comercial.

Diferenciación: Enfoque en prototipado rápido para evitar problemas de mantenimiento y despliegue complejo en la fase gratuita.

2. Arquitectura y Stack Tecnológico

Frontend: Uso de Next.js 16.2, Tailwind CSS 4.x y React 19.

Backend y Orquestación: API desarrollada con FastAPI (Python) utilizando LangGraph para la gestión

Contenido Protegido

Inicia sesión para acceder al contenido completo.

Iniciar Sesión Crear Cuenta

Índice de la sesión

00:001:42

Introducción al Curso y Propuesta de Proyecto ProtoWeb

El instructor presenta el curso para crear un sistema de páginas web automáticas, explicando por qué no se enfocará en Cloud Kit inicialmente y detallando la idea de negocio detrás de ProtoWeb: un generador de prototipos web con gancho de ventas.

01:424:36

Definición del Alcance y Stack Tecnológico

Se aclara que el sistema será un generador de prototipos, no un creador de sitios web completos. Se discute el stack tecnológico propuesto, incluyendo Next.js y Tailwind para el frontend, FastAPI con Python y LangGraph para el backend, OpenRouter para modelos de IA de bajo costo, y PostgreSQL para la base de datos.

06:186:09

Flujo de Usuario y Arquitectura del Sistema

Se describe la experiencia del usuario, que incluirá un chat interactivo para la captura de información, agentes para analizar URLs y generar contenido, y el despliegue de prototipos en subdominios. Se introduce la idea de nodos especializados (analista, redactor, desarrollador, visual) y la necesidad de un dashboard de administración.

12:274:52

Estrategia de Costos y Generación de Contenido

Se detalla la estrategia para mantener bajos los costos, utilizando OpenRouter con modelos económicos y priorizando imágenes de Unsplash, con generación de imágenes solo cuando sea necesario. Se explica cómo se almacenarán los prototipos y se presenta el nombre del proyecto: ProtoWeb.

17:196:23

Configuración Inicial del Entorno de Desarrollo

El instructor comienza la configuración del entorno, clonando un repositorio base, renombrándolo a ProtoWeb y eliminando la relación con el repositorio original para establecer uno propio.

23:426:27

Uso de Cloud Kit y Definición de Skills

Se introduce el uso de Cloud Kit y se seleccionan las 'skills' (Research, Scout, Brainstorm, Documentación) que se utilizarán para la fase de investigación y planificación del proyecto, destacando la importancia del control sobre el proceso.

30:095:20

Especificaciones Técnicas Adicionales y Requisitos

Se añaden especificaciones técnicas clave como Next.js 16.2, React 19, Tailwind 4X, y se establecen requisitos como la creación de 8-10 plantillas y la disponibilidad de prototipos por 10 días para los usuarios.

35:296:48

Análisis y Reporte de Investigación con Cloud Kit

Cloud Kit realiza un research exhaustivo, generando un reporte detallado en formato Markdown que incluye decisiones arquitectónicas, stack tecnológico y consideraciones de despliegue, que el instructor revisa y ajusta para un VPS propio con Docker.