Kilo Code y Grock Code Fast One: Revolución en programación AI gratuita

cursor revolucionó la forma de hacer código, pero todos estamos de acuerdo en que es muy caro. Uno no sabe si usar

cursor, si usar cloth code, Kine, Winsurf. Hay tantas, tantas, tantas herramientas. Pero les quiero enseñar

dos herramientas que en este momento son mis favoritas para programar. Una se llama Kilo Code. Kyloc Code es un nuevo

editor de código que se integra con Visual Studio Code. Es gratis, pero más interesante. Es de código abierto.

Algunas de las personas que están detrás de Kilo Code son las mismas personas que hicieron Gitlf, la alternativa de código

abierto a GitHof. Para probar Kilocode, simplemente tienes que ir a platici.com/kilo

y vas a tener un código de referidos de PLSI que te puede dar más créditos para poder usar diferentes modelos de

inteligencia artificial con Kiloc. Lo otro que vamos a usar es un nuevo modelo de programación. Es hecho por Grock, por

XAI, la compañía detrás de Grock. Grock creó un modelo exclusivamente para programar que se llama Growth Code Fast

One y está buenísimo y es gratis. Muchos de ustedes han estado usando probablemente Cloth Son Cloud Opus para

programar porque hasta ahora había sido el mejor modelo. GPT Five Thinking, el modelo de pensamiento de GPT5, también

es muy buen modelo para programar, pero son carísimos. Por ahora Grock Code es gratis. Y me

puse a pensar cómo le hago para probarlo y que sea gratuito y que sea un sistema simple. Entonces vine y en vez de probar

cursor, matemos cursor, vine a Kilo Code. ¿Cómo se instala Kilo Code? Es muy simple. Aquí hay un botón que dice

install Kilo Code. Y si ustedes ya tienen descargado Visual Studio Code, simplemente le dan click, van acá donde

dice install Kilo y con eso se instala. Una vez instalado en la esquina izquierda vas a encontrar esta opción

que dice eh Kill Code. Pero por ahora yo estoy en una carpeta que se llama Finance Dashboard. Abrí una carpeta

dentro de Visual Studio Code y estoy listo para arrancar. Aquí típicamente empezaré a programar. Aquí tengo

Copilot, que es obviamente una cosa inútil. Yo no quiero hablar de Copilot. Nadie decente usa Copilot para

programar. Y ahora sí vamos a ir a donde dice kilo. Kilo. Esta es es este segmento de la esquina izquierda.

Entonces, lo que quiero que vean es que acá ustedes tienen varias opciones. Tienen la opción de ser un arquitecto

como para planear el el proyecto. Tienen la opción de escribir código, que es la opción de toda la vida. Pueden

preguntarle si ustedes se tienen una base de código, pueden depurar o pueden orquestar, que es como ir saltando entre

modo depuración, debobs, etcétera. Tengan en mente que Gitlf, Gitlf es una de las empresas más importantes de Box,

de operaciones de programadores. Entonces, ellos son muy especialistas de esto. Y aquí abajito donde dice Xi,

ustedes le dan clic y van a encontrar todos los modelos que se imaginen para programar. Entonces, por supuesto, están

los modelos, si yo pongo acá deepsek, están cada uno de los modelos creados por Deepsic para programar con

diferentes destilaciones. Están, obviamente, los de Open AI, aquí está GPT5, GPT5 Mini, está Cloudsonet. Ahora,

si yo fuera a darle GPT5, me pediría un API. Y esto es una cosa importante. Cuando ustedes instalan Kilo Code, el

proceso entero les va a pedir que se logueen con su nombre, usuario y contraseña. Y al hacer eso, van a entrar

a un sitio web. Una vez ustedes entran a la aplicación de Kilo Code, al sitio web, y se lo ven con su Gmail, etcétera,

les va a dar créditos. Por ahora está dando un montón de créditos. A mí primero me dio $ de crédito y ahora me

