Código Claude para gerentes de productos: construir y enviar con IA

1. Introducción al código de Claude: Ahora, imagínese esto por un momento. Eres gerente de producto. Has pasado una semana escribiendo un PRD de diez páginas de largo. Su equipo de ingeniería no está realmente interesado en leer el PRD Su equipo de diseño ha pasado por el PRD, pero en realidad crearon algo que es muy diferente Y al final, te sientes como, Hmm. La salida sigue siendo muy mala. Pero aquí está la verdad. A nadie le importa realmente tu PRD Si eres un gerente de producto que ve que tus usuarios están enfrentando problemas, has platicado con un par de usuarios, y sientes que puedes construir algo súper interesante, bueno, adelante y construirlo. Y si querías construir un producto real, en ese caso, necesitas entender sobre GlotCD Y sí, hay un cordón en él, pero esta herramienta no es sólo para ingeniero. Si usted es un gerente de producto que tiene una comprensión decente sobre la tecnología, en ese caso, puede usar GlotCD para construir realmente un producto que funcione, y luego puede mostrar los miembros de su equipo o incluso a sus compañeros de trabajo, y simplemente puede tomar comentarios e iterar el diseño para Y de hecho, puede mostrar esto a los miembros de su equipo, a sus partes interesadas, y puede tomar más entradas e iterar esta función más rápido Y después de la IA, casi todos los gerentes de producto están usando estas herramientas de IA como el código de coágulo, el Cursor antigravedad para construir el producto Ahora, como gerente de producto, en realidad no está reemplazando al ingeniero, los está ayudando a pasar de un prototipo a una característica final más rápido y ahorrando 30 pos a tiempo. Entonces, oye, soy Navdeep. Llevo casi seis años trabajando como gerente de producto . Y en este curso, voy a ayudarte a entender ¿qué es Claude Code? ¿Cómo lo usas de manera efectiva? ¿Y qué se puede construir usando Claude Code? Y sé que la mayoría de ustedes no son ingenieros y puede que no tengan un muy buen entendimiento técnico, pero eso está perfectamente bien. En este curso, te voy a mandar desde escribir tu primer mensaje en Claude Code hasta construir y enviar el producto, y luego puedes compartir el enlace con tu amigo, y ellos simplemente pueden verificarlo , darte algunos comentarios, y puedes iterar más rápido un par de horas en lugar de esperar semanas, para el diseño o las características implementadas reales tu primer mensaje en Claude Code hasta construir y enviar el producto, y luego puedes compartir el enlace con tu amigo, y ellos simplemente pueden verificarlo , darte algunos comentarios, y puedes iterar más rápido en un par de horas en lugar de esperar semanas, para el diseño o las características implementadas reales de tu equipo de ingeniería. Entonces iremos paso a paso. Primero, te voy a ayudar a entender como instalas lot Cod en tu sistema a como escribes tu primer prompt? Y te voy a dar alguna instrucción básica en torno a los contextos, el modelo que debes elegir, cómo usas el plan, cómo implementas las cosas. Y dónde exactamente puedes implementar tu producto para que realmente puedas mostrarlo a los miembros de tu equipo. Y no solo eso, en realidad voy a mostrarte un flujo de trabajo que puedes usar para construir realmente un producto que funcione. Y vamos a crear una habilidad que pueda ayudarte a agilizar todo el flujo de trabajo. ¿Y adivina qué? No necesitas saber cómo escribir un código y ni siquiera tienes que escribir una sola línea de código, pero necesitas tener una base técnica básica. Entonces, si eres alguien que siempre quiso construir algún producto y hacerlos vivos y quieres que pase de idea en producto más rápido, entonces este curso va a ser perfecto para ti. Al final del curso, podrás convertir tu idea en producto de trabajo real que puedes enviar, mostrarlo a los usuarios, recibir algunos comentarios y construirlo hacia adelante. Entonces, si eres alguien que está emocionado de construir algo genial y aprender código en la nube, bueno, vamos a gotear directamente. 2. 1 Qué es el código de claude: Entonces, oye, todos. Este es nuestro primer video del curso, y en este video, te voy a mostrar qué es el código de coágulo y cómo exactamente puedes instalarlo Entonces voy a simplemente escribir Clot Code dogs, y me llevará a la página de documentación de Cloud Code, y luego lo vamos a instalar en nuestro sistema Ahora, si estás usando MacOas, en ese caso, puedes usar Homebrew para instalar Claude Code en Si estás usando Windows, tienes un paso de instalación diferente. La idea principal es que estemos instalando una interfaz de línea de comandos o CLI para código Cloud para que podamos interactuar con Claude Code directamente usando CLI Entonces esta es la documentación oficial de Claude Code. Si pasas de uno a 2 minutos en esta página, entenderás mucho más sobre Clot Code Y voy a acercar y explicarte algunas cosas. Entonces, como puedes ver en tu pantalla, código de coágulo es una herramienta de codificación agéntica Eso significa que usa un agente para leer tu base de código, editar archivos, ejecutar algún comando y se puede integrar con tus herramientas de desarrollo. Y Claude Code está disponible en tu terminal. Entonces, si estás en Mac, si escribes terminal, se abrirá una terminal. Esta es una terminal muy aburrida que podrías encontrar gente usando mucho hoy en día. Por lo que puedes usar Claude Code dentro de esta terminal. Puedes usar en tu IDE. Entonces, en caso de que estés usando Cursor, código VS, o cualquier entorno de desarrollo integrado, puedes usar eso. Tienen una aplicación de escritorio y también puedes usarla dentro del navegador. Entonces, si vas a la descarga de Claude AI slash, puedes ver donde exactamente puedes usar Claude Para que puedas usar Claude dentro Excel simplemente instalando su extensión. Se puede utilizar dentro de PowerPoint, Word. Tienen nuestra DixoApp. Puedes usar Claude Code dentro de la terminal dentro de todos estos IDE, JetBrain De hecho, también puedes hacerlo desde Slack. Y tienen una aplicación móvil, que está disponible en App Store y Play Store, y tienen una extensión de Chrome. Entonces en este curso, solo nos estamos enfocando en Claude Code, que es su herramienta de codificación agéntica, y no nos estamos enfocando en una interfaz de chat de Claude o en una vaca Claude que se trata más de hacer tu trabajo diario hoja de Excel o en algún otro documento de plan Tan perfecto. Veamos cómo se puede usar e instalar Claude Code? 3. 2 Cómo instalar el código de claude: Por lo que puedes usar Claude Code directamente dentro de tu terminal desde esta terminal. Puedes usar Claude Code dentro de VSCode. Entonces VSCode es un IDE popular de Microsoft. Puedes instalar su aplicación de escritorio. Puedes usarlo desde el navegador web, y también puedes usar un par de otros ID también. Ahora, la forma más sencilla de usar Claude Code o instalarlo en tu sistema es mediante el uso de terminal. Entonces puedes usar Instalación nativa, que es simplemente un comando curl para instalar Claude Code. Y este es su instalador nativo. Creo que recientemente retiraron el paquete NPM. También puedes instalar Claude Code usando Homebrew. Homebrew es un sencillo instalador en Mac, y en Windows, tienen inet Yo no uso Windows. Espero que esto funcione también en Windows. Tan perfecto. Voy a usar una instalación nativa, que funciona muy bien en Mac y Windows. Perfecto. Quieres copiar esto y vas dentro de cualquier terminal de tu elección, ahora, dentro de la terminal, hay un par de comandos que son muy populares. Voy a aumentar el tamaño de la terminal para que sea visible para todos. Ahora, en terminal, si tienes que ver dónde estás exactamente actualmente, puedes escribir LS para lista, y te mostrará tu lugar donde está abierta tu terminal. Para que veas que mi terminal está en la carpeta raíz, donde puedo ver mi libro de texto, mi documento Digamos que quería crear una carpeta dentro del documento donde pueda trabajar de manera segura con código de coágulo Obviamente, solo puedes escribir CD, que es comando y escribir la carpeta a la que quieres que acceda. Y ahora puedes ver que estoy dentro de la carpeta de documentos. Si escribe LS, verá todo el documento o subcarpeta dentro de esta carpeta de documentos. Para que puedas instalar Cloud Code en cualquier lugar. Es una instalación global, así que voy a presionar Command V para pegar el curl que copiamos de la documentación oficial de Cloud, y luego simplemente vamos a instalarlo. De nuevo, puedes usar Homebrew o instalación nativa para instalar Claude Code Estas son solo dos opciones diferentes. No hacen nada diferente. Se trata de un instalador nativo, que simplemente te da una CLI para hablar con Claude Code, que es una herramienta agéntica y perfecta Ahora puedes ver que se ha instalado el Código Claude, aquí hay una versión, y aquí hay una ubicación. No importa desde donde instale, generalmente se instala globalmente en su sistema. Perfecto. Ahora puedo crear una carpeta ahora no hace falta que recuerdes todos estos comandos porque llevo algún tiempo trabajando con Claude Code. Pero generalmente, si tienes que crear un directorio o una carpeta, un comando bash muy corto es MKDIR, y ahora puedes crear una Voy a nombrarlo como código Cloud porque estoy creando un curso sobre Cloud Code. Ahora esto va a crear una carpeta. Si haces LS, que es lista de nuevo dentro de la carpeta, verás una nueva carpeta ahí vas. Ahora puedes simplemente copiarlo y escribir CD solo para entrar dentro de la carpeta. Perfecto. Vaya, algo anda mal, o echo de menos la E al final Ahí. Entonces ahora estoy dentro de esta carpeta y perfecto. Podemos inicializar código de coágulo. Entonces si vuelves a la documentación, y la razón por la que solo te estoy llevando de vuelta a la documentación para que entiendas si algo sale mal o si algo no está sucediendo correctamente, sabes el lugar donde depurar. Tan perfecto. También puedes instalar el Claude Code usando el otro método, y luego puedes iniciar Claude Code en cualquier proyecto haciendo un CD dentro de tu carpeta y luego simplemente escribiendo Cloud súper simple. Así que simplemente puedes escribir Claude y comenzará la sesión de Claude Code. Nuevamente, esta es una sesión. Tan perfecto. Ahora tienes mucho en esta página, y lo voy a explicar paso a paso. 4. 3 introducción a la primera sesión de código de claude: Entonces hay un par de cosas que primero debes entender cuando inicializas tu cuarta sesión en Cloud Code Así que ya estoy conectado a Cloud Code. En tu caso, es posible que hayas cerrado la sesión. Entonces déjame cerrar la sesión primero, y luego te voy a mostrar cómo inicias sesión de nuevo. Entonces, cuando abres Claude Code por primera vez y tecleas Cloud, te preguntará algunas cosas como, Oye, ¿quieres tener un modo oscuro, un modo de luz y simplemente puedes presionar tu tecla de flecha arriba y abajo para ver visualmente cuál te gusta más? Al igual que, hay un modo de luz, hay un modo oscuro, hay un modo de luz. Creo que aunque Auto One me queda bien. Coincide con mi terminal, y luego te da tres opciones. Oye, ¿quieres usar Claude Code con tu suscripción, que espero que el 90% de ustedes esté usando esta opción Pero también tienen cuenta de consola enthropy que es simplemente su precio basado en ABI, y tiene una plataforma de terceros como Badock, Microsoft Foundry En mi caso, estoy usando la suscripción a Claude Code. Voy a hacer click sobre esto y luego me va a llevar por una conexión a la Tierra, simplemente voy a autorizar y perfeccionar. Ahora, ahí lo tenemos. Claude Code ya está listo para ser utilizado. Perfecto. Voy a presionar Enter y después me muestra alguna nota de seguridad. De nuevo voy a presionar Entero dice, Oye, ¿quieres usar la configuración del terminal Claude Code o quieres cambiar alguna configuración? Obviamente, vamos a revisar la parte de ajustes un poco más tarde, pero déjame explicarte qué puedes ver en tu pantalla ¿qué es exactamente esto? Creo que instalé un plugin que te da más información para un código normal de Cloud. Tal vez no veas esto. Creo que la interfaz también cambia mucho más. Si estás viendo este video después de cuatro o cinco o seis meses, es posible que encuentres una interfaz completamente diferente de modelo muy nuevo. Estoy grabando este video a partir del 14 de mayo. Espero que si lo ves para fin de año, podrías encontrar una interfaz diferente. Perfecto. Ahora puedes ver el número de versión de Claude Code. Estoy en la versión 2.1 0.141. Esto es simplemente para asegurarte de que Ahora, puedes estar en la última versión cada vez que la estés usando. Y siempre que uses ese comando Bash, se instala una última versión en tu sistema. Dice, bienvenido de nuevo. Ahora puedo ver mi modelo Opus 4.7 con 1 millón de contexto Window, y mi modo es extra alto Y estoy en el Plan Claude Mx. Puedes tomar un plan de $20 si eso es lo que te gusta. Y estoy dentro de la carpeta de documentos de código Claude. Perfecto. Entonces también me muestra qué hay de nuevo en Claude Code. No tienes que preocuparte por esto. Estos suelen ser pequeños lanzamientos aquí y allá. Tan perfecto. Ahora déjame ayudarte a entender algunas cosas dentro del código Cloud. Cada sesión en la nube tiene un contexto. Puedes ver que mi contexto actual es 0.0. Simplemente voy a preguntar, oye, ¿eres tú? Y me va a responder algo y entonces verás que este contexto poco a poco va a empezar a llenarse. Apenas con el alto, el contexto se ha ido un 3%. Ahora bien, este es un costo del que no tienes que preocuparte porque estoy en un plan de suscripción, y esta es la duración de tu sesión ¿cuánto tiempo lleva funcionando una sesión? Ahora, te recomiendo encarecidamente que estés en la misma sesión para que tengas buena cantidad de contexto. Entonces, ¿todo esto se trata de cómo instalar Claude Code y cómo lo inicializas En el siguiente video, te voy a explicar todos los ajustes en Claude Code y cómo lo usas exactamente. 5. 4 ghostly un nuevo terminal: Tan perfecto. En este video, te voy a mostrar todos los ajustes que hay en Claude Code. Y para ser muy honestos, no tienes que preocuparte por nada de esto porque en la mayoría de los casos, es posible que no los estés usando. Pero solo te estoy explicando esto porque deberías tener una base sólida por si quieres revisar las cosas por ti mismo. Así que cada vez que escribes slash dentro de Claude Code, te da muchas más opciones La razón por la que te estoy mostrando ¿cómo usas Claude Code dentro de tu terminal y no dentro de tu aplicación de escritorio? Es porque se puede ver todo de una manera muy cruda y es fácil de usar. De hecho, te recomendaría instalar una nueva terminal que es mucho mejor que la terminal nativa, y el nombre de esa app es Costi De hecho, déjame cerrar esto, el terminal que estaba usando. Déjame usar a Claude dentro de Kosti. Simplemente voy a escribir quit y va a salir del CLI Ya se ha salido de mi CLI o del CLI Claude. Si escribo claro, todo se ha ido. Ahora voy a usar Claude Code dentro de Kosti. Ahora bien, si no quieres usar CLI, solo puedes ir a la carpeta de documentos, entrar dentro de tu carpeta Claude Code o simplemente hacer clic derecho sobre ella y decir, Oye, quiero abrir una nueva ventana osti Ahora, como pueden ver, tengo tantos tipos diferentes de terminales. Tengo mi terminal nativa, tengo warp como terminal diferente instalado en mi sistema. Tengo sti y CMAC. En tu caso, solo encuentras estas dos opciones. Y si instalas osti, encontrarás estas dos opciones más Tengo cuatro tipos diferentes de terminales, así que a lo mejor estoy un poco más obsesionado con la terminal, supongo. Es perfecto. Déjame acercar un poco para que veas todo, y vamos a escribir LS para ver la lista. Donde exactamente estamos Y luego voy a escribir Claude Code para entrar dentro de la carpeta. No puedo entrar en la carpeta. Oh, ya estoy dentro de la carpeta Claude Code. De hecho, si quieres volver, solo tienes que escribir CD double dot, y volverás fuera de tu carpeta. Entonces voy a volver a entrar en Claude Code porque acabo de salir y perfecto. Ahora puedo escribir claro y claro todo. Y para inicializar a Claude, voy a escribir Claude. Perfecto. Entonces ahora puedes ver a Claude dentro de tu CSTE, que es muy, muy mejor dominó Como puedes ver, las cosas son más claras, más nítidas. Se ven increíbles. Voy a alejar un poco el zoom. Ahí vas. Este es tu Código Claude. 6. Configuración de código de 6 claude: Te estaba explicando todas las diferentes opciones que tengo dentro de Claude Code. Ahora, en cuanto escribas slash, verás un montón de estas opciones Y si estoy aprendiendo Claude Code por primera vez, estoy como, Whoa, ¿qué es exactamente esto No tengo idea de lo que está pasando ahí. Tan perfecto. Una excelente manera de comenzar es simplemente aprendiendo algunas configuraciones en el código Cloud. Voy a escribir slash config, y me va a abrir el panel de configuración Ahora bien, esto es muy fácil de entender, y voy a pasar tal vez 5 minutos explicándote las cosas más importantes y descansar otro, solo puedes aprenderlo todo por ti mismo. El primero es autocompacto. Ahora bien, esto tiene que ser cierto en la mayoría de los casos, auto compacto es una característica que Claude construye para que una vez que el contexto esté lleno, pueda compactar el contexto, y luego pueda comenzar de nuevo. El contexto es un cerebro temporal donde el código de regodeo CLI, almacena toda su base de código e instrucción y ejecuta en base a esa Ahora, una vez que el cerebro está lleno, tiene que comprimir esa memoria y eso es lo que es la autocompactación El siguiente está mostrando cinta. Esto es cierto. Puedes tener propina. El movimiento redish es básicamente funcionalidad de CLI para que no parpadeen. Te voy a decir las cosas más importantes en esto porque de lo contrario, estaremos pasando horas aquí. El modo de pensar es lo que básicamente es una forma de pensar Claude. ¿Quieres ver eso en la interfaz de usuario o no? Sugerencia pronta es que cuando estás escribiendo algo, ¿quieres que Claude te ayude con diferentes sugerencias para que puedas escribir tu próximo prompt de una mejor manera? Déjame ver qué más es importante. Modo de permiso predeterminado. El árbol de trabajo es un concepto separado que te voy a explicar. Entonces hay un estado de ánimo auto que auto lo aprueba todo. Hazte ignorado. Creo que hay muchas más cosas que te puedo explicar a medida que avanzamos en el curso. Y déjame explicarte las cosas más importantes. Cuando entra en su configuración, puede presionar Tab para pasar de la configuración a la configuración al uso a las estadísticas. Déjame mostrarte algunas cosas que son importantes. Entonces, cuando miras el estado, puedes ver tu número de versión, las sesiones en las que te encuentras en este momento, el método de inicio de sesión, organización y otros detalles básicos. Creo que voy a ocultar esta información. Cuando se busca en la configuración, esta es la configuración diferente que puede personalizar de acuerdo a sus requerimientos. El predeterminado es genial, así que no vamos a tocar eso. Te voy a explicar qué es exactamente el modo compacto, el modo pensamiento, y todo lo demás que hay dentro de la configuración. Entonces tienes uso que muestra cuánto Claude has usado en tu límite actual de cinco horas o el límite semanal. Por lo que te muestra tu límite semanal de todos los modelos, el modelo Sonnet, también han lanzado recientemente el diseño de coágulos Entonces te muestra las estadísticas generales. Entonces, como pueden ver, he estado usando mucho código Cloud en abril y mayo, y me muestra mi modelo favorito es Opus 4.7, que es el último Este es el token total que he consumido, así que solo las estadísticas de alto nivel. Entonces voy a salir de esto y voy a ayudarte a entender las cosas construyéndolas realmente. Entonces, en lugar de perder más tiempo explicándote cuáles son estas configuraciones, vamos a construir algo y luego lo vamos a usar. 7. 23 claude vs. codex y cursor: Ahora, antes de seguir adelante en el curso, quiero que cubran algo que es muy importante. Entonces en este momento, solo puedes usar Claude Code solo cuando tengas una suscripción. Por lo que su suscripción comienza desde $20 al mes y va a $200 al mes dependiendo de cuál sea tu uso. Ahora, personalmente tengo una suscripción de $100 Max, pero entiendo. Muchos de ustedes realmente no quieren pagar 20 dólares solo para usar Claude Code. Entonces te voy a mostrar un par de alternativas que puedes usar, y vas a poder hacer exactamente lo mismo con estas alternativas. La primera alternativa es el Códice. Ahora Codex tiene un plan gratuito que te permite usar su agente de codificación sin pagar mucho dinero Ahora bien, sí tienen algunos otros planes como tienen un plan de ir en la India, que te costó solo 400 rupias Tienen un plan plus, que ronda los 20 dólares, y también tienen un plan de $100. Entonces, si eres alguien que solo quería probar estos agentes de codificación de IA, entonces Chat GPT es un buen lugar para comenzar Te dan un uso limitado del Codex en un plan gratuito, y supongo que si solo querías construir algo muy pequeño, solo para experimentar con estos agentes de codificación de IA, entonces puedes usar Codex CLI, simplemente haz clic en Codex, y luego necesitas Esto va a funcionar exactamente de la misma manera, igual que Claude, y te voy a mostrar cómo usas Codex, igual que Claude Code Así que solo ve a la documentación del desarrollador, haz clic en la CLI, y podrás instalar la CLI de Codex y podrás comenzar a usarla Esta es la primera alternativa. nivel gratuito del Codex es bastante generoso y puedes construir algunas cosas por ti mismo Otra opción o alternativa a Claude y Códice es Open Cod Ahora, Open Cod es tremendamente popular porque es de código abierto. Ahora, puedes usar todos los modelos populares dentro OpenCD como tienen Kimi k two, Quin Model, Deep Seek modelo, y también tienen OpenAI y Si vas a su página de precios, puedes usar Open Cord gratis o tienen su plan a partir de $5 durante el primer mes. Al igual que cualquier otro agente de codificación, también tienen una CLI, por lo que solo puedes ir a sus perros desarrolladores, hacer clic en CLI, y puedes instalar OpenCod y puedes comenzar a usarlo Todos estos agentes de codificación de IA son realmente buenos, y no encuentro ninguna diferencia importante cuando estaba usando Claude versus Codex versus Open Cod Entonces esta es la tercera alternativa que tienes. El cuarto es Cursor. Ahora, Cursor es un IDE. Eso significa que puedes instalar Cursor en tu sistema. Pero si querías usar su CLI, bueno, ellos también tienen un CLI Simplemente puedes seguir adelante, instalar su CLI y comenzar a usarlos. En este video, voy a elegir Codex porque siento que nivel gratuito del Codex Codex es bastante generoso y mucha gente realmente puede usarlo Y tienen muy buenos límites. Voy a dar click en CLI y voy a instalar la CLI Entonces abres cualquier terminal, solo puedes usar tu terminal nativo o puedes usar nuestro terminal como Costo que tengo instalado en mi sistema. Simplemente puede instalar Codex CLI globalmente simplemente escribiendo NPMIGlobal e instalando OpenAI Codex. Eso es. Podrás instalar su CLI y luego puedes escribir Codex para simplemente comenzar esto, y sí, si te pide que inicies sesión, simplemente escribe slash login, slash Logout para iniciar sesión y Cerrar sesión, y puedes cambiar el Ahora bien, si estás usando Codex, te recomiendo que uses el último modelo, pero reduce el esfuerzo o razonamiento a medio para que realmente no agotes tu límite realmente rápido Y además, apague el modo rápido si está habilitado. Entonces, si puedes ver que hay un modo rápido, simplemente puedes apagarlo. Simplemente escriba slash fast y podrá desactivar el modo rápido. Perfecto. Y ahora puedes empezar a usar Codex igual que cualquier otro agente de codificación, ya sea código de coágulo o código abierto o Cursor CLI, todos ellos son exactamente iguales Aunque solo escriba algo para ti, en realidad puedes escribir slash, y verás muchas opciones que son exactamente las mismas, al igual que Claude Slash Model te dará acceso a todas sus opciones de modelo que tengas El permiso Slash te permitirá editar el permiso del Codex. Recuerdos de slash, habilidades de sky slash, revisión de engaño. La mayoría de las características y funcionalidad, lo que sea que haya en Claude Code va a ser exactamente lo mismo. Te recomiendo que uses HatGPTs Codex si eres alguien que realmente no quiere pagar por Cloud Y también puedes probar algunos otros CLI Cursor te da un límite realmente bueno en el nivel gratuito Por lo que Cursor también tiene un generoso nivel gratuito. Perfecto. Voy a escribir slash quid para cerrar Codex o slash Cerrar sesión para simplemente cerrarlo. misma manera, puedes simplemente abrir el documento CLI de Open Cod y podrás instalarlo. También puedes hacer lo mismo con Cursor. Perfecto. Esta es una forma de usar cualquier alternativa a la nube si realmente no quieres pagar. 8. 7 Primer chat con código de claude: Tan perfecto. Ahora, cuando estás construyendo algo en Claude Code, necesitas entender que es un agente de codificación. Eso significa que puede hacer muchas cosas por ti, pero necesitas especificarlas y aprobarlas y dirigir este modelo para obtener la salida deseada Eso significa que si le das algo, hará un gran trabajo cuando lo especifiques todo y lo dirijas en la dirección correcta Entonces comencemos construyendo una pequeña aplicación para hacer. App que casi todo el mundo ha usado y construido. Así que vamos a construir una app Todo usando código de coágulo. Ahora bien, hay dos formas de construirlo. O puedes simplemente escribir, Oye, ¿me puedes ayudar a construir una app Todo? Ahora, hay una funcionalidad más agradable que Claude Code tiene en su CLI Si presionas y mantienes presionada la tecla de espacio en tu teclado, no tienes que escribir nada. En realidad puedes hablar y lo escribirá por ti. Entonces voy a darle permiso de audio. ¿Serás capaz de construirla para mí? Vaya, no se ha detectado ningún micrófono, o tengo el problema Entonces estoy usando mi Macbook Pro en modo cerrado, y he conectado mi pantalla para que no esté detectando el micrófono, sino que solo podrás hacerlo desde tu propio sistema. De hecho, estoy usando otra función de voz a texto. Estoy usando Whisper flow, así que también puedo usar eso. Oh, el mismo tema. Creo que la tapa está cerrada, y por eso no puedo grabar nada. Está perfectamente bien. Tenemos que teclearlo. Entonces simplemente voy a hacerle una pregunta, y vamos a ver ¿cómo responde y qué pregunta? Entonces, si observas cuidadosamente, es pensar a través de mi pronta con un esfuerzo extra alto. Y esto que ves en tu pantalla es un modo de pensamiento. Eso significa que me muestra lo que está pensando y cómo exactamente está pensando. Ahora bien, en cuanto escribí algo, en vez de darme una respuesta, me está haciendo un montón de preguntas, lo cual es realmente bueno Cloud Card es muy buena para entender la compensación. Eso significa que si hay cinco formas diferentes de construir algo, te preguntará exactamente, Oye, tengo estas tres opciones. Me ayudas a entender cuál es bueno para ti. Por ejemplo, es decir que oye, ¿cómo debería almacenar los datos la app Todo? ¿Almacena los datos en el almacenamiento local? Eso significa que simplemente abrirás esta app Todo dentro de tu sistema, y tan pronto como la refresques, los datos desaparecerán. Ahora la razón por la que dijo que esta es una forma recomendada, es porque mi prompt era muy genérico. No especificé nada sobre cuál es la tecnología tex que debes usar, cómo debes construirla, ¿qué características y funcionalidad deberíamos tener? ¿Cuál será mi inicio de sesión, autenticación, almacenamiento? Porque no he especificado nada, me está haciendo un montón de preguntas como, Oye, ¿quieres usar el almacenamiento local, que es el sitio del cliente, y en cuanto actualices, tus datos se han ido. ¿Quieres usar Vercel para desplegarlo, publicar berros para base de datos, o quieres tenerlo en Ahora. Esto es sólo una demostración. Obviamente no quiero construir algo solo basado en un prompt tan pequeño. Pero vamos a revisar toda la pregunta. Voy a presionar paso para pasar a la siguiente pregunta. Entonces me está preguntando, Oye, ¿qué estilo quieres usar? ¿Quieres usar tailwind, que es una forma CSS de darle estilo a tu app ¿Quieres usar componente SAD SN, CSS simple, y luego tengo que enviarlo Ahora, obviamente voy a presionar Escape. Entonces como puedes ver, dice, puedes seleccionar pestaña y flecha para navegar por todas estas preguntas o puedes presionar Escape para cancelar. Obviamente, voy a presionar escape porque este es un aviso demasiado pequeño para construir cualquier cosa. Entonces, si presionas escape, todo esto se habrá ido. Ahí vas. Dice que el usuario ha declinado responder a la pregunta. Perfecto. Ahora, voy a escribir el mismo prompt y si quieres hacer eso, puedes copiar y pegar o puedes presionar tecla aero cuando estés dentro de la terminal Ahí vas. Ahora voy a hacer una pregunta. Sólo dime si puedes o no. Ahora, he mencionado explícitamente si se puede construir algo o no, caso afirmativo, ¿cuál es la mejor opción? Ahora bien, la razón por la que estoy haciendo una pregunta abierta, es porque quiero que Claude también me ayude a hacer una lluvia de ideas sobre mi problema dentro de la sesión de Claude Code. Perfecto. Ahora bien, si puedes ver la respuesta que, Oye, esta es la textech que te recomendaré puedes usar Nextes que es simplemente un framework en la parte superior de react and tailwind y SACN y Local stories para construir rápidamente una aplicación de todo pulida para ti, ¿quieres que siga adelante Ahora bien, si lees atentamente, mayoría de los PM no tienen idea de lo que es el próximo año como enrutador de aplicaciones, qué es tailwin, qué es SAT CN, qué es el almacenamiento local Y en realidad no tienes que saberlo. Estos son solo el framework front-end, pero necesitas tener una base técnica básica sobre qué elementos tendrá tu app To. Y para hacer eso, necesitas usar un modo plan. 9. Modo de plan 8 en código cluade: Entonces voy a usar el modo plan. Tan perfecto. Ahora estoy haciendo una pregunta muy sencilla. ¿Puedes seguir adelante, crear un plan para mí y construir la app Studio que puedo usar en mi navegador todos los días? Debería tener inicio de sesión, registro y otra funcionalidad básica en su lugar, y solo hazme una pregunta cuando realmente tengas una fecha real libre. Y simplemente voy a presionar Enter. Ahora bien, si piensas detenidamente, he mencionado crear un plan. Ahora, Claude tiene un modo plan, que te llevará dentro de su plan. Primero creará un plan, pedirá aprobación, y luego solo comenzará a construirlo. Porque recuerden, el problema con el enfoque anterior es que se inició directamente a construir la aplicación Studio. Tan perfecto. Ahora entró en modo plan, creó un plan, y luego me va a preguntar si quieres que construya esta app para ti con este plan o no. Entonces ahora está creando un plan. No lo ha finalizado. Entonces como se puede ver, decidió el textac por sí mismo. Y obviamente, podemos discutir esto por qué ha escogido el textck que es más deseable para el código de coágulo Al igual que el del próximo año es testu de batalla para front end. El ORM de llovizna es muy popular últimamente. PostCRS es la base de datos más deseada. Está usando un proveedor de Oath, y como puedes ver, esta es tu etiqueta de texto, esta es tu capa de autenticación Tiene inicio de sesión de registro, cierre de sesión, ruta protegida, base de datos, interfaz de usuario y puede implementar cosas por usted. Está haciendo muchas cosas. Y si soy una persona no técnica, mi primera pregunta sería, Oye, no tengo ni idea de esto en absoluto, pero déjame seguir leyendo esto y ver qué me sugirió Claude. Dice que para la autenticación y la combinación de bases de datos, esta es la mayor opción arquitectónica. Así que elige uno con cuidado. ¿Quieres usar la base de datos Clerk o Neon, o quieres usar super Base Estas son dos combinaciones diferentes. Entonces yo como persona no técnica no tiene idea, pero aún así voy a elegir lo que me sugirió Claude. Entonces la primera opción es Clerk para autenticación de inicio de sesión y No para elegir como base de datos Digamos que voy a elegir la primera opción, luego para V uno, solo voy a hacer que se apoye en mi plan y vamos a crear un plan. De nuevo, rápidamente respondí a la pregunta porque quería ver el plan y luego decidiré si quería cambiar las cosas o no. Entonces voy a decir que entra en Modo Plan. Y crea un plan para mí. Y entonces voy a aprobar ese plan. Entonces el modo plan es un modo muy popular. Si escribes Plan dentro de la terminal Claude Code, te mostrará que puedes habilitar un modo plan de tu sesión actual y puedes planificar mejor las cosas porque nadie solo quiere que agentes de EI comiencen a ejecutar cosas sin entender el negocio, lo técnico y la compensación. Entonces, como pueden ver, la nube está pensando en estos momentos. Está constantemente usando entrada y los tokens de salida y Sí. Entonces también te está dando el proceso de pensamiento como, Oye, no hay una base de código para explorar. Estoy saltando directo al plan, y estoy usando este textck Tan perfecto. Como puedes ver, ha creado un plan para ti y este plan vive en el plan NOI dot Claude, y en realidad puedes ver este rebajas si vas dentro de esta carpeta específica De hecho, puedes hacer click sobre esto pulsando tecla Comando y abriremos esta ID interior si tienes instalada. Entonces como pueden ver, este es un plan que estoy viendo en mi terminal operacional. Entonces esta es una vista de rebajas y como pueden ver, ha escrito un buen plan para mí. Voy a cerrar esto porque puede que no tengas terminal b, y voy a leer esto por aquí. Tan perfecto. Este es tu plan que Claude creó. Como puedes ver, este es un plan de tu app Todo que estás construyendo con autenticación. Entonces quieres crear una app Todo que puedas abrir en tu navegador y usarla todos los días. Tiene inicio de sesión, registro, inicio sesión y todo lo demás. Estamos utilizando Clerk para autenticación, base de datos Neon PosCRSF Y como puedes ver, esta es tu textag la cual ha elegido automáticamente y luego puedes ver cómo va a construir las cosas por fases Primero, va a instalar todo como los últimos paquetes, frameworks, librerías, se va a instalar el próximo año, SAD CNF front end e inicializar ENV donde solo puedes ingresar tu valor y luego en la segunda fase, comenzará a crear autenticación usando Clerk es simplemente su plataforma de infraestructura de verificación de identidad plataforma de infraestructura de verificación que le permite construir inicio de sesión, registrarse, todo lo demás. Entonces puedes ver que luego está construyendo tu base de datos, construyendo algunas acciones del servidor para que pueda hacer una operación de crud, que es crear, leer , actualizar y eliminar tus elementos de todo, y luego va a crear tu interfaz de usuario o interfaz, y finalmente, pulirá y luego la implementará en algún lugar para que puedas usarla Tan perfecto. Se ve genial. Ahora, en realidad puedes elegir una de estas tres opciones una vez que hayas leído tu plan. Digamos que quería hacer algunos cambios en el plan que oye, no lo desplieguen en ningún lado. Déjame primero probarlo. Entonces voy a ver una vez que hayas terminado con tu desarrollo, No desplieguen. Ejecutarlo localmente. Eso significa que antes de desplegar cualquier cosa en una nube, solo quiero verificarlo primero. Descansar todo se ve bien. Entonces lo que estoy haciendo es que estoy haciendo cambios en el plan antes de que realmente esté implementando el plan. Entonces la primera opción fue esa, oye, solo adelante. Entra en el automode y empieza a implementarlo. La segunda opción fue esa, oye, adelante e implementarlo, pero voy a aprobar manualmente la edición. La cuarta opción es que bueno, haga este pequeño cambio y vuelva a darme el plan. Entonces quiero que haga algunos cambios y volverá a crear un plan. Tan Perfecto. Para que puedas ver estas líneas rojas y verdes. El rojo es lo que ha quitado, y el verde es lo que ha agregado. Ahora, ahora mismo, estoy actualizando mi plan, así que es quitar cosas del plan y agregar cosas nuevas en base a mi instrucción que di. Y genial. Ahora dice que, oye, el resultado pretendido es ejecutarlo localmente primero para que el usuario pueda verlo y luego hacer las cosas después. Es perfecto. Tengo dos opciones. Puedo usar automde donde simplemente lo aprueba todo y no me pregunta, o puedo usar una edición manual Voy a escoger el modo automático, pero en el manual uno, tengo que presionar o aprobar el botón aprobar varias veces. Tan genial. Voy a esperar unos minutos y dejar que construya la app Studio. 10. 9 Cómo crear una aplicación con código de Claude: Tan perfecto. Te voy a explicar algunas cosas ya que se está construyendo a través de este producto. Entonces creó un para hacer eso va a seguir según el plan. Entonces, si vuelves al plan, recuerda, creó fases. Fase uno, va a instalar todo, Fase dos, va a implementar autenticación, luego implementación de base de datos, luego UI, y luego va a pulir la IU y ejecutarla localmente, y luego va a verificar todo y luego puedes construirla aquí, y finalmente, puedes implementarla. Entonces como puedes ver, está pasando por todo en fases, y está instalando la dependencia, los paquetes, y todo. Entonces primero, se va a instalar el próximo año, luego va a volver a autenticarse, luego a la base de datos, luego hará alguna operación de multitudes para asegurarse de que todo haya sido configurado correctamente, y luego construirá un todo. Todo me queda bien. Volveré en algún momento y luego comprobaremos si es capaz de construir los dos do app o no Ahora, siempre que esté construyendo cosas, puedes seguir haciendo alguna pregunta escribiendo slash BTW Por ejemplo, vi esta opción. ¿Qué es exactamente esto? En realidad, puedes simplemente copiar algo o hacerle algunas preguntas como, Oye, tengo curiosidad por qué estamos usando Clerk para iniciar sesión y registrarte Ahora bien, esta es una gran manera de aprender cosas cada vez que Claude está construyendo algo para ti. Ahora, cuando hay que escribir BTW, lo contrario va a hacer cola la solicitud, y eso va a ser malo Entonces en cuanto escribo por cierto, me está preguntando, me está dando algunas respuestas, y esto no está impactando el código que está escribiendo Entonces, como puedes ver, Claude te da inicio de sesión y registro y restablecimiento de contraseña y verificación de correo electrónico en aproximadamente diez líneas de código. Eso significa que con solo escribir diez líneas de código, tendrás inicio de sesión, registro, contraseña, correo electrónico, inicio de sesión social y agente de codificación LLM les encanta ahorrar tiempo y es por eso que para levantar las cosas rápidamente, están usando Tiene componentes pre style y tiene integración nativa con Versal el próximo año. Te brinda administración de usuarios en tiempo real. Entonces te ha dado una respuesta muy rápida. Perfecto. Puedes presionar Escape y esta respuesta será eliminada. Y volvemos al agente de codificación de IA, que está construyendo e implementando cosas. Tan perfecto. Ahora todo se ha hecho. Como puedes ver, toda la fess se ha completado, y si quieres empezar a usarlo, me ha creado una base de datos, o en realidad me está pidiendo que cree una, y luego puedes ejecutar tu app localmente Tan perfecto. Ahora, me está pidiendo que haga algunas cosas que es importante para que esta aplicación se ejecute localmente. Entonces es decir que, oye, primero consigue tu base de datos Neon, así que ve a esta consola, crea un proyecto, copia la cadena de conexión, y luego solo pieza la base de datos R por aquí. Ahora, una pregunta que quizás tengas en mente, ahora, ¿qué es este ejemplo de ENV Local y ENV ¿Por qué me pide crear una base de datos, pegar una URL y algunas claves API? Qué son exactamente estos y por qué mi producto no está funcionando. Si vas a Local host 3,000, no verás nada. Algo anda mal. Ahora, quería mostrarte algunas cosas más antes volver a Claude Dextropp lo que te dará una interfaz de usuario mucho mejor Así que primero voy a hacer clic en Salir, que va a cerrar mi sesión de Claude Code dentro de CLI y volver a escribir Cloud Ahora cuando vuelvas a escribir Cloud, inicializa una nueva sesión Pero no tengo idea porque mira, si miras con atención, el contexto es cero, y literalmente no tengo idea en lo que estaba trabajando. Para ello, necesitas escribir curriculum vitae, y te dará toda tu sesión anterior. Recuerda, esta fue mi sesión anterior donde estaba construyendo un two to app. Voy a hacer click. Voy a presionar el abajo heroky y Y ahora se reanuda mi sesión. Perfecto. Como pueden ver, estaba usando Opus 4.7, mi contexto era 13% Y si quieres comprobar todo esto, en realidad puedes cambiar el modelo. Puedes escribir el modelo de barra diagonal para cambiar tu modelo. Ahora, obviamente, el valor predeterminado es 4.7 con 1 millón de ventana de contexto, que es mejor en la industria, y la mayoría de ustedes no están construyendo proyecto complicado, pero si está construyendo un proyecto súper complicado que tiene múltiples microservicios y una gran base de código, entonces tiene un modo esfuerzo Cuánto esfuerzo quieres que este modelo piense. Entonces, si presionas slash EFFot, verás bajo, medio alto Ahora, para ti, el medio va a funcionar muy bien. Si estás intentando construir algo nuevo desde cero, medio es más que suficiente. Ahora, voy a volver a cambiar a Xi porque tengo muchas fichas que quemar, pero deberías estar en el plan mediano si estás en un plan de 20 dólares. Otra cosa que puedes verificar es escribiendo uso para verificar qué cantidad del código del coágulo has quemado Ahora, agregué esta bonita e interesante barra debajo de cada sesión que me dice el uso de inmediato. También puedes usar algunos plugins como Codex bar para darme el uso de Codex y Cloud Code Simplemente puedes ir al navegador web e instalar la barra de Codex, y te dará lo mismo Codex Te diré el uso de tu Cloud Code, Cursor, cualquier agente que estés usando el agente de codificación que estés usando. Otra cosa que puedes usar es config o puedes verificar el estado. Y eso es todo. Voy a salir de nuevo esto 11. 10 introducción a la aplicación de escritorio de Claude: Abramos esto dentro del IDE porque los terminales son realmente malos en la interfaz. De hecho, puedo cerrar esto y continuar desde una aplicación de escritorio de Claude. Entonces voy a decir, Oye, solo quiero dejar de fumar. No me gusta el CLI, quiero usar Claude App Ahora voy a usar la aplicación de escritorio Claude. Descarga la aplicación Cloud dextro. Puedes instalarlo en tu sistema, entonces simplemente puedes iniciar sesión autorizar, y luego puedes usar Claude Code dentro de la Claude Dktoapp La razón es que tendrás una interfaz mucho mejor. Ahora, ya lo estoy usando para mi proyecto múltiple. Tan genial. Ahora déjame darte también una pequeña herramienta a Claude DectoApp para que sepas en qué se diferencia de terminal Cómo te dará un y apariencia más visual aspecto y apariencia más visual si eres una persona no técnica. Como puedes ver en la app Claude dextro, tienes tres modos, el modo chat donde puedes chatear con Claude, el modo vaca, que en su mayoría te ayuda con tu tarea diaria y el modo de codificación, donde realmente puedes escribir un código, y puedes ver todas tus sesiones por aquí Entonces puedes ver tu perfil, estoy en un plan máximo, y puedes ver algunos modos aquí y allá. Entonces verás que, oye, ¿ tu nube se está ejecutando localmente o en Cloud? Ahora, en este caso, mi código se está ejecutando localmente, así que he elegido localmente, y luego puedes elegir dónde vive exactamente tu código. Mi código vive dentro de mi documento y dentro de esta carpeta, Claude Code, y estoy en una rama mala, voy a discutir más sobre por qué necesitas una rama y por qué existen y por qué ha creado un árbol y qué es exactamente un árbol. Entonces se puede ver que tiene cuatro modos diferentes. ¿Pides permiso cada vez que estás haciendo alguna acción en mi código, o aceptas automáticamente o estás en modo plan, o tienes un permiso de Bypass peligroso? Voy a explicar más. Pero básicamente, puedes estar en el Automde que automáticamente aprueba todo tu código, y no tienes que hacer clic manualmente en sí, sí, sí, tantas veces Este es tu chat. Tienes modo diferente. Ahora mismo, mi micrófono no está funcionando. Este es el modelo que he elegido, que es su oponerse 4.7 alto. Puedes cambiarlo como si quisieras. 12. 11 Mejor GUI para claude con IDE del cursor.: Entonces esta es mi base Cord, y voy a explicarte en los próximos diez minutos qué hay en la base Cord y qué vamos a hacer para integrar y ejecutar este producto localmente. Entonces voy a usar Cursor para este propósito. Puedes usar cualquier identificación de tu elección. Puedes instalar VS Cord, Cursor, windsurf, op, lo que quieras Así que vamos a empezar de arriba a abajo, y voy a pasar 10 minutos explicándote toda la base de código, no para enseñarte algo, sino solo para darte una comprensión de alto nivel. Entonces en la parte superior, puedes ver un árbol de trabajo, que fue creado porque abrí la aplicación de escritorio Claude donde se hizo clic en una casilla de verificación de árbol y Árbol de trabajo es una forma de trabajar en múltiples funciones simplemente creando un clon de tu pieza de código Eso es. No tienes que entenderlo ahora, pero volveremos a ello más tarde. Debajo de eso, se puede ver que hay una carpeta Clerk, next, drizzle, módulos de nodo, public, SRC, y un montón de Entendamos de ellos uno por uno. El archivo más importante para usted donde vive su base de código real es SRC SRC es su fuente donde vive la mayor parte de su base de código. Si haces clic en la aplicación, aquí es donde vive tu principal interfaz de aplicación. Como puedes ver, estamos usando NextGS app Router para que tengas diferentes componentes dentro de tu app para hacer Entonces este es tu componente de formulario para hacer donde tiene todo el campo de formulario. Hay una pestaña de filtro, hay una pestaña de elementos para hacer. Hay una función de lista en marcha. Para que puedas ver todos los diferentes componentes. Entonces tienes una funcionalidad de inicio de sesión y registro en tu aplicación. Donde estamos usando Clerk para que no tengamos que escribir mucho código innecesario o este agente de IA no tiene que hacer eso por ti Luego hay una capa intermedia que autorizará cada solicitud, y luego tienes nwt local Esto es importante. Entonces, ¿qué es ENV Entonces ENV significa variable de entorno. Estos son los secretos que hay que esconder a todos los demás. Entonces este es un archivo de ejemplo que significa que no se crea el punto nv real local, y tengo que poner todo mi secreto por aquí. Primero, iré al Panel de Control del Secretario e ingresaré mi clave publicable por También voy a ingresar mi clave secreta por aquí y voy a ingresar mi URL de base de datos. Entonces iré a consola punto Neon dot tech, y primero voy a ingresar mi URL de base de datos. Puedes crear una nueva cuenta. 13. 12 configuración de env y claves para su producto: Primero, déjame explicarte qué son las variables de entorno. Entonces, cuando usas algún producto, necesitas autorizarte si tienes la propiedad para usar ese producto o no. Por ejemplo, si entras en un edificio, tienes que decirle a la persona de seguridad que, oye, o trabajas aquí o viniste aquí a una reunión. Entonces tienes que autorizarte. Entonces cuando estás usando un producto diferente, necesitas decirle al sistema que, oye, toma mis llaves y autoriza si soy la persona adecuada o no. Ahora en este producto, estamos utilizando Clerk. Para la autenticación y autorización, estamos utilizando la base de datos POSCRs Neon para almacenar nuestros datos Entonces, si abres Clerk, verás que se trata de un producto SAS o una herramienta que te permite crear autenticación y autorización de usuario rápidamente Perfecto. Para que puedas iniciar sesión y simplemente empezar a usarlos. Para utilizarlos con éxito, obviamente necesitas crear una app y hacer algunas clases de cosas para que posteriormente puedas pagar por esta app si quieres tener funcionalidad adicional. Entonces necesitas una clave publicable y necesitas una clave secreta, y puedes obtenerla desde su panel Así que voy a crear una app en su dashboard, y como puedes ver, puedes agregar todos estos componentes para simplemente crear tu flujo de inicio de sesión y registro. Ahora bien, si no quieres hacer todas estas cosas aburridas por ti mismo, tengo un atajo para ti. Ese atajo es mediante el uso de CLI para hacer todo este trabajo, automáticamente usando agente de IA Pero no voy a hacer eso. Simplemente voy a crear una aplicación y voy a hacer este hombre willy para que entiendas lo que estamos haciendo Nuevamente, todo esto es manejado por nuestra app. Iremos a descubriremos un lugar donde podamos generar nuestra clave API. Ahí vas. Ahí puedo ver la clave API. Nuevamente, si miras con atención, esto está oculto a propósito, intencional, y debería serlo. Voy a mantener esto oculto a propósito, y voy a escribir esta clave API y luego vamos a continuar. Ahora para la base de datos Neon, puedes registrarte, hacer lo mismo, y puedes crear un proyecto. Tan pronto como se cree tu proyecto, verás que te está dando algo que de nuevo está, oculto. Si haces clic en él, es visible. Voy a difuminar esto u ocultar esto por ahora. Perfecto. Ahora he configurado mi base de datos Neon, mis ENV para Clerk y todo se ve 14. 13 Cómo administrar tu producto localmente: Perfecto. Entonces ahora he configurado mi base de datos Neon, mis ENV para Clerk y todo se ve bien. Empecemos con esto. Estoy de vuelta a la CLI o terminal, y una vez que tengamos las cosas en funcionamiento localmente, entonces vamos a usarlo realmente dentro de Claude Dectoppp Genial. Como puedes ver, aquí está nuestra app Todo. Vamos a usarlo. Entonces voy a usar mi ID de correo electrónico para autorizar a esta aplicación de todo, y luego la vamos a usar. Escribamos Todo y luego vamos a ver cómo funcionan las cosas. Entonces el año que viene me está dando un tema. Vamos a resolverlo más tarde. Escribamos un Td. Bien. Bien, ahí tienes. Puedes ver que puedes agregar una fecha a este todo, y puedes agregar más. Tienes activo hecho y todos todos. Es perfecto. Tiene un modo oscuro y un modo de luz, y las cosas se ven bien. También puedes eliminar esto. Perfecto. Entonces esta aplicación Studio se ve increíble. Tan perfecto. Ahora, digamos que querías hacer algunos cambios en esta app de Studio. Ahora cerraremos el Ghostty y trabajaremos directamente desde Claude Dextropppo puedes seguir trabajando desde 15. 14 Cómo comprometer y enviar tu código a Github: Así que primero vamos a empujar esta app a un entorno hostil de Cloud para que puedas compartirla con tu amigo. Ahora, para hacer eso, puedes configurar manualmente las cosas InverSelo puedes darle algún control a tu CLI, y voy a usar el enfoque CLI Ahora voy a ver así que he escrito un prompt de una manera muy no técnica, pero he mencionado las cosas técnicas, y déjame mostrarte lo que he escrito. Entonces, oye, despliega esto porque quiero mostrarle este proyecto a mi amigo. Puede implementar esto en versal y usar la CLI Esto es interesante porque puedes abrir dashboard, copiar y pegar las claves, variable de entorno, o puedes usar su CLI, que hará la autorización y todo por sí mismo Tan perfecto. Voy a presionar Enter y después va a hacer algunas cosas por mí. Primero verificará el estado del proyecto, luego inicializará el VersLCI, me pedirá que inicie sesión en VerSL y luego creará un proyecto en versal y luego lo un proyecto en versal y Y luego puedo compartir este proyecto con mi amigo. Perfecto. A ver si es capaz de hacer todo o no. Además, se puede ver que he escrito 9,000 nueva línea de código, y este código no está comprometido en ningún otro lugar. Entonces espero que antes de que realmente despliegue algo, se vaya a comprometer en alguna parte Creo que no se va a comprometer en alguna parte. Entonces, para comprometer tu código, tienes que comprometerlo en GitHub. Y en realidad, déjame hacerlo primero para que entiendas esto. Sigues adelante y cometes este código en GitHub, Ahora, hay algunas cosas que debes entender. Siempre que estés escribiendo algún código, no querrás perder el acceso a ese código cuando estás construyendo algo nuevo. O digamos que estás construyendo la función número uno y quieres que simplemente despliegue esta función, haga viva para el usuario y luego quieres que inicie una nueva función. Entonces tienes dos opciones. O puede crear dos ramas diferentes de su código para que pueda trabajar en dos entidades al mismo tiempo y fusionarlas, o puede completar una característica, y luego confirme eso, y luego comience a trabajar en una nueva característica. Entonces discutiremos sobre la ramificación de GitHub, cómo comprometes, empujas y fusionas tu código, y discutiremos mucho sobre eso Pero ahora mismo, solo quiero comprometer mi código a mi perfil de GitHub usando Git, y luego veremos ¿cómo se verá el código comprometido? Y más adelante, les voy a explicar pipeline de la CICD de todo este proceso, que es un poco abrumador en estos momentos Entonces es crear un envoltorio GitHub, que es simplemente una carpeta en GitHub para almacenar tu código, y luego está empujando el código virtualmente. Entonces, aunque pierda el acceso a este sistema, aún podré tener acceso al código. Tan perfecto. Utiliza mi inicio de sesión en GitHub y creó una carpeta virtualmente en GitHub donde vive toda mi base de código. Entonces como puedes ver, hay una app de todo que he creado y todo mi código está dentro de GitHub, y ahora puedo acceder a ella, abrirla desde donde quiera. Y en la lectura me ha mencionado claramente todo. Si miras con atención, no hay ENV por aquí. Eso significa que no ha comprometido los ENV. Supongo que esto es un repositorio privado. Puedo hacerlo público si quieres, ir a ajustes y hacerlo público. Pero de nuevo, no muy importante. Toda tu base de código vive aquí y en algún otro video, voy a explicar ¿ cómo realmente empujas, comprometes y fusionas tu base de código? ¿Y qué son estas ramas y cómo son útiles? Ahora mismo, como pueden ver, estoy en una rama principal, que es lo que normalmente ve un usuario. Se pueden crear nuevas sucursales, por ejemplo. Cada vez que quería construir una nueva característica, no quiero que mis usuarios reales vean lo que se está rompiendo, lo que no se está rompiendo. ¿Qué es esta nueva interfaz de usuario? ¿Cuál es esta nueva característica? Quiero trabajar en una nueva sucursal, donde pueda probar cosas de manera aislada y construirlas. Así que he creado una nueva sucursal Dev. Visualmente para ti, también puedes hacerlo desde el código. Déjame cambiar de sucursal. Entonces vamos a cambiar la sucursal a Dev y luego mejoraremos el producto y haremos más cambios. Entonces antes estaba en la rama media. Ahora va a cambiar la sucursal a DF y perfecto. Ahora estamos en una rama dev. Entonces mantienes una sucursal local y mantienes una sucursal remota. Entonces ahora estamos cambiados a la sucursal def local, que está rastreando la sucursal remota real. Tan perfecto. Tienes algún comando bash que no quiero explicarte para confundirte, pero perfecto Las cosas se ven geniales hasta ahora. Ahora comencemos a hacer cambios. Ahora hay un problema que observamos con nuestro producto. La interfaz de usuario era muy pequeña, como tengo que reiniciar el servidor, pero las fuentes y todo se veía muy pequeño. Entonces le pregunté eso, oye, ¿ podemos mejorar la interfaz de usuario general y hacerla más grande para que pueda usarla en mi Dektop y aplicación móvil Vamos a verlo. Ahora, el beneficio de usar Claude Dktoapp es que se puede ver, puede ver qué archivo se ha editado todo, Qué AllCDE se ha eliminado, Lo que todo se ha agregado de una manera muy agradable Por eso me gusta Claude Dectoapp para Claude Code y vaca Perfecto. Déjame abrir una terminal dentro de la manzana Claude Dektop intenta ejecutar esto No estoy seguro de si estás usando NPM o estás usando PNPM. Perfecto. Y si refrescas esto, encontrarás que tu proyecto está en funcionamiento. Perfecto. La fuente se ha vuelto más grande ahora y puedes verla claramente en tu pantalla. Veamos si esto está optimizado para dispositivos móviles o no. Entonces voy a cambiar la capacidad de respuesta al iPhone 12 Pro y perfecto Esto también está optimizado para dispositivos móviles. Hay un problema del próximo año que podremos resolverlo más adelante, pero entonces las cosas se ven geniales. Todo ha estado funcionando, y ahora quiero que despliegue este proyecto, y quería compartirlo con mi amigo. En este caso, vamos a usar Vercel para desplegar este proyecto en un subdominio específico Tenemos que comprar el nombre de dominio real que vamos a hacer más tarde. 16. 15 Despliega tu proyecto en vercel: Ahora, voy a ver. Oye, solo sigue adelante y despliega esto en Vercel para que pueda compartirlo con mi amigo y usarlo Y voy a dejar este Comando C para salir esto y voy a cerrar la terminal. Entonces como pueden ver, está desplegando mi proyecto a Vercel, y luego voy a abrir este proyecto dentro un enlace específico que pueda compartir con mi amigo y que lo puedan usar como un producto real Recuerda, tenemos nuestro back end configurado, tenemos nuestro front end configurado, y todo está funcionando muy bien. Y a medida que desplegamos esto, estoy muy seguro de que tropezaremos con nuevos tipos de problemas El objetivo de construir un producto es seguir resolviendo problemas para que sepas lo está pasando y tengas un control adecuado. Por lo que ahora estamos desplegando nuestros proyectos front end a Vercel. Entonces dice que, oye, la compilación ha sido fallida porque tu base de datos, URL y claves de Clerk no estaban configuradas Bien, entonces dice que necesito permiso explícito de tu parte para meter tus llaves en Vercel Entonces te voy a dar el permiso. Tan perfecto. Quiero que uses mis llaves locales y las empujes a Versale&vs Ahora, puedes hacerlo manualmente si vas y abres Versal Dashboard, y eso también te voy a mostrar. Mientras tanto, verás que tengo un montón de producto y déjame ver que nuestra app de todo está por aquí. Entras dentro de la configuración y verás las variables de entorno. Entonces ahora mismo estamos en vista previa, así que no hay ninguna variable de entorno. Puedes crear variables de entorno y escribir tus claves y pagador de valor aquí, y luego usará estas claves para ejecutar tu proyecto Voy a cerrar esto por ahora porque estamos haciendo todo directamente desde CLI No tienes que abrir el tablero. Entonces voy a cerrar esto y vamos a vencer. Bien, entonces estaba enfrentando algún problema porque mi implementación estaba bloqueada por los nombres de usuario de GitHub incorrectos. Así que pasé un poco de tiempo y arreglé ese problema. Entonces, si abro las palabras Dashboard, mira el despliegue, puedes ver que se bloquearon múltiples despliegues. Y si entro al despliegue, dice que el despliegue fue bloqueado porque el correo electrónico del autor de Commit era este. Este es el nombre de la dirección de mi MacBook. Debe ser correo electrónico. No es válido, y necesito asegurarme de que estoy usando el correo electrónico o el nombre de usuario. Así que pasé algún tiempo. De hecho, le pedí a Claude que solo solucionara este problema. Me dio un montón de pasos. Corrí estos pasos manualmente. Incluso puedo pedirle a Claude que haga eso por mí, y pude resolver el problema. Ahora bien, esto me recuerda a una pequeña cosa que hay que entender es la depuración Puedes depurar cosas desde la terminal, pero una de las herramientas más importantes que puedes usar para depurar es CLI y el tablero en sí Así que ahora como pueden ver la app está lista, y voy a abrir la app y voy a mostrarte cómo se ve exactamente. Para que puedas compartir este enlace con tu amigo y ellos podrán explorar cualquier app que hayas creado usando código de coágulo Por lo que te da un pequeño enlace que puedes compartir con tu amigo. Obviamente, puedes configurar tu propio nombre de dominio si tienes queso P o nombre de dominio. Pero digamos por ahora, puedes compartir este enlace y ellos pueden explorar este producto específico. Así que voy a iniciar sesión y luego voy a crear una para hacer, y voy a mostrarte que sí ¿ cómo funciona el producto en general? Perfecto. Estoy registrado y si creo un todo, digamos que quería desayunar y solo estoy creando todos al azar. Estos son mis todos. Sólo puedo marcarlo como terminado. Digamos que si logo o cierro sesión y vuelvo a iniciar sesión, una cosa importante que observarás es que mis datos son persistentes. Eso significa que el producto se despliega en la nube y mis datos no se pierden en ningún otro lugar. Entonces, cualesquiera que sean las acciones que hagas, ya sea que estés creando algo nuevo, actualizándolo, editándolo o borrándolo, los datos se conservan. Puedes abrir esto en tu teléfono móvil. Puedes abrir esto en tu laptop y todo funciona perfectamente bien. Entonces esta es la interfaz móvil. Simplemente puedes hacer lo mismo usando tu aplicación móvil también. Y puedes, ya sabes, mejorar aún más esto y mejorarlo. Use diferentes tipos de fuente y agregue funcionalidad y características adicionales en esta aplicación Studio también. 17. 17 introducción a las habilidades en claude: Tan perfecto. Para explicar la habilidad, voy a teclear habilidades Claude Code. Ahora bien, la habilidad es simplemente un archivo de rebajas con una guía específica que amplía las capacidades de Claude Code para realizar una determinada acción De hecho, si lees la documentación, claramente dice que, Oye, puedes crear, administrar y compartir habilidades para ampliar las capacidades de Cloud Code. Y necesitas crear una habilidad con un archivo ED de puntos experto con las instrucciones adecuadas en él. Ahora, puede preguntarse, bueno, ahora ¿qué es una habilidad y por qué la necesita? Digamos que Claude no entiende el sistema de diseño de tu empresa. De hecho, puedes crear una habilidad resaltando todos los sistemas de diseño que tienes en tu empresa, y simplemente puedes agregarlo. O digamos que tienes un pipeline CICD específico que quieres seguir donde puedes crear una habilidad, y la gente está creando diferentes tipos de habilidades para que Claude pueda trabajar de una manera predefinida adecuada en lugar de simplemente ir en alguna dirección aleatoria Ahora, una de las habilidades más populares que mucha gente usa, y la razón por la que te estoy diciendo que uses una habilidad específica creada por otra persona porque es fácil de usar. De hecho, podemos explorar muchas habilidades dentro de Claude Code. Entonces voy a abrir la misma carpeta e inicializar una sesión fantasmal, y voy a mostrarte dónde vive exactamente la habilidad Entonces iremos al servicio y abriremos una ventana fantasmal aquí. Entonces voy a escribir Claude solo para inicializarlo y también puedes hacer el mismo proceso en Windows Ahora, puedes reanudar una última sesión simplemente escribiendo curriculum vitae o realmente puedes comenzar una nueva sesión. Voy a retomar la última sesión que estaba usando dentro de su aplicación de escritorio, y ahora voy a escribir slash Skills Esto me mostrará todas las habilidades disponibles que están presentes, y puedo usar esas habilidades. Ahora, muchas de estas habilidades las instalo yo. Muchos de ellos están presentes en su mercado. Entonces voy a ir a su mercado y mostrarte cuáles son todas las habilidades disponibles y cómo puedes usar esas habilidades. Entonces, para ampliar las capacidades de Claude Code, Cloud Code construyó un mercado donde la gente realmente puede agregar su plug in y su habilidad para que Claude Code los pueda usar para guiarlos en una dirección específica Entonces primero, voy a mostrarte lo que es un marketplace. ¿Cómo exactamente lo puedes usar? ¿Cómo puede usar diferentes complementos del mercado?, y estos complementos pueden tener o no habilidades en ellos. Así que déjame ir a Marketplace y abrir el plug in marketplace. Entonces voy a escribir plug in, y puedes ver que tienes casi 165 plugins. Ahora, de hecho, puedes encontrar un plugin de todas las herramientas que hemos utilizado, y este plugin simplemente será un servidor MCP Así que vamos a escribir Clerk y ver si tienen un plug in loop. Ellos no Neon, sí, sí tienen un plug in, que te permite usar su servidor MCP y puedes crear, modificar, eliminar bases de datos, y hacer todo tipo de cosas directamente dentro del código Cloud De hecho, ni siquiera necesitas MCP. En realidad puedes usar su CLI. Ambos funcionan. Entonces esto es Neon. ¿Cuál es el otro producto que utilizamos? Estoy seguro de que también tendrán un enchufe versal. Supongo que ya lo he instalado. Vas a Complemento instalado, puedes ver que WorSL ya está instalado He agregado un servidor Figma MCP, Gmil y un El servidor MCP es básicamente una forma de dar acceso a su API para que Claude pueda usarlo perfectamente Y luego tengo un plugin de Claude Hut el cual me da estas estadísticas. Entonces, si golpeas Escape, este es Claude Hut, que te dará todas las estadísticas justo debajo del Código Claude. Así que los plugins pueden hacer de todo, desde mejorar la CLI de Claude Code hasta permitirles dar acceso para hacer ciertas cosas Entonces voy a ir de nuevo y abrir plug in marketplace y ver todo lo que hay en el marketplace y lo que se ha instalado. 18. 18 Cómo crear tu primera habilidad en código de claude: Bien, perfecto. Ahora te voy a explicar qué es una habilidad, cómo puedes crear una habilidad dentro de Claude Code, y cómo en realidad puedes usarla. Digamos que eres gerente de producto y tu trabajo es resolver problema de usuario. Entonces hablas con múltiples usuarios, entiendes su punto de dolor, y luego intentas resolver ese problema. Digamos que también eres un constructor que sabe usar Cloud Code y te encanta construir soluciones. Así que cada vez que usas Cloud Code y quieres que haga cierto conjunto de tareas de una manera específica, tienes que darle mucho contexto, lo que a veces resulta abrumador. Por ejemplo, digamos que tienes una lista de cinco a diez problemas que enfrentan tus usuarios y quieres escribir más escenarios y casos y solo quieres hacer ideas sobre el problema más antes de construir una solución Pero no sabes exactamente, oye, ¿cuál es la forma correcta de hacer una lluvia de ideas sobre un problema De hecho, puedes construir una habilidad y nombrarla como lluvia de ideas de PM. Cada vez que escribes, oye, usa la habilidad de lluvia de ideas de PM, y esa habilidad tendrá un cierto conjunto de acciones que realizará el Claude Lo cual en términos técnicos es dar una lista de rebajas para que entienda tu enfoque de una muy buena manera Por ejemplo, digamos que un usuario quiere o exporta funcionalidad en su producto. Tu primera pregunta sería, oye, ¿para qué la necesitan? Entonces te preguntarás, el Excel es diferente de los datos que se muestran en el tablero? Eso significa que debe haber más datos disponibles en Excel que los que se muestran en el tablero. Por eso lo necesitan. Otra razón podría ser que querían usar esos datos en otro lugar, o querían compartir esos datos con alguien, o quieren que se reconcilien Entonces quieres darle un conjunto específico de acciones que tú como PM haces para resolver un problema, o cuántos comerciantes están enfrentando el problema. Entonces, si tu lista de preguntas sería como, Oye, quiero que entiendas cuál es el problema, ¿cuántas personas están enfrentando el problema? ¿Por qué están sufriendo? ¿Y qué soluciones son posibles? Y ¿cuál es el equilibrio entre cada solución y qué otros escenarios necesitamos manejar? Esta es una lista de proceso o precaución por la que suele pasar un gerente de producto. Ahora bien, si no quieres pasar por todos estos procesos manuales por ti mismo, puedes crear una habilidad. Simplemente puedes crear una habilidad y nombrarla como tal vez digamos cazador de comentarios o analizador de comentarios. Puedes nombrar una habilidad lo que quieras. La próxima vez que recibas un comentario o un problema, simplemente escribes, Oye, usa el analizador de comentarios para analizar los comentarios que estamos recibiendo de un comerciante. Vamos a seguir adelante, crear una habilidad específica, nombrarla como analizador de retroalimentación o puedes crear una habilidad más con la generación de ideas de nombre que haga exactamente lo mismo, como cuál es la nueva idea, ¿cómo puede ganar dinero? ¿Cómo se relaciona? ¿Cómo va a resolver el problema? Cuantos cuantos problemas de usuario resolverán nivel de esfuerzo de construirlo. Tan perfecto. Tienes muchas preguntas que normalmente haces o por las que pasas antes de comenzar realmente la implementación. Entonces voy a abrir Claude Code, y luego vamos a crear una habilidad. Perfecto. Entonces déjame acercarme un poco. Tan perfecto. Ahora, para crear una habilidad, puedes abrir un editor de código, escribir el rebajas por ti mismo, o puedes usar un creador de habilidades o puedes usar un complemento que pueda ayudarte a crear una habilidad Este plugin, creador de habilidades, basta con hacer clic en él, presentador, instalar el plugin, y genial Ahora especificas que es perfecto. Le estoy dando un aviso que oye, soy gerente de producto. Quiero que crees una habilidad para que cuando un equipo de ventas o mi equipo de PM o nuestro CEO nos den alguna idea genial e interesante, revisemos una serie de preguntas que necesitamos hacerles para entender la profundidad del problema, las diferentes formas por las que podemos resolver el problema, y puedas hacerme más preguntas para entender el contexto del problema, y luego tratar de darle una puntuación en términos de uno a diez en cuanto a cuánto esfuerzo tomará. ¿Cuál es el impacto y la ventaja? Y puede utilizar la búsqueda web para entender dónde nuestra empresa o dónde existe nuestro producto en el panorama competitivo Y puedes usar el plugin creador de habilidades que acabamos de instalar para crear esta habilidad. Déjame presionar Enter y veamos si es capaz de crear una idea realmente buena para hacer una lluvia de ideas para nosotros o Entonces esperemos tiempo y veremos si puede llegar a tener un nombre genial, interesante para la habilidad y si es capaz de crear esta habilidad o no. Si lo hace, lo que todo rebaja, va a estar escribiendo en esa habilidad específica y entonces podemos simplemente mejorarlo o cambiarlo más y ver qué tan bien nos vuelve la salida Entonces me está haciendo un montón de preguntas que oye, ¿cómo debería la habilidad llevar a cabo la entrevista contigo? Entonces la habilidad debería hacerme preguntas de tres a cuatro a la vez para entender la profundidad del problema. Entonces me está preguntando, Oye, ¿qué salida quieres al final? Quiero un PM perfecto tipo de memo que me muestre el problema, el usuario afectado, el framework, o diría, un cuadro de mando perfecto o un veredicto es mejor, que usa una puntuación RC Oh, perfecto. Esta es mejor. Esto es más cualitativo. El ton, ¿quieres que una tonelada sea retrocedida honestamente, un analista neutral o un defensor del diablo? Tal vez retroceder honestamente y enviar. Le he dado estas tres respuestas a todas las preguntas que me hizo para crear una habilidad adecuada para mí. Ahora bien, esta herramienta de habilidad es realmente buena porque ahora si hago una pregunta específica, no alucinará y me dará una Yo exactamente me lo diré, oye, esto es lo que debes seguir. Bien. Entonces, como pueden ver, me ha creado una habilidad y la ha nombrado evaluadora PM Ida. cual me hará un montón de preguntas, Lo cual me hará un montón de preguntas, entonces me dará la salida en RICE, que es su alcance, impacto, confianza y esfuerzo, y IS y Moscú, IS y Moscú, todos estos son un marco de gestión de producto diferente, y me va a dar una decisión como ir, no ir, necesito más información veredicto y tratar de retroceder honestamente Voy a hacer clic en sí y va a estar creando esto para mí. Ha creado esta habilidad y déjame intentar abrirla en una interfaz mucho mejor. Entonces ahora puedes ver que ha creado esta habilidad para mí. Se le ha dado a esta habilidad como nombre, idea de PM, evaluador, y esta habilidad tiene una descripción y un proceso paso a paso adecuado que oye, eres un evaluador senior de PM. Entonces dice que oye, eres un modelo mental de PM senior en una habilidad. Te disparan cuando alguien le pregunta al CEO está pidiendo esta característica específica o el equipo de ventas pregunta por qué, y primero necesitas mirar la declaración del problema y hacerles preguntas como ¿quién la está haciendo? Cuál es el problema, quién está enfrentando el problema. Entonces es necesario reunir pruebas e impactar. Entonces necesitas ver si solo un grupo específico de personas lo necesita, entonces necesitas puntuarlos usando el método RICE. También puedes usar el método Ice o Moscow para hacerlo. Entonces hay que darles un veredicto final. Tan perfecto. En general se ve bien. Es decir, puedes dedicar más tiempo a leerlo si quieres. Pero la idea principal de habilidad es hacer un cierto conjunto de acciones cada vez para que se pueda guardar el tiempo y no es necesario especificar el mismo conjunto de instrucciones cada vez. 19. 19 Cómo usar tus primeras habilidades: Entonces si miras con atención, voy a darle un aviso, como, Oye, mi CEO está diciendo que, Oigan, chicos, nuestros comerciantes están enfrentando algunos problemas. No pueden ver el estado de los pagos en la página principal, y por eso no son capaces de analizar y conciliar las cosas correctamente al final del día Este es un tratamiento sencillo del problema voy a dar al coágulo y porque tiene palabras como dice mi CEO, va a identificar la intención y usar automáticamente esta habilidad, y luego me va a dar un predecir un veredicto Y voy a escribir. ¿Me puedes ayudar con esto? Y veamos si inicializa y usa la habilidad que acabamos crear y dame la respuesta en la forma en que pregunté Entonces dice que, oye, ¿quieres que use esta habilidad para responder a este prompt o pregunta? Perfecto. Voy a decir que sí. Y si miras la respuesta, me va a dar la respuesta de la misma manera que suelo preguntar a la gente cada vez que se le ocurren ideas o problemas. Entonces es usar la habilidad para hacer todo tipo de acciones, que antes de lo contrario tengo que especificar línea por línea. Oye, haz esto primero, luego haz eso primero, luego haz eso. Entonces puedes ver que me está haciendo un montón de preguntas primero, y luego me va a dar la respuesta. ¿Qué comerciante se queja? Cuantos me dan el nombre si quieres. ¿Qué tipo de comerciante son estos? Es una brecha de miedo identificar qué es lo que no pueden ver y qué es exactamente lo que el comerciante está tratando de lograr desde su tablero? ¿Y qué aspecto tiene la página de inicio actual? Tan genial. Puedes ver que te está haciendo un montón de preguntas con solo usar esta escala. Obviamente, puedes escribir tu respuesta. Entonces simplemente voy a presionar tabulador, y también me está dando respuesta, una respuesta hipotética, que obviamente no es correcta en el mundo real, pero simplemente voy a presionar Enter y veamos, solo de una respuesta tan pequeña, ¿es capaz de darme un veredicto perfecto Ahora bien, en la primera ronda, respondí que, oye, mayoría de las empresas están pidiendo esto, cinco comerciantes se han quejado de apoyo, y sobre todo es un tema de reconciliación Después de leer esto, ahora me pregunta segunda ronda sobre evidencia e impacto. Entonces, ¿qué porcentaje de ingresos empresariales representan estos cinco comerciantes que se quejan vía soporte? ¿Qué específicamente se rompe dentro de la reconciliación? ¿Para qué resultado estamos resolviendo y cómo lo medimos? Y en términos de esfuerzo rudo, la reconciliación se puede construir en pocas semanas o en pocos trimestres. Depende de qué tan profundo quieras que construya esto. Para que puedas responder a la segunda ronda, y luego me dará la respuesta. Entonces estoy en lo cierto. A ver, ahora voy a escribir cosas muy débiles solo para que pueda pasar por alto todas estas rondas y obtener una respuesta predecible. Tan genial. Ahora puedes ver la respuesta. Supongo que no me está haciendo más preguntas. Me ha dado una declaración problemática, el puntaje de arroz, el puntaje I, y obviamente puedes leer más al respecto. Si eres gerente de producto, sabes exactamente qué son el arroz y el IS. Así que el arroz es tu alcance, Impacto, confianza y esfuerzo. Al igual que, si construyes esto, ¿a cuántos comerciantes podemos llegar con esta función? ¿Cuál es el impacto en nuestro producto? ¿Qué tan seguros estamos de que va a resolver el problema y cuánto esfuerzo va a tomar? Lo mismo ocurre con los ojos, el impacto, la confianza, la facilidad y Moscú. ¿Es una característica imprescindible? Así es como construyes una habilidad y la usas en el escenario real del mundo real para que no tengas que escribir un conjunto específico de instrucciones cada vez. Genial. Ahora en realidad voy a instalar un enchufe muy popular que usa habilidad bajo el capó para resolver problema de desarrollo de software. El nombre del plugin es superpower, que tiene 12 a 15 habilidad que resuelve un conjunto específico de problemas 20. 21 por qué y cómo usar SDLC: Entonces Claude Code es genial. Puede ayudarte a construir cualquier cosa y todo lo que puedas imaginar, y esta es una herramienta realmente buena que realmente puede acelerar todo el proceso. Pero hay un gran problema. Si nos fijamos en cómo se está construyendo el producto, incluso antes de que la IA estuviera allí, se construyó con una planificación adecuada y entendiendo todo. Y es por eso que necesita comprender sobre el ciclo de vida del desarrollo de software y cómo funciona exactamente eso. Ahora para explicarte eso, simplemente voy a abrir el bloc de notas y mostrarte cuáles son los pasos principales hay cuando estás construyendo cualquier software Entonces déjame escribir algo para ti, y luego te voy a mostrar. Entonces cada vez que quisieras construir algo, primero escribes el requisito. Después de eso, y este requisito incluye el problema que estamos resolviendo, el impacto que tenemos en nuestro producto existente. ¿Qué características estamos construyendo? Y cuando digo interacción, estoy hablando de UI y UX. Necesitas configurar correctamente cómo vas a medir el uso y los análisis de esa función y cómo vas a lanzar y lanzar esa función. Ahora bien, si tu producto está usando varios otros productos u otras características o funcionalidad o microservicio, entonces también tienes que escribir sobre los casos de prueba para que si algo se rompe, conozcas esas cosas de antemano, y también necesitas construir canalizaciones de CI y CD para que las cosas puedan funcionar correctamente Entonces, hay muchas más cosas que suceden bajo el capó cuando estás construyendo el software real. Y te acabo de dar un pedazo muy pequeño de un gran pastel solo para ayudarte a entender todo el proceso. Ahora bien, este proceso debería seguirse idealmente cuando realmente se construye un producto. Y cuando trabajas con Claude Code, no sigue un ciclo de vida específico del producto. Para ello, vamos a usar habilidades. Entonces entendamos qué son las habilidades y cómo podemos utilizarlas. 21. 22 habilidades superpoderosas para el ciclo de vida del desarrollo de software: Perfecto. Como puedes ver, el plugin de charco de superpotencia ya está habilitado, y ahora te voy a mostrar qué es lo que me proporciona toda la habilidad este plugin Ahora, la superpotencia es simplemente un enchufe que tiene mucha habilidad que permite que Claude Code funcione de una manera específica La primera habilidad que tiene la superpotencia es la lluvia de ideas. Eso significa que cada vez que intentamos construir un producto específico, estamos resolviendo un problema. Y cuando estás resolviendo un problema, en realidad estás haciendo una lluvia de ideas diferente para el mismo Entonces digamos que si estás construyendo algún producto específico para un grupo de personas, en realidad querías profundizar, entender más problemas asociados con él, y ¿cómo puedes resolverlo de una manera mucho mejor? Entonces esta habilidad te va a ayudar a resolver mejor un problema haciendo lluvia de ideas y haciendo más preguntas luego otra habilidad es escribir planes ¿Cómo puedes escribir de manera efectiva un plan adecuado, iterar a través de ese plan varias veces, y esto es muy similar a cómo funciona tu modo plan De hecho, puedes preguntarle a Claude, oye, lista todas las habilidades que proporciona el complemento de superpoder, y ¿qué hacen? Y te dirá exactamente qué habilidades hay en el superpoder y qué es exactamente lo que te puede ayudar a lograr Entonces la primera habilidad es usar superpoder. Entonces, si acabas de mencionar esto, solo usará habilidad de superpoder para decidir qué hacer una lluvia de ideas, qué escribir, cómo ejecutar, cómo construir, Por lo que no es necesario especificar una habilidad específica. Sólo hay que escribir usando superpoder. Entonces tienes habilidad de lluvia de ideas, lo que hemos explicado que, oye, explorará el requisito de intención del usuario, diseño antes de hacer cualquier implementación Entonces tienes tus habilidades de plan de escritura, lo que escribirá tu requisito de Specsa en un plan de múltiples pasos bien detallado Luego está ejecutando la habilidad del plan que ejecutará el plan escrito de una manera adecuada y deseada. Entonces tienes desarrollo impulsado por sub agente donde no tienes que especificar que lance múltiples agentes paralelos para desarrollarlo más rápido. Lo hará por ti. Lo mismo ocurre con los agentes paralelos de Dispatch, tienes desarrollo impulsado por pruebas, que escribirá casos de prueba primero antes de construir cualquier cosa. Entonces tienes una depuración sistemática, que te ayudará a escribir fallas de prueba adecuadas, depurar cosas por ti y escribir correcciones adecuadas Entonces tienes un flujo de trabajo de Git, luego tienes usando el árbol de trabajo de Git, creará un árbol de trabajo y luego aislará tus características para que puedas construir múltiples cosas al mismo tiempo. Después hay una verificación antes de su finalización, cual verificará toda la implementación en todas las sesiones antes de que realmente plantee un PR. Por lo que tienen muchas de estas habilidades que te ayudarán a trabajar correctamente de una manera específica y deseada. Ahora bien, ¿cómo lo vamos a usar y cuándo lo usaremos? Ahora, para usar estas cosas, en realidad voy a construir algo así como un producto real, y luego usaremos el superpoder para construirlo de manera más eficiente con crotcd 22. 23 claude vs. codex y cursor: Ahora, antes de seguir adelante en el curso, quiero que cubran algo que es muy importante. Entonces en este momento, solo puedes usar Claude Code solo cuando tengas una suscripción. Por lo que su suscripción comienza desde $20 al mes y va a $200 al mes dependiendo de cuál sea tu uso. Ahora, personalmente tengo una suscripción de $100 Max, pero entiendo. Muchos de ustedes realmente no quieren pagar 20 dólares solo para usar Claude Code. Entonces te voy a mostrar un par de alternativas que puedes usar, y vas a poder hacer exactamente lo mismo con estas alternativas. La primera alternativa es el Códice. Ahora Codex tiene un plan gratuito que te permite usar su agente de codificación sin pagar mucho dinero Ahora bien, sí tienen algunos otros planes como tienen un plan de ir en la India, que te costó solo 400 rupias Tienen un plan plus, que ronda los 20 dólares, y también tienen un plan de $100. Entonces, si eres alguien que solo quería probar estos agentes de codificación de IA, entonces Chat GPT es un buen lugar para comenzar Te dan un uso limitado del Codex en un plan gratuito, y supongo que si solo querías construir algo muy pequeño, solo para experimentar con estos agentes de codificación de IA, entonces puedes usar Codex CLI, simplemente haz clic en Codex, y luego necesitas Esto va a funcionar exactamente de la misma manera, igual que Claude, y te voy a mostrar cómo usas Codex, igual que Claude Code Así que solo ve a la documentación del desarrollador, haz clic en la CLI, y podrás instalar la CLI de Codex y podrás comenzar a usarla Esta es la primera alternativa. nivel gratuito del Codex es bastante generoso y puedes construir algunas cosas por ti mismo Otra opción o alternativa a Claude y Códice es Open Cod Ahora, Open Cod es tremendamente popular porque es de código abierto. Ahora, puedes usar todos los modelos populares dentro OpenCD como tienen Kimi k two, Quin Model, Deep Seek modelo, y también tienen OpenAI y Si vas a su página de precios, puedes usar Open Cord gratis o tienen su plan a partir de $5 durante el primer mes. Al igual que cualquier otro agente de codificación, también tienen una CLI, por lo que solo puedes ir a sus perros desarrolladores, hacer clic en CLI, y puedes instalar OpenCod y puedes comenzar a usarlo Todos estos agentes de codificación de IA son realmente buenos, y no encuentro ninguna diferencia importante cuando estaba usando Claude versus Codex versus Open Cod Entonces esta es la tercera alternativa que tienes. El cuarto es Cursor. Ahora, Cursor es un IDE. Eso significa que puedes instalar Cursor en tu sistema. Pero si querías usar su CLI, bueno, ellos también tienen un CLI Simplemente puedes seguir adelante, instalar su CLI y comenzar a usarlos. En este video, voy a elegir Codex porque siento que nivel gratuito del Codex Codex es bastante generoso y mucha gente realmente puede usarlo Y tienen muy buenos límites. Voy a dar click en CLI y voy a instalar la CLI Entonces abres cualquier terminal, solo puedes usar tu terminal nativo o puedes usar nuestro terminal como Costo que tengo instalado en mi sistema. Simplemente puede instalar Codex CLI globalmente simplemente escribiendo NPMIGlobal e instalando OpenAI Codex. Eso es. Podrás instalar su CLI y luego puedes escribir Codex para simplemente comenzar esto, y sí, si te pide que inicies sesión, simplemente escribe slash login, slash Logout para iniciar sesión y Cerrar sesión, y puedes cambiar el Ahora bien, si estás usando Codex, te recomiendo que uses el último modelo, pero reduce el esfuerzo o razonamiento a medio para que realmente no agotes tu límite realmente rápido Y además, apague el modo rápido si está habilitado. Entonces, si puedes ver que hay un modo rápido, simplemente puedes apagarlo. Simplemente escriba slash fast y podrá desactivar el modo rápido. Perfecto. Y ahora puedes empezar a usar Codex igual que cualquier otro agente de codificación, ya sea código de coágulo o código abierto o Cursor CLI, todos ellos son exactamente iguales Aunque solo escriba algo para ti, en realidad puedes escribir slash, y verás muchas opciones que son exactamente las mismas, al igual que Claude Slash Model te dará acceso a todas sus opciones de modelo que tengas El permiso Slash te permitirá editar el permiso del Codex. Recuerdos de slash, habilidades de sky slash, revisión de engaño. La mayoría de las características y funcionalidad, lo que sea que haya en Claude Code va a ser exactamente lo mismo. Te recomiendo que uses HatGPTs Codex si eres alguien que realmente no quiere pagar por Cloud Y también puedes probar algunos otros CLI Cursor te da un límite realmente bueno en el nivel gratuito Por lo que Cursor también tiene un generoso nivel gratuito. Perfecto. Voy a escribir slash quid para cerrar Codex o slash Cerrar sesión para simplemente cerrarlo. misma manera, puedes simplemente abrir el documento CLI de Open Cod y podrás instalarlo. También puedes hacer lo mismo con Cursor. Perfecto. Esta es una forma de usar cualquier alternativa a la nube si realmente no quieres pagar. 23. 24 artefactos para diseño: Ahora puedes usar Claude, JA JBD, o cualquiera de estos modelos de lenguaje grande para crear realmente un artefacto en vivo que puedas usar rápidamente y ver si la interfaz de diseño se ve bien o Simplemente escribí eso, Oye, estoy construyendo una app Todo. Quiero que crees un diseño para ello. El diseño debe ser primero móvil con una navegación, y como esta es una app Todo, quiero que crees una tarea. Entonces o puedo escribirlo o hablar, y tú simplemente escribes el texto por mí. Debe tener fecha de vencimiento. Debes elegir algún espacio matutino por la tarde y por la noche. Solo deséame buenos días, buenas tardes en esta app en la parte superior de la página principal, y puedes hacerme algunas preguntas si tienes, y necesitas crear un artefacto en vivo para ello Ahora, la ventaja del artefacto en vivo es que puedo crear rápidamente un artefacto y usarlo rápidamente y ver si estoy contento con el diseño o no, y puedo iterar eso dentro del chat Y esto se puede hacer usando Claude y Chat GBT. De hecho, permítanme copiar esto y crear un artefacto en vivo usando Chat GPT también Así que voy a crear un artefacto vivo y usar un pensamiento moderno ha GPT Entonces ahora me está haciendo un montón de preguntas. Quiero mi nombre en la página principal. El diseño debe ser limpio y mínimo. Y si, quiero una API de texto a voz real que pueda usar en este diseño. Perfecto. Ahora está creando un artefacto para mí que realmente puedo abrirlo y usarlo en el sitio esta interfaz de chat, y puedo itrad o mejorarlo Ahora bien, esta es solo una forma muy rápida de crear algún diseño, pero esta no es la forma correcta de hacerlo. Te voy a mostrar ¿cómo usas el diseño de coágulos para hacerlo bien Ahora, recuerden, esto es solo un diseño de front-end. Este no es un producto real. Perfecto. En general, el diseño se ve bien, aunque supongo que no puedo guardar nada Supongo que no hay forma de ahorrar o esto no va a funcionar. Esto es solo un diseño para que pueda iterar y mejorar este diseño de aquí Echemos un vistazo a la salida de Claude. Entonces Claude creó algo que se ve mucho peor. Al igual que esto no está optimizado para dispositivos móviles. Puedo ver el calendario. Puedo ver el botón más, pero está bien salida, no es una gran salida que esperaba de Claude. Tan perfecto. Incluso si vas al código fuente de este artefacto, todo esto es un archivo JSX, así también app dot Eso quiere decir que es solo un front-end. Todos estos valores son códigos duros codificados como un par de valores clave, y no hay back end, y este es un buen lugar para comenzar. Pero nuevamente, esta no es la forma correcta de crear un diseño. Entonces voy a cerrar estas dos cosas, y voy a mostrarte cómo realmente creas este diseño usando el diseño de coágulos 24. 25 tiempos para mejorar el diseño: Tan perfecto. Ahora ya sabes cómo construyes un producto y cómo lo haces vivo. El próximo gran reto que enfrentarás está relacionado con el diseño. ¿Cómo haces que tu producto se vea increíble? Entonces voy a comenzar una sesión fantasmal, y voy a ayudarte a entender cómo haces que tu producto se vea increíble Entonces voy a escribir Claude para inicializar a Claude, y se puede ver que estoy usando Opus 4.7 con 1 millón de ventana de contexto Mi esfuerzo es extra alto. Puedes reducirlo a medio si estás trabajando en un proyecto simple, y puedes hacer lo mismo con cualquier agente de IA que estés usando, ya sea Clotde, Codex, open Code Entonces, si compartes el enlace de tu app con alguien, su primera reacción será esa, oye, es buena, pero no es genial. Por ejemplo, me tomé un tiempo y creé un diseño muy bueno para esta app Todo, y te voy a mostrar ese diseño. Ahora, puedes usar Figma o diseño de coágulos o cualquier otra herramienta para crear este Si miras el verdadero todo pase, te muestra el nombre del usuario. Hay una oscuridad en el modo de luz, te muestra un pequeño calendario semanal. Te muestra todas las tareas que se encuentran en realizar etapa concluida y pendiente. Ahora, hay una funcionalidad más donde realmente puedes asignar el tiempo debido a tu tarea, lo que simplemente colocará tu tarea en una categoría de mañana, carga de trabajo y noche. Y se puede ver, hay una página de inicio. Hay una página de información, hay una página de perfil. Y hay un botón más. En la versión uno, tal vez podamos matar a la perspicacia, pero deberíamos tener una página de perfil, una página de inicio y el diseño general, y esto debería estar optimizado para dispositivos móviles . Tienes dos opciones. O simplemente copias y pegas o arrastras o sueltas una captura de pantalla si tienes, pero el problema es que muchos de ustedes no saben cómo usar Figma o cómo usar una herramienta de diseño profesional Entonces terminas con solo experimentación. Sigues incitando a Claude Code hasta que estés satisfecho con el diseño. Ahora bien, no hay nada malo en ese enfoque. Es genial. Pero la mejor manera de iterar y crear un diseño para un producto real es mediante el uso de diseño en la nube En el siguiente video, te voy a mostrar cómo usas diseño de coágulos y cómo mejoras realmente el diseño de tu app 25. 26 Introducción al diseño de claude: Ahora tiene dos opciones. Puedes crear un wireframe de tu app o diseño o puedes crear maquetas de alta fidelidad En la mayoría de los casos, espero que quieras que se salte la parte del wireframe y cree directamente maquetas de alta fidelidad Voy a hacer clic en Crear, y me dará una interfaz de chat que pueda usar para crear diseño. Entonces puedes agregar un sistema de diseño, puedes simplemente poner algún archivo HTML que pueda actuar como un sistema de diseño. Simplemente puede guardar su sistema de diseño en un PDF. Se pueden hacer todo tipo de cosas, pero supongo que la mayoría de ustedes no saben lo que es un sistema de diseño, así que vamos a saltarnos la opción De hecho, no usemos la captura de pantalla. Te voy a mostrar cómo creas un diseño realmente bueno sin siquiera dar ninguna referencia. Y solo puedes arrastrar y soltar el archivo Figma por si trabajas en una configuración profesional donde tengas el archivo Figma. He escrito un prompt como, Oye, estoy construyendo una app Todo y quiero que crees un diseño para ello. Este diseño debe ser primero móvil con navegación en él. Esta es una app de todo. Puedo crear una tarea escribiendo el nombre de una tarea o puedo hablar cada tarea debe tener una opción de fecha de vencimiento y un intervalo de tiempo como la mañana por la tarde por la noche, y necesitas hacer que la página de inicio de la aplicación se vea realmente bien y esté optimizada para dispositivos móviles y solo me deseas buenos días, buenas tardes, dependiendo la hora a la que abra la aplicación. Y mientras estás creando el diseño del mismo, solo hazme preguntas si tienes en mente y usa una fuente genial, como fictory y un sistema de diseño front-end como SATCN Ahora bien, este es, de nuevo, un aviso muy corto que acabo de darle a Claude Code. Y como pueden ver, tiene un montón de preguntas antes de que realmente empiece a crear un diseño para mí. Entonces, ¿qué nombre debería usar esto? A lo mejor pueda usar mi nombre. Ahora se me pide que escoja una vibra. ¿Va a ser tranquilo y mínimo? ¿Va a ser un firme y amable, un aspecto moderno, mejor un tranquilo y mínimo o dejar picar cálido y amable, y mi color favorito es el azul, así que voy a ir con el azul Puedo preguntar. Para agregar algunas tareas de muestra para que el diseño se vea bien, y debería haber solo tres ranuras. Y me está pidiendo que elija un estilo de calendario. A lo mejor este tipo de estilo de calendario es bueno. Quiero tener una navegación móvil que se vea como esta. A lo mejor déjame acercarme un poco más para ti. Entonces este tipo de navegación inferior se ve bien. Quiero unos pocos solo un diseño pulido o vamos a elegir tres variaciones del diseño. Creo que estas fuentes se ven bien. Entonces, ¿vas a hacer clic en continuar acelerando esto y mostrarte exactamente cómo crea el diseño de Claude nuestro diseño de aplicaciones para nosotros? 26. diseño de 27 claude: Ahora tengo mi salida de clod design, y como pueden ver, estos diseños son increíbles Voy a mantener el comando y alejar un poco, y como pueden ver, siguió las pautas que le di inicialmente, cosas como debería usar color azul. El diseño debe ser llamativo. Y como pueden ver, me está deseando buenas tardes. Y puedo ver toda la tarea por aquí. Hay una página dedicada donde puedo hablar y grabar un texto de todo. Creé otra variante que es más mínima y tranquila. Y supongo que creó una tercera variante. Tan perfecto. Creé tres variantes para mí. Personalmente me gusta la variante número uno. Así que sigamos adelante y escojamos la variante número uno. Pero antes de eso, solo quería explicar que en realidad puedes usar el modo de edición y en realidad puedes editar el componente simplemente agregando un comentario. Así que el diseño de coágulos es realmente bueno. Puedes aumentar o disminuir las cosas por aquí, y esta es una actualización realmente buena. Así se puede cambiar el tamaño, el color, la altura de línea del componente. De hecho, solo puedes agregar un comentario, y hará las cosas por ti. Entonces puedes agregar un comentario y simplemente escribir algo y eso va a cambiar eso. Por ejemplo, digamos, no quiero que esto de por aquí. Así que quita esto de aquí y se lo quitará por ti. Creo que tengo que enviársela a Claude, y ahí tienes. Empezará a hacer algún trabajo y va a quitar esto de aquí. Entonces puedes hacer algunos cambios reales con solo agregar algún comentario. Tan perfecto. En general, creo que me gusta la variante de diseño. A, la B es más mínima y profesional y C es demasiado colorida. Entonces elegiré A, estoy seguro que a muchos de ustedes les puede gustar B, que es más mínimo, pero uno se ve súper colorido y bueno para mí, y me he equivocado muchas veces a la hora de diseñar. Entonces voy a refrescar la página. Dice que se ha quitado este viernes 22 M y perfecto. Ahora se ha ido. Tan genial. Me encanta la variante, ¿eh? Así que quita B y C y crea más estructura de alambre. Y una vez hecho eso, entonces voy a usar realmente esta variante y de hecho mejorar nuestra app. Entonces te voy a mostrar cómo puedes compartir esto y usarlo dentro de tu proyecto de Cloud Code. Tan perfecto. Ahora, la salida de diseño está lista. Puedes ver que este es el flujo central de nuestra app Todo, y estas son las otras pantallas que son importantes en esta app de Todo. Entonces me muestra la fecha, el recordatorio. ¿Debo repetir esta tarea o no? Y tan perfecto. Déjame refrescar la página, y supongo que esta parte se habrá ido La siguiente pregunta que quizás tengas en mente, ahora, ¿cómo implemento exactamente este diseño en mi app Todo? Entonces tienes dos opciones. O bien puedes exportar cada una de estas imágenes PNG o descargar HTML, y luego arrastrar y soltar, lo cual es una forma muy ineficiente de implementar Entonces puedes descargar el PNG y en realidad puedes pedirle a Claude que implemente este PNG, pero esta no es la forma correcta de hacerlo. Te voy a mostrar exactamente cómo le pides a Claude Code que implemente esto. Así que realmente puedes descargar esto como archivo zip y simplemente arrastrar este archivo a tu Claude Code y puede comenzar a implementar estos componentes, y luego puede configurar el backend también La otra opción es que puedes enviar esto o entregarlo a Claude Code. Entonces puedes descargar esto como JipFle y luego solo pedirle a Claude Code que lo haga por ti, o puedes enviar esto o entregar la sesión a Claude Digamos, voy a copiar este comando, y dejarme entregar esto a Claude Code y ver si es capaz de implementar esto o no.