스크립트
00:00:00La ingeniería de bucles se ha vuelto prácticamente esencial para la forma en que usamos los agentes de IA ahora y eso se debe a que
00:00:04los agentes en realidad pueden funcionar por su cuenta durante mucho más tiempo y seguir adelante. Así que vamos a
00:00:09mostrarles tres bucles diferentes y los hemos organizado en niveles para su comodidad.
00:00:13El nivel uno les muestra la unidad básica y cómo usarla de manera eficiente. El nivel dos les muestra cómo construir
00:00:18esa unidad para convertirla en una fábrica y el nivel tres finalmente libera la mayor parte de su tiempo y lo hace verdaderamente
00:00:23agéntico. Como este video está lleno de tanta información, tenemos marcas de tiempo abajo para que
00:00:28puedan regresar a cualquier momento si alguna vez necesitan volver a este video. Además, vamos a
00:00:33usar Claude Code en este video, pero los sistemas que les vamos a mostrar funcionarán con Codex
00:00:38también y en cuanto a las herramientas, estamos usando warp y VS Code. Son fáciles de instalar y solo necesitan
00:00:43abrir una sola carpeta en ambos y empezar a seguirnos. Antes de pasar a cómo
00:00:48implementan la ingeniería de bucles dentro de Vibe Coding, necesitamos explicar qué es un bucle. Así que antes, cuando
00:00:53estaban construyendo algo, ya estaban en un bucle. Le daban un aviso al agente y este empezaba
00:00:57a construir. Luego, cuando terminaba, básicamente les pedía que lo verificaran y si estaba mal, le daban al
00:01:02agente otro aviso y empezaba a construir de nuevo. Ya estaban en un bucle. Ahora, un bucle de agente es
00:01:07cuando se retiran de este proceso y esa parte de verificación pasa también al agente. Y
00:01:12esta es naturalmente la dirección en la que íbamos porque, si lo piensan, construir con agentes no es
00:01:17lo que toma la mayor parte del tiempo. Eso lo hacen de forma autónoma en segundo plano. Lo que realmente requiere
00:01:21su atención es comprobar si el agente tuvo éxito o no. Pero su agente solo puede hacer la
00:01:26verificación si sabe cuál es el resultado correcto. Esa es la parte central del bucle. Pero hay
00:01:30otras partes también. Primero, hay algo que necesita iniciar el bucle. Luego está el bucle en sí.
00:01:35Y al final de cada bucle, básicamente debe haber una verificación que decida si el
00:01:41agente ha terminado o no. Y esa verificación debe ser decidida por ustedes. Así que en un bucle de agente,
00:01:46la parte que conservan es la parte que siempre iba a ser suya. Es la parte que decide
00:01:50si apagan al agente o si necesitan que trabaje más. Realmente no pueden delegar esto. Ahora,
00:01:55tal vez estén pensando, por qué de repente nos mudamos a la ingeniería de bucles y por qué esto no funcionaba
00:01:59hace un año? La respuesta es que los modelos no podían funcionar realmente durante tanto tiempo. Y ahora con los nuevos
00:02:04modelos que están saliendo, básicamente pueden trabajar sin ustedes durante horas. Así que esto es sobre lo que
00:02:08estamos ejecutando todo esto. Es una aplicación de citas para un salón de belleza. Alguien entra al sitio,
00:02:13elige a un estilista y luego puede ver los horarios disponibles de ese estilista en diferentes días y reservar una
00:02:17cita. Y luego está el inicio de sesión del personal porque cada salón que use esto va a tener un
00:02:22recepcionista operándolo. Aprueban o deniegan las solicitudes entrantes y gestionan el calendario
00:02:27para los diferentes estilistas del salón. Ahora mismo falta mucho aquí. No hay página de aterrizaje
00:02:31y hay otras características importantes que todavía necesitamos agregar. Esta es la sesión de Claude Code
00:02:36donde lo construimos. Hicimos esta carpeta de ingeniería de bucles y dentro le pedimos a Claude
00:02:41Code que configurara el proyecto. La aplicación en sí se encuentra en esta carpeta loop salon y es solo una aplicación de Next.js.
00:02:46Si es la primera vez que escuchan eso, no se preocupen. Solo le dicen al modelo que quieren
00:02:51crear una aplicación Next.js y empezar a construir desde ahí y él se encarga de eso por ustedes. Es una
00:02:55de las formas más populares de construir sitios web reales como el que estamos construyendo aquí. Ahora hay
00:03:00algunas cosas que necesitan tener en su carpeta. Primero tenemos nuestro Claude.md y todo lo que dice es que vayan
00:03:04a mirar Agents.md. Eso es porque es posible que necesitemos ejecutar más de un agente en este repositorio,
00:03:09no solo Claude Code. Usamos este archivo porque casi todos los demás agentes usan las instrucciones en
00:03:14Agent.md como reglas de lo que deben hacer cada vez que se abre una nueva sesión. Solo Claude Code usa Claude.md.
00:03:21Y dentro de Agents.md, realmente no tuvimos que escribir nada nosotros mismos. Luego tenemos este archivo
00:03:27llamado design.functional.md que cubre todas las partes en las que se puede hacer clic de la aplicación con las que el usuario realmente
00:03:33tiene que trabajar. Y el diseño para esas proviene de este archivo. Y si se fijaron,
00:03:36la aplicación se ve como Duolingo. Eso es porque copiamos el diseño de Duolingo en ella.
00:03:41Luego hay algunas habilidades que deben conocer. La primera es Grill Me, que usamos mientras
00:03:45estábamos construyendo esta primera versión. Sigue haciéndoles preguntas hasta que el agente realmente tiene claro
00:03:50lo que quieren. Hay otras habilidades aquí también, y llegaremos a ellas más adelante. Y notarán
00:03:55que este proyecto ya está construido. Lo hemos hecho a propósito. Cuando empiezan algo nuevo,
00:03:59lo primero que hacen es un MVP, que es básicamente la versión funcional más básica de su
00:04:04producto que solo hace lo principal y nada más. Y no quieren construir eso con un bucle.
00:04:08Un MVP es rápido de construir de todos modos. Pero para ponerle un bucle, tendrían que decidir cómo es el trabajo terminado
00:04:13antes de que el agente siquiera empiece. Y en ese punto, realmente no saben hacia dónde va el producto
00:04:18todavía. Así que resolver eso termina tomando más tiempo que simplemente construir la primera versión ustedes mismos.
00:04:23Pero antes de empezar con el nivel uno, sería genial si se suscriben al canal y hacen clic
00:04:27en el botón de me gusta. Este pequeño gesto de apoyo significa mucho para nosotros. Así que eso nos lleva al nivel uno de
00:04:33la ingeniería de bucles. Aquí estamos trabajando con un bucle que tiene un objetivo y la comprobación
00:04:37básicamente se quita de ustedes y pasa al agente. Y el lugar donde estamos haciendo esto es la página de aterrizaje,
00:04:42lo cual en realidad suena como el lugar equivocado para ello porque una página de aterrizaje es solo una pantalla.
00:04:47El agente básicamente puede construirla en una sola ejecución y si algo está mal, se puede arreglar con un solo
00:04:51aviso y no con varios. Poner un bucle alrededor de una página de aterrizaje sería más trabajo que la página misma.
00:04:57Pero aquí queremos una página de aterrizaje cargada de movimiento usando la habilidad GSAP. Todo se anima al entrar,
00:05:02y si lo piensan, esa es la parte que no se puede verificar realmente con solo mirarla una vez. Con las animaciones,
00:05:07hay tantos lugares en los que el agente puede equivocarse y requiere mucha ida y vuelta. Esta es
00:05:12en realidad una muy buena manera de comprobar si algo necesita un bucle, que es si requiere mucha ida
00:05:16y vuelta con el agente. Ahora, antes de configurar uno, hay un detalle de nombres que confunde a la gente y
00:05:21con el que se van a topar en el momento en que abran el menú de barra diagonal en Claude Code. Hay un comando llamado
00:05:25loop y hay un comando llamado goal, y la ingeniería de bucles es básicamente el de goal. El comando loop
00:05:30ejecuta un aviso en un temporizador, por lo que cada cinco minutos o cada hora se vuelve a disparar haya cambiado algo
00:05:35o no. Pero el comando goal es el que sigue funcionando hasta que lo que pidieron esté realmente
00:05:40terminado. Así que cuando decimos ingeniería de bucles, estamos usando el comando goal. El comando loop también se usa en
00:05:45algunas formas o flujos de trabajo de ingeniería de bucles, pero no lo usaremos aquí. El comando goal en sí es bastante
00:05:51simple. Escriben barra diagonal goal y luego escriben el objetivo que quieren lograr y también le dicen al
00:05:56modelo cómo verificar si lo logró o no. Luego, al final de cada turno, un modelo más pequeño lee
00:06:00toda la conversación y decide si el agente necesita trabajar en esto de nuevo o si la condición
00:06:05se cumple o no. Así que para iniciar la página de aterrizaje, usamos la habilidad grill me de nuevo y le dijimos que necesitábamos un
00:06:11archivo de especificaciones para esta función. Ahora, antes de entrar en lo que le dijimos, necesitan ver la carpeta
00:06:16de características dentro del proyecto. Cada carpeta allí es una característica que el agente tiene que completar y
00:06:21cada una de esas carpetas contiene dos cosas. Hay un archivo de especificaciones, que es donde todo sobre esa
00:06:25característica queda por escrito y hay una carpeta de verificación que empieza vacía y se llena mientras el
00:06:31agente está ejecutando el bucle para esa característica. Luego le dijimos qué habilidades usar. La primera es
00:06:35la habilidad GSAP y esa es la que les da estas páginas de aterrizaje bellamente animadas, pero una animación
00:06:41tan pesada ralentiza mucho la página. Así que le dijimos que usara la habilidad de optimización también, que
00:06:45revisa la página de nuevo y recupera la velocidad sin quitar la animación. También le dimos una imagen
00:06:50de referencia a seguir, que era esta página de aterrizaje con las ilustraciones en ella. Y lo último que
00:06:55le dijimos fue sobre la comprobación. Normalmente, esta es la parte en la que ustedes y el agente van y vienen,
00:06:59donde miran la página, le dicen qué está mal y él va y lo arregla. Así que le dijimos que para
00:07:04verificar realmente el diseño, tenía que usar la herramienta específica nombrada en nuestro Claude.MD global, que es
00:07:11la que se aplica a cada proyecto en la máquina en lugar de solo a este. Así que lo que escribió fueron
00:07:15ambas cosas a la vez. Es la especificación para construir la página y es la lista de verificación de verificación que se
00:07:20ejecuta contra esa página. Y es por eso que la herramienta de captura de pantalla del archivo global terminó allí,
00:07:25porque esa herramienta toma las capturas de pantalla mucho más rápido que abrir un navegador completo cada vez.
00:07:30Pueden pausar aquí y leer todo el aviso si quieren. Hace que todo esto sea mucho más claro.
00:07:34Después de eso, Grill.me comenzó con sus preguntas y nos hizo todo un conjunto de ellas sobre la página de aterrizaje.
00:07:39Luego le dijimos una cosa más y esta es la cosa que convirtió la especificación en un objetivo. Le dijimos que escribiera el archivo de especificación
00:07:45como un objetivo para poder ejecutarlo con el comando goal e hizo algunos otros cambios a partir de
00:07:50eso, lo que significó que a partir de entonces, todo lo que teníamos que hacer era ejecutar el comando goal y darle el archivo de especificación de la página
00:07:55de aterrizaje. Y hacer todo eso de nuevo para cada característica es el trabajo que no quieren repetir.
00:08:00Así que creamos la habilidad de redacción de objetivos. Tiene todo lo que acabamos de repasar dentro, incluyendo esa línea.
00:08:06Y lo que hace es crear las carpetas dentro de la carpeta de características con los archivos de especificación ya escritos como objetivos.
00:08:11Luego empezó a trabajar y pasó por su primera pasada y luego por una segunda donde tuvo la
00:08:16la lista de nuevo y se evaluaba a sí mismo una y otra vez. Después de eso se detuvo y para entonces
00:08:21había estado funcionando durante 38 minutos y regresó con un error, que era el parpadeo en una de las mascotas.
00:08:26Así que esto es lo que resultó. Tras darle una indicación de corrección más, las mascotas parpadean de la
00:08:31forma que queríamos y ese único error es lo único que la verificación nunca iba a detectar porque una
00:08:36captura de pantalla solo capta un único momento y el intervalo entre un parpadeo y el siguiente es muy corto para
00:08:42que dos capturas lo detecten. Aparte de eso, las ilustraciones quedaron muy bien y van
00:08:46acordes con el estilo de Duolingo que buscábamos, que es el mismo estilo que ya está presente en la
00:08:50aplicación principal. También siguió de cerca la referencia y al hacer clic en reservar ahora te lleva directamente a la
00:08:55aplicación para que puedas empezar a usarla. Ahora bien, hay cierta configuración sobre la cual operará todo a partir de aquí.
00:09:00Hay tres cosas que esta aplicación necesita y que tu propia computadora no puede hacer por sí sola, y no vas a
00:09:05manejar ninguna de ellas tú mismo, así que no te preocupes por esa parte. Así que ahora mismo todo lo que has construido
00:09:10se encuentra en una sola carpeta de tu computadora y esa es la única copia en cualquier parte. Tu computadora falla o
00:09:15borras lo equivocado y todo el proyecto desaparece con ella. Eso es lo primero que tiene que
00:09:20cambiar y GitHub es lo que lo soluciona. Claude escribe el código del proyecto en tu carpeta y GitHub toma ese
00:09:25código en línea y lo guarda en un repositorio, que básicamente es esa misma carpeta viviendo en su sitio en lugar de
00:09:31solo en tu máquina. Lo segundo es que la aplicación aún no recuerda nada. Personas reales
00:09:36van a estar usando esto, por lo que esas reservas deben guardarse en alguna parte; de lo contrario, alguien reserva una
00:09:41cita, actualiza la página y todo simplemente desaparece. Así que necesitas una base de datos y la que estamos
00:09:45utilizando es Supabase. Y lo último es que nadie más puede acceder realmente a tu aplicación porque solo
00:09:50funciona en tu propia computadora. Por lo tanto, debe implementarse, lo que simplemente significa que se coloca en algún lugar de internet
00:09:55donde otras personas puedan abrirla, y Vercel es lo que hace eso. Ahora bien, todo lo que realmente haces en esas tres
00:09:59plataformas es crear una cuenta, lo cual consiste en entrar a cada sitio web y hacer clic en iniciar sesión con Google.
00:10:04No hay nada que configurar ni nada que preparar. Todo lo demás pasa a través del agente y
00:10:08la razón por la que eso funciona es que las tres tienen una interfaz de comandos (CLI). Tu agente no puede hacer clic por un sitio web
00:10:14de la forma en que tú lo haces. Por lo tanto, la CLI es una aplicación para que el agente use la plataforma. Así que normalmente necesitarías
00:10:20crear un repositorio en GitHub y un proyecto en Supabase y Vercel, pero Claude puede simplemente hacer eso usando las CLI.
00:10:26Así que después de haber creado tus cuentas en las tres, regresas con el agente y le indicas que
00:10:31quieres que el agente use las tres mediante la CLI. Te dará un comando para cada una y necesitas
00:10:37ejecutarlos en otra terminal. Tu agente ya está abierto en tu terminal, así que abres
00:10:41una segunda y pegas ese comando allí. Instalará la CLI por ti y luego, para
00:10:46iniciar sesión en tu cuenta, abrirá una página en tu navegador. Después la apruebas y con eso
00:10:51se completa la autenticación. A partir de ese momento, tu agente puede hacer todo en esa plataforma y nunca tendrás
00:10:56que volver a abrir esos sitios. Y en realidad no tienes que recordar nada de esto porque hemos colocado un
00:11:00archivo de configuración gratuito en la descripción. Simplemente le entregas ese archivo al agente y básicamente configura la
00:11:05aplicación de Next.js por ti y luego te guía a través de todo lo demás que necesitas para conectar las tres.
00:11:10Asimismo, dado que las reglas en estas plataformas cambian constantemente, estas plataformas han lanzado
00:11:16habilidades para el agente. GitHub en realidad no necesita una habilidad. No ha cambiado mucho
00:11:21y todavía no está cambiando, así que no tenemos una para eso. Pero tenemos esta habilidad de despliegue a Vercel que básicamente
00:11:26le indica al agente cómo usar la CLI de Vercel para implementar tu proyecto automáticamente. Y luego tenemos la
00:11:31de Supabase y la de mejores prácticas de Supabase. Y de nuevo, estas se activan automáticamente, así que cada vez que tu agente
00:11:37necesite usar cualquiera de estas dos plataformas, simplemente las usará por sí mismo y realmente no
00:11:42tienes que hacer nada. Y esta base de datos de Supabase se llenará de datos y tu proyecto
00:11:47estará en vivo en Vercel. Dejaremos los enlaces a estas habilidades en la descripción a continuación. Pero antes
00:11:52de pasar al siguiente nivel, dediquemos unas palabras a nuestro patrocinador, Hedra. Es fácil agruparlo con
00:11:57agentes como Manus que investigan algo y planifican un proyecto. Hedra también hace eso. La diferencia es
00:12:02lo que sucede después de que te entrega un video terminado, no un documento, ni una presentación. Piensa en Claude combinado con Canva.
00:12:08Hablas con él y construye junto a ti. Lo probamos dentro de un espacio y pedimos un breve video
00:12:13promocional para una aplicación. Lo interesante no fue el video, sino ver cómo llegó el agente hasta ahí.
00:12:18Primero llegaron algunas preguntas aclaratorias, luego un plan propuesto. En lugar de adivinar, Hedra investigó
00:12:23el tema por su cuenta y trajo hallazgos reales. A partir de ahí, el guion completo apareció en el lienzo,
00:12:28el agente nos guió a través de él y salió la promoción terminada. Esto es realmente para cualquiera que haga
00:12:33su marketing en solitario sin un editor y sin un escritor detrás. Básicamente, Hedra le permite a una persona hacer
00:12:38lo que antes requería a todo un equipo. Puedes probarlo gratis en Hedra.com y usar nuestro código para obtener un 50% de descuento
00:12:43en tu primer mes. El enlace y el código están en la descripción de abajo. Así que eso nos lleva al siguiente
00:12:48nivel. El nivel dos se llama el bucle de la fábrica de software. En este nivel, planifican colectivamente múltiples
00:12:53características y las configuran en un bucle para que tu agente pueda seguir trabajando durante la noche en una lista de funciones y
00:12:59no se detenga después de terminar una función. Dado que estos bucles pueden volverse muy largos, se necesita un rastreador para indicarle
00:13:04si la lista de características que se le dio se ha completado o no. Su bucle de objetivos se completa una vez
00:13:09que se han marcado todas las características de la lista. Ahora bien, cuando planificas nuevas características,
00:13:13no solo debes escribir qué hacer, sino que realmente debes crear la interfaz de usuario. Esto se llama
00:13:18prototipo y es una versión totalmente interactiva de la aplicación que en realidad no funciona. Hay dos razones
00:13:23enormes para construir un prototipo de interfaz antes de empezar a construir. La primera razón es que con un
00:13:28prototipo, puedes descubrir si lo que imaginabas construir era realmente lo que
00:13:33querías construir. Y la segunda razón es que este prototipo se convierte en una forma para que el agente
00:13:37que trabaja en un bucle verifique si lo que construyó es correcto o no. Ahora, en la fábrica,
00:13:42tienes la lista y el agente ejecuta la lista en un bucle trabajando en cada elemento uno por uno. Pero, ¿cómo
00:13:48trabaja en cada elemento individual? Cuando el agente principal elige un elemento, no realiza la construcción
00:13:53por sí mismo. Le entrega la tarea a un subagente y este completa la función. Pero, ¿qué pasa si el
00:13:58subagente arruina la construcción y tu aplicación queda inservible? Es por esto que el agente principal hace una copia
00:14:03de la carpeta llamada rama (branch) y el agente trabaja en ella. Cuando el agente termina, no se verifica
00:14:07a sí mismo. Esto nos lleva a otra regla muy importante en la ingeniería de bucles. El agente que hace el trabajo
00:14:13nunca debe verificarlo. La verificación siempre debe encomendarse a otro agente con una ventana de contexto limpia.
00:14:18Dado que esta es exactamente la forma en que operan los subagentes, el agente principal le entrega la rama a un agente de revisión
00:14:24adversaria. Esto significa que el agente siempre debe creer que hay algún error en el trabajo realizado.
00:14:29Así es como resulta útil para detectar errores. Por lo tanto, si hay algún problema por parte del agente de revisión
00:14:34adversaria, el agente principal tiene que iniciar el agente de construcción nuevamente y esto continúa en un bucle hasta que la función
00:14:39haya sido marcada en la lista. Una vez que completa esa función, tiene que poner el trabajo de esa rama
00:14:44en la aplicación implementada para que los usuarios puedan empezar a usar la nueva función. Así que, por si no lo sabes,
00:14:48la versión principal del código en GitHub es lo que realmente se muestra en la aplicación implementada en Vercel.
00:14:53Por lo tanto, si la rama se fusiona con la versión principal, la función de esa rama pasará a la aplicación
00:14:58implementada. Aquí es donde entra en juego tu aprobación final. Cuando se termina una función, se crea una solicitud de extracción (pull request).
00:15:03Una solicitud de extracción es una petición para fusionar la rama de la función con la rama principal. En esa solicitud,
00:15:08el agente también adjuntará capturas de pantalla. Pero si quieres estar extra seguro, puedes probar si la función
00:15:13funciona realmente en tu computadora dentro de la carpeta, pidiéndole a Claude que cambie a esa rama y luego
00:15:18probándola. Si es correcta, puedes fusionar la solicitud de extracción. Así que si volvemos a echar un vistazo a nuestras habilidades,
00:15:22puedes ver que ahora tenemos esta nueva habilidad de funciones. Cuando invocas esta habilidad, básicamente le va a
00:15:27indicar al agente que se debe crear una carpeta aquí dentro y cada carpeta debe tener un archivo spec.md
00:15:33y otros elementos para su verificación. Como puedes ver, básicamente definimos dos funciones aquí.
00:15:38Una función en la que ahora debe haber una página de servicios con cada persona en el salón. Y luego la
00:15:43segunda es que cada vez que una persona tiene una sesión con un estilista del salón, puede básicamente añadir una
00:15:48reseña a través de la recepcionista, que es el administrador. Ahora, en lugar de usar la habilidad de nueva función aquí,
00:15:53usamos directamente la habilidad de redactor de objetivos (goal writer). Ahora bien, todas estas habilidades están interconectadas. Así que si
00:15:58no queremos que una función se convierta en un objetivo, si solo queremos trabajar en la función sin un bucle,
00:16:03no usamos el redactor de objetivos. Pero si lo usamos, activará esta habilidad de nueva función y
00:16:08añadirá las reglas para convertir un archivo de especificaciones en un objetivo ejecutable también. Como ya
00:16:13lo discutimos, debes crear la interfaz de usuario de la función antes de empezar a implementarla. Por eso
00:16:18la habilidad de nueva función recurre a la habilidad de interfaz de usuario funcional, que básicamente le indica
00:16:23que debe haber una carpeta llamada mocks dentro de la aplicación y que el archivo HTML dentro de esa carpeta de mocks será
00:16:29un prototipo totalmente funcional de toda la aplicación. Y tendrá las vistas para
00:16:33tanto la recepcionista como el cliente. Se supone que solo debe haber uno de estos en cada
00:16:37carpeta y la habilidad de interfaz de usuario funcional solo lo creará si no se ha creado antes. Y
00:16:42obviamente, dado que se activa cada vez que se crea una nueva función, dentro de cada carpeta de funciones,
00:16:47añadirá también un archivo HTML. Ahora tomará la aplicación ya clonada y solo tomará
00:16:53la parte que la función está cambiando y mostrará solo eso. Por ejemplo, tenemos esta función de servicios
00:16:58aquí. Y si abrimos su maqueta, puedes ver que vamos a añadir una página de servicios completa a la aplicación,
00:17:04y será accesible a través de este botón. Y si haces clic en reservar ahora y eliges un estilista,
00:17:08primero te preguntará qué servicio quieres tomar con el estilista. Ahora bien, esto no se ha implementado realmente
00:17:13en la aplicación, y no se implementó dentro del clon, pero está implementado en este prototipo de función.
00:17:19Así que te ayuda a visualizar si lo que estás haciendo es realmente lo que querías. Y esto también
00:17:24se convierte en una forma en que el bucle puede verificar realmente si lo que está construyendo es correcto o no. Así que después de eso,
00:17:29le dijimos que escribiera las dos funciones, y básicamente escribió las carpetas para las reseñas de sesiones
00:17:33y los servicios. Esta es la interfaz de usuario para las reseñas de sesiones. Y de nuevo, puedes verla tanto como
00:17:38cliente como recepcionista. La recepcionista añadirá las reseñas en nombre del cliente,
00:17:43porque así es como imaginamos que funciona el sitio ahora mismo. Esto no ocurriría en un sitio real,
00:17:47pero como este es un sitio de demostración, simplemente estamos creando funciones. Como ahora tenemos varias funciones
00:17:52con las que trabajar, básicamente necesitamos tener una lista para realizar un seguimiento de ellas. Por eso tenemos esta habilidad
00:17:57de lote de funciones, que básicamente utiliza este archivo Markdown Q, que es solo una tabla única
00:18:02en la que se enumeran las funciones. Por ejemplo, ahora mismo, el bucle sigue en marcha y está construyendo
00:18:06la primera y la segunda sigue en pendientes, y simplemente las irá marcando una por una. Así que solo
00:18:11tienes que invocar la habilidad y decirle que añada las funciones que deseas. Y luego, como puedes ver,
00:18:16dijo que estaba escribiendo ambos archivos y añadió esas funciones. Luego, una vez que las añade,
00:18:21básicamente te da el comando de objetivo para ejecutar realmente. Lo cambiamos un poco y ejecutamos el archivo
00:18:26de la cola dentro de un objetivo y solo se detendría cuando no hubiera ninguna fila en pendientes o en construcción, lo que significa
00:18:31que todas se habían completado y pasado a hechas. Y básicamente comenzó a trabajar. Todavía continúa
00:18:36en la primera función y, como ya te dijimos, primero usaría un subagente para construir realmente
00:18:41las cosas y luego, para comprobar y verificar su trabajo, lanzaría un agente adversario. Todavía sigue,
00:18:46han pasado unas tres horas y os mostraremos el resultado final una vez que esté completo. Como puedes
00:18:51ver, hemos abierto GitHub y tenemos nuestro proyecto loop salon aquí mismo. Si no puedes encontrarlo,
00:18:55puedes simplemente decirle al agente que te dé este enlace y podrás abrirlo. Así que aquí mismo,
00:19:00verás esta pestaña de solicitudes de extracción y, tras abrirla, verás la solicitud de extracción que el
00:19:04agente ha hecho para tu revisión. Si miras esto, nos ha dado el resumen completo y luego
00:19:09nos ha dado realmente las capturas de pantalla de las páginas, dándonos pruebas de que el trabajo que necesitaba
00:19:13hacerse realmente se ha hecho. Una vez que revisemos todo esto, podemos simplemente fusionar la solicitud de extracción. Y como
00:19:18puedes ver, tenemos la versión alojada en vivo aquí mismo. No tiene un dominio, por lo que termina
00:19:23en Vercel. Pero como puedes ver, queríamos que se añadiera esta función de servicios. Y ahora, si vamos
00:19:27a la función de servicios, obtenemos todos los servicios que ofrece el salón. Y si vamos a la opción
00:19:33de reservar ahora, podemos ver realmente que cada estilista tiene sus propios servicios. Y antes de poder reservarlos,
00:19:37básicamente necesitas seleccionar el servicio. Y sucederá lo mismo cuando fusionemos esta
00:19:42segunda solicitud de extracción también. Y todo lo que hemos repasado aquí, lo hemos explicado
00:19:47de manera que puedas ir y construirlo tú mismo. Una habilidad es realmente solo instrucciones escritas en
00:19:51un archivo. Así que no hay nada aquí que no puedas hacer por ti mismo. Pero si no
00:19:56quieres pasar por todo eso, todo el repositorio está en AI labs pro, que es nuestra comunidad.
00:20:01Ese es básicamente todo el sistema, tal como lo acabas de ver con cada habilidad ya ubicada
00:20:05allí. Así que si encuentras valor en lo que hacemos y quieres apoyar al canal, entonces esa es la
00:20:10forma correcta de hacerlo. El enlace estará en la descripción. Así que solo quedan dos cosas por
00:20:14hacer en todo este proceso. Ahora solo necesitas planificar la función y dar el permiso final
00:20:19antes de que la función o cambio sea enviado a tus usuarios. Ninguna de esas cosas requiere realmente
00:20:24que estés en tu portátil, especialmente la parte de planificación. Describes lo que quieres, te hace
00:20:28preguntas hasta que entiende y te construye el prototipo, y todo eso se puede hacer desde tu
00:20:33teléfono. Si es un cambio pequeño, también puedes dar el permiso final desde tu teléfono.
00:20:37Aquí es donde entra el nivel tres y su objetivo principal es eliminar tu dependencia del portátil.
00:20:43Para este propósito, hemos encontrado una aplicación muy buena llamada Paseo. Ejecuta tu agente en tu propio portátil y
00:20:48te da una ventana hacia él desde tu teléfono. Así que tu agente sigue en tu máquina con todos
00:20:52tus archivos, todas tus habilidades y todas tus CLI ya con la sesión iniciada. Y todo lo que construiste en
00:20:57este vídeo sigue funcionando. Claude code también puede hacer esto usando la función de control remoto integrada,
00:21:03pero muchas cosas en ella están rotas. Como las habilidades, realmente no obtienes un menú para ejecutar
00:21:07las habilidades en la función de control remoto de Claude. Así que esta es la aplicación gratuita y la enlazaremos
00:21:12abajo. No vamos a profundizar en todo lo que hace, solo en lo esencial para que puedas empezar
00:21:17con ella. La aplicación tiene un sistema de espacios de trabajo donde cada espacio de trabajo es básicamente una carpeta y abres
00:21:22diferentes chats dentro de ella y ejecuta el propio Claude code para que no necesites otra
00:21:26suscripción separada para ello. Luego hay otra parte muy interesante, que es que no solo
00:21:31se ejecuta en tu portátil, sino que también puede ejecutarse en un Mac mini que hayas conectado. Así que desde tu portátil puedes
00:21:35controlar tu Mac mini y desde tu teléfono puedes controlar ese Mac mini también. Y en lugar de
00:21:40toda la interfaz de terminal, está mucho más pulida. Parece Cursor, pero todas las características siguen
00:21:45estando aquí. El comando de objetivo funciona y también los demás comandos de barra diagonal que hemos creado. Así que hemos abierto
00:21:49la carpeta de ingeniería de loop aquí y hemos hecho una sesión en ella y estamos definiendo una nueva función en ella.
00:21:54También hay una nueva habilidad aquí, que es la habilidad de vista previa móvil, y llegaremos a eso en un
00:21:59segundo. Ahora, para mostrarte cómo se ve esto en el móvil, tenemos el teléfono duplicado aquí mismo y esta es
00:22:03exactamente la misma interfaz que obtienes en tu ordenador. Obtienes todas las funciones de Claude code y tus comandos
00:22:09de barra diagonal listos para usar también, así que para iniciar una nueva función simplemente ejecutas el comando de barra diagonal de nueva función
00:22:14allí mismo en tu móvil. Implementamos el flujo de inicio de sesión para el lado del cliente que no estaba
00:22:18implementado antes. Luego hay una parte muy interesante. Obviamente va a escribir
00:22:22todo el archivo de la función, pero para mostrarte cómo se ven las maquetas, puede darnos imágenes directamente en
00:22:27la interfaz y esas imágenes aparecen en tu móvil también para que puedas verificar la interfaz de usuario allí mismo en
00:22:32tu teléfono. Pero la razón por la que ejecutamos esa habilidad de vista previa móvil es que despliega las maquetas HTML en enlaces y
00:22:37esos son despliegues gratuitos en Vercel, y lo que eso te proporciona es que cuando haces clic en el enlace te lleva
00:22:42a la maqueta real y puedes hacer clic por ahí y usar la aplicación correctamente en lugar de solo mirar
00:22:47imágenes, y eso es realmente lo que quieres cuando estás ejecutando esta fábrica desde tu teléfono.
00:22:51Esto nos lleva al final de este vídeo. Si te gustaría apoyar al canal y ayudarnos a seguir haciendo
00:22:56vídeos como este, puedes hacerlo usando el botón de supergracias de abajo. Como siempre, gracias por ver
00:23:01y nos vemos en el próximo.
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기