dio $105. Y ustedes lo pueden usar en Open Router. Ustedes se preguntarán, ¿qué es Open

Router? Open Routro es un lugar donde consigues por precios muy baratos diferentes accesos a diferentes LLMs muy

muy rápido. Es como una especie de proxy centralizador, un router realmente de los API es lo que te sirve para

switchear entre diferentes modelos. Por ahora, Grock Code está gratis y aquí me dice cuánta plata me habría costado usar

Grock Code hasta ahora y pues esa plata sale de los créditos. A lo que voy es, oigan, ¿quieren $100 gratis para

programar? pues instalen Kilo Code, pero una vez ustedes tienen todo esto armado, ya simplemente vuelven al editor de

Visual Studio Code y así tienen acceso a todos los API. Pero no solamente les quiero mostrar eso, les quiero mostrar

la velocidad con la que esto funciona. Yo todavía estoy anonadado. La magia de drop code es que se mueve a velocidad

luz. Miren el proyecto que vamos a hacer. Voy a ponerme en modo arquitecto y vamos a hacer lo siguiente. Vamos a

escribir acá, "Let's build a financial dashboard for a startup that sells subscriptions to a kind of desert called

Flan. Let's call it only flans." Entonces, nuestra startup se llama Only Flans y vende suscripciones para que nos

lleguen flanes a la casa. I want to see MRR movement, o sea, el movimiento del ingreso recurrente mensual. Esto es

porque, pues, yo sé cómo funcionan las compañías. El TD versus CAC, eso es lifetime value. ¿Cuánto cuánta plata me

genera cada usuario versus el costo de adquisición de cada cliente? Customer acquisition cost. El TV versus CAC, eh

Born and Wrongway. Born and wrongway, eso es cuánta plata tiene la compañía. E payback es cuánto se demora mi inversión

en mi publicidad. Payback period retornar. Create create accurate mob data for a period of 12 months make it

highly interactive. Ahí está perfecto. Todo altamente interactivo. It has to work in HTML, CSS and JavaScript. You

decide the correct libraries and tools. Y honestamente con esto ya estamos. Eso es todo. Arranquemos. Entonces, vamos a

darle enter y observen en la parte de arriba me va a empezar a mostrar más o menos un cálculo de todo el razonamiento

que está incluyendo el uso de herramientas porque va a ser llamados a API y aquí me muestra la ventana de

contexto, los modelos se les acaba el contexto. Entonces, hasta ahora yo he usado 10,500 tokens en esta ventana de

contexto de una ventana de contexto 256,000 tokens. Ahí es cuando se me acaba el contexto. Si se me acaba el

contexto, ¿qué hago? Esto es una de las cosas que más me gusta de kilo. Miren que acá está este botón que dice

intelligently condensed text. Entonces se me empieza a acabar el contexto, le doy click y lo que hace es que resume

todo lo que he hecho hasta ahora. Por ahora no lo necesitamos, pero es brutal. Y Kilo me empieza a hacer preguntas.

Esto es parte de los proms y el diseño normal de Kilo. ¿Estás satisfecho con este plan inicial para Only Flans

Financial Dashboard o quieres hacer algunos cambios? Entonces miremos el plan. El plan es que va a definir las

finanzas, va a diseñar el MOC deira, va a crear el dos datos, crear la estructura HTML, ta ta ta, va a

implementar CSS, va a agregar JavaScript, los rangos de filtros, implementa Tool Tips, perfect

interactive export functionality, no, el plan está bien, procede con la implementación y arrancamos. Y observen,

empieza a hacer el IP request y hace switch a code mode porque ya el modo arquitecto planeó todo. Piensan que

cuando usaban cursor uno tenía que usar esas como eh los puntos MDS para tratar de planear todo. Aquí pues no hay

necesidad. Y empieza a programar, empieza a programar a toda velocidad, a crearme los datos de prueba. Me está

creando los archivos, el IP request ya va creando el CSS. Pero lo que quiero que vean es esta velocidad tan loca con

