Cursor IA: diseño web con programación de IA para principiantes totales | Crea sitios web sin programar

1. INTRODUCCIÓN: Esta es una de las mejores cosas que puedes aprender para tu futuro. Esta es tu oportunidad de subir de nivel para aprender algo que va a mejorar significativamente tu vida. Y eso es codificación de vibra. codificación de Vibe simplemente significa crear sitios web y aplicaciones mediante el uso de IA, inteligencia artificial. Te lo imaginas, lo describes en términos simples, y luego lo consigues. La plataforma crea todo el código automáticamente, así que no tienes que aprender Python, Javascript, ni nada más. Vamos a usar cursor, que es una de las mejores plataformas de codificación de vibra que existen. Cursor es como tener un equipo de desarrolladores senior con todo el conocimiento del mundo al alcance de tu mano 247. Sin tiempo libre, listo para construir con lo que quieras. Y todo esto a una suscripción bastante asequible. No necesitas ninguna experiencia previa ni sabes codificar. Este curso es amigable para principiantes, y lo vamos a dar paso a paso. En el pasado, crear cualquier tipo de sitio web o aplicación significaba miles, tal vez decenas de miles de dólares, semanas y meses de desarrollo y todo un equipo de personas. Ahora, todo está dentro de una plataforma. codificación Vbe es la mejor oportunidad para mayoría de las personas creen un ingreso sólido y confiable Puedes usar la codificación vibe para conseguir un mejor trabajo para freelance o para iniciar el negocio. Y repito sin ser técnico, sin saber escribir código, este es el futuro ahora mismo. En este curso, vamos a hacer un sitio web desde cero, y lo vamos a lanzar en nuestro propio dominio paso a paso con la ayuda de la IA. Sin embargo, esto no va a ser fácil. No te voy a prometer el mundo. A veces va a ser frustrante, y eso es porque es muy temprano Pero llegar temprano es donde está tu principal ventaja. Imagínese invertir en Apple hace 20 años, o comprar Bitcoin cuando empezó. Claro, va a haber incertidumbre, problemas, bichos, pero no esperes hasta que se generalice. Esta es tu oportunidad ahora mismo. En este curso, voy a explicar lo que necesitas saber, acaba de comenzar y lanzar en primer sitio web en muy poco tiempo. Te voy a enseñar en inglés sencillo lo que significa todo, IA, LLM, modelos, MCP, todo Soy diseñadora, y si alguna vez has visto mis cursos de diseño, sabes que me concentro en obtener resultados rápido sin ninguna teoría aburrida. No te voy a llenar la cabeza con toneladas de términos y conceptos complicados. No, en cambio, me enfoco en ejemplos y ejercicios divertidos. Invierte en tu futuro. Empieza hoy mismo. No esperes ahora mismo es donde tienes la mayor ventaja. 2. Qué es la codificación de cursores y vibraciones: Bienvenida de nuevo. En este curso, vamos a usar cursor para vibrar código. Pero, ¿qué es el cursor y qué es la codificación de vibra, verdad? Entonces, antes que nada, el cursor es una plataforma. Es un programa que te ayuda a construir software con el poder de la IA, y eso es sin saber cómo codificar. La compañía detrás del cursor, AI Sphere, acaba de recaudar 900 millones de dólares a una valuación de 9.000.000.000 millones una valuación de 9.000.000.000 Esos son números locos. Es una de las cosas más calientes en estos momentos. Son 20 dólares mensuales al momento de esta grabación, de todos modos Y lo que obtienes a cambio, es un completo cambio de juego. Con Cursor, estás trabajando codo a codo con inteligencia artificial que entiende tu proyecto, sigue tus instrucciones y construye tu proyecto casi como por arte de magia. Escribes lo que quieras. A eso se le llama el aviso. A lo mejor describas lo que debería hacer el proyecto. Y luego la IA se hace cargo y hace mayor parte del trabajo pesado. Pero vamos a simplificarlo. ¿Qué puedes construir realmente en el cursor? Bueno, antes que nada, las aplicaciones móviles, tanto para el IOS como para Android, al igual que las apps que ves en la app store o en Google Play. Puedes crear cualquier cosa, desde un chequeo de estado físico hasta una aplicación de chat y una herramienta de finanzas personales, aunque, para ser justos, en este punto, debes apuntar a aplicaciones más pequeñas Lo siguiente que puedes construir sitios web, cualquier tipo de presentación, sitios web, landing pages, portafolios, blogs personales, landing pages, por ejemplo, son absolutamente fantásticos para productos, para startups, para eventos, todo responsive, todo limpio Entonces esa es una buena manera de hacerlo. Lo siguiente que puedes construir productos SAS. CAS significa software como servicio. Cursor puede ayudarte a construir todo al respecto. El front-end, el back end, la base de datos, todo y las plataformas CAS están en todas partes. Tenemos algunos ejemplos en pantalla Las plataformas CAS son fantásticas porque son una de las mejores formas en las que puedes ganar dinero. Lo siguiente que puedes construir plugins, herramientas como extensiones de Chrome, bots de discordia o tal vez algunas herramientas específicas para tu equipo o empresa o por otro lado, podrías ir por plugins de WordPress, ¿verdad Si vive en un navegador o se ejecuta en línea, es muy probable que puedas construirlo con el cursor. Y aquí está la gran idea. Así que el cursor se conecta directamente a los modelos de IA más inteligentes del mundo Entonces eso significa que sabe escribir Python, JavaScript, reaccionar, next JS, tailwind, mecanografiado, note, y así Es como tener un equipo de desarrolladores senior disponibles 247 con infinitos pacientes listos para codificar lo que quieras en el acto. Le dices lo que quieres, y empieza a codificar. Revisas los resultados, lo revisas, y luego le das retroalimentación, y mejora constantemente. Esto es sin que sepas codificar, platicar en inglés sencillo. Esa es la parte esencial. Así que imagina esto. Tienes una idea para un producto, cierto, un plugin, una app, una plataforma, un sitio web, cierto, algo que resuelve un problema que tal vez has tenido desde hace algunos años. Normalmente, necesitarías meses de desarrollo. Necesitarías un equipo, un presupuesto, un sinfín de reuniones, ¿verdad? Pero con cursor, solo describes la idea. Y en minutos, tienes algo real, algo funcional, algo que puedes probar, mejorar, y luego tal vez incluso lanzar después de algún trabajo. Eso es codificación de vibra. Entonces, la codificación de vibra es que le dices a Cursor lo que quieres que se haga en un lenguaje sencillo , sencillo en inglés, y luego la plataforma lo ejecuta Y eso es lo que hace que el cursor sea tan poderoso. No te ayuda a escribir código. Te ayuda a crear productos, resolver problemas y moverte de la idea a la ejecución más rápido que nunca. Bien, por favor descargue el archivo adjunto y use el enlace para registrarse en Cursor. Así que por favor regístrate, descarga, y te voy a ver en un segundo. Lo vamos a instalar juntos. Pero ahora tomemos un descanso rápido. 3. Instalar el cursor y establecer tus expectativas: Bienvenido de nuevo. Instalar el cursor es bastante sencillo porque es solo un programa sencillo. No pasa nada especial. Así que por favor siga los mismos pasos y marque las mismas casillas. Mientras trabajo en segundo plano, permítame establecer sus expectativas. Llegamos temprano. Las cosas están cambiando rápidamente. Cada semana más o menos, hay grandes noticias, mejoras, y eso es un poco incómodo. Están saliendo nuevas características, y estoy seguro de que este curso va a estar desactualizado, aunque voy a hacer todo lo posible para mantenerlo actualizado. Ahora, mi objetivo es enseñarte a aprender y a usar estas herramientas. Te voy a enseñar principios, y ese es el verdadero valor de este curso. Pero volvamos a los constantes cambios y mejoras. Este es el precio que tienes que pagar por llegar temprano. Necesitas mucha paciencia. Tienes que dejar que la frustración te lave. Y eso es porque te vas a quedar atascado. Te lo prometo. Y no se trata de mi curso, mi estilo de enseñanza, ni de mis conocimientos. Sabes, personalmente he tenido innumerables casos en los que el guía oficial dijo que se hiciera clic en el botón azul, pero solo eran botones rojos. O el guía dijo que hiciera clic en el botón de guardar, pero no había ningún botón de guardar en absoluto. Es muy frustrante. Tenía problemas en los que ya no podía trabajar por problemas con mi VPN. Pero no uso una VPN. Seguí cada paso oficial, y aún así me quedé atascado con un problema que nadie más tenía. Usé tres computadoras diferentes, y obtuve tres problemas diferentes, y pude continuar por años. Esto está obligado a pasarte a ti también. Ahora, mi consejo, usa la guía del archivo adjunto para obtener ayuda. La mayoría de las veces, la respuesta corta es esta, tendrás que hacer muchas búsquedas y arreglar todo por tu cuenta. Estoy aquí para ayudar. Puedes contar conmigo, pero algunos temas van a ser específicos de tu situación, tu computadora y proyecto, y necesitarás paciencia. Pero, ¿cuál es la ventaja? ¿Cuál es la ventaja de ser tan temprano? Obtenemos las desventajas. ¿Cuál es el plus? Bueno, obtienes una gran ventaja en la carrera, ya sea para el trabajo, para cuenta propia o para construir un negocio Esto es masivo. Aprendes de tus errores. Ves problemas comunes, y sales adelante. Como dije, es como invertir en Apple hace 20 años. Nadie sabía que iba a ser un éxito tan grande. Pero aquí, te lo prometo, no hay nada más grande que la codificación de vibra. Y todo está en tus manos. Puedes crear cosas increíbles, o podrías posponer Puedes esperar hasta que las cosas estén súper claras, súper fáciles para todos. No hay más problemas, no más errores, no más frustración. Pero entonces vas a tener 100 veces la competencia porque todos lo van a hacer. Entonces es tan sencillo como eso. inviertes ahora en Apple o Bitcoin, seguro, es posible que te vaya bien. Pero si estuvieras ahí al principio, las recompensas habrían sido infinitamente mayores Así que por favor entiende por qué vas a sufrir y tendrás dolores de cabeza y mucha frustración. Es para tu futuro. Y si puedes manejar eso, si puedes seguir empujando, la recompensa va a ser enorme. Si puedes seguir presionando para trabajar al ancho, las recompensas van a ser enormes. Por eso me encanta tanto la codificación de vibra. Es exactamente la dificultad correcta. Si fuera demasiado duro, sería la codificación clásica, cierto, cuatro a seis años de estudiar, de trabajar, ser aprendiz, ser junior, subir de nivel, poco a poco súper difícil, poco súper difícil, Pero si fuera demasiado fácil, todos lo harían. Entonces la recompensa sería casi nada. Entonces esto está justo en el medio. Este es un trato fantástico. Es el nivel correcto de dificultad. Volver al ingenio. De nuevo, en realidad no vas a codificar. No necesitas conocer ninguna programación de ningún tipo. Tendrás que pensar lógica y claramente explicar lo que tienes en mente, lo que quieres hacer Y esa es una habilidad que vas a tener que desarrollar a lo largo de este curso y a través de la práctica. Pero no vas a codificar, realidad no vas a leer código. Se supone que no debes entender todo lo que está pasando en el cursor. No. Uno de los principios clave que quiero enseñarte es este, puedes pasar todo el día, por ejemplo, creando memes, creando imágenes divertidas para compartir con tus amigos, o por otro lado, puedes crear una plataforma que permita a la gente crear memes. Y luego, a partir de eso, se puede crear una fuente de ingresos. Se trata de tu enfoque, dónde pones tu enfoque y cómo se te ocurren ideas. Voy a dar una conferencia sobre eso, así que estén atentos. Pero sí, en lo que te enfocas es una de las cosas más importantes. Tienes que establecer los objetivos correctos y las ambiciones correctas. Sí, por ahora, tenemos el cursor instalado. Tenemos una interfaz oscura, y estamos a punto de crear nuestro primer proyecto. Ahora, una última cosa. Voy a simplificar muchas cosas, así que es fácil de entender. Si por casualidad eres el codificador con mucho conocimiento, con mucha experiencia, con mucha experiencia, por favor entiende que cuando dices que el cursor es una bifurcación de código VS, eso realmente no ayuda a mucha gente o cuando dices algo como levanta tu terminal y ejecuta este rápido script de Python De nuevo, eso es un poco abrumador para la mayoría de la gente. Yo no voy a hacer eso. Ahora bien, puede que simplifique demasiado algunas cosas, pero este es un curso para personas que no son técnicas, y creo que esa es la mejor manera de hacerlo Bien, te voy a ver en un segundo. 4. Nuestro primer sitio web en Cursor: Bienvenido de nuevo. Vamos a crear nuestro primer sitio web en Cursor. Antes de comenzar, por favor vea esta conferencia dos veces. La primera vez, solo mira y mira lo que está pasando. Después rebobinar desde el inicio y hacer una pausa para trabajar a lo largo. Tendrás que hacer una pausa con bastante frecuencia. Por favor, no intente trabajar a lo largo de su primera visualización. No vas a poder seguir el ritmo. Así que de nuevo, por favor mire dos veces, y la segunda vez, haga una pausa con la frecuencia que necesite. Bien, vamos a lanzar el cursor y esperar unos segundos hasta que se cargue. El siguiente paso es lo que vas a hacer cada vez que quieras iniciar un nuevo proyecto, y eso es hacer una nueva carpeta. Todos nuestros proyectos tienen que organizarse en carpetas, un sitio web, una carpeta. Entonces abramos nuestra computadora y creemos una nueva. Si no lo hace Windows, intente evitar la partición C, la unidad C porque puede crear algunos problemas. Bien, llámelo, como quieras. Voy a usar portfolio, pero el nombre realmente no importa. Por supuesto, la carpeta va a estar totalmente vacía, ¿verdad? A continuación, volver al cursor, maximizarlo, así que ocupa toda la pantalla, y ahora vamos a abrir esa carpeta. Entonces nada especial hasta el momento, pero así es como comienzas un nuevo proyecto en cursor. Y luego adjunto al curso, vas a tener un archivo de texto con un prompt, con una tarea. Es lo que queremos construir, y es algo bastante básico. Entonces esto es lo que vamos a pegar aquí al lado derecho en este campo. Ahora, después de pegar, Control V, no se dirija Enter. En primer lugar, estamos en modo agente. Esto significa que la IA va a hacer todo el código para nosotros. No vamos a usar nada más, así que es todo automático. A continuación, de este trabajo hacia abajo, voy a usar Gemini 2.5 P. Por favor use el mismo o si no está disponible por cualquier motivo, cualquiera de estas otras opciones listadas en la pantalla. Voy a explicar todo a detalle más adelante. Así que por favor por ahora solo continúa. Bien, aquí está la tarea. Es lo siguiente. Crea una página de destino de cartera de modelos para mí, Chris Barron 36 de Bucarest Rumania Tener 14 años de experiencia en diseño. Soy instructor certificado por Adobe, y me especializo en diseño web y de aplicaciones. Prefiero un esquema de color rojo y negro, bonitas animaciones y una sección de portafolio con cinco categorías. Usa imágenes de marcador de posición por ahora. Será una sola página con un menú principal en la parte superior que te llevará abajo a esa sección en particular en la que haces clic. La dirección de mi oficina es la siguiente. Y por favor agregue las reseñas de me. Agregar un formulario de contacto para que las personas me envíen mensajes y muestren mi número de teléfono, así como mis perfiles en redes sociales. Utilice las mejores prácticas para crear esta página de destino. Bien, cosas buenas. Por favor, usa la misma tarea, pero ten en cuenta que es totalmente normal tu diseño se vea diferente. Eso no es un problema. Así es como funciona la IA. Ahora bien, en caso de que esto no funcione en absoluto, continúe con la siguiente conferencia donde vamos a configurar todo, y luego podrá regresar y volver a intentarlo. Bien, ahora, una vez que golpeamos Enter, nos vamos a las carreras. Observe esta área aquí. Esto dice que está generando. Eso quiere decir que está funcionando. Aquí, en caso de que quieras detenerlo, puedes usar este botón, aunque realmente no vas a hacer eso. Dentro de este panel, se puede ver cómo piensa el modelo, y algunos modelos son muy descriptivos. Explican todo a detalle. Por cierto, modelo con IA, es lo mismo. Aquí, este gris muy lavado nos dice lo que está pensando la modelo. Y después de un rato, aparece un tono diferente de texto. Este es más fácil de leer. Entonces, hagamos una pausa. Entonces, básicamente, tenemos un texto lavado que es difícil de leer. Esos son los pensamientos del modelo. Y luego este texto, esta es la respuesta real. Entonces es como poder leer la mente de alguien, y eso es fascinante. Bien, ahora, la IA dice que va a comenzar con un archivo de índice. Y a partir de aquí, podemos asegurarnos de que la IA entendió la tarea. Bien, cosas geniales. Ahora, después de unos segundos más, el archivo índice aparece en dos lugares. En el lado izquierdo, podemos ver donde se listan todos los archivos de esa carpeta que hicimos anteriormente. Estaba vacío. Ahora tiene un nuevo archivo, un archivo de índice dentro de él. Bien. Y en la parte central de la pantalla, podemos ver el contenido de ese archivo. Pero aquí está la cosa. El 99% de las veces, vas a enfocarte en el lado derecho. Bien. Ahora la siguiente tarea es el CSS. Esto le dará estilo al código. Hará que se vea mejor, por así decirlo. Ahora bien, esto va a tomar unos segundos, pero tenga en cuenta que aceleraré la grabación ya que a veces esto lleva un tiempo. Bastantes minutos. Bien, ahora veamos qué sigue. Archivo JavaScript. Bien, il cosas. No tenemos que seguir adelante. Podríamos simplemente tomar una taza de té, pero es una buena idea ver cómo piensa el AA y cómo funciona. Bien, bien. Podemos ver que tenemos algunas instrucciones. Estos son para nosotros. Estas son cosas que debemos hacer para terminar el proyecto. Son cosas como agregar algunas imágenes. Debido a que no proporcionamos ninguno, el sitio web estará bastante vacío, ¿verdad? Y el formulario de contacto en realidad no funcionará porque no está conectado a nada. Pero eso está todo bien y bien, para el primer ejercicio. Sigamos adelante. Y aquí estamos. La IA finalmente se detuvo. Se puede ver que ya no está diciendo generar, y aquí tenemos un nuevo botón que dice aceptar todos. Así que vamos a hacer clic en él. Así es como nos comprometemos. Así es como podemos salvar nuestro progreso. Por supuesto, potencialmente podríamos leer este resumen, pero en definitiva, dice que se hace una versión básica del sitio web, y podemos lanzarlo usando el archivo index. Bien, volvamos a la carpeta y abramos ese archivo. Voy a usar Firefox para abrirlo, pero puedes usar cualquier navegador. Y echemos un vistazo. Aquí está nuestro encantador sitio web. Ahora bien, ¿es absolutamente precioso, hermoso? No, claro, no, pero nos llevó unos minutos, y tenemos algo con lo que trabajar. Debido a que no proporcionamos ninguna imagen, la IA no descargará nada de la web. Entonces, obviamente, el sitio web se ve un poco vacío. Pero sí siguió todas las instrucciones del archivo de texto, y la IA sí dijo que optimizó el diseño para uso móvil. Así que hagamos clic derecho y elijamos Inspec. En Firefox, el botón que estoy buscando es este de aquí. En caso de que simplemente no lo encuentres, solo cambia el tamaño de tu navegador a un tamaño de teléfono móvil Pero sí, esto se ve bien en un teléfono, también. Aquí no hay sorpresas. Este es el poder de la codificación de vibra. Piensas en algo, lo escribes, y luego después de golpear Enter, en unos minutos, lo obtienes. Puede que no sea perfecto, pero podemos construir sobre él. Entonces, en realidad demos otro paso. Cambiemos la combinación de colores. Digamos que es demasiado oscuro para mi gusto, ¿verdad? Entonces cambiémoslo a azul y blanco. Voy a decirle a la IA que haga exactamente eso. Tienes que ser natural en tu idioma. No necesitas usar ningún término técnico. La IA lo entiende y comienza a editar el archivo CSS. Ahora, pausa rápida. Cuando veas líneas rojas, esto significa que esas partes van a ser eliminadas. Y en este caso , son los viejos colores. Y estas líneas verdosas, no son exactamente verdes, son verdosas, esas son las nuevas Entonces todo tiene sentido. Cuando esté hecho, voy a golpear Accept una vez más. Vas a tener que hacer eso constantemente, por cierto. Ahora, potencialmente podríamos leer el resumen, pero volvamos al navegador y actualicemos. Y, sí, ahora es blanco y azul. Seguimos en modo móvil, pero eso está totalmente bien. Podemos ir a la página web y hacer clic derecho. Elija inspeccionar una vez más, y luego tendremos que hacer clic en el mismo botón que antes para volver al modo escritorio. O potencialmente podríamos simplemente cerrarlo y abrirlo de nuevo. Pero sí, estamos bien. La IA nos dio un nuevo esquema de color claro. Todo es bonito y limpio, nada demasiado especial. Pero sí, esto es bastante genial. Hagamos un último paso. Agreguemos un mapa en lugar de una dirección. Entonces veamos cómo la IA maneja eso. Como vas a ver en estas lecciones, hay bastantes limitaciones. La IA no puede implementar absolutamente todo lo que se te ocurra. Pero un mapa, debería ser capaz de hacer. Entonces echemos un vistazo. Recuerda, siempre pulsa Aceptar. Y luego, cuando estés dentro del navegador, puedes usar el ícono de refrescar. Puedes usar el atajo F five, o el control de teclas de acceso rápido o depende de ti. Y sí, este es un mapa completamente funcional que puedes usar. Puedes acercar, puedes alejar. Y esto es increíble. Esto es codificación vibra. Te lo imaginas, lo describes, lo entiendes. Y entonces se trata de refinarlo. Entonces es más como lo imaginaste. Lo que quiero que hagas ahora mismo es crear tu propia versión, empezando por mi archivo de texto. Así que crea una nueva carpeta en tu computadora. Después ve al cursor al menú superior y usa Abrir carpeta. Es tan fácil como eso comenzar un nuevo proyecto. Reemplazar mi nombre en el archivo de texto, cambiar algunos detalles, y luego crearlo. Cuando termines, toma una captura de pantalla de todo el diseño y publícalo para que pueda verlo. Ahora, antes de que terminemos, para algunas personas, esto puede no funcionar. Cursor puede darle varios errores, problemas. Puede dejar de funcionar. Puede que te pida instalar cosas, y eso está totalmente bien. Haremos toda esa configuración muy pronto, y luego podrás volver a esta conferencia. Entonces, si no tienes un sitio web, deja un comentario para que sepa a qué problema te estás enfrentando y luego pasar a la siguiente conferencia. No te decepciones. Recuerda, diviértete con él. 5. Qué puedes construir con la codificación de vibra en el cursor: Chris, ¿qué debo construir? Lo entiendo. Sé que puede que no seas emprendedor con algún genio espeso, pero déjame ayudarte con algunas ideas rápidas Ahora, antes de eso, tengo que decirte una cosa importante. La ejecución es esencial. Las ideas no valen nada. Voy a decir eso otra vez. Se trata de la ejecución. No es la calidad de la idea. Voy a expandirme en el así que comencemos con este sitio web. Yo lovemg.com, ¿verdad? Este sitio web reduce tus imágenes. Si alguna vez has trabajado con Photoshop, por ejemplo, sabes que a veces te va a dar enormes tamaños de archivo, como dos, tres, 5 megabytes, ¿verdad? como dos, tres, 5 megabytes, ¿verdad Ahora, con esta plataforma, arrastras y sueltas las imágenes, y eso es todo. Rebajas su talla en un 80% sin perder calidad. Y también puede ayudarte a cambiar el tamaño de las imágenes rápidamente. Otra vez, arrastra, suelta, y eso es todo, ¿verdad? Y tienes algunas otras características aquí. Pero el precio es de cuatro a siete dólares mensuales. No es nada. Incluso me inscribí. Entonces esa es una idea. Y aquí hay una plataforma que cambia tu PDF a un archivo Excel, que tu contador tenga un tiempo más fácil con él Es súper nicho, ¿verdad? Es sólo para el selecto grupo de personas, pero esto hace 38 mil dólares al mes, 38 mil dólares Cosas locas. Y esa es otra que le va muy bien. Esto cambia el nombre de todas tus fotos, y eso es todo. Todo el asunto. Esa es toda la plataforma. Entonces, en lugar de llamarlos IMG 010203, les da un nombre propio, lo cual es increíble para esos casos en los que te vas vacaciones y tienes miles de fotos por ahí, Nuevamente, este es un servicio muy específico. A continuación, usemos este poly.com, que te ayuda a publicar y programar tu contenido en todos tus canales de redes sociales Esta plataforma tiene una sola persona, un solo tipo detrás de ella está ganando más de 1 millón de dólares al año, dólares australianos, pero aún así, y ahora es Channel se ahora, tomemos un descanso. Estas no son ideas increíbles. Estos no vienen de genios de los negocios, ¿verdad? Se trata de gente normal que tuvo una idea. Tenían un problema, y arreglaron ese problema. Ejecutaron esa idea, y la hicieron bien. Quizás hay otras 50 plataformas como Poly, por ejemplo. Entonces más caro, algunos más baratos. Por eso dije que todo se trata de la ejecución. Y mi consejo, enfócate en el lado del diseño. Toma algo que ya se ha hecho 100 veces antes, agrega un hermoso diseño, un pequeño giro, y te conseguiste un negocio. Por supuesto, aún necesitas promocionarlo. Necesitas anunciarte, pero esa es una historia diferente. Ahora, permítanme continuar con algunos otros ejemplos, algo un poco más arriba. Entonces aquí está la cámara base, una plataforma aparentemente complicada que está enfocada en mensajes de una cosa. Básicamente te permite crear una lista de tareas pendientes de una manera muy similar a la noción. Por supuesto, hay mucho más estas plataformas, muchas más características. Pero luego comienzas con una idea simple, y luego te expones, haces que crezca. Por ejemplo, haz una app que te recuerde levantarte de tu silla cada hora, ¿verdad? Eso es un negocio. Eso es un servicio. Esa es una app, esa es una plataforma. Y esa pequeña idea puede darte otra fuente de ingresos, cómo la monetizas, cómo construyes una audiencia Eso es otra cosa otra vez. Eso es además de los puntajes. Pero te lo prometo, hay toneladas de plataformas construidas alrededor de una idea muy simple. Aquí hay una extensión de WordPress que simplemente te permite insertar publicaciones en redes sociales en tu sitio web. Súper fácil, y hacen mucho dinero, en su mayoría pasivos, ¿verdad? Ahora he visto extensiones pagas de WordPress que te permiten agregar una barra con un mensaje personalizado en la parte superior o en la parte inferior de tu sitio web. Eso es. Eso es todo. Ese es todo el enchufe en todo el negocio. Entonces la cosa es que el cielo es el límite. Se trata de resolver problemas, problemas que sabes que te importan, que quieres resolver por ti mismo. Aún en WordPress, hay una aplicación que te ayuda a insertar el código de Google Analytics o el seguimiento de anuncios de Facebook. Y es tan fácil como eso. No es nada demasiado complicado. Ahora, una vibra de chico codificó una plataforma de horóscopo en vivo en TikTok, y lo está haciendo muy, muy bien Hodoscopio lo que sea. No tiene ningún sentido. No es para mí, pero a lo mejor es para ti. Ahora, otro tipo hizo una aplicación de fondo de pantalla, pero sólo para el tipo específico de anime. No tienes que hacer el siguiente Uber o tablero de puerta. Se llega a uno, cinco, diez K mensuales. En realidad necesitas resolver un problema para un pequeño nicho de personas. Pero digamos que no tienes ninguna de estas ideas, ¿verdad? Bueno, hicimos el sitio web de la cartera, ¿verdad? ¿Por qué no ofrecer este servicio a algunas empresas locales? Encuentra 100 de ellos en tu zona, en tu ciudad, en tu país, y pídeles $1,000 o 80 dólares mensuales Y acabas de hacer un buen trozo de cambio. Hay otras plataformas que te ofrecen listas de todos los odontólogos de tu ciudad o país de York. Ahora bien, lo que importa es que encuentres el enfoque correcto. ¿Los envias por correo electrónico? ¿Los llamas? ¿Te presentas en el negocio? ¿Cobras $1,000 u 800? Y claro, no tienes que hacer eso solo con odontólogos. Piensa en todos los demás negocios tu zona que hacen buen dinero, pero tienen sitios web horribles. En mi parte del mundo, eso son restaurantes, eso son abogados, eso son tiendas de servicios, son veterinario La lista sigue y sigue. Tengo un sinnúmero de agencias de diseño web, claro. Pero el tuyo puede ser diferente porque puedes especializarte en un área determinada que quizás conozcas muy bien. O que estás a punto de aprender muy bien. Ofreces un buen sitio web ya codificado con poco o ningún mantenimiento. Por eso es una carrera porque cada vez más gente va a empezar a ofrecer lo mismo, ¿verdad? Porque si puedes hacer un sitio web en cinco, diez, 15, 20 minutos, claro, ¿cuál es el valor, verdad? ¿Vas a cobrar tal vez 600 dólares? El siguiente tipo va a cobrar 400 y de repente desde $1,000, empiezas a ofrecerlo por centavos Entonces el tiempo es de la esencia. Por eso dije que vale la pena llegar temprano. Pero claro, no hay necesidad de entrar en pánico. Hay más que suficiente para que todos puedan ir por ahí. Entonces mi consejo antes crear cualquier cosa que quieras vender, empieza con unos pequeños proyectos divertidos. Ahora, hagamos una pausa. Ojalá, ahora puedas ver hay un mundo de oportunidades, pero no tienes que apuntar al negocio de 100 millones de dólares Solo resuelve pequeños problemas como transformar esquinas cuadradas de una imagen en redondeadas, ¿verdad? Y que a lo mejor te financia 100 dólares mensuales. Suena tonto, lo sé, pero las redes sociales están llenas de historias como esta. Se llama edificio en público, y es una excelente manera de hacer publicidad. Constantemente publicas sobre tu viaje. Este edificio en movimiento público es fantástico porque en realidad puedes inspirarte en sus proyectos, y también puedes aprender de sus errores para que puedas evitarlos. Ves los perfiles, puedes ver que estas son solo personas normales. Entonces así es como puedes obtener algo de inspiración. El tipo que codificó ply.com documentó cada paso de su viaje y cómo lo creció en el transcurso de muchos años Estaba totalmente solo. Codificó todo, a la antigua usanza. Fue el único desarrollador. Pero ahora tal vez estás solo, pero tienes el conocimiento y el poder de 100, mil desarrolladores calificados, en tu esquina por 15, 20, 25 dólares al mes, ¿verdad? Así que no te llevará años construir tu proyecto. Puedes fallar en el marketing, pero luego puedes hacerlo en otro momento y otro momento y en otro momento. Puedes volver a intentarlo. Puedes fallar rápido, puedes aprender. Y luego en un momento, vas a tener éxito. Ya sea grande o pequeño, depende de ti. Está en tus manos. Pero sí, ahora la pregunta es, ¿ qué quieres construir? Puede que sea una tontería. Puede ser pequeño. Pero si sigues intentando y aprendiendo, te prometo que vas a tener resultados. 6. Cómo desplazarse en el cursor: Bienvenido de nuevo. Vamos a encender el cursor para que podamos explorar la interfaz. Esto puede cambiar de tu parte, pero lo básico siempre estará aquí. Debido a que no tenemos ningún proyecto abierto, la interfaz es bastante básica. Podemos abrir un proyecto existente o lanzar uno nuevo abriendo una nueva carpeta, una carpeta vacía, o podríamos usar Github para iniciar uno. Pero vamos a mantenerlo simple, y vamos a crear una nueva carpeta en cualquier parte de nuestro equipo, y luego la vamos a abrir en el cursor. Ahora, incluso con un proyecto vacío, la interfaz para ser justos no cambia tanto, pero sí vemos algunas áreas clave. En el lado izquierdo, podemos ver todos los archivos en esa carpeta específica. Ahora mismo está totalmente vacío. Acabamos de hacerlo. Pero hagámoslo. Vamos a agregar un archivo de texto aleatorio dentro de esa carpeta. Ahora, podríamos hacerlo desde el cursor directamente, pero vamos a hacerlo a la antigua usanza. Entonces, cualquier archivo de texto aleatorio el archivo debería aparecer aquí mismo. Si no lo ve, sí tiene un icono de actualización si mueve el mouse en esta área. Y una vez que haces clic en él, puedes usar la parte perfumada de la pantalla para editar ese archivo. Pero la clave para la codificación de vibra está aquí mismo en este panel. Aquí es donde se habla con la IA. En caso de que no lo puedas ver, usa la tecla de acceso rápido Control L, pero por defecto, deberías verlo. Pero sí, Control L. Vamos a volver a este panel en un momento. Por ahora, vamos al menú superior a la terminal. De esta lista, elija nueva terminal, y eso va a abrir un panel en la parte inferior. Aquí vamos a ver varias pestañas, pero con sólo interesados en la terminal. Ahora, de vez en cuando, esta área puede mostrarnos diversos temas, errores. Nos va a mostrar algunos avances, y es posible que tengamos que pagar algunos comandos o simplemente presionar Enter. Pero sí, para que sea breve, para recapitular, el 90% del tiempo, vas a mirar aquí en este panel derecho, y tal vez el 10% del tiempo, vas a revisar la terminal en la parte inferior Aunque en la mayoría de los casos, incluso la terminal va a aparecer aquí en el lado derecho. Ahora bien, el resto realmente no importa tanto. En caso de que la interfaz sea demasiado pequeña, puedes usar el control de hockey plus para hacerlo más grande. Esto debería ayudarte a ver todo sin ningún esfuerzo. Entonces eso es Control plus. Si quieres encogerlo, usa lo contrario, Control menos. Bien, cosas geniales. Aun así, esta interfaz oscura puede molestarte. Así que aquí te explicamos cómo puedes cambiarlo. Vaya al menú superior para archivar. A partir de aquí, bajar a preferencias. Entonces busca Equipo. Y por último, aquí, da clic en Equipo de color. este momento, después de hacer clic en cualquiera de estas opciones, la ventana se va a cerrar, lo cual no es lo ideal, sino que vuelve a abrirla, presentar referencias al equipo, colorearlas, y luego elegir cualquiera de ellas. Depende de ti, pero me gustan mucho los más oscuros. Bien, ahora volvamos a centrarnos en la interfaz a la interfaz de chat. Lo primero que debes saber es que para la codificación de vibra, siempre queremos tener este conjunto a agente. Los otros modos son para desarrolladores con mucha experiencia que quieran usar la IA para mejorar la escritura de código para mejorarlo, para ayudarlos a escribir código. Pero no queremos hacer eso. Entonces es por eso que vamos a configurarlo como agente, que simplemente significa que la IA hará mayor parte del trabajo. Siguiente, uptop Se puede hacer referencia a un archivo desde dentro del proyecto, básicamente apuntar la IA hacia él. Ahora, solo para ser claros, la IA va a cambiar todos los archivos que están dentro de la carpeta del proyecto. Puede funcionar en cualquiera de ellos. Así es como básicamente mantienes las cosas separadas. Si quieres iniciar un nuevo proyecto, creas otra carpeta vacía en otro lugar de tu computadora, y luego vas al menú superior para archivar carpeta abierta. Entonces así es como mantienes las cosas separadas. Es como todo. Cuando instalas juegos, programas, cuando copias imágenes de unas vacaciones, todo debe estar muy bien organizado en carpetas adecuadas. Entonces así es como cambias de proyecto a proyecto. Básicamente vas a Archivo Abrir carpeta, ¿verdad? O otro enfoque que es básicamente lo mismo. Puedes ir al menú superior para archivar, y desde aquí, puedes elegir nueva ventana. Y básicamente, entonces puedes abrir una carpeta, y básicamente es lo mismo. Ahora puedes arrastrar imágenes al chat. Por eso tienes este ícono aquí. Puedes hacer clic en él o puedes arrastrar y soltar. Pero lo vamos a hacer más tarde. Como ya dije, también puedes hacer referencia a ciertos archivos si quieres que la IA se centre en ellos. este momento, puedes ver que el documento de texto se muestra aquí mismo, y eso es decirle a la IA que querías prestarle más atención. Puedes repasarlo y hacer clic en el símbolo de X para eliminarlo. Vamos a platicar sobre eso más adelante. El último escenario importante aquí es esta parte donde eliges tu modelo. Eso va a cambiar drásticamente tus resultados. Hablemos de modelos en la próxima conferencia. Por ahora, cámbiala la interfaz a un nuevo equipo, aumenta el tamaño usando Control plus y crea una nueva foto en tu computadora y ábrela en el cursor solo para que te acostumbres a ese flujo. Bien, te voy a ver en un segundo. 7. Obtener mejores resultados con estas herramientas: Regresa. Desarrolla algunas herramientas que puedas instalar en tu computadora, para que el cursor pueda hacer un mejor trabajo, sobre todo si quieres hacer la menor cantidad de trabajo posible, y eso es lo que queremos hacer. Ahora, no vamos a darle a la IA un control completo. En cambio, vamos a instalar algún software muy conocido que va a ayudar a que el cursor funcione mejor. Entonces antes que nada, tenemos que instalar Python. Por cierto, tienes un archivo adjunto al curso, así que no te preocupes por ello. Tienes todos los enlaces, no necesitas escribirlos. Por favor, trabaje en su segunda visualización. Bien, este es el sitio web oficial, y haremos clic en la última versión de Python para Windows en mi caso. En esta nueva página, vamos a tener que desplazarnos hacia abajo, y debajo de la sección de archivos, vamos a encontrar el enlace de descarga. Claro. Haz algunas opciones, pero aquí está la cosa. Busca la etiqueta recomendada. Eso lo hace fácil. Entonces lo descargaremos e instalaremos. Ahora, hay una cosa importante aquí, esta segunda casilla de verificación aquí Ahora, no voy a entrar en detalles porque eso realmente nos desviaría Así que solo marca ambas casillas, y vamos a estar bien para irnos. Lleva un momento, pero no pasa nada especial. A veces Python no se instala correctamente, y tengo una conferencia sobre eso. Ahora, para verificar y ver si su instalación es buena, haga clic en el menú Inicio y luego escriba CND CMD es la abreviatura de comando. De nuevo, tienes todo esto adjunto, y también tienes algo para los usuarios de Mac. Ahora bien, esto es lo que quiero que escribas aquí en el símbolo del sistema. Y si ves algo como esto, estás listo para ir. Lo más probable es que vayas a tener una versión más nueva, pero eso está bien. Mientras no haya advertencias, vas a ser bueno. Ahora, en caso de que no puedas manejarlo, puedes hacer lo siguiente. Se puede ir al cursor al menú superior a la terminal. Aquí, para el nuevo, y vas a poder verlo aquí mismo. Escribe lo mismo, P e Y, y vas a ver si funciona. Por mi parte, todo está bien. Ahora, antes de continuar, tengo que decir que no voy a explicar cada pieza de software porque es contraproducente En cambio, voy a adjuntar un archivo con algunos detalles sobre cada programa, pero estos son muy conocidos, y no hay nada de qué preocuparse . Van a ser buenos. Entonces otra vez, me voy a centrar en las cosas prácticas. Para mí, el objetivo es bastante sencillo. Crea sitios web lo más rápido posible. Aprender sobre Python en este momento realmente no ayudará. Te va a hacer girar la cabeza. Entonces, mantengamos esto corto. Entonces Python está marcado fuera de la lista. Idealmente, reiniciarías tu computadora, pero aquí voy a continuar, aunque eso pueda ocasionar algunos problemas. Siguiente en mi lista, Node JS LTS versión. Esto es un must have, y realmente nos va a ayudar. Ahora, durante el proceso de instalación, puede preguntarle si desea instalar algunas otras herramientas. Queremos asegurarnos de que marcamos esa opción. Eso queremos. Entonces esto te va a mostrar otra ventana con mucho texto, y sí quiero decir mucho. No nos pide nada, pero quizá tengas que esperar unos minutos mientras hace lo suyo. Voy a acelerar la grabación, pero por favor, de tu parte, ten paciencia. Una cosa graciosa, sin embargo, por mi dice que en realidad no puede encontrar Python, aunque esté 100% instalado. Ahora, un reinicio podría haber resuelto potencialmente este problema. Pero sí, sé que está instalado, así que no es gran cosa. El caso es que, después de un tiempo, este proceso de instalación, bueno, simplemente se detiene. Pero aquí está la cosa. Abra otro símbolo del sistema, CMD, y escriba el siguiente nodo y luego la versión Recuerda, no tienes que memorizar estos comandos. Todos están apegados. Bien, sí, puedes ver mi versión aquí, ya estamos listos para irnos. Siguiente en mi lista, Power Shell siete. Estamos en la tienda oficial de Microsoft, y esto nos dice que hay muchas formas de instalarla. Puede parecer un poco abrumador, pero en realidad es bastante simple. Vamos a usar este método cuando este es el método recomendado, así que por eso lo vamos a usar. Aquí, sólo hay dos pasos. Esta es la primera. Abre el símbolo del sistema, haces clic aquí para copiar este texto y luego lo pegas. Vas a recibir una pregunta aquí, escribe Y como en yes, y luego pulsa Enter, y vas a ver que tienen dos versiones disponibles. Ahora, la vista previa simplemente significa que es como una versión Beta, algo que suele ser menos estable, experimental. Entonces no vamos a hacer eso. Vamos a elegir el uno, el primero. Bien. Ahora, para instalarlo, copia este comando. Nuevamente, no la versión de vista previa que está un poco más abajo, esta de aquí, y luego pegarla en el símbolo del sistema y tenía Enter. Y claro, después de los pocos segundos, esto se va a instalar. Bien, rápido fdWardt pruébalo, abre tu menú de inicio y escribe lo siguiente Es push pero con una W, y deberías ver Power Shell seven disponible. Bien, lo estamos haciendo muy bien. Sigamos con GitHub. Tenemos que hacer una cuenta. Pero como con todo lo demás, es totalmente gratis. Entonces tienes que poner tu dirección de correo electrónico, y luego tienes que verificarlo. Pero si, después de eso, eres bastante bueno para ir. Github es muy necesario, aunque pueda ser bastante intimidante Como estás a punto de ver, nos vamos a centrar en lo esencial, y pronto, vas a estar cómodo con ello. Bien, cosas geniales. A continuación, instalemos Docker. Esto puede ser opcional. Se puede considerar opcional, pero tuve bastantes problemas porque no lo teníamos instalado, así que preferiría instalarlo y luego terminar con él. Este es uno de los programas más lentos que existen. Es totalmente gratis. No hay mucho que tengas que hacer, pero es bastante lento. Entonces tienes que ser paciente con ello. Después de esto listo, y otra vez, por favor tenga paciencia. Tendrás que crear una cuenta. Pero la cosa es que ya tenemos una cuenta de GitHub, ¿verdad? Entonces, en lugar de ingresar el correo electrónico y registrar a la antigua usanza, ¿por qué no usar la cuenta de GitHub, verdad? Es mucho más rápido. Así que haz clic en el icono. Ese es el ícono de GitHub, y luego vas a ser dorado. Bien. Aquí hay algunas otras cosas. Pero mientras trabajo en segundo plano, déjame explicarte qué está pasando. Así que estamos a punto de cocinar muchos platillos en la cocina. Vamos a cocinar el desayuno, el almuerzo, la cena. Vamos a hacer postres. Vamos a hacer refrigerios. Vamos a hacer comidas completas, bastantes variaciones, ¿verdad? Entonces esto significa que tenemos que tener una nevera y utensilios completamente surtidos Necesitamos ingredientes. Necesitamos cuchillos, tenedores, cucharas, las obras, ¿no? Esto es lo que estamos haciendo ahora mismo. Ahora, ¿vamos a usar absolutamente todo en cada plato? No, algunas herramientas solo son específicas de ciertos proyectos, pero es mucho más fácil preparar todo ahora mismo que tratar de encontrarlas mientras cocinas. Eso va a ser horrible. Esa es una mala experiencia. Verás, cuando obtienes problema tras problema en el cursor, porque te estás perdiendo esto o aquello, vas a perder el tiempo. Vas a desperdiciar energía y, por supuesto, créditos, que básicamente significan dinero. Entonces es por eso que te sugiero encarecidamente que instales todo ahora mismo. Te pausas a menudo, llegas al ancho, y luego vas a estar volando. Bien, cosas buenas. A continuación, vamos a instalar algo llamado Git para Windows. Ahora bien, este programa va a tener mucha configuración, muchas casillas de verificación Pero lo que vamos a hacer es que vamos a usar los valores predeterminados en cada paso. Ahora, potencialmente podrías hacer una pausa, pero solo acepta todo ya que está configurado porque el cursor va a administrar todo. Así que solo pega a continuación y va a ser bueno para ir. Ahora me doy cuenta de que esto no es tan cómodo, pero esto va a hacer que la IA funcione mucho mejor, mucho más rápido, y no nos va a molestar en cada paso. No nos va a pedir que confirmemos cosas. No nos va a pedir que hagamos cosas. Ahora, cuando creemos varios proyectos en el cursor, todos estos programas y cuentas van a ser útiles. Entonces por eso los instalamos ahora mismo. Quédate conmigo, ya casi terminamos. Bien, Fast Food web y solo tenemos algunas cuentas que hacer. Pero estos son un instante. Es solo un clic más o menos. VerSl es el primero. Vamos a usarlo para alojar nuestros sitios web para que todos puedan verlos. De nuevo, esto es totalmente gratis por ahora, así que no te preocupes por ello. Regístrate usando Github para simplificar el proceso. Por supuesto, haga una pausa con la frecuencia que necesite y revise el archivo que se adjunta. Entonces ese es VerSl. A continuación, vamos a utilizar una plataforma llamada resend.com para enviar Esto es totalmente gratuito para hasta 3,000 correos electrónicos al mes. Así que esto es increíble para empezar. Recuerda, hicimos nuestro sitio web de portafolio, pero la IA nos dijo que el formulario no funcionaría porque no está conectado a nada. Bueno, reenviar correcciones que. Cosas buenas. Y una cuenta final es súper Base, lo cual es fantástico para bases de datos, para proyectos complejos, lo que podríamos hacer más adelante en el curso. Esto es muy necesario, pero nuevamente, más adelante. Sin embargo, es un clic, así que ¿por qué no sacarlo del camino Pero, sí, lo creas o no, ya terminamos con estas herramientas. Hay algunos otros ajustes en el cursor, pero vamos a hacer eso después de que te pongas al día. Por ahora, haga una pausa, instale todo, revise el archivo adjunto y continúe solo después de haber revisado la lista de verificación. Recuerda, sé paciente e instala todo. Gracias. 8. Configura los MCP y las reglas en el cursor: de forma fácil: Regresa. Hemos instalado bastantes cosas como Python, no JS, y Power Shell, pero hay algunas cosas que podemos hacer en el cursor, también. El primero son las reglas. Y puedes llegar a esta sección enfocándote en la parte superior derecha del cursor. Haga clic aquí en este icono de engranaje para abrir la configuración del cursor. Vas a ver que se abrió justo aquí y hay algunas cosas para elegir. Empecemos con reglas. Entonces aquí, hay dos opciones principales. Son reglas de usuario y reglas de proyecto. Nos interesa el primero. Tienes un archivo adjunto que se llama exactamente así. Todo lo que tienes que hacer es espaciar el contenido dentro del Cursor. En definitiva, esto le dice al cursor cómo debe actuar. Es como decirle a alguien cómo nos gusta nuestro café, y es algo bastante básico. Queremos que el cursor sea eficiente. Queríamos utilizar las mejores prácticas. Queremos que sea seguro y encubra información sensible, y así sucesivamente. Puedes encontrar plantillas para reglas en la web o simplemente puedes usar las mías. También lo obtuve de la web. Elegimos reglas de usuario porque queremos que el cursor las aplique a cada proyecto. Ahora por otro lado, las reglas del proyecto serían específicas de este proyecto único. Por ejemplo, imaginemos que cambiamos a un proyecto de aplicación móvil en IOS, derecho. Podemos tener diferentes requisitos, derecho, reglas diferentes. Pero como vamos a enfocarnos en el trabajo de diseño web en este curso, queremos mantenerlo simple, así que es bastante fácil, pegar esas reglas, y eso va a ser todo. Queremos que se apliquen en todas partes. Siguiente incursor vamos a dar click en MCP. No voy a detenerme en las cosas técnicas. Es bastante sencillo. Estos nos van a ayudar bastante. Ahora, aquí está la cosa. En definitiva, esto le va a dar más control a la IA. Si no usamos estos MCP, tendríamos que hacer más trabajo Tendríamos que escribir más código. Tendríamos que escribir más comandos y mover cosas por ahí. Eso no es genial. Por ejemplo, vamos a tener un Github MCP. Eso va a permitir que la IA haga un nuevo proyecto por su cuenta. Le permitirá subir todo automáticamente. Básicamente hacer todo por su cuenta sin que tengamos que seguir ciertas instrucciones. Odio cuando la IA me dice lo que tengo que hacer. Entonces los MCP son fantásticos. Y una vez que estén establecidos, la IA los usará según sea necesario. Estas son básicamente herramientas para la IA en caso de que las necesite. Ahora, en este momento, esta interfaz no es amigable para principiantes, pero te voy a ayudar. Tienes un archivo adjunto que simplemente tienes que copiar y pegar y luego reemplazar algunas claves. Este es el archivo, y aquí están las cosas que hay que reemplazar. En primer lugar, permítame mostrarle cómo eliminar o agregar uno por si acaso desea agregar un MCP o eliminar un MCP Seleccionas todo el archivo, Control A, luego lo copias, Control C. A continuación, abres chagpt.com No necesitas una cuenta, puedes usarla totalmente gratis. Entonces dices algo así como, quita el Super Base MCP de este código, y luego simplemente lo pegas Tenías que entrar, y eso va a ser todo. Chad GPT te va a dar el código actualizado, que no tengas que preocuparte por abrir y cerrar corchetes o cualquier otra cosa Y es lo mismo si quieres agregar algo. Entonces, sí, así es como lo haces. Voy a ceñirme a mi lista original, y eso es lo que te recomiendo que hagas también. Así que con el archivo de texto original que has adjuntado, vuelve a Cursor, a MCP y haz clic para Agregar Estoy bastante seguro de que esta interfaz va a cambiar en el futuro. Va a ser más amigable para principiantes. Pero por ahora, es lo que es. Bien, una vez que pegas, tienes que cambiar de tabulación. Tienes que volver a la configuración del cursor. Aquí, vas a encontrar una lista de todos los MCP que se configuran Verde significa que están bien para ir. Cualquier otra cosa no es lo ideal. En caso de que tengas problemas con algunos de ellos, sigue viendo. Te voy a mostrar como puedes arreglarlos. Ahora, hay un límite en la cantidad de MCP que puede instalar. Hay un límite en la cantidad de herramientas que pueden usar. Ahora, son tan geniales, posible que quieras agregar toneladas de ellas, pero más de 40 herramientas en total es un nog, al menos por ahora Ahora, puedes decir, Oye, Chris, pero son solo unas pocas entradas aquí. Tenemos Github. Tenemos memoria, pensamiento secuencial. Estos no son 40 artículos. Tienes razón, pero son herramientas, no artículos. Ver, cada MCP tiene todas estas herramientas. Ese es el límite real. 40 herramientas en total. Github solo tiene más de 20, pero es tan útil que nos lo vamos a quedar. , solo unas palabras sobre ellos Sin embargo, solo unas palabras sobre ellos, solo para que quede un poco claro. Pensamiento secuencial, esto va a ayudar a la IA a descomponer la tarea en bits más pequeños. Ayudará a hacer un seguimiento de ellos, esos pedacitos más pequeños, y nos va a dar un resultado mucho mejor. Básicamente es ayudar a la IA a no perder el enfoque. Va a hacer un seguimiento de todo. Básicamente es una lista de verificación. O el sistema de archivos MCP. Esto va a permitir que la IA haga carpetas, mueva archivos, corte, elimine, y así sucesivamente. Esto es crítico porque algunos proyectos van a tener montones y montones de archivos y carpetas, y realmente no quieres cavar a través de ellos. No quieres moverlos por tu cuenta. Dejar que la IA lo haga por ti es totalmente increíble. Pero pongamos tus llaves porque de nuevo, tienes que conectar algunas de ellas con tus llaves personales. Entonces déjame mostrarte cómo funciona eso, empezando por GitHub. Ahora, puedes usar Google y buscar token de acceso personal de GitHub. O puedes hacer esto. Puedes volver a tu navegador a github.com A partir de ahí, puedes ir a la configuración de la cuenta, y desde aquí en el lado izquierdo en la parte inferior, vas a ver la configuración del desarrollador. Y desde esta nueva ventana, vas a ver exactamente lo que queremos token de acceso personal. Queremos el clásico. Tan creativo, pero ten en cuenta que tendrás que configurar un nombre, una fecha de caducidad. 90 días es lo que recomiendo. Y entonces vas a tener que marcar absolutamente todo. Es mucho clic. Sé que estás harto de estos escenarios, pero te prometo que esto nos va a hacer la vida mucho más fácil. Pero sí, una vez que estés listo, vas a tener la llave, pegarla, y eso es todo. Asegúrate de ocultarlo siempre. Sólo te lo va a mostrar una vez por motivos de seguridad. Piense en ello como su número de tarjeta de crédito. Ahora para la súper Base, es mucho más fácil, nada demasiado complicado. Pero déjame decirte esto solo para que quede súper mega claro. Nunca te mostraré las llaves de nadie. Es como mostrar tu número de tarjeta de crédito en Internet. No es una buena idea. Tienes que mantenerlo a salvo. Tienes que no mostrársela a nadie más. Es por eso que la mayoría de las plataformas sólo van a mostrarte tu clave una vez. Si la pierdes, vas a tener que hacer otra. No te cuesta nada hacer una nueva clave, pero no es buena idea tener las 15 claves al azar en tu cuenta, sin saber cuál es cuál. Así que mantenlo a salvo, pégalo, y luego eso es todo. Ahora, básicamente terminamos. Se puede hacer una pausa. Puedes configurar todo por tu cuenta y asegurarte de estar al día. Si tienes algún problema, no te preocupes. En el siguiente video, te voy a mostrar cómo podemos arreglarlos. Así que tenlo en mente. Por ahora, adelante y ponte a trabajar. Gracias. 9. Cómo solucionar problemas: Regresa. Los problemas van a surgir, y lo más frustrante, puede ser cualquier cosa Vas a tener problemas específicos a tu computadora, a tu sistema operativo, a tu proyecto. Por ejemplo, si tienes un anti virus, puedes tener dificultades durante días y ningún tutorial te puede ayudar. Por eso quiero mostrarte cómo aprendí a lidiar con estos casos, cómo lo hice por mi cuenta. Por ejemplo, digamos que el servidor Git MCP no funciona, y dice que se debe a Python Ahora, instalamos Python, y me pareció bien, ¿verdad? Entonces lo que hice fue copiar el error, y luego usé Google. Encontré algunas cosas en el desbordamiento de pila, que es una plataforma para desarrolladores. Probé diferentes soluciones, pero ninguna de ellas funcionó. Ahora para que quede claro, no soy desarrollador. No tengo idea de cuál es el problema. Ahora bien, cómo manejas estas situaciones, estos temas, eso va a determinar tu nivel de éxito. Entonces repito, vas a seguir instrucciones, ya sea de este curso o de la web, pero las cosas no van a funcionar. Y cómo logras manejar eso, eso va a determinar tu éxito. Aquí, probé algunas cosas, y luego me cambié a chatgpt.com Puedes usarlo de forma gratuita o puedes registrarte. Te recomiendo que te inscribas, a pesar de que es otra suscripción. Yo usé este modelo, que es muy bueno para razonar, y le dije exactamente lo que está pasando. Oye, estoy usando IA de cursor, y estoy recibiendo este problema. La primera solución que me dio me pareció un poco complicada para mi gusto, así que simplemente me la salté Acabo de pasar a la segunda. Aquí, no tenía idea de lo que significaban estos, pero acabo de empezar a pegar en CMD, y eso fue eso, ¿sabes? La primera línea no pareció ayudar. Entonces entonces simplemente pasé a la siguiente. Y aquí está la cosa. Pasados los pocos segundos, instaló algo, y tuve la sensación de que funcionaba. Entonces volví al programa. Me refresqué, y sin embargo, todo estuvo bien. No tengo idea de por qué, pero esa fue la solución. Ahora bien, esta era una sola situación. Aquí hay un caso diferente en una computadora diferente, el G MCP no funciona, pero por la razón diferente No sé por qué, y quiero ser totalmente transparente. No planeo aprender estas cosas. En cambio, voy a usar el mismo método que antes. Voy a preguntarle a GPT al respecto. Preferiblemente OT, porque OT es el modelo de razonamiento más avanzado, por lo que es muy bueno en lógica y codificación. Pero si no tienes acceso a GPT para chatear GPT, potencialmente podrías usar la ventana de chat en el cursor, y probablemente vas a obtener un resultado similar Ahora aquí en Chat GPT, le conté lo que está pasando, y después de unos 90 segundos, me dio un plan paso a paso Entonces antes que nada, tengo que instalar algo usando PowerShell, y aquí está el comando exacto Bien, creo que es bastante simple. Voy a usar el menú de inicio. Voy a escribir push, pero con una W o simplemente Power Shell. Y luego dentro de Power Shell, sólo voy a copiar, pegar ese comando y tenía Enter. Y nuevamente, parece que está instalando algo. Realmente no estoy seguro de qué. Es hacer varias cosas. Pero, sí, creo que es bueno para ir. Ahora para el siguiente paso, me dio un comando diferente, pero es insistir en que abra una nueva terminal Bien, voy a escribir push otra vez, y luego voy a pegarlo. Por supuesto, eso plantea un tema. He copiado dos líneas distintas, lo cual no es lo ideal. Debería ser uno por uno, pero no importa, voy a pegarlo de todos modos. Y si, creo que esto es bueno para ir. Bien, ahora tenemos que reiniciar el programa. No nos saltemos eso. Estoy feliz de no tener que reiniciar la computadora. Ahora, vamos a tener que esperar al segundo. Pero sí, después de que esté cargado, puedes presionar el botón de refrescar desde el lado derecho, y básicamente esa es esa victoria, no más error. Esto es una gran cosa. Ahora bien, para ser justos, este es un programa diferente al cursor. Por eso se ve un poco diferente. Pero el punto sigue en pie. De tu parte, vas a tener otros temas. Pero recuerda una cosa. Una vez que los resuelvas, vas a estar bien para ir con eso no volverá a aparecer. Lo crucial es que tienes que mantener la calma. Esa es la esencia de la codificación vibra. No hay que saber codificar, pero sí hay que A, tener paciencia. B, haz las preguntas correctas, y mira lo más importante, prueba cosas hasta que funcione. Ahora, aquí está la cosa. Tenemos chat GPT, pero también tenemos cursor que usa chat GPT, Bueno, GPT 4.1. ¿Por qué no usar cursor, verdad? Porque básicamente, estoy tratando de proteger mis créditos. En lugar de usar un crédito, prefiero usar chagpt.com donde tengo una suscripción separada, y puedo hacer tantas preguntas como quiera sin ninguna limitación Entonces por eso prefiero usar chgpt.com y tengo una suscripción porque básicamente son preguntas ilimitadas, mientras que en el cursor, cada conversación, cada vez que golpeas y un crédito baja Entonces por eso lo estoy haciendo así. Pero sí, eso lo envuelve. Estás obligado a tener dolores de cabeza. Sucede. En los tutoriales, siempre es A, B C y éxito, ¿verdad? Pero en tu caso, puedes pasar horas en el escalón B en el segundo escalón, y estás atascado y no puedes continuar. Siempre y cuando tengas en mente mis consejos, los pacientes hacen las preguntas correctas y prueban cosas hasta que funcione, vas a estar bien. Recuerda, este es el precio a pagar por ser tan temprano, pero tenemos tantas ventajas que en general, esta es una oferta fantástica. Y con eso, continuemos. 10. Claude, Gemini, GPT: Regresa. Los LLM son modelos de lenguaje grandes y son lo principal que usa el cursor Entonces toda la inteligencia viene a través de estos LLM, que la mayoría de la gente llama modelos Eso es lo que usaremos también. Los modelos de AI LLMs hicieron lo mismo. Entonces solo para ser claros, el cursor es el programa principal, pero la mayor parte de su inteligencia proviene de estos modelos que provienen de diferentes empresas. Cursor es una tubería donde los modelos son el agua. Ahora bien, ¿podría fluir el agua sin ningún tipo de tubería? Claro, claro, pero el agua iría por todo el lugar, ¿verdad? Cursor se asegura de que estés obteniendo más de lo que quieres, así que por eso lo estamos usando. De lo contrario, potencialmente podríamos simplemente inscribirnos una compañía específica y usar sus modelos, pero eso sería mucho más limitante y sustancialmente más costoso, especialmente si desea utilizar múltiples empresas y múltiples modelos. Ahora bien, esta es la razón por la que el cursor es una opción mucho mejor. Para hacer cursor, obtienes acceso a la mayoría de las empresas y a la mayoría de los modelos que existen. Es por eso que cuando haces clic aquí, puedes elegir entre bastantes de ellos. En realidad, hay bastante más. que cargarlos estos son los convencionales, y estos son los recomendados en definitiva. Ahora, la pregunta clave, la pregunta del millón de dólares, cuál deberías usar, ¿verdad? La respuesta corta es, realmente depende. Entonces esto es lo que vamos a hacer. Vamos a compararlos. Voy a darle la misma tarea a los primeros para que podamos comparar los resultados. Tienes la tarea adjunta, así que vas a hacer lo mismo en tu segunda visualización. Por ahora, basta con mirar y ver qué está pasando. Ahora, una cosa los modelos cambian a menudo. Entonces, lo que hoy es lento puede ser bastante rápido mañana. Entonces eso es algo de lo que hay que tener en cuenta. Las cosas cambian constantemente. Ahora, voy a estar usando un plan Pro, así que voy a tener acceso al último modelo Cloud Four. Pero si estás usando el plan gratuito, vas a tener que usar el modelo 3.5. Pero como estás a punto de ver, eso no es realmente un problema porque nuestro objetivo es tener una idea de estos modelos a través de probarlos. Así que realmente no importa lo que uses ahora mismo. Ahora, para que esto sea breve, ya hice tres carpetas vacías en mi computadora. Los nombres realmente no importan, pero quería etiquetarlos claramente para que sepas qué es qué. Hazlo un poco más interesante, adjunté algunas imágenes al curso. Ahora, ojalá los modelos puedan utilizarlos. Para que eso suceda, voy a copiar esa carpeta dentro de la ubicación del proyecto Cloud cuatro. Esa es la primera. Entonces eso debería ayudar al modelo a hacer un sitio web más bonito, ¿verdad? Ahora voy a mostrarte la tarea en un segundo. Pero primero, tenemos que ayudar al modelo señalando las imágenes para decirle al modelo que están ahí. A mí me gusta dar instrucciones claras. Usa las imágenes de esta carpeta y luego agrega la ruta, la ubicación exacta de las imágenes. Ahora, para obtener la ruta, entra dentro esa carpeta y da click en esta área, y vas a ver algo como esto. Eso es lo que necesitamos para pegar dentro del archivo de texto. Bien, de nuevo, asegúrate de trabajar a lo largo tu segunda visualización y pausa tantas veces como necesites. Bien, el aviso está listo, y ahora podemos copiarlo. De vuelta al cursor, no hay ningún proyecto cargado, así que escojamos carpeta abierta. Ahora tendremos que navegar por nuestra computadora y encontrar esa ubicación, pero eso no es nada especial. Una vez que la interfaz esté cargada, obtenga un prompt y pegarlo en el chat. Asegúrate de seleccionar Cloud four o Cloud 3.5 si estás en el modo de prueba. Bien, ahora voy a hacer mi interfaz un poco más grande así que es más fácil seguirla. Bien, vamos. Ahora, de inmediato, el coágulo cuatro está planeando muchos movimientos. He pausado la grabación porque como pueden ver, aquí hay bastantes pasos Ahora, recuerden, texto lavado significa con ver lo que piensa el modelo, pero aún no ha respondido. Después del segundo, sí reconoce la tarea. Lo entiende, y dice que va a hacer un sitio web hermoso. Luego dice que va a usar HTML cinco, CSS tres y JavaScript Vanilla. Bien, esto es bastante importante porque si sabemos lo que usa el modelo, potencialmente podemos solucionar cualquier problema con mucha más facilidad. Sabemos para qué buscar en Google, ¿verdad? Y ahora empezó a hacer el archivo index. Ahora, lo que quiero decir una vez más es que hay que tener paciencia. Voy a cambiar la velocidad de la grabación de vez cuando para que no esperemos demasiado. En realidad, creo que tener un temporizador en algún lugar de la esquina puede ser una buena idea. Entonces déjame agregar eso. Esa es una forma de comparar estos modelos. Bien, el archivo de índice está cargado y el archivo CSS es el siguiente. Ahora, el archivo CSS determina el estilo del proyecto, el aspecto. Parece que Claude quiere usar el esquema de color rojo rosa y azul oscuro, junto con una fuente específica llamada Fredoca Entonces se le ocurrió este tipo de letra específico. Interesante. Bueno, esto está tomando bastante tiempo. Si revisas los archivos, en realidad vas a ver cientos de líneas de código. Entonces creo que el peso está ameritado. No te apresures, ¿verdad? Claude no duda, pero sí lleva un poco de tiempo escribir todo el código. Una característica de quil Claude está creando un archivo léeme. Esto es útil, y agradezco que el modelo haga eso. Por supuesto, tenemos que compararlo con otros modelos para ver qué es qué. Pero, sí, en general, hasta ahora, cosas buenas. Y sí, finalmente está hecho. Así que aceptemos todo y echemos un vistazo. Así que unos 3.5 minutos más o menos en total. Y el sitio web, el sitio web se ve bien. En realidad, esto es mejor que bueno. Me gusta el degradado en el menú principal, la fuente chunky. Esto es bastante encantador. Todo el esquema de color está en el punto, pero tengo que decir que estoy un poco decepcionado por el mapa. No agregaba uno funcional. Tenemos que inscribirnos y darle una llave para que funcione. Bien. Pero aparte de eso, el área del boletín, eso es sólido, el pie de página se ve increíble. Este es un gran resultado en tan solo unos minutos. Echa un vistazo a la versión móvil también. Eso es algo bueno para comprobarlo. En algunos casos, puede haber problemas de alineación de diversos problemas. Y aquí, sorprendentemente, mira algunos de estos temas. Guau, esto es impactante. Entonces la navegación superior es fija, lo cual es una gran idea, claro, pero en realidad está cubriendo el titular principal. Eso es súper sorprendente. Y en la parte central en el área de héroes, realmente no puedo decir que esté enamorada de este diseño. Texto a la izquierda, foto a la derecha, y luego este botón está bastante separado en la parte inferior. Está muy lejos. Aunque para ser justos, el titular también está bastante lejos. Uh, esta es la zona más importante, y no creo que sea lo suficientemente buena. Y también hay algo que decir sobre el feed de Instagram. No es correcto. Claro, es una tarea algo complicada. Es un reto, pero aquí está la cosa. Para el mapa, decía que necesitábamos una llave, y nos dio algunas instrucciones. Bien, genial. Pero para el feed de Instagram, solo hizo uno basado en mis fotos. Esto no es genial porque nos puede confundir. Es algo engañoso. Si no puede hacer que funcione, si no puede implementarlo, Bien, solo dígalo, ¿verdad? Esto es bastante peligroso para la codificación de vibra porque podemos mirar algo, y podríamos suponer, Bien, está funcionando cuando, de hecho, no lo es. Entonces esto es un poco de bandera roja. Tenemos que continuar con nuestra comparación, y entonces podemos tener una mejor idea sobre el coágulo cuatro Pero, sí, esto es bastante interesante. Pero ahora, por favor, no sigas adelante, continúa con la siguiente lección, y entonces va a ser tu turno. Te voy a ver en un segundo. 11. Claude, Gemini y GPT: parte 2: Regresa. Vimos como Claude four hacía altibajos, pero llegamos a compararlo con algo, así que tenemos un mejor sentido de estos modelos. Entonces, pongámonos a trabajar con Gemini de Google. Así que empieza pegando las imágenes dentro de esa carpeta y agrega esa ubicación al archivo de texto. Eso es muy importante. Ahora, pronto te vas a acostumbrar a este enfoque donde constantemente haces nuevos proyectos, haces una nueva carpeta, luego la abres, luego te aseguras de que la configuración sea la correcta, y luego se va a las carreras. Bien, entonces Gemini es un producto de Google, y mucha gente tiene muchas esperanzas en ello. Veamos cómo le va en nuestro caso. Ahora, el tren de pensamiento es súper rápido, y tiene mucho detalle en él. Pero veamos cuál es la respuesta real, y podemos ver que Gemini quiere usar una tecnología diferente frente a la Nube. Bien, quiere usar react y VT, lo que puede que no nos diga mucho porque no los codificadores, pero es una diferencia interesante. Eso es con anotar. Otra cosa aquí. Ahora, para los activos de imagen, Gemini está diciendo que primero tiene que saber qué imágenes hay dentro de esa carpeta y si podemos enumerarlas nosotros mismos. Entonces tenemos que enumerar las fotos. Bien, esto es impactante, en realidad. Esto es muy inesperado. Claude inmediatamente vio las fotos. Ahora, para ser justos, podríamos haber proporcionado menos fotos o nombrarlas en el mismo formato de la misma manera, como IMG 01 con lo que sea Pero sí, en general, esta es una comparación entre modelos. Estamos dando a estos modelos la misma computadora, la misma tarea por exactamente esta razón para compararlos. Bien, de todos modos, avanzando con este enfoque tecnológico, el modelo va a hacer algunos archivos diferentes, comenzando con paquete dot JSON. Bien. De nuevo, realmente no nos importa, pero es agradable notar estas cosas. A medida que te familiarices cada vez más con estos modelos, deberías acostumbrarte a estos enfoques. Y bien, a la marca de los dos minutos, creo que puede que ya hayamos terminado. ¿Bien? Fresco. Podemos ver un enorme resumen aquí. Sólo voy a saltarlo para el propósito de esta grabación. En la vida real, te sugiero que leas todo lo que dice el modelo porque ahí puede haber información clave. Pero sí, aquí, sólo voy a aceptar todo y ver cómo puedo lanzar el proyecto. Debido a que usamos un enfoque tecnológico diferente, el archivo de índice puede no ser la clave para abrir el proyecto. Y si nos enfocamos en el chat, podemos ver en el tercer paso que necesitamos para ejecutar un servidor de desarrollo. Bien. Eso es interesante. Pero aquí está la cosa en el número cuatro, dice que el feed es solo un marcador de posición y que necesitamos una clave si queremos usar una real Bien, así que sí se lo agradezco. Se puede ver cómo llega la personalidad de este modelo. Ahora, no estoy diciendo que sea mejor que las nubes, pero es algo a tener en cuenta. Decía que no puedo hacerlo. Tienes que proporcionar la llave. Bien, cosas buenas. Ahora intentemos abrir el enlace de host local, pero estoy bastante seguro de que no funcionará porque Gemini nos está pidiendo que ejecutemos un servidor. No quiero hacer eso por mi cuenta. Entonces esto es lo que voy a hacer. Haces el paso número uno, e inmediatamente ves aquí el modelo dice: Bien, yo lo haré, lo cual es un poco gracioso, considerando que podría haberlo hecho antes, ¿verdad? Ten en cuenta cada comando, cada vez que golpeamos Enter, eso nos está costando algo de dinero Entonces algunas personas pueden estar un poco descontentas con este enfoque. Si sabes qué hacer y cómo hacerlo, entonces simplemente hazlo, ¿verdad? Entonces algo está pasando en la consola. Instalación de NPM. Y después de un rato, nos dice de nuevo que tenemos que hacer dos cosas. Tenemos que agregar imágenes, renombrarlas. Pero lo más importante, paso número tres, tenemos que ejecutar el servidor. No quiero ejecutar el servidor por mi cuenta, aunque, para ser justos, es bastante fácil de hacer, pero ese no es el punto. Entonces voy a decir esto omita las imágenes, continúe con el paso tres. Y eso debería ser. Creo que deberíamos poder echar un vistazo a nuestro sitio web con más de 3.5 minutos, y la experiencia ha sido bien, ha sido muy diferente. Pero veamos qué pasa. Bien, entonces a primera vista, podemos ver que faltan las imágenes. No es ninguna sorpresa. El menú principal es agradable y limpio. Es interesante ver que el mapa ya está en funcionamiento frente a Cloude No tenemos un feed de Instagram, y nos decía por qué ese es el caso. Entonces no nos confundió como Claude. Entonces si un boletín Q, en general, bastante bueno. una cosa que realmente me molesta Sin embargo, una cosa que realmente me molesta son las fotos del producto Entonces veamos el prompt y veamos si podemos ajustarlo. Creo que no le di el camino exacto. Creo que señalé la carpeta general Gemini, pero no las fotos reales. El caso es que el modelo debería poder hacer cualquier cosa dentro de esa carpeta. Entonces realmente no creo que ese sea el problema. Aún así, intentemos esto de nuevo. Digamos al modelo que las fotos están ahí dentro del proyecto. Simplemente agréguelos al proyecto. Utilízalas, ¿verdad? A ver si eso lo arregla, aunque realmente lo dudo. Bien, avance rápido y no. Dice que no puede acceder a ellos, lo cual es mentira. Y que tengo que proporcionar los nombres exactos de archivo para las ocho imágenes del producto. Odiaría cambiarles el nombre por mi cuenta. Bastante gracioso, la modelo sí creó una nueva carpeta llamada Publxlash Images, cual me dice que la modelo sí tiene acceso a Puede crear cosas. Puedo borrar cosas, puedo mover cosas. Pero, sí, sigamos adelante y un vistazo rápido a la versión móvil. Bien, en general, ha sido una experiencia decente, pero pedirme que cambie el nombre de esos archivos no es lo ideal. La versión móvil se ve bien. De hecho pienso que es mejor que las nubes. Pero sí, en general, vamos a terminar esto. Pasemos a GPT 4.1. Voy a saltarme la configuración para que podamos ahorrar un poco de tiempo. Ahora, de inmediato, 4.1 nos da un plan. Nos dice que va a usar un proyecto basado en reaccionar con VT. Bien, bien por nosotros, y nos da un enfoque paso a paso. Bien, quo. Ahora bien, aquí está la primera gran diferencia. Es pedirnos revisar el plan y decirle si queremos ajustarlo, si queremos cambiar cosas. Bien, ahora, en un extremo, esto consume otro crédito, más dinero otro lado, sí nos da la oportunidad de asegurarnos de que el modelo entendió la tarea, el proyecto. Ahora, en general, me estoy inclinando más hacia que esto sea algo malo para mi gusto, y es una preferencia personal Verás, no quiero tomarle la mano. No sé lo que no sé, ¿verdad? Lo busco como guía. No tengo idea si Vt es una buena idea, si reaccionar es bueno, ¿verdad? Entonces necesito poder confiar en él si me dice que el feed de Instagram está hecho, cuando no es cuando es falso, esa no es una buena idea. Si me está pidiendo orientación, de nuevo, eso no es lo ideal. Pero bien, continuemos. Y aquí está la cosa. Pasados los pocos segundos, me está pidiendo confirmar que queremos instalar VT Bien, aquí es donde hay que tener cuidado. En realidad hay que escribir Y en esta parte aquí y entrar de cabeza. De lo contrario, te vas a quedar atascado. Entonces esto no es realmente obvio, pero es por eso que estas lecciones son tan esenciales pero ahora aquí está el gran tema. Después de aceptar, tienes que elegir un framework. Y, muchacho, hay muchos. Debido a que no soy desarrollador, no estoy seguro de lo que debo seleccionar. El modelo mencionó algo sobre reaccionar, pero honestamente, no estoy seguro de cuál de ellos debería elegir. Y aquí es donde GPT 4.1 es muy diferente a los otros dos En fin, voy a elegir reaccionar, y ojalá continúe. Pero después del segundo, aquí hay otro gran golpe. Es pedir la variante y muchos para elegir. Esto es sumamente molesto porque obviamente no lo sabemos Con códigos vibra, no estamos seguros. Potencialmente podríamos lanzar chatgpt.com y preguntarle al respecto. Incluso podríamos iniciar una nueva conversación aquí dentro del cursor y preguntarle al modelo sobre el mejor enfoque. Sólo voy a elegir uno al azar, el primero, mecanografiado, y continuar Esto está lejos de ser ideal para la vibra go does. Desarrolladores experimentados, claro, no van a tener ningún problema, pero para nosotros, no se ve bien. Anteriormente estábamos molestos Gemini por no poder encontrar algunas fotos, pero creo que esto es mucho peor. Aquí es donde me preocupé un rato. Estaba pensando que esto está atascado. Pensé que este archivo TSX punto de aplicación simplemente congeló todo. Pero creo que en realidad es sólo un archivo muy grande. Así que echa un vistazo al tiempo hasta ver cuándo acelero la grabación. Como esto está funcionando, déjenme decirles que estos resultados no son definitivos. De tu parte, es posible que tengas una experiencia muy diferente. Si intento este experimento exacto, una vez más, puede que tenga resultados completamente diferentes. Hay mucha gente haciendo estas comparaciones cara a cara, pero una cosa que es segura es que los resultados varían. Un modelo puede ser lento hoy pero rápido mañana. Por lo que estas empresas tienen la capacidad de actualizar estos modelos de tal manera donde simplemente funcionan mejor. Y algunas personas argumentan que en distintas partes del día, algunos modelos se degradan Entonces algo así como una hora pico a las 5:00 P.M. donde todos salen del trabajo al mismo tiempo. Entonces, si trabajas por la mañana, el modelo es más rápido, pero si trabajas tarde en la noche, es horrible, cosas así. Ahora bien, no puedo decir con certeza que eso suceda, pero tengo que tener claro que los resultados variarán, no importa por qué, van a variar. Pero sí, veamos qué pasa. Entonces estoy recibiendo un mensaje de éxito aquí en el lado derecho. Dice que ya está configurado. Pero del lado izquierdo, podemos ver que la terminal está teniendo claramente algunos problemas. Esto puede resultar bastante confuso. Voy a parar el tiempo con Doug y ver qué pasa. Déjame encontrar el archivo de índice y ver cómo se ve el sitio web. Pero para ser honesto, soy bastante escéptico. Y sí, aquí, no está funcionando. Cuando esto suceda, hable con el modelo. Cuéntale exactamente lo que está pasando. El archivo índice está en blanco, y ojalá el modelo vaya a revisar todo y ver el problema. Por eso estamos haciendo esta comparación, ¿verdad? Pero eso no es lo que está pasando aquí. Podemos ver un resumen donde bien, no hay nada realmente tan claro. Entonces necesitamos otro mensaje. Ayúdame a ver el sitio web y mi navegador. El objetivo es que el modelo haga cambios y correcciones, ¿verdad? Podríamos copiar y pegar ese error en Google y ver qué pasa. Pero primero, quiero darle al modelo la oportunidad de arreglarlo por su cuenta. Pero no, no está funcionando. Podemos volver a intentarlo, pero obviamente va a fallar. Entonces la mejor respuesta es darle el error al modelo. Así que solo cópialo, pegarlo. En la mayoría de los casos, vas a ver a la modelo decir algo así como, Oh, sí, tienes toda la razón. Y sí, aquí parece que ejecutó un comando en una carpeta diferente, un error tonto. En fin, realmente no importa. Está hecho, y yo diría que esto tardó unos 10 minutos más o menos para este modelo solo. Mucho más lentas que las otras. Pero echemos un vistazo. No puedo decir que me quede impresionado. Todo el sitio web está desplazado hacia la izquierda. Ni idea de por qué, para ser honestos. Podemos ver las imágenes de carecer, y las críticas se muestran en un gris feo. Tenemos un mapa de trabajo, y este es el único modelo que me dio un feed real de Instagram, y es uno real, no uno falso. No hay pie de página, y por lo que parece, creo que la versión móvil, creo que va a ser horrible. Sí. Entonces, en general, ¿cuál es el veredicto Claramente, son ventajas y menos. Para mí, personalmente prefiero coágulo cuatro, un modelo que actualmente está disponible si tienes el plan de $20 Si quieres apegarte al plan gratuito, tienes que cambiar a coágulo 3.5, lo cual también es bastante bueno Pero esto es una cosa de preferencia. Es Pepsi versus Coca-Cola, Android Witz iPhone. U D. Estos modelos provienen de empresas gigantes que tiran miles de millones de dólares a estos problemas. No hay mejor teléfono. Y en el mismo extremo, no hay mejor modelo. Las cosas cambian constantemente. Por ahora, me gusta Nube cuatro. Mañana, puedo cambiar a otra diferente. Lo importante es que pruebes todo de tu parte exactamente con el mismo aviso. Haz exactamente lo que hice aquí y cuéntame tu experiencia. Dime lo bueno, lo malo, lo horrible. Hazme saber en la sección de comentarios, qué es qué, y por favor publica algunas capturas de pantalla. Quiero ver qué pasa. Que se diviertan con él. 12. Costos explicados de forma sencilla: Bienvenida de nuevo. Quiero abordar algo que es bastante importante, y eso es la ansiedad de rango. Y aquí está la cosa. Tu plan mensual viene con una cierta cantidad de créditos, 500 créditos a partir de ahora mismo, ¿verdad? Pagas una cierta suma, y llegas a usar esos 500 créditos. Son 20 dólares por el momento. Ahora bien, así es como va esto, la versión simple. El plan gratuito, comienzas con una prueba de dos semanas del plan P. Esto quiere decir que por el momento, obtienes 150 créditos o solicitudes. Para ver cuántos has gastado, puedes ir a tu panel de control en cursor.com Este es mi uso actual en esta nueva cuenta. Se ve que tengo un total de 150 solicitudes porque, nuevo, estoy en el juicio de dos semanas. Ahora, en su página web, es posible que veas un número diferente o puede haber una promoción, pero a partir de ahora, esa es la situación. Bien, ahora, esto significa que disparas el cursor, eliges uno de los modelos, digamos, Gemini 2.5, y cada vez que golpeas Enter, has gastado una solicitud. De aquí es de donde viene la ansiedad de rango. Se inicia con 150, luego 149, luego 140. Y después de este curso, a lo mejor te van a quedar con 20, ¿verdad? Ahí es cuando el pánico empieza a entrar en acción. Es fácil obsesionarse con ese número. Ahora bien, si te suscribes al plan P, que te recomiendo, 20 dólares. Ahora vas a conseguir 500 por mes. Anteriormente viste cómo hicimos una landing page decente con dos, tres, cinco solicitudes. Y si quieres pulirlo, a lo mejor te va a llevar a cualquier parte 20-50 solicitudes Realmente importa lo que quieras, lo buenas que sean tus instrucciones y qué modelo estés usando. Antes de continuar con esta discusión sobre precios, sí tenemos que dirigirnos al elefante en la habitación. El costo varía. Por lo que algunos modelos son increíblemente caros mientras que otros pueden ser completamente gratuitos de vez en cuando sin diversas promociones. Por ejemplo, Open AI nos dio GPT 4.1 y 04 de forma gratuita. Sí, gratis, por diez días más o menos. Ahora, por el momento, GPT 4.1 consume una solicitud, mientras que Cloud four Sonnet, la versión pensante, requiere dos cada vez que golpeas Enter, así que es el doble de caro, así que eso complica bastante las cosas, ¿sabes Y aquí está el pateador. A veces le das a un modelo un prompt una tarea, quieres que haga algo, y entonces ese modelo hace 20 cosas una tras otra, ¿verdad? Ejecuta todo por sí solo, y tú solo eres un pasajero Entonces con una sola solicitud, avanza mucho. El modelo descompone una tarea enorme en otras más pequeñas, y luego poco a poco, las marca. Funciona por su cuenta. Fabuloso. Pero otros modelos son diferentes. Le das un prompt y hace un solo paso. A veces en realidad te dice lo que debes hacer. Entonces eso es muy frustrante. Es por ello que el costo es relativo. Puedes decir, Bien, 4.1 es más barato, pero si tiene amnesia y necesita que mano cada paso y le des cuatro, cinco, diez indicaciones, mientras que Club solo te pide un solo prompt, entonces ¿el menor costo realmente te hace feliz? No, en realidad no. Nuevamente, esos son solo ejemplos aleatorios. No estoy diciendo que Claude esté millas por delante de Open AI con GPT, 4.2, lo que sea Así que solo tenlo en mente. Ahora, por otro lado, algunos modelos son muy caros, incluso diez veces más caros, 03, por ejemplo. Ahora bien, ¿eso significa que tienen diez veces más buenas? No, ese no es el caso. Nuevamente, las cosas cambian súper rápido, y estos modelos van a ir mejorando cada vez mejor. Entonces esto es lo que en realidad quiero que tomes nota. Lo más importante de esta lección, quedarse sin créditos no es gran cosa. Incluso si pasas por los 500 y no tienes un proyecto terminado, lo cual es casi imposible para ser honesto. Siempre se puede comprar más. Y el precio ahora mismo diez dólares por 250 créditos. Eso es $0.04 por mensaje por tarea. De nuevo, a veces un solo prompt puede llevarte muy lejos, dependiendo del modelo que elijas y qué tan claro seas con tus instrucciones. Pero aunque tengas resultados promedio, bien, son $0.04, diez tareas, $0.40, 100 tareas , cuatro dólares, 4 dólares Y probablemente usarás menos de 50 al día, sobre todo si usas algunos de los modelos más baratos o los que están en la promoción. Ahora, aquí es donde este chasquea. El objetivo, nuestro objetivo es construir sitios web que nos hagan ganar dinero o construir proyectos que nos contraten como freelancers o conseguir trabajo estable, ¿verdad? Ese es el objetivo. Bien, ahora, si quisieras contratar a un codificador, un desarrollador, créeme, no pagarías dos, tres, cuatro dólares diarios No, y estoy hablando de un codificador promedio. Pero aquí en cursor, tienes acceso a algunos de los mejores codificadores del mundo por centavos Una landing page promedio debería llevarte a cualquier parte digamos de 30 a 100 indicaciones para ser súper generoso, ¿verdad Si usamos cinco ejemplos. Pero digamos que son 50 indicaciones. Confía en mí, eso no es nada. Cuando vendes ese sitio web por digamos, 500 dólares en el extremo inferior, ¿realmente importa que gastaste 2 dólares haciéndolo? Entonces esta ansiedad de rango de que te estás quedando sin créditos en realidad no es lógica. No es racional. La mayoría de los codificadores piden 25-100 dólares por hora en plataformas independientes Cursor es más barato, más rápido , mejor, y está bajo tu control. No vas a utilizar cientos de créditos diarios, sobre todo en tus primeros meses. Ten en cuenta otra cosa. Al principio, no sabrás lo que estás haciendo. Se puede quemar a través de créditos, ¿ verdad? Pero eso es normal. Así es como aprendes. A medida que vayas mejorando y mejorando, usarás los créditos de manera más sabia Pero por ahora, por favor derroche, úselos. No te preocupes por ellos. Esta es una inversión en tu futuro. Tienes que comprar un curso. Hay que comprar algunas suscripciones, pero el costo general no es nada comparado con el alza. He construido negocios reales en el sector alimentario. He construido negocios en la industria tecnológica. He tenido equipos de decenas de personas. Los costos son inmensos alquileres, servicios públicos, salarios, equipos caros. Las palabras en el otro lado, con cursor, estás pagando centavos No hay mejor trato que la codificación de vibra en este momento. Con unos dólares, con unos cuantos dólares, se puede lograr tanto. Entonces, para resumirlo hasta ahora, si estás en la fase de prueba, claro, apégate a Gemini 2.5, GPT 4.1 y Cloud 3.5 Esos son los modelos que actualmente se incluyen en el juicio que pueden, por supuesto, cambiar. Prueba los tres y mira cuál prefieres. Mira qué personalidad te gusta. mí, por ejemplo, realmente no me gusta 4.1 a veces, pero tenga en cuenta que las cosas cambian constantemente Mi consejo probablemente Géminis sea una mejor opción, pero tú lo haces tú. Ahora bien, si quieres usar Cloud four, tienes que inscribirte en el plan de 20 dólares, que te recomiendo encarecidamente. Y después de hacer eso, es muy probable que solo trabajes con Cloud cuatro para la mayoría de tus proyectos. Ahora bien, si tienes el plan pro, nunca uses Modo Automático ni Modo Máx. Así que para que sea sencillo, el modo Max no es para principiantes. Es una manera en la que el modelo es mucho más inteligente, pero hay un precio asociado a él. Ahora, no voy a entrar en detalles técnicos sobre contactos, ventanas y tokens. En cambio, te voy a decir esto. No debes tocar el Modo Max durante al menos unos meses. Incluso si tienes muchos problemas y el modelo te molesta como loco, por favor no cambies al Modo Máx. Ese es un paso que debes hacer solo después de lanzar algunos proyectos, y te sientes mucho más cómodo con esta cosa de codificación de vibra. Cuando te sientes cómodo con Github, con Verll con Super Base, con todo este ecosistema Entonces con eso en mente, puedes sacarte completamente el modo Max de tu mente. Y aunque, de nuevo, no es buena idea, quieres elegir un modelo y apegarte a él. Ahora, envuélvala. No protejas tus créditos. No los aprecies. Son una inversión en tu educación y tu futuro. Bien, continuemos. 13. 80%-20%: Regresa. Déjeme ser claro. No crearás una empresa de $1,000,000,000 por tu cuenta con la codificación vibe, pero puedes lanzar productos, sitios web, aplicaciones que pueden generar buenos ingresos. Uno de los principales problemas es conseguir que dure del diez al 20% de la manera que tú quieras. Eso podría llevarte una cantidad increíble de tiempo más mucha frustración. Entonces hagámoslo. Adjunto, tienes esta carpeta. Es uno de nuestros sitios web anteriores, y hay esta tarjeta de producto que se ve decente. Bien, bastante bien. Pero tal vez queremos que se vea aún mejor. Ese es el objetivo, ¿verdad? Mejorarlo. Este es el tipo de cosas que pueden salir bien bien o horriblemente mal Entonces probemos la suerte. Por favor, vaya al menú principal para archivar y abra esta carpeta. Tienes un archivo adjunto al curso que primero tienes que extraer. Bien, usaremos Cloud por el momento, aunque vas a tener una experiencia similar con la mayoría de los modelos. Si estás en modo de prueba, puedes usar Cloud 3.5 o Gemini. Realmente no va a cambiar la parte importante de esta conferencia. Bien, ahora, aquí está la cosa. Es posible que desee abrir este sitio web para que pueda ver cómo se ve mi tarjeta existente. Esta es mi página web y quiero usarla como referencia, ¿de acuerdo? Ahora, potencialmente podríamos escribir todos los cambios que queramos, y eso nos ahorraría algunos créditos, pero quiero tomarlo paso a paso. Esto suele darte mejores resultados. Entonces, una sola tarea a la vez. Entonces digamos esto. Para las reseñas en las fichas de producto, agregue la puntuación del producto con dos dígitos. Haz que la partitura sea negrita. Y eso es porque si simplemente ves cinco estrellas en todos los ámbitos, no hay una buena manera de separarlas y tomar una decisión, ¿verdad? Si un producto tiene una puntuación de 4.51 frente a otro que es 488, claro, vas a elegir el segundo, ¿verdad Eso tiene sentido. Entonces sí, nos vamos a las carreras. Bien, hace falta bastante análisis, pero eso es típico cuando importas el proyecto. Se va a buscar a través de todo el código, y va a tratar de entender lo que pasa. Esto tardará unos minutos. Tengo que decir que la nube cuatro parece ser un poco más lenta que 3.7, pero eso es solo una impresión aproximada, y eso realmente no dice mucho porque de nuevo, hay un montón de variables. Después de todo, lo que importa es, si terminas el proyecto y logras tus metas, es como llegar a algún lado. No importa si tomaste un Uber, tu propio auto, un metro o un autobús. Todas esas son opciones muy diferentes con diferentes precios y experiencias, pero al final del día, realmente depende de ti Vas a llegar ahí de varias maneras. Si estás dispuesto a pagar por más comodidad, el autobús probablemente no sea una buena idea. Pero si estás tratando de ser frugal, el autobús puede ser la mejor opción Entonces el contexto, tu propio contexto realmente importa. Bien, avance rápido, y debería hacerse. Y esto es exactamente a lo que me refiero. ¿Esto se parece a lo que tengo en vivo en mi sitio web? En realidad no. ¿ Se ve horrible? No, claro que no. Pero no es lo que quiero. El puntaje no tiene mucho sentido cuando lo emparejas con el sistema estelar. Si fuera 92 de 127 reseñas, el puntaje tendría sentido, pero las estrellas esas me desaniman. Y si eres el perfeccionista, este tipo de cosas pueden volverte loco Si quieres que las cosas sean de una manera muy específica, esto te va a llevar muchas más indicaciones y mucho más esfuerzo Podrías escribir el prompt de una manera mucho más detallada. Pero sigamos con esto. Escribamos lo siguiente. Agregue un texto de vista de detalles que tenga estilo en naranja y negrita, sin fondo, y agregue un botón de agregar a la tarjeta que tenga un fondo naranja y texto blanco Estos dos botones deben estar uno al lado del otro por debajo de la clasificación. Bien. Ahora bien, de nuevo, ¿podrías describirlo de una mejor manera? Esa es una gran discusión. Claro. Tienes una idea en tu mente. En este caso, sí tenemos una gran ventaja porque podemos ver la versión en vivo. Pero, sí, tienes que dar lo mejor de ti y describir lo que quieres. Esto va a requerir mucha paciencia y prueba y error. Tienes que practicar para mejorar en ello. De ninguna otra manera. Tienes que aprender a describir las cosas de tal manera donde el modelo entienda tus metas. El modelo no toma todo en cuenta. Por ejemplo, la existencia del sistema estelar. No, pediste la puntuación de dos dígitos. Bueno, ya lo entendiste, ¿verdad? Es como ese dicho gracioso, le dices a la IA que erradique todas las enfermedades de la Tierra. Entonces simplemente mata a toda la gente. Ahora, claro, técnicamente, ya no hay enfermedades, ¿verdad? Técnicamente hizo el trabajo, pero obviamente eso no es lo que queríamos. Por lo que sí hay que tener mucho cuidado con sus indicaciones. Bien, volvamos a ello. Veamos cómo va. Bien, después de un rato, ya está hecho. Recuerda, acepta siempre todas las ediciones. Ahora podemos refrescarlo. Y si, de nuevo, es bastante bueno. ¿Es exactamente como lo quería? No, en realidad no. Esto es todo lo que necesitas para darte cuenta. No importa qué modelo uses. Claro. Hay una pregunta sobre la calidad de mi pronta. Podría describirlo con más detalle, ¿verdad? Tal vez proporcionar una imagen, tal vez mostrarla un diseño hecho Figma. Claro, pero eso es un poco más en el trabajo. Y no estoy en contra del trabajo mod. Eso no es lo que estoy tratando de decir. Estoy diciendo que deberías estar preparado para este flujo de trabajo. Tienes del 80 al 90% de lo que quieres. El resto, es muy, muy complicado. Así que permítanme probar con un último prompt. Mueva el peso del producto al lado derecho del precio, alinee el peso con el botón de agregar a la tarjeta, hacer azul el botón de agregar a la tarjeta, cambiar el peso de los detalles de negrita a normal. Bien, y veamos cómo va esto. Por cierto, si bien podrías, crear al 100% una tienda con cursor, seguiría usando Woo Comers basado en WordPress, o tal vez incluso compre si yo para tal proyecto, simplemente porque están súper establecidos, mis $0.02 La única excepción sería una tienda muy simple que se basa en muy pocos productos, o tal vez algunas páginas de destino para un producto. Pero si, volviendo, esto es, de nuevo, decente. Simplemente no es perfecto. No es lo que quiero. Podríamos gastar diez, 15, 20 prompts más o podríamos probar varios enfoques para acercarlo a lo que quiero Pero prefiero decirte esto, estar contento con ello. Esto no hará ni romperá tu proyecto. Por favor, no seas perfeccionista. Lánzalo lo antes posible, mira cómo va, averigua lo que dice la gente al respecto, y luego sólo entonces pulirlo. Es muy fácil que te fijes con los detalles, pero te lo prometo, solo vas a perder. Y estoy hablando por experiencia. Lanzarlo y después pulirlo. Y con eso, continuemos. 14. ¿De Figma al cursor?: Regresa. El sueño de codificar un diseño hecho en Figma en tan solo unos segundos aún no está ahí. Al menos no en el cursor. Tenemos un MCP Figma a través del cual podemos dar acceso con cursor a mis diseños realizados en Necesitas configurar un token en tu configuración de Figma. No es muy complicado, pero sí hay que ser un poco paciente. No trabajes, por cierto. Solo mira y mira qué es un ahora, aquí está la cosa. Suena increíble, ¿verdad? La IA puede analizar todas tus decisiones tomadas en Figma y luego implementarlas de una manera perfecta de píxeles Después de todo, ahí es donde estamos luchando. El último diez o 20% esos detalles. Pero aunque esto suene increíble, no funciona. A la fecha de esta grabación, en realidad está haciendo un mal trabajo, sin importar qué modelo uses. Lo intenté con Claude, con Gemini, con GPT, y los resultados van desde malos hasta no poder terminar la tarea El flujo es simple. Diseñas una bonita página en figma, luego copias esa página específica usando el enlace de copia a la selección Esa es básicamente la dirección de esa página en particular. Entonces puedes iniciar un nuevo proyecto y una nueva ventana, hacer una nueva carpeta, como siempre, y luego decirle el modelo de tu elección, implementar este diseño, luego agregar el enlace. Debería ser así de fácil, correcto, así de simple. Pero por la razón que sea, no funciona. Cuando las cosas cambien en el cursor, te voy a avisar. Pero por ahora, no creo que se trate de créditos bien gastados. otro lado, recomiendo encarecidamente mis cursos de diseño web, y eso no es porque debas aprender Figma por sí mismo, sino por los principios de diseño dentro de ese curso, esos marcan la diferencia Cosas como contraste, asegúrate de que la gente vea lo que importa, jerarquía, guía a la vista, títulos grandes, botones despejados, etc., espacio en blanco. Más es mejor. Deja que las cosas respiren. No agrupes las cosas, simetría y alineación, manténgala ordenada, manténgala limpia. Tipografía, no solo fuentes hermosas, sino tamaños apropiados, peso y Ahora, como estás a punto de enterarte, estas plataformas de codificación nos ayudan con todo el código complicado, claro. Pero si quieres un diseño pulido, algo que se vea bien, tienes que conocer estos principios para que puedas guiar el modelo. Tienes que saber lo que quieres pedir. Cosas como aumentar el relleno para la tarjeta, o hacer este texto H dos, este H tres, o cómo algunos botones necesitan ser llenados. Mientras que otros necesitan ser texto puro. Estas son las cosas que te enseño en mis cursos de diseño, y te lo prometo, esto no es un anuncio. No soy yo tratando de venderte otro curso. No, es lo que necesitas para llevar tus instrucciones al siguiente nivel y obtener mejores resultados. Es lo que necesitas para describir mejor tus ideas. Y bastante gracioso, el modelo alucina y dice que el sitio web está El tema es que no hay archivos en este proyecto. Eso se puede ver en el lado izquierdo. No pasó nada. Eso es bastante gracioso. Y aquí está el trato. Puedes decirle al modelo que necesitas ayuda para ver el sitio web. Pero sí, los resultados van a ser igualmente horribles. Déjame en realidad solo avanzar rápido y mostrarte algo. El modelo sí se dio cuenta de que la carpeta está vacía, por lo que intentó hacer el sitio web. Pero lo que realmente hizo, bueno, tú puedes ser el juez de ello. Ahora, de nuevo, estoy seguro de que esto va a mejorar cada vez mejor, y en unos meses, es muy probable que esto sea posible. Ya sea que se vaya a hacer en cursor o directamente en figma, no estoy seguro, pero estoy seguro que va a pasar de Figma al código de trabajo Por el momento, se puede ver claramente cómo el modelo simplemente se compone de algo que, ya sabes, no tiene ningún sentido, pero lo hace, así que no falla por completo. No tiene ningún sentido. Pero sí, todos modos, esto es inútil. No uses el Figma MCP por el momento. Dicho esto, continuemos. 15. De la idea al cursor y a Vercel, al sitio web en vivo: Regresa. Déjame explicarte el proceso de crear un sitio web en vivo con tu propio nombre de dominio en muy poco tiempo. Vamos a empezar con un cursor de proyecto totalmente en blanco, una carpeta vacía, ¿verdad? Crear una versión funcional de ese sitio web que se ejecute localmente en nuestra propia computadora. Entonces cuando estemos contentos con ello, lo vamos a enviar a Github. Puedes pensar en Github como Drawbox o Google Drive. Es un lugar en la web donde puedes almacenar todos tus archivos. Puedes guardarlos ahí. Tienes acceso a ellos desde cualquier dispositivo, y si quieres compartirlos, eso es bastante fácil de hacer. Ahora, una vez que el sitio web esté en Gid Hub, lo vamos a enviar a Versll Versll es una plataforma que nos va a ayudar a publicar el sitio web para que todos puedan verlo. En definitiva, VerTL reemplaza a una empresa de hosting. Después de importarlo con éxito desde GitHub, funciona bien, entonces vas a tener un enlace bastante feo. Eso es lo último. Entonces algo como esto. Pero esto sigue estando al alcance de todos. Así que potencialmente podrías compartirlo con tus amigos, familiares. Se lo puede mostrar al cliente. Hace el trabajo, ¿verdad? Pero si quieres llevarlo al siguiente puedes comprar un nombre de dominio directamente en Versll cresbarn.com con algo, espera unas horas, y luego vas a tener tu propia dirección, como dije, cresbarn.com Una vez que todo esto esté configurado y funcione bien, aquí está la cosa. Puedes volver a Cursor y seguir haciendo mejoras. Lo bueno de esto es que puedes decirle a Cursor que actualice Github, y lo va a hacer automáticamente. Y aquí está lo gracioso. Entonces Versll también se va a actualizar automáticamente. Entonces eso es bastante fácil de hacer. Lo difícil fue montarlo todo al inicio del curso. Ahora solo es cuestión de pasar por los movimientos, depurar, arreglar cosas, varias cosas, ¿ Ahora bien, estos temas, pueden llevarnos cinco o seis indicaciones o 15 minutos, o podemos tener mala suerte y podríamos necesitar 15, 20 indicaciones, tal vez unas horas, tal vez bastantes dolores de cabeza Pero, sí, eso es parte del juego. Entonces, para recapitular, vamos a comenzar con un buen prompt, algo con una cantidad decente de detalles Después empezaremos a construir el cursor. Cuando terminemos, vamos a publicar Github y luego a Versll, así que va a ser en vivo y compartible con todos Ahora, tal vez preguntes, Chris, ¿por qué nos inscribimos en Superbse Bueno, Superbse es genial para dar a los usuarios la opción de registrar una cuenta Va a manejar las cosas complicadas de la base de datos, y con la forma en que configuramos las cosas, va a funcionar automáticamente. Por ahora, no vamos a usar Super Base. Por ahora, vamos a hacer un sitio web sólido de principio a fin, lo publicaremos, y entonces tal vez más adelante haremos algo un poco más complicado. Y, por supuesto, vamos a utilizar reenviar para enviar correos electrónicos. Estoy muy emocionada. Vamos a llegar a ello. Pongámonos a trabajar. 16. Vamos a entender el tema: Bienvenida de nuevo. Aquí está el prompt que ambos vamos a usar. Lo tienes adjunto, y en términos de detalle, es un seis de cada diez. Si tomas este baile de graduación con sonido natural e intentas mejorarlo en el chat GPT, vas a conseguir un prompt que es mucho más técnico Normalmente, eso ayuda, pero un prompt complicado podría ser un poco abrumador, así que decidí ceñirme a algo que suene natural. Caminamos, luego corremos. Uno de los temas principales es este. Digo azul y blanco, pero normalmente proporcionaría códigos de colores. Tienes que ser específico. azul puede significar cualquier cosa, desde un azul bebé súper claro hasta un azul marino oscuro e intenso. Así que tenlo en mente. Cuanto más detalle incluyas, mejor será el resultado. Quiero recordarte que aunque hagas todo exactamente igual que yo, tu sitio web va a verse diferente al mío. Así es como funcionan estos modelos. Pero te puedo prometer que vas a tener temas distintos al que voy a tener. No tengo una bola de cristal, pero llevo en esto el tiempo suficiente para saber que eso es inevitable. Van a surgir temas y van a ser de todo tipo. Bien, configura una nueva carpeta y un nuevo proyecto y cursor, lo básico. Por favor, asegúrate de tener todo configurado como lo hicimos en la primera parte del curso. Github, Python, no JS, las obras. Hablando de tecnología, decidí decirle al modelo algunas cosas que debería usar next JS y tailwind, reenviar para el formulario, reenviar para el formulario, y luego Github y Verll Y he aquí por qué lo hice. Al principio, comienzas con un vago prompt muy básico, los gustos de Hazme un sitio web, ¿verdad Y luego se ve lo que recomiendan los modelos SMOT , qué utilizan Ya vimos como algunos de ellos eligieron HTML básico, CSS y JavaScript, mientras que otros recomendaban algo un poco más robusto, un poco más técnico, exactamente lo que escribí aquí, siguiente JS y así sucesivamente. Si el modelo que prefieres quiere usar esta etiqueta de texto, si ves un patrón, entonces toma nota de ello Y la próxima vez , sugiero eso. Eso es exactamente lo que hice aquí. Y también hice lo siguiente. Hablé con algunos codificadores, y solo pregunté, Bien, ¿por qué viento de cola? ¿Por qué no éste o aquel? ¿Por qué reaccionar? ¿Por qué no esto o aquello? Y en definitiva, cada uno parece tener su propia preferencia. Algunas personas como BMW Pepsi y Android, otras personas como Mercedes, doctor Peppa, el IOS, ¿quién tiene razón? Obviamente, nadie. Es lo que prefieres. Y aquí es algo lo mismo. Ahora, lo siguiente sobre el aviso, pedí algo llamado el PRD, un documento de requisitos del producto Esto es para que el modelo pueda decirnos claramente lo que está por suceder. El PRD suena elegante, pero es una especie de lista de verificación Entonces ya sabes dónde estamos. Entonces ese es el PRD. No duele, así que inclúyalo siempre. A continuación, quiero agregar algunas imágenes. Si bien podríamos usar un MCP para descargar algunos automáticamente, creo que eso es más de matar. Eso es demasiado. En cambio, hice esto unsplash.com. Seleccioné algunas fotos que funcionarían para un veterinario. Entonces me cambié a la gente para las reseñas, muy básico, muy estándar. Entonces, después de configurar su proyecto en su unidad, debe copiar la dirección de esas fotos y pegarla en el prompt principal. Tenemos dos lugares aquí y aquí. Gotaf. Ahora, solo para ser claros, descargas fotos de Unsplash Los pones dentro de la carpeta en cualquier lugar. Y luego vamos a tener que mover esta carpeta de mi escritorio al lugar donde está configurado el cursor hasta donde se configura este proyecto específico. Ahora, en mi caso, abrí esta carpeta, y ahí es donde tenemos que pegar las imágenes. Ahora, para obtener una dirección desde cualquier ubicación, hay que usar esta área. Esto es bastante fácil de conseguir. Para las críticas, es exactamente lo mismo. Obtienes el camino, y luego lo copias dentro del baile de graduación. Bien, el resto del prompt en realidad es bastante básico. Lo único importante que estoy pidiendo es un formulario para hacer citas. Pero el formulario no tiene ninguna funcionalidad avanzada. No incluí un desplegable para los servicios que el cliente podría querer. No incluí la hora. La hora requeriría que conozcamos las citas del médico, todo su horario. Entonces elegí la versión más simple. Además, agregué un número de teléfono para que también puedan atender llamadas de esa manera. La idea es esta, potencialmente podrías vender este sitio web. Siempre y cuando alguien conteste sus teléfonos y correo electrónico, un formulario de contacto básico hará el trabajo. El sitio web será funcional. El gabinete puede devolverle la llamada al cliente y pedirle mucha más información y concertar una cita de esa manera. Entonces quiero ser claro. Este sitio web puede funcionar incluso en su versión básica más simple, aunque para ser justos, siempre se pueden agregar más características y funcionalidades. Y puedes usar esta base y adaptarla a cualquier otro tipo de nicho a restaurantes, abogados, cualquier cosa que se te ocurra. Entonces, sí, ese es el aviso. Es hora de ponerse a trabajar. 17. Comienza el proyecto: Bienvenida de nuevo. Para este proyecto, voy a usar Cloud cuatro porque me gusta bastante su personalidad. No importa lo que elijas de tu parte, vas a tener muchos problemas que tal vez no aparezcan de mi parte. Así que por favor, por favor, tenga paciencia. Intenta depurar y pide ayuda. Vas a ver que tu paciencia es una de las claves principales de tu éxito. Ahora, comencemos. Se va a las carreras. El modelo dice que va a hacer una landing page de clínica veterinaria profesional, ¿de acuerdo? Y ahora está comprobando los activos. Activos simplemente significa recursos o más específicamente, en nuestro caso, imágenes. A continuación, va a hacer el PRD, el documento donde vamos a ver todos los elementos esenciales del proyecto. Sí, aquí vamos. Abarca desde la visión general hasta los objetivos y la pila tecnológica. Y aquí vemos a continuación JS, tailwind, reenviar, erslGitub Y no es que sepamos estas cosas, ¿verdad? Pero esto es confirmación de que estamos en el buen camino y el modelo nos entendió. Y si tenemos que usar Google para solucionar algún problema, estos detalles podrían ayudar. Ahora, voy a acelerar bastante la grabación de vez en cuando porque el coágulo cuatro es bastante minucioso e inteligente, pero aquí está la cosa A veces, es muy lento. Una cosa graciosa es que en el PRD, me di cuenta de algo que es un poco de bandera roja Se puso en la marcha equivocada. Decía que esto se creó allá por 2024, lo que obviamente no tiene ningún sentido. De todos modos, el modelo está trabajando duro. Si miras en el panel izquierdo, vas a ver que esta área está empezando a crecer para expandirse, cada vez más archivos. Una cosa graciosa, es posible que veas varios vas, varios temas, pero el modelo parece saber de ellos. Ahora bien, se esperaría que inteligencia artificial escribiera un código perfecto. Pero no, incluso la IA se equivoca. Al menos en esta etapa, estoy seguro de que con el paso del tiempo, esto va a ir mejorando cada vez mejor. Si tienes la edad suficiente para haber usado Windows 95 o 98, y ahora lo comparas la última versión de Windows o más que eso, una versión reciente de macOS, es de noche y de día, ¿verdad? Va a ser exactamente lo mismo aquí de WinM a Spotify. Pero aquí está la cosa. Siempre y cuando el modelo sepa estos temas y los arregle por sí mismo, entonces realmente no nos importa, ¿verdad? No es un problema para nosotros con solo tomar una taza de café y esperar a que termine. Entonces, en general, todo está bien incluso con estos errores. Ahora, algunos archivos tardan un poco más de lo esperado, pero creo que eso es porque son bastante grandes. Con este modelo y textag, eso es de esperar, en realidad Y es una buena idea echar un vistazo a través de ellos y ver qué hay dentro de ellos. Puedes hacerlo con un solo clic en el panel izquierdo, hacer clic en cualquier archivo, y se va a abrir aquí. La parte central funciona con pestañas exactamente como tu navegador. Así que es agradable y fácil de mover. Uno de los mayores problemas que vas a tener en proyectos más grandes y serios es con el tamaño del archivo. En resumen, en términos simples, cuanto más grandes sean los archivos, más difícil es mantenerlos y actualizarlos. Ahora, mejor dicho, es mucho mejor editar tres archivos que son 300 líneas de código frente a un solo archivo que es 900 líneas de código. Por cualquier razón, esto realmente tropieza con el modelo. En nuestras reglas de cursor, sí mencionamos algo de eso a tener archivos cortos, pero el modelo no siempre lo toma en cuenta. Y por otro lado, en algunos casos, realmente no es posible concentrar todo dentro de 300 líneas. Entonces eso es algo con lo que puedes tener dificultades más adelante en tu carrera como codificadora de vibra Ahora, mi consejo, comience con proyectos más pequeños, más simples, y nuevamente, tenga paciencia. Y eso es porque estamos recibiendo actualizaciones serias cada dos semanas. Entonces es solo cuestión de tiempo hasta que estos se vuelvan cada vez más inteligentes, y esta experiencia va a ser mágica. No va a ser con tantos dolores de cabeza. Una cosa a tener en cuenta, cuando el modelo va a terminar su trabajo, porque hemos usado esa etiqueta de texto, esa tecnología, vamos a tener un servidor local esto significa que no tendremos un solo archivo de índice a través del cual podamos probar el sitio web Entonces no hay ningún archivo de índice que vamos a usar. Ahora, en cambio, vamos a conseguir una dirección que va a comenzar con el anfitrión local. Ahora, no voy a ponerme técnico. Realmente no importa para nada tanto. Lo que necesitas saber es que la versión inicial del sitio web sólo va a funcionar en tu computadora. No vas a poder compartirlo con nadie más. Ahora bien, si te quedas conmigo hasta el final, claro, vamos a usar Versll y a través de eso, vamos a publicar el sitio web en la web para que todos puedan verlo Así que quédate conmigo hasta el final. Ahora aquí hay algunos temas. El modelo está tratando de iniciar un servidor local, pero parece que no está funcionando. No nos está pidiendo nada, así que estamos bien. Nueve de cada diez veces, Claude lo averiguará. Lo intentará de nuevo, o intentará un enfoque diferente. Y eso me encanta. Ahora, he usado esta combinación tecnológica en el pasado, y sé que reenviar va a necesitar una llave Solo para recordarte, cuando alguien llena un formulario de contacto y lo envía, se tiene que enviar un correo electrónico a la clínica, ¿verdad? Para que eso suceda, necesitamos un servicio, un proveedor que nos pueda ayudar a enviar ese correo electrónico. Y en nuestro caso, elegimos reenviar. Reenviar nos va a ayudar. Ahí hemos hecho una cuenta, pero necesitamos conectarnos reenviar a este proyecto específico, y eso se hace a través de una sola clave Ahora, el modelo nos va a pedir esa llave. Vamos a encargarnos de eso, pero en un momento posterior, solo quería explicar el proceso. Me encanta el hecho de que este modelo sea hablador, que me diga cómo la compilación es mayormente exitosa y que tiene algunas advertencias que tiene que mirar Esto es fantástico. Y eso porque se trata de un modelo pensante, así que es un poco más expresivo. Ahora, sólo puedo imaginar lo difícil que es ser desarrollador, ya sabes, tener que saberlo todo de memoria, tener que recordarlo todo, tener que usar bastante Google. Creo que es increíblemente difícil. Entonces estoy muy contenta de que tengamos cursor de nuestro lado. Le dimos un solo aviso hasta el momento, un solo extremo de clave, una sola solicitud, un solo crédito. Y hasta el momento, ha avanzado mucho. Simplemente revisa en el lado izquierdo para ver cuántos archivos hizo. Son miles de líneas de código. Estoy más que feliz de pagar $0.04 por una cantidad tan loca de trabajo. Es fantástico. Pero claro, después de unas 25 acciones, se instruye al modelo para que se detenga. Ahora, algunos dicen que es porque cursor quiere que consumas más créditos. Entonces es una decisión financieramente motivada. No creo que ese sea el caso. Otras personas dicen que es una buena idea que el modelo se detenga de vez en cuando, para que puedas revisar el trabajo y volver a ponerlo en el camino correcto si se estropea Entonces no importa qué, en todo caso como vibra cods sin ningún conocimiento técnico, vamos a presionar el botón de reanudar conversación porque queremos que continúe Pero hagámoslo después del descanso rápido. Te voy a ver en un segundo. 18. Cómo lidiar con los errores: Regresa. Hemos avanzado bastante, pero es normal que el modelo se detenga después de 25 pasos más o menos. Tenemos que retomar la conversación, lo que básicamente significa que confirmamos, vamos por buen camino, y el modelo puede continuar, pero aquí está la cosa. Inmediatamente después de hacer clic, aquí está uno de los mayores problemas con el cursor en este momento. Dice: La conexión falló. Por favor revise su conexión a Internet o VPN. Esto es realmente frustrante. No hay problema con mi Internet, y no uso una VPN. Este es un problema muy conocido. Cursor está trabajando en ello, pero por el momento, todavía sucede de vez en cuando. Las cuatro habitaciones están llenas de mucha gente quejándose de ello. Ahora bien, esto no está confirmado, pero sí creo que esto podría afectar nuestro proyecto. Cuando el modelo se detiene a mitad de frase, cuando la IA se ve obligada a detenerse cuando había planeado otros cinco, diez, 15 pasos, no es lo ideal. Tristemente, el botón Intentar de nuevo no funcionará por mucho que hagas clic en él. Puede que lo intentes, pero no va a funcionar. Ahora, aquí está la cosa. Prefiero intentar hacer clic en Aceptar que se esconde detrás de él. Eso es para que podamos salvar todos los avances hasta el momento. Tienes que hacer una pausa por el momento, esperar unos segundos, y luego finalmente, si haces clic lo suficientemente rápido, puedes aceptar todos los cambios. Eso es lo que te recomiendo que hagas también, aunque sé que puede ser bastante triki esto es lo que quise decir diciendo que llegamos temprano Estos son los temas que surgen que pueden molestarte. El hecho es que hay que estar tranquilo y tratar de continuar. En este caso, para arreglarlo, tienes dos opciones, hacer una nueva conversación o reiniciar el programa. Voy a ir por la segunda opción, así que cierra el programa, espera unos segundos, luego reiniciarlo. Entonces, claro, espera unos segundos más hasta que se cargue, y vas a ver la conversación anterior y el tema. Lo único que podemos hacer ahora mismo es escribir en continuar, y esto va a funcionar. El modelo va a analizar el proyecto, los avances logrados hasta el momento, y va a intentar continuar. Ahora bien, ¿esto es horrible? No, claro, no, pero tampoco es lo ideal, porque el modelo sí continúa. Todavía tiene muchas cosas que todavía tiene que hacer. Pero, sí, realmente espero que de tu parte, puedas tratar de evitar este tema. Espero que tengas suerte al menos para tu primer gran proyecto. Pero hay que saber que a medida que se trabaja cada vez más en el cursor, esto va a ser inevitable. Voy a acelerar las cosas hasta llegar a un punto de salvamento, por así decirlo. Ahora, una cosa que me encanta es tener un archivo llamado estado del proyecto, donde el modelo nos dice qué pasa. Eso es muy útil, y es una buena idea echarle un vistazo de vez en cuando y ver qué hizo el modelo, qué logró. Ahora bien, no estoy sugiriendo que leas código real, pero es una gran idea acostumbrarse a cómo funcionan estos modelos, cómo funcionan. Solo a través de la codificación de vibra, es poco probable que te vayas a convertir en un codificador real, pero ese no es en realidad el objetivo Sin embargo, podemos construir cosas geniales y lanzar productos, lanzar sitios web. Ese es el objetivo. Bien, saltemos adelante. Bien, aquí está el resumen, y es masivo. Hay mucho por lo que pasar. El modelo nos dice mucho sobre el progreso que se ha logrado, pero sólo voy a encontrar la dirección del sitio web. Host local 3,000, cópielo y luego pegarlo en su navegador. Entonces echemos un vistazo al sitio web. Eso sólo nos llevó unos minutos y un par de indicaciones. Claro. Entonces temas, pero sí, creo que está bien. Y sí, estoy bastante contento con ello. La primera impresión es impresionante. Para ser justos, el prompt estaba en inglés, pero por cualquier razón, la modelo hizo que el sitio web en mi propio idioma local fuera lo suficientemente divertido. Ahora, supongo que eso es por la dirección que puse en gracioso cómo funciona eso. Ahora, podemos traducirlo más tarde, pero sí, eso es algo a tener en cuenta. El sitio web sí se ve profesional y bastante moderno. Sin embargo, no estoy seguro de por qué no aparecen las fotos. Eso es algo que tenemos que arreglar, también. Ahora, aquí está la cosa. El objetivo es aprender de cada error. A menos que vayas por varios proyectos, realmente no puedes ganar esa valiosa experiencia. Así que doy la bienvenida a todos los temas, a todos los bichos. Por ejemplo, todas las imágenes de Unsplash son enormes, tanto en tamaño como en peso Ahora, idealmente, los hubiéramos optimizado. Podríamos usar Tiny PNG. Podríamos usar ilovemg.com. Pero porque nos saltamos eso, tal vez eso causó este problema A lo mejor por eso no está funcionando. Mi consejo para el futuro es que tomes precauciones. Por ejemplo, aquí con el idioma, solo asumí que usaría inglés porque el prompt estaba en inglés. Pero como puedes ver claramente, eso no es correcto. Ese no es el caso. Entonces ese es el enfoque que debes tomar. Aprendes a través de estos pequeños errores y ajustas tu enfoque. Idealmente, claro, el modelo sería lo suficientemente inteligente, pero no puede leer nuestras mentes. Entonces, la próxima vez, tienes que mencionar que quieres que el sitio web esté en inglés, y debes optimizar las imágenes de antemano. Y aunque para la versión móvil, en realidad puedes cambiar el tamaño tu navegador o puedes usar una tecla Esto es para Firefox. Incluso puedes elegir diferentes tamaños de teléfono. Pero lo importante es que busques temas mayores, temas espaciado, problemas de alineación, cosas de esa naturaleza. Pero sí, Cloud cuatro normalmente hace un buen trabajo. Y si, en general, estoy feliz. No es un diseño fantástico, pero es muy sólido, y creo que la mayoría de los negocios obtendrían más clientes con los que ver. Bien, tomemos un breve descanso. 19. Haz que la forma funcione: Bienvenido de nuevo. El sitio web se ve bastante bien, pero estoy seguro que podemos traducirlo, mejorarlo de varias maneras. Pero lo esencial es la funcionalidad. Tenemos una gran característica aquí, y ese es el formulario de contacto. Ahora mismo, no está conectado a nada, así que no va a funcionar. Ahora, aquí está la cosa. Si lo llenamos e intentamos mandar un mensaje, va a decir que funciona que la solicitud ha sido enviada. Pero eso no es posible porque no está conectado a nada. Entonces este es otro punto en el que hay que ser escéptico. En caso de que no estés seguro al respecto, simplemente puedes preguntarle al modelo. Oye, ¿a dónde se envían los correos electrónicos? Y debería decirte que en realidad no está funcionando. Ahora, en el pasado, he visto a Cloud 3.7 mostrar un error aquí, un problema, un problema, y ese es un enfoque mucho mejor porque como codificadores de vibra, podemos ser engañados por el modelo Por eso prefiero señalar estas situaciones. Si no lo sabes, puedes ser tonto. Pero sí, volviendo a eso, tenemos una cuenta de reenvío, y tengo que hacer una clave para que el formulario funcione Lo que me encanta de reenviar es que después de iniciar sesión, el primer botón que ves es agregar una clave API, y eso es exactamente lo que queremos. Y aquí está la cosa. Una vez haces clic en él, y vas a ver estos puntos, y eso es todo. Dije antes, las claves API tienen que ser protegidas exactamente igual que tu número de tarjeta de crédito. Y déjame explicarte por qué. Digamos que esta es mi cuenta real y me inscribo en el plan de pago. Para ello voy a tener que agregar mi tarjeta de crédito, claro, pero es lo mismo con el cursor. Necesitas un plan de pago después de un tiempo para sacarle el máximo partido. Bien, ahora, digamos que le muestro mis llaves a decenas de miles de estudiantes. Lo copian y lo pegan en sus propios proyectos, y empiezan a usarlo, ¿verdad? Y después de un tiempo, consigo cientos de dólares en cargos, tal vez miles. ¿Por qué? Porque todos sus proyectos usaron mi clave. Entonces mi cuenta, entonces mi tarjeta de crédito. Empiezan a enviar correos electrónicos y, por supuesto, reenviar me va a cobrar por Y así funcionan estas claves. Es por eso que la mayoría de las plataformas solo te mostrarán tu clave una vez y sí tienes que pegarla en un archivo separado. No podrás volver a verlo en la plataforma al reenviar Claro, siempre puedes hacer una nueva llave, y no te costará nada, pero no es ideal tener cargas y montones de llaves y no saber cuál es cuál. Por eso voy a desenfocar mis claves privadas. Bien, volviendo al proyecto, puedes crear un archivo que va a almacenar toda tu información confidencial. Pero mi primer acercamiento, mi enfoque de ir a es pedirle al modelo que me ayude. Entonces escribamos esto. Tengo una clave API de Resend Por favor agrégalo al proyecto, y voy a pegarlo en un minuto. Y luego también le voy a dar dos correos específicos, lo que tienes que hacer también. Tenemos de correo electrónico, que es una dirección estándar que tiene que ser la siguiente entregada en reenviar punto dev Esto es para fines de prueba. Si quieres enviar direcciones de correo electrónico reales, vas a necesitar un nombre de dominio verificado, algo así como resbarn.com o lo que sea. Ahora bien, ¿por qué es eso? Bueno, seguro que has visto correos como estos. Entonces correos spam que dicen que son de Netflix o Amazon o de tu banco. Pero estos son, por supuesto, falsos. Quieren robarse la información. Y si revisas la dirección, vas a ver que no es el correo oficial de negocios de esa compañía en particular. Entonces eso es lo que RSnD está tratando de prevenir. No puedes agregar una dirección de correo electrónico falsa aquí. Por supuesto, no tenemos uno real porque esto es solo un proyecto de prueba, ¿verdad? Entonces es por eso que tienes que usar esta dirección específica para fines de prueba, entregar en punto de reenvío Ahora, el segundo correo electrónico, aquí es donde va a llegar el correo electrónico . Entonces después de rellenar el formulario, ¿quién va a recibir ese mensaje? Ahora bien, esta tiene que ser la dirección de correo electrónico que usaste para registrarte para reenviar Por lo que no puedes usar ningún otro correo electrónico. Tiene que ser ese específico que usaste en reenviar cuando te registraste Nuevamente, todo esto es para fines de prueba. Si no estás seguro, puedes volver a enviar y revisar tu cuenta y ver qué correo electrónico usaste Si no sigues estas instrucciones, el formulario no va a funcionar, y entonces vas a estar enojado el cursor por no hacer su trabajo. Pero el modelo, puede revisar todo el código. Puede intentar arreglar las cosas, pero obviamente no funcionará menos que sigas las instrucciones de reenvío Pero aquí está la cosa. Una vez que descubras cómo usar esta plataforma, eres dorado. Vas a estar listo para todos tus proyectos. Entonces por eso esto no es gran cosa. Bien, veamos qué hace el modelo. El archivo que almacena todas tus claves y contraseñas se llama env punto local Por cualquier motivo, esto está bloqueado. Entonces el modelo tiene que hacer otro archivo llamado ejemplo. Eso es bastante interesante. Veremos si el modelo lo resuelve. Me encanta el hecho de que Claude sea resistente y no se rinda de inmediato. Intenta diferentes soluciones, diferentes comandos. No siempre funciona, pero es agradable ver que lo está intentando. Es poner en el esfuerzo. Cuando estás codificando vibra, puede que tengas la tentación de mirar tu teléfono o alejarte, pero te animo a que te mantengas enfocado, aunque a veces sea aburrido Después de un tiempo, la modelo en realidad dice que va a abordar el problema de la imagen. Y bastante gracioso, no lo mencioné. Esta es una bandera verde. Esto es positivo. La pregunta es, ¿realmente solucionará el problema? Vamos a ver. Bien, saltemos adelante y veamos el resumen. Bastante gracioso, a veces en el resumen, puede mostrarte tu clave API. Voy a desenfocar eso, claro. Pero sí, aquí tenemos algunos detalles, y el paso dos y tres son exactamente lo que estoy planeando. Visita el sitio web y prueba el formulario. Bien. Pero paso uno, dice que tengo que iniciar el servidor yo mismo. Y si tratamos de refrescar el sitio web, vamos a ver que no va a funcionar. Bien, entonces realmente no podemos saltarnos ese paso. Ahora bien, la cosa es que podría haberlo hecho por sí solo, pero manejemos eso nosotros mismos. Hay un pequeño botón de correr a un lado. Da click en él, y vas a ver en la parte inferior de la terminal, cómo está iniciando de nuevo el servidor. Un poco frustrante, pero no es gran cosa. Pasados los pocos segundos, podremos volver al navegador y refrescarnos. Lo primero que quiero comprobar son las imágenes. Me impresionaría supremamente que arreglara eso sin que yo le dijera que lo hiciera Pero no, en realidad no los arreglaba. Bien, centrémonos en la forma. Esa es la parte esencial. Estoy seguro que vamos a recibir un mensaje de éxito como antes. Nos aseguraremos de que los correos electrónicos se envíen revisando el panel de reenvío y luego mi propio correo electrónico personal Pero sí, aquí no está funcionando. Ahora, aquí está la cosa. Claude sí dice que necesitamos hacer el archivo dot EMV nosotros mismos, así que no logró hacerlo por sí solo Otra vez, no es ideal. Sí nos da el código exacto. Así que vamos a copiarlo usando este ícono súper diminuto aquí. Recuerda, agrandar tu interfaz si no puedes verla bien, Control plus. Bien, no estoy muy contenta, pero hagámoslo. Entonces haga clic derecho en el panel izquierdo. De esta lista, elija nuevo archivo. Entonces llámalo exactamente como dice cursor punto nv punto Local. Bien, entonces dentro de él, vamos a pegar lo que anteriormente copiamos. Va a ser la clave y las dos direcciones de correo electrónico. Para ser honesto, no sé si es necesario reiniciar el servidor, pero voy a actualizar el sitio web y volver a usar el formulario Entonces lo tomaremos a partir de ahí. Mientras tanto, le voy a decir a Cursor que las imágenes no se están cargando y que creé el archivo punto EMV Estoy pensando que debería saber que hicimos el archivo manualmente. Pero aquí está la cosa. En realidad, llegó el correo electrónico. Entonces victoria, cosas buenas. Fantástico. No hace falta que se lo cuente a Cursor. Simplemente funciona. Muy interesante. También puedes comprobarlo en el tablero reciente. Vas a ver que ha habido un correo electrónico que se envió hace unos segundos. Cosas tan increíbles. Hicimos que nuestro formulario funcionara. Enhorabuena. Siéntete libre de probarlo de nuevo. Pero sí, estoy bastante contento de que logremos y sin demasiado dolor de cabeza. Tomemos un descanso rápido. 20. Arreglar que las imágenes no se cargan: Bienvenido de nuevo. El sitio web se ve bastante bien, y hemos logrado grandes avances, pero aquí está la cosa. Las imágenes no se cargan. El enfoque es bastante sencillo. Dígale exactamente eso al modelo. No hay necesidad de proporcionar ningún contexto adicional. Claude debería revisar el código y averiguar cuál es el problema. Ahora, está pensando por casi medio minuto. Guau. Bien, hasta que lo averiguara. Pero después de eso, sí dice que se identificó el tema. Ahora, mientras funciona de fondo, vas a notar que a veces mentirá. Sí, ya lo dije. Puede decir que lo resolvió, pero en realidad puede que ese no sea el caso. Hay muchas imágenes divertidas en reeditar sobre esta situación Así que mucha gente ha experimentado lo mismo. O de la misma manera, dice, Oh, tienes razón, mis disculpas cuando señalas algo que claramente no ha hecho Ahora bien, la primera vez que veas estos mensajes, es posible que tengas una reacción positiva. Pero después de que los veas por vigésima vez, se vuelve un poco molesto. Aquí, podemos ver que está haciendo un montón de cosas. Y después de un tiempo , incluso comprueba el archivo punto ENV que creamos antes Lo hicimos de acuerdo a sus instrucciones. Interesante que lo esté comprobando. No tiene conexión con las imágenes, pero bien, por cierto, fíjese en el panel izquierdo, toneladas de archivos hechos en tan solo unos minutos con solo unas pocas indicaciones Eso son cosas fantásticas. Aunque, para ser justos, nadie le importan estas cosas. Todo lo que importa es el resultado final. Y si el proyecto realmente cumple sus metas, para conseguir más leads para generar ingresos, para hacer crecer el negocio real, no estamos tratando de generar miles de líneas de código, estamos aquí para solucionar problemas, ayudar a las empresas a ir a un sitio web bien optimizado entregado en solo un par de días Bien, interesante. Se va a comprobar la funcionalidad del correo electrónico, que no pedí. Ahora bien, ¿esto es algo bueno o malo? un lado, estoy feliz de que nos esté cuidando, y está comprobando que el proyecto esté bien construido. Bien, bien. Pero por otro lado, le dijimos que arreglara las imágenes, no mirara la clave de reenvío o revisara el formulario, ¿verdad Entonces eso puede ser una mala señal. Puede mostrar que el modelo no se enfoca en la tarea en cuestión. Por eso te digo constantemente que lo pruebes, crees algunos proyectos con diferentes modelos de principio a fin y veas qué personalidad te gusta más. Una cosa podría cambiar a un modelo diferente en este momento o en cualquier momento, pero desde mi experiencia, no lo recomiendo. A menos que estés realmente atascado y la modelo esté dando vueltas en círculos, no creo que sea buena idea cambiar . Ahora, aquí está la cosa. Cuando cambié durante algo que era bastante importante, el nuevo modelo estaba realmente molesto con el viejo modelo. No estuvo de acuerdo con la estructura del proyecto, con la forma en que se redactó el código. Fue bastante divertido de ver. Es como si estuviera realmente decepcionado que alguien no hiciera un trabajo lo suficientemente bueno. Entonces eso fue fantástico. Y en lugar de continuar con el viejo modelo lo dejó, en realidad comenzó a reescribir diferentes partes del código, pesar de que no lo pedí Entonces por eso sigo diciendo que puede ser algo bueno lo que está pasando aquí o puede ser algo malo. Pero saltemos al resumen. En la mayoría de los casos, dirá que está arreglado, pero siempre debes ser escéptico y triple check. Entonces echemos un vistazo y veamos. Y, sí, eso es exactamente a lo que me refiero, temas de izquierda y derecha. El problema, sin embargo. Esto es algo a lo que hay que acostumbrarse. Todo lo que tenemos que hacer es copiar todo esto y volver a pegarlo en el cursor. Por cierto, a veces vas a ver algunos archivos referenciados arriba del chat. Puedes dejarlos o cerrarlos. Realmente depende de la situación. Aquí, no creo que lo necesiten , así que voy a cerrarlos. Ahora, otra cosa, potencialmente podríamos conectar ese navegador a Cursor, pero yo prefiero copiar y pegar algunos problemas. La mayoría de la gente dice que tienen una mejor experiencia al usar el navegador valiente en combinación con el cursor. Pero prefiero ceñirme a Firefox y simplemente copiar y pegar cualquier problema. Bien, solo como nota al margen, parece que el tema tuvo algo que ver con el almacenamiento en caché Bien, eso está bien por nosotros. Eso está bien. Esperaremos hasta que el modelo lo arregle. Puede que tarde un tiempo, pero voy a acelerar las cosas. Bien, ahora, echemos un vistazo al resumen. Nuevamente, el modelo dice que está arreglado. Bien, vamos a probarlo. Ahora, uno de los mayores problemas con la codificación de vibra es confiar en el modelo, confiar en la inteligencia artificial Mira, si miente sobre cosas pequeñas, ¿qué sucede cuando tienes un proyecto real o un cliente real y miles de dólares están en juego? Ese es el mayor problema. Los problemas, los errores están bien. Podemos arreglarlos. Todo está bien. Pero otra vez, aquí no está funcionando. Las instrucciones no nos dicen que tenemos que hacer otra cosa. Simplemente visita el sitio web y las imágenes deben cargarse perfectamente, pero eso no sucede. lo estoy señalando porque a veces podemos saltarnos algo. Sabes, puede que tengamos que hacer algo manualmente, y si no leemos el resumen correctamente, obviamente, podemos perderlo, y va a ser nuestra culpa, como fue el caso con el archivo dot EMV, tuvimos que hacerlo Pero aquí, no, debería funcionar, pero no le digamos al modelo que solo se cargan unas pocas fotos y que debería revisar todo el código y solucionar el problema. Bien, esto va a tomar un tiempo porque quería revisar todo el asunto, toda la base de código de manera integral Esto significa que estamos viendo unos minutos sólidos de espera. Por suerte, esta es una grabación para que pueda acelerar las cosas. Pero sí, en tu caso vas a tener que esperar bastante. Sólo voy a saltar al resumen, pero aquí está la pregunta. ¿Realmente nos importa cuál fue el problema real? Ahora en un extremo, sí, porque tal vez podamos evitar que vuelva a suceder en nuestro próximo proyecto. Entonces esa es una cosa en la que debes prestar atención a cada cosa que está sucediendo en el chat. otro lado, no, no realmente porque el resumen debería decirnos qué solucionó, ya sabes, cuál era el problema y cómo lo solucionó. Eso significa que realmente depende de ti si quieres revisar cada paso, leerlo, tratar de entenderlo y ver si puedes ajustar tu enfoque en el futuro, si puedes hacer algo diferente. Bien, entonces el resumen, en realidad, no dice lo que hizo, cosas como el tamaño adecuado de la imagen, que no me dice mucho. Dice que deshabilitó algo sobre optimización de imágenes para fines de depuración Entonces esta parte me dice que el tema posiblemente esté relacionado con el tamaño de la imagen. Bien. En cualquier caso, echemos un vistazo y veamos si aparecen todos. Y sí, victoria. Todo bien. Por último, una cosa que es una nota al margen. Tengo que decir que la imagen principal no me hace feliz. La posición no tiene mucho sentido. Pero en general, está bien, y estoy de acuerdo con el hecho de que las imágenes se están cargando. lo arreglamos. El formulario funciona. Ahora es el momento de continuar. Tomemos un descanso rápido. 21. Subir el sitio web a GitHub: Bienvenida de nuevo. El sitio web está en funcionamiento, pero solo está en nuestra computadora local. Queremos poder compartirlo con el mundo, así que vamos a tener que subirlo a GitHub. Entonces, digamos al modelo que haga exactamente eso. También me gusta mencionar el hecho de que debería usar el Github MCP, lo que debería evitar que el modelo nos pida hacer cosas manualmente Idealmente, me gustaría ni siquiera tocar GitHub. El modelo debe hacer de todo. Por favor, tenga en cuenta una cosa. Necesitas agregar tu token personal dentro del cursor de Github MCP Sin esa llave, esto no va a funcionar. Bien, va a mirar mi cuenta, ver qué pasa y crear un nuevo proyecto. A esto se le llama repositorio. Ese es el término correcto, pero puedes recordarlo así. Repositorio de proyectos. Lo mismo. Podemos ver que está usando la herramienta MCP, lo cual es una buena señal Un problema potencial que veo es la gran cantidad de código que hemos creado, hay muchos y muchos archivos, pero veremos cómo va esto. Ah, parece que hay un problema. Dice que el Github MCP en realidad no funciona. Bien, vamos a comprobarlo. Haga clic en el icono de configuración en la parte superior derecha, y eso va a abrir la configuración del cursor. Y sí, por la razón que sea, nada funciona realmente. Todos ellos son rojos, lo que significa que hay un problema. Para ser justos, hay bastantes de ellos activados. Hemos pasado el límite, pero aun así no deberían ser todos rojos. Eso es un poco extraño. Ahora bien, aquí está la cosa. El modelo en realidad sigue funcionando de fondo, bueno, del lado derecho, pero no va a poder hacer nada. Quizá por eso también tuvimos algunos problemas con las fotos. Una cosa que podemos hacer es intentar editar una de ellas y luego volver a las herramientas MCP Eso debería iniciar una suerte de refrescamiento. Y en el pasado, eso sí resolvió algunos de mis problemas. Pero ahora, aquí, sigue sin funcionar. Yo digo que lo mejor es que paremos el modelo. Es uno de esos pocos casos en los que eso tiene sentido, porque si lo dejas funcionando, puede hacer más daño que bien. Lo único que se me ocurre es un reinicio clásico. El viejo bueno, ¿has intentado desenchufarlo y luego volver a enchufarlo Bien, vamos a echar un vistazo. Así que espera unos segundos. Y ahora, sí, una por una luz verde, que es igualmente divertida y molesta. ¿Qué puedo decir al respecto? ¿Qué podemos aprender de este tema? No tengo idea de qué lo causó, y no tengo idea de cómo arreglarlo. Reiniciar no tiene ningún sentido. Aunque fuera un desarrollador senior con 20 años de experiencia, no creo que esto tenga sentido. Lo único potencial es esto, tal vez intenta desactivar algunos MCP que normalmente no usas Github obviamente tiene que permanecer activo. Bien, una vez que tengamos luz verde, volvamos al chat y le demos el mismo mensaje, pero también le voy a decir que planeo usar Verll que pueda ayudar al modelo a preparar todo, así que quizás tengamos menos problemas en Verll que pueda ayudar al modelo a preparar todo, el futuro con VerSLL Bien, esto va a tomar un tiempo. No estoy seguro si es por el hecho de que tenemos muchos archivos o lo grandes que son o en el otro lado, puede deberse a que a esta hora del día, mucha gente está usando el cursor de Cloud. El hecho es que se ralentizó bastante. Y mientras tanto, déjame decirte algunas cosas sobre Github. Ahora, lo genial es que no tienes que hacer nada en github.com, pero entonces ¿cómo ayuda? Bueno, GitHub se convierte en algo más que un simple intermediario entre cursor y Verll Cuando tu proyecto está arriba en GitHub, has creado una copia de seguridad de control de versiones que es pública o privada dependiendo de lo que elijas. Ahora bien, ¿qué es el control de versiones? Entonces digamos que esta va a ser la Versión uno con una forma muy básica, muy sencilla, ¿verdad? Entonces puedes crear un formulario mucho más avanzado donde tal vez el visitante pueda elegir una hora, servicios y otras cosas, ¿verdad? Se lo llevas al cliente. Lo haces vivir. Pero después de un tiempo, recibes una llamada telefónica. Oye, Chris, estoy teniendo menos citas. A la gente no le está gustando la nueva forma. ¿Podría traer de vuelta la vieja, por favor? Oh, eso sería doloroso. Tendrías que volver al cursor y quitar todo ese código extra que pueda darte errores. El formulario puede romperse, todo el sitio web puede romperse. Pero aquí es donde entra en juego el control de versiones. Con GitHub, es como una situación de juego de guardar carga de juego. Simplemente vuelve a la versión anterior o a cualquier versión, para ser honestos. Siempre y cuando esté en GitHub, puedes tener varios. Puedes tener versiones separadas basadas en esquemas de colores, funcionalidad, diseños, lo que sea. Entonces GitHub te ayuda a organizar todo eso. Control de versiones. Ahora bien, ¿es súper simple? No, en realidad no. Se tarda un tiempo en acostumbrarse. Pero como tenemos cursor, simplemente le decimos al modelo lo que queremos, y lo va a hacer. Sólo diremos, Oye, trae de vuelta la versión de esquema de color rojo o trae vuelta el formulario de contacto que solo tenía tres campos. Eso es control de versiones. Ese es el poder de Github. Después público o privado. Público significa que otras personas pueden verte en el trabajo, y eso es súper útil en caso de que quieras conseguir un trabajo o quieras colaborar con otras personas. Si quieres presumir en el trabajo, lo que eres capaz de hacer, claro, hazlo público. Lo más probable es que lo mantengas privado en caso de que quieras vender este sitio web a un cliente. Entonces eso es control de versiones, público o privado. Pero lo más importante, este es el puente perfecto entre tu código local y el cursor y desplegarlo en línea, publicándolo. Ver, plataformas como Verll están profundamente integradas con Github Entonces cuando tu sitio esté listo para entrar en vivo, Versll puede mirar tu proyecto Github y decir: Bien, veo tus archivos, veo tus ajustes, veo tus últimos cambios Tengo esto, y va a publicar. Eso significa que no tienes que hacer nada manualmente. No tienes que subir archivos ni realizar ninguna configuración. No necesitas una empresa de hosting, nada. Simplemente conectas Verll a tu repo GitHub, lo que vamos a hacer en un minuto Y luego boom, eso es todo. Tu sitio web está en vivo. Y esto es sumamente poderoso porque mantiene todo automatizado y limpio Si haces cambios en tu proyecto más adelante en el cursor, vas a pedirle al modelo que actualice Github, y luego eso es todo. Automáticamente, Verll recibe una señal para actualizar la versión en vivo del sitio web Sin pasos adicionales. Todo es automático. Todo está cableado. Fantástico. Entonces, en términos simples, el cursor es donde construyes el sitio web. Github es donde lo guardas, y luego Verll es donde lo haces vivir para que el mundo lo vea Bien, volviendo al proyecto, parece que el modelo se detuvo. Por cualquier motivo, se fijó en las reglas que establecimos. Y luego se detuvo. Esto es bastante extraño. La mejor manera de hacerlo es preguntárselo. ¿Subió el sitio web a Github? ¿Puedo empujarla a Versll y ver qué dice? Habla con él como lo harías con un desarrollador, hazle preguntas cuando no estés seguro. Y parece que se está reiniciando desde cero. No estoy seguro de por qué es así. Entonces vamos a ver. Después de un tiempo sí obtenemos un resumen que no tiene sentido. Estoy bastante seguro de que es alucinante, que es imaginando que es Entonces voy a hacer esto. Voy a hacer una nueva charla. Sin embargo, hagamos una pausa, y vamos a continuar en un segundo. 22. Cuándo iniciar un nuevo chat: Bienvenido de nuevo. Dentro del nuevo chat, digamos al modelo que el sitio web fue cargado parcialmente y que debería usar el Github MCP para terminar el trabajo para que podamos seguir vendiendo Bien, vimos cómo le costaba a la modelo subir el sitio web a Github Ahora, en el pasado, este siempre fue un trabajo de dos minutos para mí. Pero aquí, la modelo realmente la está pasando mal. Seguro, inicialmente, el GID Hub MCP no funcionaba, claro, pero lo arreglamos para reiniciar Ahora, no hay razón para que funcione tan lentamente. Cuando ves algún tipo de degradación, cuando ves que el modelo no responde correctamente, es momento de iniciar un nuevo chat Puedes hacerlo desde la parte superior derecha. cursor también te dirá cuándo es ese el caso mostrándote un mensaje en la parte inferior derecha. Aunque, para ser justos, esto aparece bastante temprano y con bastante frecuencia. Ahora bien, en definitiva, si la conversación es demasiado larga, la IA no funcionará tan bien. Se va a agobiar. Por eso es mejor que rompas tu proyecto en varias charlas. Por ejemplo, traducir el sitio web debe hacerse en un nuevo chat Si queremos mejorar la forma, agregarle algunas cosas, nuevamente, un nuevo chat. Si quieres cambiar el esquema de color, nuevamente, nuevo chat, y eso te va a dar los mejores resultados posibles. otro lado, cuando nos costaba que las imágenes no se cargaran, lo mejor es seguir con esa conversación hasta llegar a una conclusión O es fijo o el modelo no tiene absolutamente ningún sentido, y está claro que no puedes continuar con él. Aquí, tengo que decirte que esto bien, fue una pesadilla. Esto tardó años, algo así como 45 minutos en total. Cada archivo tomó mucho tiempo, y más que eso, increíblemente molesto. El modelo dijo en un momento que no vio ningún proyecto en Github y decidió hacer uno nuevo. Esto es, por supuesto, muy frustrante porque acabamos de decir que estaba parcialmente subido Me hubiera gustado que la modelo se detuviera y me preguntara al respecto. En cambio, continuó. Ahora, para ser justos, estoy contento de seguir avanzando, pero ahora voy a tener que limpiar el proyecto anterior en Github. Voy a tener que quitarlo. Son solo unos pocos clics. No es difícil quitarlo. Pero no me gusta el hecho que no pudiera ver lo que acabamos hace unos momentos y el hecho de que dije claramente en el prompt que lo subimos parcialmente. Para ser justos, sí iniciamos una nueva conversación, pero aun así esperaba un poco más de ella. Después de bastantes esperas, el sitio web finalmente se sube a Github. Podemos ver todos los archivos cuando se subió, así como una descripción. Lo que me encanta de estos modelos es que escriben muchos detalles. Todo está claramente explicado. Esto va a ayudar a todos. va a ayudar a ti mismo, a cualquier empleador potencial, a cualquier codificador con el que puedas trabajar, pero también a cualquier otro modelo de IA que puedas usar en el futuro Porque esa es la cosa. A lo mejor continúas con este proyecto con otro modelo, pero a lo mejor lanzas una versión. Está funcionando bien, pero luego quieres contratar a un codificador para solucionar algunos problemas que no puedes manejar tú mismo Con todo tan bien trazado, las cosas van a ir más suaves y rápidas. Y con eso, podemos tomarnos un descanso y pronto iremos a Versll, lo que significa que vamos a poder compartir el sitio web con cualquiera Te veré en un segundo. 23. Publicar el sitio web y compartirlo con quien quieras: Regresa. Nuestro sitio web está arriba en Github, y eso es genial porque Verll está integrado con él. Y así es como va esto. Ya tengo un proyecto aquí, pero saltarás a la siguiente pantalla. Verás este de aquí. Entonces eso es lo que vas a ver cuando inicies VSL por primera vez y le des acceso a tu cuenta de Github Aquí, podemos ver que el proyecto VDClinic es el primero de la lista Tenemos que hacer clic en Importar. Entonces eso va a iniciar el proceso. Para asegurarnos de que las cosas funcionen bien, necesitamos hacer un poco de configuración, pero es solo un poco, y eso se hace haciendo clic aquí variables de entorno, lo que suena súper elegante. Pero en realidad, solo necesitamos pegar la clave reciente y esas dos direcciones de correo electrónico. Eso es. Nada más. Ahora, después de que lo hagas una vez, vas a ver lo fácil que es esto. Bien, de vuelta al cursor, hay que abrir el archivo ENV que previamente hicimos Desde aquí, copia el lado izquierdo, la clave API reenviar Después vuelve a Versll y pegarlo en el campo izquierdo. Ocho. Ahora, repita para el lado derecho. Es exactamente así de fácil, nada tan especial. Por supuesto, vas a tener que usar el botón agregar más porque tenemos tres cosas en total. Entonces la clave para el correo electrónico. Y luego finalmente del correo electrónico. Voy a acelerar al ancho, pero sí, estoy contento de que esto sea tan sencillo. Ahora bien, este es un podcast donde el fundador de VerSL está diciendo que todo el enfoque es poder lanzar un sitio web en muy poco tiempo Esa velocidad para ellos es crucial, esencial. ¿Y sabes qué? Después de usar este servicio por un tiempo, tengo que estar de acuerdo. He hecho múltiples cuentas, y siempre es una brisa. Oh, por favor asegúrate de copiar y pegar con precisión. No dejes de lado ningún personaje y no incluyas espacios adicionales. Eso puede causar grandes problemas porque es probable que no obtengas un error al respecto. Por cierto, los desarrolladores no dicen, publiquemos un sitio web. Dicen desplegar el sitio web. Y esto va a tomar un tiempo, generalmente uno o dos minutos. Aunque en la mayoría de los casos, la primera vez, el despliegue probablemente va a fallar. No es difícil de arreglar, pero sí tenemos que esperar hasta que termine el proceso. Ya deberías notar el icono de copia desde la parte superior derecha. Eso es lo que vamos a usar para agarrar los temas, los errores, y luego volver a pegarlos en el cursor, porque estoy seguro que esto va a ser bastante inevitable para la mayoría de los proyectos. Aquí tenemos algunos problemas. Et los transfiere para que el cursor pueda arreglarlos. Voy a dar un poco de contexto. Le voy a decir al modelo que estoy usando Versll y que me van dando estos errores Entonces voy a pegar todo el asunto. Bien. Sí, entonces parece que hay un problema con NextGS, lo cual está totalmente bien para nosotros. Realmente no nos importa. Siempre y cuando el modelo sea capaz identificar y solucionar el problema por su cuenta, estoy contento. Ahora bien, esto puede llevar algún tiempo porque la IA tiene que revisar varios archivos, pero luego también tiene que publicarlos en Github. ¿Recuerdas eso? Versll toma todos esos archivos automáticamente de Github. Si tenemos la suerte, esto no debería tardar demasiado, pero ya veremos si ese es el caso. Y tristemente, en este caso, en esta noche, las cosas son bastante lentas. En realidad, esto tardó unos 40 minutos 40, pesar de que esto no es nada tan complicado. Sólo puedo imaginar lo molesto que debe ser esto si esta es tu primera experiencia con un proyecto más serio. Pero estoy bastante seguro de que las cosas van a mejorar y mejorar. Los chicos de Cursor están mejorando constantemente las cosas, y en realidad acaban de anunciar una instalación de Winclick para los MCP, así que ya no tienes que lidiar con esos bits Hasta el momento, no tenemos muchas herramientas, pero sigue siendo progreso. Otra cosa que vale la pena destacar, Versll intentará publicar constantemente para desplegar el sitio web Entonces en caso de que lo revises y veas mucho rojo, no te preocupes, no es gran cosa. También puede recibir un montón de correos electrónicos sobre las fallas. Potencialmente podríamos pausar a Verll hasta que el modelo termine su trabajo con GitHub, pero voy a seguir funcionando, aunque vamos a recibir bastantes mensajes Bien, parece que el modelo está hecho. Impresionante, pero tendremos que esperar y ver si vamos a obtener luz verde. En algunos casos, es posible que tenga que copiar y pegar un montón de veces, por lo que el cursor tiene que solucionar múltiples problemas. Realmente depende del tipo de proyecto y de qué tan bien esté funcionando el modelo ese día en particular. Una cosa, sin embargo, por favor recuerde que hay un pequeño retraso entre actualizar Github y Versll notarlo. No es mucho, tal vez un par de minutos, pero no entres en pánico por si no ves un nuevo despliegue aquí. Una nueva implementación simplemente significa que Verll está tratando de publicar el sitio web una vez más. Y podemos decir que este edificio por la luz amarilla. De hecho, podemos hacer clic en él y obtener algunos detalles más. En el interior, obtenemos un montón de información, pero en realidad solo nos interesa el estado. ¿Es verde o no? En caso de que sea rojo, vamos a hacer algo más de acción de copiar y pegar. Pero ojalá, con los dedos cruzados, va a ser verde. Alrededor de la marca de dos minutos, estoy un poco ansiosa, pero voy a esperar un poco más. Aunque aquí está la cosa. Es posible que desee refrescar por si acaso. Y sí, victoria. Está listo. Es verde. Estamos todos listos. Echemos un vistazo a nuestro sitio web. Por supuesto, el enlace va a ser bastante feo y complicado, y las imágenes no parecen cargarse. Pero sí, el sitio web está en vivo, y ahora podemos compartirlo con todos. ¿Esto es una victoria? Sí, sigue siendo un gran avance. Podemos arreglar cualquier cosa ahora que la cadena está establecida. Cursor Github Versel. Déjame tomarme un breve descanso y volveremos a solucionar cualquier problema. 24. Traducir el sitio web: Bienvenido de nuevo. Hemos logrado avances sólidos hasta ahora, pero sigamos en ello. Inicia una nueva conversación y pide al modelo que cambie el idioma al inglés. Ahora bien, en caso de que no tengas este tema, puedes trabajar en cualquier otra parte, y hay mucho que pulir. Ahora, aquí, el modelo se pone a trabajar bastante rápido, y parece entender lo que tiene que hacer. Por mi parte, estoy esperando que esto tome unos minutos, en realidad, bastante corto. Pero ten en cuenta que esto es bastante tarde en la noche, y mucha gente en Redi especula que este es el error apresurado, que esto no es lo especula que este es el error apresurado, que esto no es Pero aquí, el modelo va avanzando poco a poco. Quiero mencionar algo. En mis proyectos anteriores, he tenido bastantes problemas para actualizarlos. Agregar cosas simples, agregar varias actualizaciones, varios bits pequeños. Cualquier cambio simple provocó el modelo revisara todo el proyecto, lo cual está totalmente bien, claro. Pero a veces, también es rehacer cosas, rehacer cosas que no debería Por ejemplo, le pides que arregle el estilo de un botón, digamos, ¿verdad? Pero luego implementa todo un sistema de diseño. Básicamente sobre matar, usar un mazo para golpear una mosca, Y aquí hay otro ejemplo. Actualicé una de mis aplicaciones de Android, y quería usar material Diseño tres. Acaba de lanzarse, ¿verdad? Y eso tomó más de 45 minutos. Y luego un montón de problemas, toneladas de indicaciones. Y después de que todo estuviera dicho y hecho, después de 45 minutos, la app se veía idéntica. No hay cambio alguno, pero toneladas de archivos, toneladas de código. Es por eso que los desarrolladores experimentados no se toman en serio la codificación de vibra. Claro, puedes lanzar un proyecto, pero luego actualizarlo constantemente, manteniéndolo. Eso es muy difícil de hacer. Hasta el momento, lo he logrado, aunque creo que tienes que ajustar tus expectativas. Si haces eso, vas a ser bueno. Y así es como lo miro. Una vez que tengas validación, una vez que veas que el proyecto está ganando tracción, puedes subir de nivel tus suscripciones, para que puedas hacer un mejor trabajo. Puedes usar modelos más inteligentes, o por otro lado, podrías contratar a un desarrollador, y los costos podrían ser bastante menores porque hiciste la mayor parte del trabajo pesado y todo está bien documentado. Pero de nuevo, por otro lado, realmente depende de la naturaleza del proyecto porque he trabajado con muchos codificadores que abordan un proyecto de una manera muy, muy específica Solo usan cierta tecnología, y es algo así como decir que nunca bebes otra cosa que no sea coca, por ejemplo, que siempre usas un iPhone, nada más, ya sabes, Code sí tiene un enfoque similar. Son algo rígidos porque saben qué enfoque les da el mejor resultado. Entonces por eso, por ejemplo, ciertos desarrolladores no les gusta Wordpress, o nunca usarían Magento y así sucesivamente Entonces hay una pequeña posibilidad que sea lo que sea que puedas usar el próximo JS, cierto, tal vez a ciertos desarrolladores no les guste eso, y en ese caso, eso puede ser más caro. Las cosas son muy fluidas y siempre cambiantes. El caso es que la tasa de mejora es fantástica. Oh tres acaban de ser recortados. Ahora es 80% más barato. Y si, las cosas están mejorando y mejorando. Pero incluso en este punto, aún puedes entregar proyectos de trabajo que hagan el trabajo. Puede que no sean los proyectos más complejos, claro, pero tú puedes hacerlo. Y después de los pocos meses, cuando los modelos mejoran aún más, estás ahí mismo en el asiento del conductor. Estás ahí y tienes experiencia. Ya sabes trabajar con modelos y diversas plataformas como Github, Verll y así sucesivamente Entonces, en general, vas a ser de oro. Derecha. En este punto, esto es un poco ridículo. El progreso es a ritmo de caracol. Nube cuatro está arrastrando sus pies. Por eso te lo digo, tienes que ser paciente, zen como, y dejar que toda la frustración se vaya. La tarea es muy, muy básica, sin embargo Claude está actuando como si estuviera moviendo montañas, ¿sabes? Entonces lo que voy a hacer es que voy a aumentar drásticamente la velocidad del video para que no estemos aquí en todo el día. Pero realmente quería incluir todos estos bits, a pesar de que podría haberlos cortado fácilmente del curso. Para mí, es esencial que sepas que esperar es en realidad una gran parte de la codificación de vibra. Aburrirse, claro, eso no es lo ideal, pero ese es el precio que a veces tenemos que pagar. Ten en cuenta que tu experiencia puede ser muy diferente incluso con el mismo modelo Pero nuevamente, al otro lado de esto, realmente deberías probar el mismo enfoque con exactamente el mismo prompt con un modelo diferente. Por ejemplo, diga Géminis. La cosa es que estas empresas están en una guerra masiva. Google y Tropic Open AI, sólo por nombrar algunos. Twitter con XAI Las empresas chinas están haciendo un trabajo fantástico. Por supuesto, meta, Facebook. También son grandes en este espacio de IA. Entonces esto es tan emocionante como siempre. Y nosotros como consumidores, nos vamos a beneficiar. Imagínese que las principales compañías de automóviles o teléfonos tienen tal batalla. Pero aquí está la cosa. El ciclo lleva semanas, no años. Así que con conseguir mejores, más rápidos, autos y teléfonos más inteligentes, también los más baratos. Pero eso está sucediendo súper rápido, como cada dos semanas más o menos, obtienes un proyecto completamente nuevo, pasos agigantados por delante de los anteriores Esto es fantástico para nosotros. Bien, parece que tenemos que retomar la conversación. Bien, no te preocupes. Pero claro, tenemos el mismo problema que antes problemas de conexión. Bien, por cierto, mi velocidad aquí, la velocidad de Internet es fantástica en mi país. Uno de los más rápidos de Europa. Pero bien, vamos a arreglarlo. Aquí está la cosa. En lugar de reiniciar el cursor, también podemos hacer esto, iniciar una nueva conversación usando el icono superior derecho Después mira hacia abajo y abre el chat anterior. Vas a ver el mismo tema, pero aquí está la diferencia. Ahora podemos escribir y continuar, y ojalá podamos retomar el proceso desde ese punto, dar o tomar. Ese es el plan. En fin, no hay garantía. Entonces veamos qué dice el modelo. Y sí, es de verdad, verdad pensando en ello. Entonces creo que tengo que acelerar esto. Bien, dice que la traducción está hecha, y eso va a empujar todo a Github. Bien, eso está bien para mí. Voy a dejar que funcione de fondo. Y después de bastante tiempo, todavía no estoy por encima del proceso de pensamiento de este modelo, cómo se confunde, cómo ve una situación, y trata de arreglarla. Pero sí, saltemos adelante porque es muy probable que tu diseño ya esté en inglés. Realmente creo que la ubicación de la clínica determina el idioma. Hazme saber en la sección de comentarios, si en tu versión, tienes tu propio idioma basado en la dirección de la clínica. Yo, por supuesto, uso el falso, claro, pero uso el aleatorio de mi ciudad, de mi país, de ahí el idioma. Oh, guau, algo anda mal aquí. Por cualquier motivo, el modelo me está pidiendo que vaya a Github y cree un nuevo proyecto. Y esto no tiene ningún sentido. Claramente, ha salido mal, y esto es una señal de que necesitamos cambiar a un nuevo chat. Si esto continúa por otros tres, cuatro, cinco prompts, probablemente cambiaré de modelo Por cierto, siempre comprueba si el Github MCP está en funcionamiento Si vuelve a ser rojo, si está roto, eso tendría sentido. Pero por mi parte, está bien, lo que significa que el modelo simplemente no siguió mis instrucciones por cualquier motivo. Para evitar eso, voy a agarrar el enlace de repositorio directamente desde GitHub para que no tenga dudas al respecto Si apuntamos el modelo directamente al proyecto en GitHub, debería poder actualizarlo sin ningún problema. Y por cierto, esta es la situación en la que se puede utilizar un modelo diferente. La tarea es súper simple. No necesita ningún otro contexto. Es solo subir algunos archivos a la web. Eso es. Entonces en estos casos, hay poco o ningún riesgo. No estamos pidiendo al nuevo modelo que entienda completamente el código o lo mejore. No, entonces esta sería una buena oportunidad, pero quiero continuar con Cloud cuatro. Quiero usarlo de principio a fin porque creo que así es como deberías trabajar, también. Úsalo, frustrarte. Toma nota de todos los problemas que está causando, y luego compararlo con otra cosa. Esa es la mejor manera de aprender. Aquí, tenemos un nuevo número la primera vez que lo veo, un límite de tasa con vértice, ni idea Y nos está pidiendo que utilicemos el modelo Auto Select, que no es ideal en ese caso porque queremos aprender. Dice que podemos esperar unos minutos y volver a intentarlo. Eso es lo que voy a hacer. Y ahora voy a golpear currículum y ver cómo le va. Ahora bien, mientras esto funciona, déjame decirte por qué la selección automática no es una buena idea para nosotros. Queremos conocer estos modelos. Queremos ver cosas como no sé, por ejemplo, no lo sé , Chat GPT 4.1 no es capaz de mover imágenes por ahí, ¿bien? ¿Qué lucha Claude para traducir un sitio web? ¿Qué tan imini es horrible en el espaciado, qué alineación? Sólo se puede llegar a estas conclusiones que son falsas, por cierto. Si usas esos modelos durante horas y horas, tal vez decenas de horas, sigo guardando la declaración. Los modelos cambian todo el tiempo. Evolucionan, a pesar de que tienen el mismo nombre con usar Cloud cuatro aquí, pero el Cloud cuatro puedes usar en una semana, en un mes, que pueden actuar de una manera completamente diferente. Por qué ese es el caso es un poco más complicado. Tal vez antrópico, la compañía detrás de él lo ajustó ligeramente A lo mejor Cursor hizo algunos cambios. mejor hay menos personas que lo usan en ese momento, o tal vez se han actualizado los servidores, así que más personas pueden usar el modelo al mismo tiempo, pero sin ninguna degradación, es complicado, es complicado. Pero, claro, aquí hay otra falla de conexión, lo cual es fantástico. Eso es bastante para una tarea tan pequeña. De nuevo, calma. Hagamos una nueva charla y luego volvamos. Quiero continuar esa conversación porque siento que estamos cerca de un resultado. Entonces veamos qué es qué. El modelo menciona algo que está casi hecho. Para ser justos, no lo creas. Siempre revisa. No creo que se haya actualizado nada. Puedes echar un vistazo a Github y ver cuándo ocurrió el último empujón. Empujar simplemente significa actualización. Pero sí, toneladas de problemas. Super buggy. Esta es una experiencia horrible, y como puedes ver, no tiene nada que ver con el sitio web real o la codificación de vibra. Es solo el proceso de usar un modelo que está abrumado, al menos en este momento Desde GitHub, podemos ver que el último empujón ocurrió hace 5 minutos. Eso significa que Verll probablemente haya actualizado algo mientras tanto Entonces, revisemos la última implementación y veamos si ese es el caso. Echemos un vistazo. Y, sí, esto es en inglés. Tenemos que revisar todo, sin embargo, de principio a fin y ver si está completamente hecho. Creo que es aproximadamente 95% traducido. Puede haber algunos pedacitos aquí y allá, pero en general, está bien. Pero lo que está pasando en Cursor, sin embargo, no tengo idea. Parece que el modelo quiere hacer un nuevo proyecto, un nuevo repositorio en Github. No tengo idea de por qué tiene una amnesia tan horrible. Creo que eso pudo haber sido una suerte de interrupción. Por lo general, Cloud cuatro funciona mucho mejor que esto. Podemos intentar ver un proceso de pensamiento, pero para ser sinceros, realmente no tengo tanta curiosidad. El hecho es que estamos en vivo. El sitio web está traducido, y aunque esto no se siente como una victoria, seguimos avanzando. Entonces tomemos un breve descanso, reagruparnos y veamos qué podemos hacer Gracias por seguir conmigo, y sí espero que esto no te desanime de la codificación de vibra Llegamos temprano y se nota, pero estoy bastante seguro de que estos temas son cuestiones menores que pronto se solucionarán. Entonces, en general, continuemos. Te voy a ver en un momento. 25. Comprar nuestro propio nombre de dominio: Bienvenido de nuevo. El camino estaba lleno de baches, pero en general, hemos logrado tener un sitio web guapo Eso está en inglés con una forma de trabajo, y ya está alojada en Versll Esto significa que podríamos compartirlo con el mundo, pero aquí está la cosa. El enlace es bastante feo. Para fines de prueba, esto está bien. Si quieres presentar tu trabajo al cliente antes de que el proyecto se ponga en marcha, nuevamente, totalmente bien. Pero, ¿y si quieres un enlace agradable, una buena dirección? Eso significa que tienes que comprar un nombre de dominio. Puedes hacerlo directamente desde VSL. Esta es mi cuenta en la parte superior izquierda. Y aquí podemos ver con dentro del proyecto. Bien, desde la navegación, podemos ir a ajustes. En esta nueva página de la izquierda, podemos encontrar el cuerpo lateral con bastantes opciones, pero nos interesan los dominios. Y aquí estamos. Este es el vínculo existente, que es camino desde el ideal. Entonces hagámoslo. Usemos el botón Por dominios y veamos qué hay disponible. Ahora, los dominios cortos y elegantes casi siempre no están disponibles. Toneladas de empresas han comprado miles de dominios, y han hecho un negocio al revenderlos. Mi consejo aléjate de eso. Usa tu nombre o una palabra que signifique algo para ti. Y he aquí por qué hace muchos años, tu nombre de dominio realmente importaba Así que tener algo así como tutoriales de Photoshop, eso habría sido una ventaja. Pero hoy en día, ese no es el caso. Eso es irrelevante Entonces voy a usar mi propio nombre, pero la versión.com no está disponible porque ya la compré Lo que me encanta de Versll es el hecho que aquí consigo la máxima transparencia Podemos ver todas las opciones disponibles. Algunos de ellos son increíblemente caros. Por ejemplo, res barn.ai es la friolera de 149 dólares, y eso no tiene ningún sentido Sí veo una versión.net aquí, y son solo 12 dólares, y creo que eso tiene sentido. Versll ya tiene archivada mi tarjeta de crédito porque hice la compra anterior Entonces todo lo que tengo que hacer es confirmar que quiero comprarlo. Por supuesto, voy a tener que confirmar la transacción con mi banco, pero eso no es problema. Es lo mismo que con cualquier transacción en la web. Pero, sí, eso es todo lo que se necesita para apile un nombre de dominio simple como eso. Ahora lo vamos a ver en este dashboard. Pero volvamos al proyecto para que podamos vincularlo. Entonces desde la página de inicio, haga clic en el proyecto VT. Ahora dentro de él, podemos ver dominios en la parte superior derecha. No es exactamente obvio, pero pronto te acostumbrarás a la interfaz Vasels Bien, vamos a darle click, y ahora volvemos a este punto. Sólo que en esta ocasión, vamos a dar click en Addmain Y claro, vamos a seleccionar chrisbarn.net que Por favor marque esta casilla. Es un escenario importante. Ahora, Vasl nos va a preguntar si queremos subir la versión de producción, y claro, ese sería el caso Y eso es porque potencialmente podríamos tener una versión diferente, y he aquí por qué. Podemos lanzar este sitio web tal como está, pero luego podemos seguir trabajando en él. A lo mejor tenemos una prueba para unos pocos amigos, una nueva versión que es ligeramente diferente. Entonces ahí es donde entran en uso múltiples implementaciones. Pero ese no es el caso aquí, así que mantengámoslo simple, ya sabes, dale a guardar, y luego vamos a tener que esperar un poco. Hay muchos detalles en los que potencialmente podríamos sumergirnos, pero quiero mantenerme enfocado en clavar este proceso desde la idea hasta lanzar el sitio web lo más rápido posible El certificado SSL es algo que la mayoría de los sitios web deberían tener, pero tarda unos minutos en generarse y configurarlo. Voy a saltar adelante y sí, aquí estamos. Ya podemos visitar chrisbarn.net. Este es un sitio web encantador. Ya no necesitamos ese enlace feo. Sigue funcionando, pero ahora podemos usar esta. Entonces todos nos pusimos, el sitio web no está pulido. Necesita trabajo, pero lo primero es arreglar las imágenes. No están cargando. Así que volvamos a Cursor, abramos un nuevo chat y diremos exactamente eso al modelo. En realidad, ¿sabes qué? Puede ser una mejor idea para mí reiniciar el programa considerando cuántos problemas hemos tenido. Honestamente, no sé si un reinicio realmente ayuda, pero sí vi que el modelo está teniendo problemas, incluso escribiendo palabras. Entonces no código real, sino oraciones, lo que significa que el rendimiento es realmente lento. Es como si estuviera usando una computadora de video, que ese no es el caso. Pero sí, veamos qué es qué. Entonces el prompt es bastante sencillo. Las imágenes, no estoy cargando, arregla eso y actualizo el sitio web. Ahora, eso es un poco vago, para ser honesto. Debería haber mencionado el enlace de GitHub. Entonces sí, ya veremos si esto va a pasar. En cualquier caso, con fuera de las carreras, veremos qué va a pasar. Entonces el modelo ve las imágenes y empieza a investigar el problema. Bien, la velocidad parece un poco mejor. Parece que el reinicio pudo haber ayudado un poco, pero ya son primeros días. Entonces veamos el proyecto en marcha, y luego decidiremos pero por lo que estoy viendo, no, en realidad sigue luchando. Bueno, tal vez esa no sea la palabra correcta luchando, pero esperaba el problema fuera algo bastante sencillo de arreglar, como unas pocas líneas de código en alguna parte, pero tal vez los archivos no lo subirían a Github por esos problemas, ¿sabes? Pero el modelo aunque, coágulo cuatro es realmente tto Realmente se está tomando su tiempo. Y por lo que veo, es poner en marcha servidores. Se trata de crear una página de prueba, un servidor de pruebas. Y esto en realidad es bastante impresionante. Esta es una bandera verde, aunque sea un poco molesta, para ser sinceros. Entonces, echa un vistazo aquí. Hace un servidor en el que podemos probar y ver si las imágenes realmente están funcionando, si están cargadas. Y esto es fascinante. Y sí, podemos ver 11 de 11 imágenes en realidad están siendo exhibidas. Aunque, para ser justos, echa un vistazo a las tallas. Estos son absolutamente masivos. Entonces ese es un problema que definitivamente podríamos arreglar para futuros proyectos. Pero para ser honesto, en realidad sabía que esto probablemente causaría un problema. Ahora, aquí está la cosa. Por lo que los modelos pueden optimizar las imágenes para nosotros, ya sea que lo preguntes directamente o lo que sugiere el modelo. Esa fue la parte que estaba tratando de capturar en la grabación. Aquí, sin embargo, hizo mucho daño, pero aún así es una buena experiencia de aprendizaje. Entonces ahora puedes evitarlo. Así que vamos a acercar y ver qué está tramando el modelo. Tan rápido adelante, y creo que ya está hecho. El resumen es masivo. Impresionante. Montones y montones de líneas. Eso es bastante útil porque podemos leer algo en inglés sencillo. No obstante, la pregunta es, ¿el modelo solucionó el problema? Primero tenemos que revisar Github. Si no hay ninguna actualización reciente en Github, no hay posibilidad de que la versión de trabajo del sitio web nos vaya a mostrar alguna imagen. Recuerda, seguimos confiando en Github como intermediario entre cursor y Verll Y no, no veo una actualización reciente. El modelo o se olvidó o no entendió mi pronta porque para ser justos, fui un poco vago Pero no se preocupe. Hagamos esto. El proyecto está aquí y voy a dar el enlace real. Eso debería evitar cualquier problema potencial. Bien, veamos qué es qué. Bien, el modelo parece entender. Está abriendo una terminal, y probablemente va a echar un vistazo a las cosas. Esto a veces lleva bastante tiempo. Y a veces en realidad se congela. Ese es un gran problema porque no hay barra de progreso. No hay una buena manera de verificar y ver si sigue funcionando o no, con al menos no una de la que yo sepa. Lo que me gusta hacer es simplemente dar clic aquí en Mover al fondo. Esto es muy, muy pequeño, pero espero que lo puedan ver. Y esto actúa como un poco de refresco. Ahora, después de unos segundos, parece que sigue funcionando, así que volvemos a encarrilar. Ahora la tarea es sencilla. Sube algunos archivos a Github. Esto debería ser fácil, ¿verdad? Por cierto, potencialmente podríamos usar la terminal y subir los archivos nosotros mismos. En realidad no es tan difícil. Los comandos no son complicados, pero aquí está la cosa. Quiero que la modelo lo haga. Puede hacerlo. Entonces, claro, debería hacerlo. Y en el otro extremo, prefiero conocer sus limitaciones, ya sabes, encontrar su personalidad, explorarla, ver qué es qué. Por supuesto, podríamos hacer más trabajo nosotros mismos, pero ese no es el punto. Claro, si algo es imposible, el modelo en realidad no puede hacerlo. Por supuesto, lo vamos a hacer. Pero cuando sé por el hecho de que la modelo puede hacerlo por su cuenta, entonces no voy a salir de mi silla para ayudarla. Si es más que capaz, entonces debería hacerlo. Pero sí, esto está tomando años. Todo este proceso tardó unos 25 minutos. Increíblemente frustrante. Y aquí está la cosa. Después del tiempo, parece haber reiniciado el proceso de pensamiento, lo cual no es normal Es pensar de nuevo y planear los próximos movimientos. Es solo subir archivos. Eso es. Entonces es como si alguien desenchufara el modelo y luego lo volviera a enchufar Amnesia, me olvidé. Claro, no falló. No nos pidió ayuda. Pero es algo ocultando el hecho de que falló, lo que es una gran bandera roja. Estos modelos están entrenados para no dejar de encubrir sus errores. Combine eso con el tiempo de espera de 25 pasos y los problemas de conexión falsa Y puedo ver por qué mucha gente no está enamorada de él, especialmente los desarrolladores senior. Ahora, quiero ser abierto y transparente sobre estos problemas, para que sepas lo que puedes esperar. Algunos codificadores de vibra piensan que en realidad pueden reemplazar los códigos Senior así como así Pero ser arrogante no ayuda, sobre todo cuando la actuación simplemente no está ahí Pero voy a saltar adelante y aquí está el resumen. Parece que logró terminar, sin embargo, sí tenemos que comprobar. No confío en ello. Dice que necesitamos una clave para reenviar y otras cosas que no tengan ningún sentido Entonces soy bastante escéptico. Entonces echemos un vistazo a Github, Control R o F five para refrescar. Y esa es una actualización que se acaba de hacer. Por cierto, 45 commits, 45 actualizaciones. Eso es demasiado. Eso es ridículo. Eso es una señal. El modelo lo intentó demasiadas veces. Algo estaba claramente apagado. Ahora, vamos a revisar Versll Ellos estén al tanto de que hay un retraso. La última versión es la existente, así que probablemente nada haya cambiado. No hay imágenes para ver en esa versión. Pero sí, después de los pocos segundos, va a aparecer una nueva y dentro de ella. Sí, tenemos nuestras imágenes. No fue fácil, pero logramos salir adelante. Ahora, espero que hayas logrado llegar a este punto donde tienes un sitio web que funcione sin errores mayores. Ahora, tomemos un descanso y podemos ver qué podemos mejorar. Te voy a ver en un segundo. 26. Mejorar el sitio web: Bienvenido de nuevo. En este punto, con todo listo, hay una conexión entre cursor, Github y Verll, lo que significa que podemos seguir trabajando en cursor, y el sitio web va a actualizar automáticamente cosas fantásticas Por supuesto, hay muchas formas de trabajar. Por ejemplo, podemos probar algo, luego volver a una versión anterior. Después de todo, por eso tenemos control de versiones en GID Hub. Pero estoy asumiendo que vamos a empujar constantemente las actualizaciones, vamos a continuar, entonces veamos cómo va esto. Entonces vamos a enfocarnos en el cursor. Vamos a decirle al modelo que actualice la combinación de colores. Quiero un cambio dramático, y creo que debería ser bastante obvio, ¿sabes? Entonces hagámoslo. Cambiemos el esquema de color de azul a rojo y luego empujemos la actualización a Github. Aquí, para ser honestos, considerando nuestra experiencia, podría haber proporcionado el enlace. Pero en el pasado, eso no era necesario en mis proyectos anteriores. Entonces cruzamos los dedos, veamos cómo va esto. Ten en cuenta que todos estos videos se graban uno tras otro. Entonces, si hay un atasco de tráfico, es muy probable que la actuación no sea buena. Va a ser tan malo como los videos anteriores. Pero aquí está la cosa. Si la modelo comete un error, preferiría mostrar versus, ya sabes, mostrar una versión editada donde todo va a la perfección porque aquí está la cosa. Cuando estaba aprendiendo a vibrar el código, vi tantos cursos, tutoriales, donde, ya sabes, decía, paso A, B, C, y luego éxito. Sonaba increíble. Pero por mi parte, pasé horas en el paso B, o ni siquiera pude entender cómo iniciar el paso A. Cosas como, crear un script Python rápido y ejecutarlo en tu terminal. Esas cosas me molestaron. No tenía idea, ni contexto, ni idea. O cuando estaba tratando de arreglar un problema, me preguntaron, ya sabes, cosas como, Bien, ¿qué terminal estás usando? Ahí es donde tienes que ser paciente. Tienes que ser Zen. Tienes que probar varias cosas hasta que funcione. Haz la pregunta de diferentes maneras, y sigue buscando la solución. Entonces esa fue mi experiencia, y eso es lo que estoy tratando de enseñarte, también. Ahora, volvamos al proyecto. Esto está tardando para siempre. Pero déjeme acercar el zoom. Bien, aquí está el mensaje de éxito. Déjame verificar en GitHub que efectivamente tenemos una actualización. Y aquí está la cosa. El modelo en realidad hizo una nueva rama. Guau, eso no es lo ideal. Voy a explicar lo que eso significa en un segundo. Aún así, veamos si funcionó. Tenemos que revisar Versldoh. Aquí, tenemos que esperar los segundos porque la última actualización de Github tarda un momento hasta que va a Versll Pero avance rápido, y, sí, tenemos nuestro esquema de color rojo. El modelo hizo el trabajo. No empujó la actualización correctamente, pero esta es una buena experiencia de aprendizaje, algo de lo que tomar nota. En primer lugar, podemos hacer esto. Debido a que la versión roja no es la principal, realidad podemos hacer clic en ella y luego optar por empujarla a producción. Eso significa que cresbarn.net finalmente se volverá roja. Entonces eso es una cosa que tenemos que hacer. Aunque vamos a tener que esperar hasta que se construya, pero voy a acelerar las cosas. Ahora bien, aquí te explicamos cómo debes abordar estas situaciones. Entonces en Github, tenemos una suerte de mensaje de advertencia. Pero digamos que no tenemos idea de qué hacer. No hay problema. Simplemente toma una captura de pantalla de esa área específica y luego arrástrala en el chat. Arrástrelo al cursor. Por cierto, si intentas capturar toda la pantalla, puede que no funcione tan bien, y el nombre del archivo también puede ser un problema. Si estás en Windows F two para cambiarle el nombre. Ahora, las capturas de pantalla suelen tener nombres súper largos. Acorta solo para estar seguro. Yo uso SS de captura de pantalla. Bien, ahora, comprueba y mira si ves un pequeño adelanto aquí. Pero sí, después de arrastrar la imagen dentro, simplemente pregunta, ¿qué pasa con este mensaje? ¿Cuál es la situación en Github? Y aunque el modelo nos falló de muchas maneras diferentes, sigo pensando que este es el mejor enfoque. Sólo pregunta, ¿sabes? Y después de los pocos segundos, en realidad está explicando lo que pasó. Y por lo que parece, está proponiendo dos opciones. Pero aquí están las cosas divertidas. Ya está ejecutando la opción dos, así que aquí no tenemos que tomar ninguna decisión. Ahora déjame explicarte lo que pasó, aunque estoy bastante seguro en el resumen, el modelo también va a explicar. Entonces digamos que estamos trabajando para el cliente, ¿verdad? Y el cliente está un poco inseguro sobre cómo debería verse el sitio web Por eso, queremos presentar dos opciones, derecha, una roja y otra azul. Bien, ahora, una forma de lograrlo es crear una nueva rama en el hub GID. Básicamente, es una alternativa. Trabajar con ramas te ayuda a experimentar con diferentes looks, diferentes diseños, diferentes funcionalidades, pero sin tener que volver atrás sin tener que deshacer ahora, tu deshacer, volver atrás, revertir, esa es otra opción Ya sabes, guarda una versión azul y luego sigue adelante y guarda una versión roja. Pero esa es una sola línea, ¿sabes? Y en ese extremo, se puede mostrar el rojo. Y en caso de que al cliente no le guste, puedes pedirle al modelo que vuelva a una anterior. Bien, eso no es tan bueno. En lugar de tener una sola línea, línea imaginaria, haces una rama separada, una línea separada, si quieres. Ahora bien, es un método de preferencia, pero la mayoría de los desarrolladores preferirían usar una rama diferente para cosas como esta. Y sí, eso es lo que también nos está diciendo el modelo en el resumen. Pero básicamente lo arregló, y ese mensaje ya no está arriba en Github. Entonces eso significa que hemos terminado. Todos los montamos. Ahora depende de ti. Tómalo desde arriba, usa el mismo prompt y crea un sitio web veterinario. Por favor, por favor, cálmate y diviértete con ello. Cuéntame tu experiencia. Publica una captura de pantalla y dime cómo funcionó el modelo de tu parte. Dime lo bueno, lo malo y lo mediocre. Puedes reemplazar algunas cosas en el prompt. Puedes reducir las imágenes si quieres estar en el lado seguro. Pero el objetivo es rehacer este proyecto de manera similar En caso de que no quieras compartir una captura de pantalla, puedes compartir el enlace VSL No te recomiendo que compres un nombre de dominio por el bien del discurso. Un VersLink va a estar bien. Así que adelante y diviértete con él. Explora. Es como aprender a nadar o andar en bicicleta. Te caerás. Podrías ingerir un poco de agua, algo de agua salada desagradable Pero en general, va a ser una experiencia positiva, y vas a estar feliz de que lo hayas hecho. Con la codificación de vibra, esta es la situación. Bien, continuemos. 27. ¿No estás seguro? Mira este video: Bienvenido de nuevo. Quiero señalar algo. Cuando estaba aprendiendo a vibra el código, intenté usar proyectos que mi forma de desarrolladores crearon. Estos tipos eran desarrolladores hábiles con mucho conocimiento, pero cometieron un gran error. No dejaron ninguna nota en absoluto. Ahora, en GitHub en mi propio GitHub, puedo acceder a 30, 40 proyectos que hicieron, pero aquí está la cosa. No sé nada de ellos. Entonces lo que hice fue cuando empecé, intenté actualizarlos y hacerlos correr. Se hicieron en 2018, 2019, así que obviamente bastante viejos. Y aquí está la cosa. En definitiva, fallé. Pasé mucho tiempo, muchos créditos, y fue muy molesto. Y luego traté de hacer mi primer toque. Entonces cambié mi enfoque y dije: Bien, hagamos mi primer toque por mi cuenta. Pero voy a usar un código existente, ¿verdad? Entonces voy a usar algo de Github. Recuerda, algunos proyectos son públicos. Eso significa que puedes copiarlos y puedes construir encima de ellos, ¿verdad? Y pensé que eso me ahorraría bastante tiempo y molestias y, por supuesto, desperdiciaría créditos. Pero aquí está la cosa. Fallé una vez más. Y no es el fracaso ese es el problema, es como me sentí, y eso es lo que quiero compartir. Aquí está la cosa. Estaba trabajando con modelos de IA abierta, modelos que eran gratuitos en ese momento, cuatro y 4.1. Y constantemente estaba destrozando bichos, arreglando piezas, después de partes, después de partes Ahora bien, el tema era, no tenía idea de si estaba en BG cinco de 50 o cinco de 50 mil. No tenía punto de referencia. Era como nadar en el océano con mucha niebla a mi alrededor. No pude ver la orilla. No pude ver la playa. No sabía si estaba nadando en la dirección correcta. A lo mejor estaba a unos remos de la playa. A lo mejor estaba a kilómetros de distancia. Y fue súper agotador, usando prompt tras prompt, probando varias cosas Y ese es el tema. No sabía si me acercaba más, si estaba más cerca del objetivo final de hacer correr el proyecto. No tenía idea. Y aquí está la cosa. Si te quedas atascado y no estás seguro al respecto, siempre puedes iniciar una nueva conversación. Simplemente puede hacer clic aquí. Un modelo fresco va a ser mucho más útil. Por ejemplo, si tuviera que agregar la sección de galería al sitio web del dentista, iniciaría una nueva conversación dando clic aquí. Este es el método recomendado. Divides el proyecto en partes. Ahora tenemos una fundación. Lo publicamos. Fresco. Entonces tal vez queramos agregar lo que sea, una galería, luego el seguimiento de Google Analytics, luego tal vez una forma más complicada. Bien, bueno, esas cosas pueden ser tres conversaciones distintas. Ten en cuenta que estás usando la misma cantidad de créditos. No hay inconvenientes, pero una conversación fresca significa un modelo fresco No se cansa de las indicaciones anteriores. Pero para volver a mi punto, si sientes que estás nadando en un océano y no tienes idea de dónde estás, necesitas tomarte un descanso y reevaluar Necesitas cambiar de modelo o iniciar una nueva conversación. Yo, hasta ahora, tiendo a pensar que empezar de cero es mucho mejor. Ten el modelo, crea todo desde cero por tu cuenta. Pero claro, puedes hacer referencia a un proyecto. Nuevamente, por inspiración, úsalo como inspiración, y el modelo tomará nota de eso. Pero no importes un código, y ojalá se vaya a ejecutar. Ojalá puedas construir encima de eso. Por lo general, eso no va a funcionar, sobre todo al inicio de tu carrera. Entonces mi consejo comienza con pequeños proyectos divertidos, luego construye tu camino hacia arriba. No te canses nadando en lo desconocido por el camino demasiado. Sí, ten paciencia. Pero si sientes que no estás progresando bien, debes hacer una pausa y buscar la otra manera. 28. Mi consejo sincero: Bienvenido de nuevo. Enhorabuena. Llegaste hasta el final, y eso es un gran problema. No solo construías algunos sitios web. De hecho construías las habilidades detrás de ellos. Aprendiste a guiar a la IA con indicaciones claras, a diseñar con propósito, a hacer que las cosas se vean mejor y se sientan mejor Y eso es sin sumergirse en código complejo, sin ningún tipo de codificación. Lo más importante es que practicas un poco cada vez, algunas indicaciones aquí y allá, algunos retoques aquí y Y así es como te pones bueno. No viendo sino practicando. Entonces, ¿y ahora qué? Bueno, tienes que seguir adelante. Tienes que elegir una idea completamente nueva. Puedes crear una marca, un proyecto personal. Empiezas una nueva carpeta, y simplemente trabajas. Prueba el prompt, lo pegas, lo pullas, lo publicas, lo haces tuyo. Básicamente, estás listo para construir cosas de verdad para ti mismo, luego para los clientes, tal vez solo por diversión de. Pero hagas lo que hagas, recuerda esto, tienes que tener fe. Hay que tener paciencia. Y sí, realmente no necesitas un desarrollador para construir cosas hermosas. Solo necesitas saber platicar con estas herramientas. Gracias por pasar este tiempo conmigo. Ve a crear algo de lo que estés orgulloso. A medida que las cosas cambien, voy a seguir actualizando el curso. Voy a agregar nuevos proyectos, voy a agregar nuevas características, más ejercicios. Pero, sí, por ahora, tienes que seguir practicando. Tienes esto. Se trata Chris Barron firmando la sesión. Muchas gracias.