la que está escribiendo código me parece mucho, mucho, mucho más veloz de lo que típicamente sería, por ejemplo, eh,

cursor o no, cursor no. Cursor no importa. es una herramienta intermedia de lo que sería GPT 5 Thinking. Miren

que acá arriba me muestra las preguntas que ejecutó, el uso de herramientas, reasoning y pues esto es como una barra

de progreso en la esquina superior izquierda y esto ahora solamente me he gastado 19,400 tokens de una ventana de

contexto a 156,000. La razón por la que esto es tan importante los 26,000 tokens es porque te permite ver a claro todo

estoy en el primer 30%, en el primer 50% de la ventana de contexto. Si esto les parece avanzado, por cierto, si no

entienden cosas que digo, como si no entienden que es la ventana de contexto, si no entienden que son este tema de los

tokens o el context rad o toda esta vaina, hay un curso, el curso de fundamentos de LLMs, ese curso en este

momento lo que más se está contratando en la industria es gente que entienda esto. Así que vayan y toman el curso de

fundamentos de LLMs de Tatsi. Pero miren, ya terminó. Este es el código en JavaScript. Este es el código en HTML,

que está bastante simple. Ese es el código en CSS. Y si vuelvo todavía aquí a mi sistema de archivos, pues aquí

tengo estos tres archivitos, eso es lo que cargó. Pero volvemos a Kilo. Miren que me está diciendo el final que quiere

correr con Python un servidor HTTP para poderlo correr en en consola. Entonces me pide permiso. Pues es un comando muy

sencillo. Eso es para abrir el puerto 8000 en mi en mi en mi computador. Entonces, démosle Wrong command. Y aquí

volví al navegador. Y en este momento en el navegador, miren, abrí local host en el puerto 8000 y esto me lo creó

instantáneamente. Aquí tengo gross margin turn rate, aquí tengo Payback period, el lifetime value versus

customer acquisition cost, el born red y por supuesto puedo cambiar esto que sea desde mayo hasta septiembre of chart y

me lo actualizó completamente y de manera instantánea. Increíble. Podemos hacer algo más. Por ejemplo, imagínense,

vamos a hacerle, vamos a crear una nueva tarea. Antes de dar clic aquí, start new task. I want the design to feel like an

apple design. Very clean, minimalistic and with a lot of white space and

margins. I also want to use a different color palette. y le vamos a cambiar la paleta de color porque un problema que

tiene mucho de la inteligencia artificial y de los diseños hechos con AI es que todo es muy

parecido, ¿no? Y pues hay varias páginas web que generan paletas de color. A mí me gusta esta que se llama Colors.

Entonces voy a darle espacio para tratar de encontrar una paleta de color que me parezca chévere para este proyecto. Esto

está buena. Sí, voy a agarrar esta paleta. Lo voy aquí a exportar. Lo podré exportar como un CSS. Eso yo creo que

funciona muy bien. Entonces, voy a exportarlo como CSS. Aquí me me genera todos los colores del CSS. Listo.

Simplemente voy a copiarlo y ahora vuelvo a mi Visual Studio Code. ¿Listos? Ya lo tengo perfecto. Y entonces, this

is the CSS of the color palette I want to use. Listo, ahí está. Entonces, arranquemos una vez más el arquitecto y

arranca desde cero un nuevo proyecto. Aquí lo que va a hacer es que va a comprimir el código y lo va a insertar

en el prompt porque tengan en mente que esto es un nuevo hilo del llamado de API al modelo Grog Code Fast One. Y entonces

empieza a analizar, a definir la paleta de color, hacer toda esta vaina. Está super bien redefinirlo. Seamos justos.

La gran mayoría de ustedes no le estaban y simplemente se van por ello. Entonces voy a decirle, "Are you pleased?" I am

pleased. Proceed. Y a ver qué pasa. Entonces ahí le dije que estoy contento y que proceda. Arranca el IP request y

vuelve a hacer switch a code mode. Y gente, yo sigo absolutamente impactado de la velocidad que tiene esto, pero

sobre todo de la simpleza, como que la curva de aprendizaje de herramientas como Winsorf y Cursor tiende a ser una

curva de aprendizaje muy empinada. Y aquí esto está muy muy simple. Antes de hacer este programa estuve probando con

unos scripts que yo uso para mi día a día en Python y lo entendió perfecto. Mientras tanto, les quiero decir un par

de particularidades de Groke Code Fast One. E es el modelo que tiene menos controles y menos restricciones. Y eso

es bueno y malo porque el la industria está un poquito asustada de que Grock Code Fast One es muy bueno para hackear.

En este momento me acaba de decir que lo cambió y que ya mismo puedo ver los cambios inmediatamente en el puerto 8000

de Local Hof. Este es mi Only Flans. Ahora vamos a recargar. Wow. Entonces, yo le pasé esta paleta de color. Él tomó

las decisiones de cómo usar la paleta de color y aquí está este cambio de diseño con esa paleta de color nueva.

Fantástico. Hagamos un último cambio. El último cambio que quiero hacer para este código es que quiero hacerle un desafío

de usabilidad a mi sistema. Entonces, voy a arrancar una nueva tarea. Esta es la última tarea que voy a hacer para

mostrarles hasta dónde llega. I think the usability of this app is lacking. No me gusta la usabilidad. I give it a five

over 10. Let's think deeply what a 10 usability for the app will look like. minimizing the amount of clicks to the

extreme minimum while keeping it highly functional and tasteful. Create a plan to improve UX and UI as much as possible

and executed. Eso es todo. Vamos a ver qué tal lo hace porque esto es un un rico es como muy humano, ¿no? Entre más

detalle uno le dé, pues mejor, obviamente. Y al final del día la inteligencia artificial es una

herramienta. Muchas de estas cosas que ustedes están viendo ocurren porque yo sé programar y tengo los conocimientos

básicos de qué es HTML, que es CSS, que es JavaScript. Muy probablemente nadie que ha llegado a este punto del video

sigue acá sin saber programar. Ahora, si ustedes no saben programar y están haciendo sus propias apps con lo que

acaban de aprender en este video, déjenme un comentario, quiero entenderlo inmediatamente. Y miren, empieza a

escribir código a una velocidad loquísima y ahí está avanzando. Ahora, tengan en mente que pues, obviamente

esto no es completo, ¿no? Hasta ahora estamos trando una pequeña aplicación que no tiene bases de datos, que

solamente corre en local, hacer un despliegue completo, tener una base de datos completa y todo lo demás, eso

requiere programar, tomar la decisión de si voy a usar postgres o si voy a usar my SQL, tomar la decisión de qué API voy

a ejecutar, tomar un montón de decisiones. Esas decisiones requieren programación y requieren conocimiento.

Ninguna de estas herramientas reemplaza el conocimiento de los fundamentos. Pero bueno, ahora sí ya terminó y entonces me

está diciendo tarea completada, mejores de usabilidad listas 10 sobre 10. Ahora tiene soporte de accesos directos de

teclado, mejoras en la el rendimiento visual, algunos beneficios. LAAB ahora provee una forma intuitiva. Entonces,

cambiemos el navegador y recarguemos una vez más. Y miren esto, aquí está mi nuevo sistema. Tengo un lo que hice

básicamente fue ponerme estas cositas de acá. Eh, me puedo puedo filtrar solamente las métricas clave y se ve

como apenas para exportar. Puedo mostrar el margen. Aquí está el margen. Puedo puedo volver a colocar todas las

métricas. Ketric. Bueno, tiene uno que otro hubo eh puedo puedo cambiar aquí la fecha y tengo probablemente un selector

de fecha. Entonces, junio del 2004. Perfecto. Como último ejemplo, ya que vimos todo lo que pasa Kilo Code con

Brockpast Code One, quiero tratar de ver si puedo crear un videojuego. Entonces, volvamos acá. a Visual Studio Code. Voy

a volverme arquitecto y le voy a decir lo que quiero. Let's create a video game a 3D video game in HTML, CSS and

JavaScript where two players turn base, o sea, basado en turnos control a planet each. We need to see the planet of each

player with its orbit in the solar system. Let's say Earth versus Mars. The game is about building the orbital

weapons to both defend the planet and attack the other planets. use different orbits, mining from the

home planet, interceptors and ideal orbits to send objects in between

planets like missiles, mini asteroids, etc. Let's keep the version one very simple where we see both planets

orbiting a sun and orbits. But each turn we see each planet close. Okay, este juego es s super

ambicioso. Yo no sé si esto va a funcionar, entonces intentémoslo. Ah, miren, me está preguntando. 3GS most

popular for 3D, Babylon GS Good for games with physics and custom webg. More control but complex. Yo creo que voy a

irme simplemente por 3JS porque es como el más sencillo. Estoy seguro que es como el que va a tener más ejemplos. Y

observen esto. Esto es lo que les quería mostrar. Aquí me empieza a hacer un diagrama de cómo va a funcionar cada uno

de lo de los juegos. Ese es el diagrama de arquitectura del videojuego. Entonces, me está mostrando acción,

closeup view, win condition, órbitas, perfecto, game manager, UI menu, 3D model. Excellent. Remember that it has

to play locally. Let's go. Let's go. Y empieza a preparar todo el proyecto. Ustedes ya saben esto cómo es. Va a

empezar a crear los diferentes archivos. Se está trayendo 3JS. Está construyendo las armas, está escribiendo el CSS.

Vamos a ver hasta dónde llegamos. Mientras esto está acelerando, estoy leyendo el chat y una persona me

pregunta que si esto hace comits solito y pues no, por ahora no. Yo le puedo decir que estoy conectado a un

repositorio de Githof o de Gitlf y que me haga los commits, que escriba las las definiciones, todo esto efectivamente

puede pasar, pero pero pues todavía no esto no lo hace el el sistema. Entonces, tengan eso en mente, ¿eh? Pero si

ustedes se lo piden, por supuesto que lo puede hacer. Este juego que estamos construyendo no tiene backhand y no

tiene repositorio de control de versiones. No es un sistema profesional todavía. Es muy cool, pero no es un

sistema profesional todavía. Esto no significa que ya se acabaron los programadores. En este punto ya está

listo el juego y me dice open inindex.html. Entonces, vamos a darle round command y eso me va a abrir en

este momento el navegador. Entonces, aquí tengo mi navegador. Ahí está Planet World se llama, le puso nombre y todo.

Entonces, pero yo no estoy viendo nada, esto está negro. Vamos a ver si es que eh tengo algún error en la consola.

Efectivamente, tengo un error en la consola. Esto es típico y vamos a tratar de depurarlo. Entonces, lo que voy a

hacer es que voy a volver de regreso a mi proyecto. ¿Listos? Y voy a irme a la opción de debug, de depurar. Y le voy a

decir, "I got this error and I see nothing. It's all black in the screen." Bueno, I got this error in the browser.

Pero hay un botón en el que no les he hablado. Si van este botón que dice enhance prompt, si le doy click, empieza

a pensar usando el modelo y me va a mejorar el prompt. Entonces, de repente meó el prompt para hacerlo mucho, mucho

más completo. Agregó muchísimo más contexto, mostró un poco más de código. Entonces, vamos a ver si esto lo mejora

más. Así que vamos a darle enter. En un rato existe la posibilidad de que esto me esto me está corriendo en el

navegador de una manera local, entonces yo creo que parte del problema es ese. Entonces le voy a hacer otra cosa. Voy a

volver al modo code y le voy a decir instead of the HTML with open, let's start a local host web server with

Python and runed there. Que fue lo que hicimos en el proyecto anterior, ¿no? No sé por qué no lo está haciendo en este

caso, los modelos de inteligencia artificial son no deterministas. Está diciendo que ya está lista la tarea, que

ya agregó todo, entonces que si lo quiero probar. Así que vamos en este momento al navegador y veamos si esto

funcionó, parce. Funcionó. Observen esta vaina. Miren esto. Miren esto. Voy a volverlo a recargar. Listo. Entonces,

aquí tengo el planeta Tierra y aquí tengo a Marte. Y yo y si le doy clic a cada uno, puedo irme y observarlos y

puedo hacer zoom out. Miren este juego. Tengo un juego de pelearme entre planetas. Entonces, vamos a ver qué

pasa. Entonces es el es el turno del jugador uno. Entonces, en el turno del jugador uno voy a decirle build weapon y

aquí construy una herramienta y voy a decirle que overview y miren, overview me lo muestra en la parte de arriba. Voy

a decirle launch attack y uy salió el ataque y voy a terminar mi turno. Ahora soy el el turno de jugador dos.

Entonces, build weapon, build weapon, build weapon. Ahí estoy construyendo las armas. Mind resources, mind resources y

launch attack. Y entonces ahí volví a lanzar un ataque turn. Muy bien, hice mi primer intento. Espectacular. Entonces,

ahora que ya tenemos una estructura, volvamos acá y volvamos a ponernos en modo arquitecto porque esto es

inaceptable. Let's make the game better. Vamos a arreglar este juego. Create textures to make it really look like

Earth and Mars. Change the period of each planet's orbit so that the speed the translation speed around the sun is

different. When a weapon is created con armas creada, keep it orbiting the planet that created the weapon. Make a

plan to improve the design of the UI. Make it beautiful and cyberpunk. Add life points per planet and

weapons. Y por último, add a star field to the background. Y por pura curiosidad, voy a volver un minuto al

navegador y voy a volver acá a la página web de Kilo Code y quiero ver cuánta plata me ha costado hasta ahora todo

este proceso y todo el video que ustedes han visto hasta ahora me ha costado 0.35 5 con grade. Miren esta cosa tan loca.

Tenemos un campo de estrellas en el fondo. Tenemos un botón de construir misiles y ahí está rotando. De construir

un láser, de construir un escudo, de lanzar un ataque. Puedo hacer el overview, puedo cambiar de turno, puedo

minar recursos, construir misiles. Aquí tengo como varios bugs, ¿no? Está moviéndose demasiado rápido, pero pero

puedo hacer zoom. Ahí va la tierra. Esto estoy más o menos viendo que tiene eh las texturas correctas y tengo pues un

poquito de de función orbital. Está espectacular. Esta es una muestra y esto, damos y caballeros, es todo. Esto

es Kilo Code. Increíble, ¿verdad? Es hasta ahora mi herramienta favorita de programar. Me encanta. Tú la puedes

instalar. Solamente necesitas Visual Studio Code, que es un software gratuito y abierto, y Kilo Code, que es un

software gratuito y abierto, con el modelo Grock Code Fast 1 de XAI, que por ahora es un modelo gratuito y el más

veloz en cuanto tokens por segundo. Esto fue muy sencillo, muy divertido y en lo que saltas en el modo arquitecto, en el

modo depuración, en el modo de código y en el sistema de mejoras de proms, imagínate todos los proyectos increíbles

que vas a construir. Cuéntame qué aprendiste acá. Si hay cosas que no entiendes, toma el curso de fundamentos

de ingeniería de software. La gente nos pregunta, ¿cómo hago para mejorar mis proms? ¿Cómo hago para mejorar mi

arquitectura? Es se trata de aprender a programar, mejorar tus proms, entender cómo hacer proms de ingeniería y qué

hacer. Es simplemente aprender fundamentos de ingeniería de software. El curso Fundamentos de ingeniería de

software es para todo el mundo. También hay un curso de prom engineering, un curso de programación básica en Plats y

un curso de fundamentos de lls. Si quieres entender esto más a profundidad. Gracias por ver este min tutorial de

Kilo Code y cuéntame qué otras cosas has construido. [Música]