Guía Completa de Diseño UI con IA: de Cero a Experto (1 Hora) transcript

Hay diseñadores que creen que la IA no funciona porque genera resultados genéricos, pero mientras tanto en este momento hay otros diseñadores que están construyendo los mejores productos de su carrera y diseñando con un nivel de detalle y de precisión que hace años hubiese sido inimaginable. Y la realidad es que el problema no es la IA, todas están bien, todas funcionan, el problema es la falta de contexto. Y es que cuando tú a la IA le das basura, lo que la IA te devuelve es basura.

Es por eso que en este vídeo te traigo los siete niveles de contexto, que es lo que los diseñadores que están haciendo cosas increíbles han entendido, porque si tú te encuentras en un nivel bajo, lo que la IA te va a generar va a ser genérico y totalmente indistinguible de la mayoría. Pero si tú vas subiendo de nivel hasta el nivel siete, vas a hacer que tus diseños se vean totalmente diferenciales, porque tú vas a controlar absolutamente a la IA.

Así que vamos con ello porque te voy a contar en cada nivel exactamente qué es lo que tienes que hacer para pasar al siguiente. Y empecemos con el nivel uno. El nivel uno es el nivel en el que están muchos diseñadores que se frustran con la IA y que dicen, "La IA no vale para nada, es totalmente genérico. He probado el último modelo de Open AI y no funciona para nada, es una basura, pero esto de aquí es totalmente lógico cuando lo único que estás haciendo es hablar con la de forma vaga y de forma simple, ¿no?

Y es que imaginemos que lo que quieres es construir una card de pricing, ¿no? Es decir, una card donde te voy a contar cuáles son las ventajas de un producto, cuál es su precio y vamos a tener un botón, un CTA para que lo compres, ¿no? Si tú al en este caso lo que le estás pidiendo es quiere una card de pricing lo que estás haciendo verdaderamente es dejarlo todo en manos del modelo de turno porque tú no le has dado ningún tipo de contexto, ningún tipo de especificación, no hay ningún tipo de archivo de norma de referencia de nada.

Por lo tanto, no te puedes extrañar cuando el resultado sea lo que el modelo ha entendido que es una CAR, tal y como hayan entrenado al modelo de turno, pues a Sonet, a GPT, a Composer, a Grock, al modelo que sea, tal y como ese modelo entienda que es una CAR, eso es lo que te van a dar, porque tú al modelo no le has dicho nada, si no te le has dicho que quieres una CAR, por lo tanto, no te puedes sorprender cuando el resultado es ese AI slop, ¿no? esa basura de IA, que es ese concepto que se usa que todos conocemos, ¿no?

Este estilo de Card genérica, ¿no? Y la realidad es que cuando tú haces esto, cuando tú simplemente hablas con la IA y le pides cosas de esta forma, tú no estás creando nada, ni que vaya a permanecer entre diferentes sesiones, diferentes proyectos, ni estás construyendo nada. Simplemente pues estás creando una Card que bueno la vas a tener ahí en el momento en tu proyecto, pero piénsalo, no estás creando ningún tipo de norma, ningún tipo de estándar, ningún tipo de guidelines, no estás construyendo nada, simplemente pues bueno, tienes aquí una card genérica encima que, bueno, puede que para cierto eh nivel o para cierto proyecto te funcione, ¿no?

Pero desde luego sería un error si te defraudas porque no has obtenido un resultado increíble y es que el contexto ha sido ninguno. Simplemente pues vas a ver estado hablando con Cloud Code, con Codex, con Cursor o con la herramienta que sea, pero no vas a haber ido más allá. Ahora bien, si tú quieres pasar al siguiente nivel, ya no simplemente vas a hablar con la IA, ¿no? Y a decirle, "Quiero una card de pricing," sino que vas a subir un peldaño y vas a empezar a adjetivar lo que tú quieres.

Esto significa decirle a la ella que quieres una card de pricing minimalista, por ejemplo, ¿no? Y esto de aquí es muy habitual que alguien se frustre cuando el resultado que le da la IA no es literalmente el que tenía en mente. Y es que piénsalo, si tú lo que quieres es una web como la web de Apple de Linear o de Supase o lo que sea, realmente tú no quieres una web minimalista, tú quieres una web o tú quieres un producto que está lleno de normas, de restricciones, de guidelines, que tiene un uso de la tipografía, del color, de los espaciados, de los bordes radius, de los iconos, de las ilustraciones, o sea, son un montón de cosas lo que hace que esa web se vea tan absolutamente increíble, ¿no? es simplemente minimalista, son muchísimas cosas más.

Por lo tanto, tú en este momento a la IA lo que le estás dando es simplemente una palabra, un concepto abstracto, una vibe que la IA va a tratar de entender. Pero de nuevo el modelo, la IA sigue decidiendo prácticamente todo. Simplemente, al igual que antes tú te ponías en manos de la IA para que te generase lo que GPT o lo que Sonettienda que es una CAR, pues ahora te vas a poner en manos para que te genere lo que entiende que es una CAR minimalista, tal y como ese modelo haya sido entrenado, ¿no?

Y bueno, puede que haya un cierto contraste, ¿no? Con el primer nivel, pues lo estamos viendo, ¿no? a lo mejor tiene menos color, es más minimalista, eh, a lo mejor, por ejemplo, tiene un poco más de espacio que teníamos antes. Okay, vale, pero no eh creo que podamos negar que esta card sigue resultando bastante genérica, ¿no? Que parece pues fácilmente generada por no. Y la realidad es que no puedes de nuevo esperar que el a te dé el resultado exacto que tenías en mente.

Simplemente, pues bueno, puede que sea un poquito mejor que antes, pero lo que tú tienes en mente requiere muchísimo más contexto, ¿no? Y en este segundo nivel, lo que has creado de nuevo, ni va a permanecer eh en tu sistema, en tu producto, ni en nada, ni has construido nada. Simplemente vas a tener una card un poquito más minimalista que antes y poco más, que es el resultado haber estado hablando con cloud code, codex, cursor, llovable, lo que sea, ¿no?

Ahora bien, puede que digamos, "Okay, está bien, al menos ahora la card luce más minimalista, bueno, puede ser, pero realmente si quieres pasar al siguiente nivel vas a tener que especificar lo que quieres. No es solamente cuestión de que hables o de que des adjetivos como minimalista, brutalista, moderno, sino que empieces a especificar concretamente lo que quieres. ¿Qué sería un ejemplo de especificación? Bueno, pues decirle a la IA a que use tipografía inter, que no use colores neón, que son los típicos, ¿no?, que que te generaba la IA, sobre todo en los inicios, o que haga que el botón tenga un mayor border radius, ¿no?

Ni siquiera cuánto, pero bueno, un mayor. Ya estás empezando a especificar algo, ¿no? Es que imagínate que en el caso de esta car de pricing que estamos diseñando ya no solo le dices que quieres una car de pricing minimalista, sino que añades que quieres que la car tenga un border radius 16 e que quieres que tenga un batch de recomendado, que quieres que el título tenga una tipografía inter, que quieres que haya tres ventajas apiladas verticalmente y precedidas por un icono de check o que el botón, ¿no?

CTA tenga un border radius completo, es decir, que sea totalmente redondeado y que tenga un eh color pues este que tenemos aquí eh que sería un naranja, ¿no? Es decir, ya esta card empieza a estar, no digo que mejor o peor que la otra, sino empieza a estar mucho más concreta respecto a lo que tú querías. Es decir, claramente aquí hay un mayor control, hay un mayor dominio del resultado y se puede acercar mucho más a lo que tú tienes en mente, ¿no?

Por lo tanto, en este caso, ¿qué es lo que la está decidiendo? pues está decidiendo aquello que queda fuera de la especificación que tú le has marcado. Es decir, en este caso va a usar eh inter para el título porque se lo hemos dicho. La car va a tener un borde radio de 16 píxeles porque es lo que le hemos dicho, todo eso de ahí está bien, pero el resto de cosas seguirá decidiendo la IA. Por ejemplo, ¿qué tipografía es esta? ¿Qué espaciado tiene la CARZ? ¿Qué tipografía vamos a usar para el precio?

Es decir, todo esto de aquí la IA se lo va a haber eh inventado porque lo va a haber decidido ella, ya que tú no se lo has especificado. O por ejemplo, el batch de recomendado, no has dicho nada, por lo tanto, La ha decidido eh ubicarlo aquí, ha decidido usar esta tipografía, este color de fondo, este borde radios, etcétera, porque tú no le has especificado cómo querías ese batch de recomendado, ¿no? Por lo tanto, todo lo que quede fuera de tu especificación es algo que la IA se va a inventar.

Bien, esto de aquí estaremos de acuerdo que bueno, puede ser algo mejor que el nivel dos o al menos desde luego va a tener más contexto, va a estar más en la línea con lo que tú quieres, pero la realidad es que esto de aquí si le das especificaciones que son poco concretas, el resultado va a seguir siendo bastante mediocre, bastante generado por IA. Este de aquí es uno de los errores más habituales, dar especificaciones poco concretas, como por ejemplo, quiero que el botón tenga más border radius, más cuánto es si tiene cuatro más es que tenga 6, 8, 20, 50, cuánto es más, ¿no?

O dar especificaciones que sean incompatibles entre sí, por ejemplo, estilos que se contradicen, órdenes que hacen que distintos elementos de ubicarse en zonas que a priori se están contradiciendo, etcétera, ¿no? Porque de nuevo en todo este proceso, al igual que en los niveles anteriores, tú no has creado nada que permanezca, tú no has construido nada y simplemente vas a estado hablando pues con Cloud Code, Codex o la herramienta de turno, ¿no?

Ahora bien, bueno, hemos mejorado respecto a los niveles anteriores, pues evidentemente si teníamos en mente una CARZ así nos hemos ido acercando a ella porque hemos ido aumentando el nivel de contexto, ¿no? Pero la realidad es que deberíamos de pasar al siguiente nivel para empezar a tener mejores resultados. Por cierto, si eres una persona que ha entendido que hemos entrado en una nueva etapa del diseño y quieres construir una carrera donde la IA no sea una amenaza, sino una oportunidad, puedo ayudarte.

[resoplido] En la descripción tienes un enlace, púlsalo si quieres que te ayude directamente a avanzar en tu carrera y a posicionarte como un diseñador valioso en la ERA. Tienes el enlace de la descripción y es que en el nivel cuatro la cosa empieza a ponerse más interesante porque el nivel cuatro ya va de mostrar a la es de enseñarle referencias y esto de aquí nos va a permitir que nuestros resultados den un salto de calidad bastante interesante.

Y es que imaginemos que sigamos con nuestra con nuestra card, ¿no?, de de pricing. Y en este caso vamos a compartirle una referencia. Vamos a decirle, "Oye, te voy a compartir esta referencia de aquí y quiero que este gradient naranja, ¿no?, que tiene aquí en la parte superior esta card, quiero que se lo añadas a mi card de pricing y la IA va a poder interpretar esta referencia y efectivamente añadir este gradient, ¿no?, que tiene un blur, ¿no?, este gradient desenfocado a e nuestra card de pricing.

Por lo tanto, evidentemente ya vamos a tener una capacidad de especificar no solo con palabras, sino con imágenes el resultado que queremos, ¿no? Y es que en este caso la IA va a decidir cómo puede replicar la referencia que le compartes. Por lo tanto, es importante no solo compartirle la referencia, sino también detallarle lo mejor posible que es aquello que quieres quedarte de esa referencia, porque no es lo mismo compartirle esta card y decirle, "Oye, quiero que hagas algo similar a esto, quiero que cojas la esencia de esta card, a decirle claramente, vale, de esta card lo único que me interesa es este gradient que tiene en la parte superior.

Eso es lo único que me interesa. el resto de cosas puedes ignorarla. No es lo mismo eso que darle algo mucho más genérico, porque la IA sí que es capaz de replicar y de entender bastante bien las referencias, pero tú mismo tienes que especificarle qué es lo que te interesa de esa [resoplido] referencia, ¿no? Y es que vemos que respecto al nivel anterior, al nivel 3, donde simplemente especificábamos hablando, hay un salto visual claro en nuestro caso, simplemente hemos añadido un blur, hemos añadido este gradient, pero si tú quieres que replique cosas mucho más ambiciosas, mucho más grandes, la IA va a poder hacerlo.

Y es que el elemento en cuestión que tú quieres que la IA replique o que tú quieres que interprete, la IA va a poder lograr un resultado bastante bueno. Por lo tanto, sí que vamos a tener un salto de calidad respecto al nivel anterior, ¿no? Y de nuevo, ¿qué errores podemos cometer en este nivel? pues un poco ese que venía comentando, que es ser poco concreto a la hora de decirle qué quieres aprovechar de esta referencia, ¿no?

Y aquí empieza a ver cosas más interesantes porque aunque lo que estemos creando no vaya a permanecer porque no hemos creado ningún tipo de referencia de guía de regla ni nada, sí que en esta sesión en concreto va a haber un pico de calidad siempre que la referencia sea buena, pero de nuevo no vamos a llegar a tener nada que nos guste, aunque esto de aquí sí que puede que sea el inicio de un primer componente que queramos eh consolidar.

Esto de aquí lo vamos a ver más adelante en el vídeo porque todos estos niveles que hemos ido pasando no van a ser en vano, sino que nos van nos van a permitir construir los siguientes que se vienen. Y para esto ya no solamente vamos a tener que hablar con la I, hablar con codes, con cloud code o con la IA que queramos, ¿no? Sino que vamos a poder apalancarnos de otras herramientas. Para empezar vamos a poder compartirle a la IA capturas, simplemente capturas de pantalla de una web o de la referencia que tengamos.

Tal vez no sea de una web, tal vez sea de algún tipo de elemento de diseño gráfico, tal vez sea algún tipo de ilustración, lo que queramos, pero en definitiva una eh referencia que le hayamos compartido a la IA, una captura. También podemos compartir a la IA enlaces, simplemente compartirle una web y decirle qué nos interesa de esa web. Tal vez haya una animación que usan en el headline, ¿no? En la tipografía del headline, al aparecer esa tipografía, hay un blur, hay algún tipo de animación que nos interese, pues vamos a especificarles eso a la IA.

Y luego hay distintos eh recursos que son muy interesantes y que te los quiero compartir, ¿no? Por una parte tenemos a una de mis herramientas favoritas, uno de mis recursos favoritos, que es 21st Death, que es una eh herramienta, un recurso donde vas a poder encontrar un montón de componentes que están superb seleccionados y que se lo vas a poder compartir a la de forma superfácil, bien con un prom, bien directamente compartiendo el enlace al recurso o bien conectándote mediante MCP a esta web, a 21first.dev.

Por lo tanto, es supercmodo, está lleno de referencias que valen la pena y creo que a día de hoy tal vez sea mi web favorita para poder seleccionar de una forma muy curada cualquier tipo de componente. Ya veis que aquí que tienen eh prácticamente de todo, ¿no? Aquí estamos viendo en concreto eh bloques, ¿no? Como un bloque pues de pricing sections, eh steppers, etcétera, testimonials, footers y también tienen pues elementos mucho más concretos como por ejemplo pues botones, ¿no?

O checkbox. Hay de todo y está superreomendado. 21.dev. Por otra parte, la segunda referencia eh que puede interesarte, la segunda web a la que puedes acudir para esas referencias que les vas a compartir a la IA es Mobing, ¿no? El web mítica, ¿no? que todos conocemos, donde vas a poder encontrar un montón de pantallas de webs eh conocidas, de productos conocidos, que además a día de mobin permite conectarse con MCP a eh tu herramienta de IA, a lo que estés usando, a Cloud Code, a Codex, etcétera, y va a poder eh encontrar todas las referencias que a ti te interese.

Aquí lo estamos viendo en el propio ejemplo, ¿no? Tal vez estés diseñando una web que va de eh finanzas, ¿no? está disando un producto de finanzas de banca, una vintage, por ejemplo, y quieres ver cómo hacen otros competidores el onboarding, por ejemplo, pues entonces Mobin va a poder especificar concretamente y compartirle a tu IA cómo los competidores están haciendo un onboarding, qué tipo de patrones siguen, qué tipo de elementos, qué tipo de cosas tú podrías replicar, ¿no?

Esto de aquí, por cierto, eh tanto Mobing como 21 Dev se pueden conectar mediante MCP, que un MCP o mejor dicho, el protocolo MCP es una especie de llave universal, de llave maestra para que otras herramientas se conecten con IAs de forma segura y la pueda trabajar con ellos. Pues en este caso, si te conectas eh a por ejemplo a 21st dev mediante MCP con eh Cloud Code, si es por ejemplo la herramienta que estás utilizando, pues Cloud Code va a poder interpretar bien eh cuáles son esos componentes que están dentro de 21 Def o en el caso de Mobin va a poder interpretar bien cuáles son esos flujos, esas pantallas que están dentro de móvil, va a poder identificarlas y va a poder entender que, por ejemplo, en tu caso lo que te interesa son flujos de productos vintage, pues entonces va a poder localizar arlos, interpretarlos y hacer que tu producto, el que tú estás construyendo con Cloud Code en este caso, pues aprenda de todos esos patrones que tú les estás compartiendo.

Bien, dicho esto, vamos ahora a la tercera referencia que es eh relativamente similar a Mobing, que es refero.design, que es una eh web donde también vas a encontrar un montón de referencias de de páginas, de componentes, etcétera, que vas a poder usar con la IA. Y es cierto que Refero se ha puesto especialmente eh de moda o ha sido especialmente popular a raíz [resoplido] de la inteligencia artificial, ¿no? Puesto que mediante MCP de nuevo, al igual que las anteriores, puedes conectarla con tu herramienta DEA para que entiendas todas esas referencias, ¿no?

Aquí lo estamos viendo, pues vas a poder ver desde eh ejemplos de PayPals a landing page, páginas de about, de contacto, eh páginas de detalles de un producto, lo que quieras, pero esa referencia se la vas a poder compartir a tu herramienta de ella mediante MCP. Bien, la siguiente referencia que tenemos es Reuo, ¿no? Reui. Donde vas a encontrar un montón de nuevo de componentes de referencias que vas a poder compartirle a la IA.

Y aquí además de nuevo también vas a poder mediante MCP conectarte con tuya de forma que va a ser supercmoda. Y por último, eh una forma también bastante simple, aunque no va a ser la última, eh me he equivocado ahí, es Figma. Y es que de nuevo vas a poder diseñar algo con Figma, como siempre has hecho, y compartírselo a la ella también mediante MCP. Imagínate que estás diseñando esta card de pricing y quieres que tenga unos detalles super específicos, super concretos, que tú quieres tomar el control a la hora de diseñarlo, ¿no?

Es decir, no quieres simplemente compartir una referencia de refero o de mobing o de Jot first dev, sino que tú quieres con precisión absoluta diseñar esa card, pues entonces vas a poder hacerlo desde Figma y mediante el MCP de Figma lo conectas con tu herramienta y ahí pues Figma eh va a tener la card perfecta porque tú la vas a ver diseñado y tu herramienta va a entender esa referencia. Y luego tenemos otra eh herramienta relativamente similar a Figma respecto a que es un canvas, ¿no?, donde vas a tener libertad total para diseñar como es paper.design.

Paper.design ha nacido, digamos, a raíz un poco de de esta ola, ¿no?, del de la inteligencia artificial. Y es que Paper es muy buena porque puede eh gastar tokens de eh el proveedor que tú tengas de de IA, pues si estás usando Cloud Code, pues vas a poder gastar eh tokens de Antropic o si estás usando eh Codex, pues vas a poder gastar tokens de Open Ei, pero en definitiva, gastando esos tokens, tú vas a poder generar diseños eh en tiempo real gracias a la IA.

Y estos diseños la IA va a poder replicarlos con total eh certeza o con total precisión, porque a diferencia de Figma, este producto Paper.design lo que te genera es directamente HTML y CSS, es decir, esto que aquí está siendo diseñado, luego lo vas a poder replicar de una forma precisa y exacta. Esa de ahí es sobre todo la gracia que tiene eh paper.design, que la no tiene que interpretarlo del mismo al mismo nivel, que sí que tiene que hacerlo, por ejemplo, cuando diseñas en Figma.

Bien, te estoy contando ahora mismo muchas herramientas. Te acabo de contar que si Mobin 21st de Refero, Reui Figma, Figma ya la conocerías, digo yo, y eh Paper, pero la realidad es que hay muchísimas herramientas que te van a ser útiles para trabajar en la era IA, ¿no? Y por eso he creado un Figma donde he recopilado todas las herramientas de ella que funcionan. Es decir, no es una lista interminable, genérica, que nadie ha probado, que no le importa a nadie, que está ahí por rellenar. es una lista seleccionada de las herramientas de ella que funcionan, que yo personalmente he probado y que te recomiendo que incorpores a tu proceso de diseño.

Además, también en este mismo Notion vas a encontrar un asistente guiado que te va a ayudar a subir tu nivel de IA en diseño y también vas a encontrar un diccionario con los términos de IA que debes conocer sí o sí, ¿no? Como en este mismo vídeo hemos estado comentando MCP, etcétera. Son términos que a día de hoy deberías de conocer sí o sí. Todo esto de aquí es gratuito y lo tienes en el enlace de la descripción. Ahí vas a pulsar y vas a poder acceder a este notion.

Así que dicho esto, continuamos porque todo esto de aquí, recordemos que eran formas de generar referencias y poder compartirse al IA, ¿no? Que era lo que nos interesaba en este nivel cuatro, no solamente hablar mediante chat y bueno, ser más o menos específicos. Recordemos que no es lo mismo un nivel dos donde estamos diciéndole que quiere una card minimalista a decirle en el nivel tres que quiero una card que tenga tipografía inter para el título, que tenga un CTA con borde radius full, etcétera.

Es decir, vamos ya avanzando, pero el nivel cuatro, que es en el que estamos, la cosa está más interesante que nunca, ¿no? Donde ya empezamos a compartirle referencias que de forma mucho más precisa la IA va a poder replicar, ¿no? Como este gradient que aquí hemos dicho. Y para eso vamos a apalancarnos para encontrar todas esas referencias en todos estos recursos que aquí he compartido. Y también podemos simplemente compartirle capturas de pantalla, incluso de Pinterest, del sitio que quieras o enlaces.

Bien, hasta aquí hemos llegado al nivel cuatro, ¿no? Que como teníamos aquí marcado en nuestra pirámide de niveles, es un nivel que, okay, está bastante bien, es muy superior al uno, pero aquí la cosa ahora va a cambiar a partir de nivel cinco, de hecho aquí lo veis reflejado, esto va a cambiar bastante porque ahora la cosa se ponen mucho más interesante. Pero antes de pasar a este nivel quiero explicarte algo que es bastante importante.

Antes de continuar debo de explicarte esto y es que todo lo que hemos estado haciendo hasta ahora está muy bien, pero aquí hay dos leyes que son muy importantes y que debes conocer antes de continuar para poder entender los siete niveles de contexto de IA en diseño. La primera ley es la ley de especificidad y es que en una tarea concreta va a ganar la instrucción más específica. ¿Y por qué te cuento esto? Porque a partir de ahora en el nivel 5, 6 y 7 vamos a empezar a montar sistemas.

Vamos a poner normas, reglas, guidelines, es decir, vamos a aumentar el nivel de contexto de [resoplido] una forma bestial. Pero si tú como humano a la IA en una tarea concreta le das una orden muy específica, eso es lo que va a prevalecer. Es decir, da igual que tú tengas montado el sistema de diseño más increíble, más loco del mundo. Da igual que tengas hecho un montón de cosas que le ayuden a la ahí a darle contexto.

Si tú llegas y en un lugar concreto de tu web estás en el footer y quieres ahí hacer un cambio superespecífico, da igual que eso de ahí lo hagas de forma vaga, lo hagas de forma poco concreta, porque al ser tan tan específico, en ese elemento concreto, en ese lugar concreto, ese cambio que tú le has ordenado a la IA va a mandar. Por lo tanto, imagínate que tienes montado, ya estás en un nivel alto, tienes un sistema de diseño, por ejemplo, superceto, pero tú coges, te vas a mobing o te vas a a 21st refero, a lo que sea, coges una referencia y esa referencia se la compartes a la IA y le dices, "Yo aquí quiero que tú hagas esto concretamente, por ejemplo, en nuestro hecho caso, no quiero que me apliques este gradient. coge este gradien y aplícalo aquí porque es lo que quiero.

Pues da igual si tú tienes esta card en tu sistema de diseño super bien definido, tiene todo super consolidado, que si tú le das la orden de que en un momento concreto tú quieres esto en cuestión, la IA va a seguir esa orden si es lo que tú quieres. Por lo tanto, tenemos que tener en cuenta esta ley de especificidad que es muy importante porque conforme avanzamos niveles la IA va a tener más contexto, va a tener más órdenes, más instrucciones, más reglas que seguir.

Pero si tú quieres, todo eso lo puedes romper si tú quieres ser específico. Y luego la segunda ley que tienes que conocer es la ley del patrimonio. Esto quiere decir que lo que hemos ido haciendo hasta ahora, el nivel 1, 2, 3 y 4, no es algo que quede en vano, no es algo que pese a que no hayas construido nada literalmente de que, bueno, pues tienes ahí una card, eh tienes un botón, tienes lo que sea. Es cierto que no has construido órdenes, no has construido reglas, pero esas cosas que tú has ido haciendo es sacar el haber decido a veces una tipografía, un color, es decir, todas esas cosas que tú has ido eh creando, vas a poder, si quieres, usarlas para pasar a los siguientes niveles.

Es decir, aunque tú aún no hayas creado ningún tipo de orden, ningún tipo de reglas, todo este tipo de cosas eh esparcidas que tú has ido creando, este tipo de cosas caóticas, oye, pues he creado [resoplido] una card aquí con una referencia que tengo de mobing, luego me he ido a refero y he creado un botón porque mira, este botón me ha gustado. Luego le he dicho a la IA que me genere porque sí eh una lista y la lista la ha hecho la IA como le ha dado la gana, pero yo le he dado un par de orden y la he modificado.

Luego he cogido un footer que me ha gustado o que me lo he diseñado yo mismo en Figma. Es decir, ves que todas estas cosas las has ido creando sin ningún tipo de orden, ¿no? Pero si tú con el tiempo has ido construyendo algo que a ti visualmente te gusta y te convence y crees [resoplido] que tiene sentido, pues eso es lo que te va a permitir ir construyendo el sistema, las reglas, las normas que te van a permitir ir pasando de nivel, ir subiendo el nivel.

Y por eso esto de aquí es la ley de patrimonio, porque lo que has ido construyendo empieza a ser como tu patrimonio, empieza a ser aquello que te permite apalancarte para pasar al siguiente nivel. Por lo tanto, si hay algo que hayas creado, aunque sea de forma simple, aunque sea de forma muy burda, porque se lo has dicho a la IA y mira, lo que te ha dado pues te ha gustado, eso de ahí lo puedes usar para construir, para ir amasando tu patrimonio, tu patrimonio de contexto e ir subiendo a los siguientes niveles.

Así que ahora que ya has entendido estas dos leyes que eran totalmente claves e entenderlas y que te las contase antes de pasar a los siguientes niveles, vamos con el nivel cinco, que aquí la cosa empieza a ponerse mucho más interesante y es que el nivel cinco es la primera vez donde la IA va a tener un contexto con el que trabajar, donde la iba a tener alguna especie de reglas de norma más allá del mero prompt que nosotros le hemos escrito en el chat, ¿no?

Y es que aquí ahora vamos a trabajar con archivos que le ponen normas a la IA. Por lo tanto, la IA va a cumplir lo que estos archivos, que ahora te cuento cuáles son estos archivos dicen y lo que estos archivos no contemplen. Ahí es donde la va a empezar pues a inventarse eh las cosas y va a empezar a decidir por ella misma. Pero fíjate que antes la tenía una capacidad de decisión brutal. Ahora que ya empieza a tener un contexto, ya le está decidiendo tanto.

Ya eres tú quien la está empezando a guiar, ¿no? Y es que en este caso de lo que estamos hablando es de que vas a empezar a trabajar archivos con archivos como un design. Un product.md o un agents.md. Y te voy a contar de qué trata todo esto de aquí. Es que para empezar tenemos que hablar de lo que es un markdown, ¿no? O sea, todos estos archivos que hemos hablado, design.md, ese punto MD es de Mark. De nuevo, este es otro concepto que ya deberías de conocer. lo tienes todo en el notion de IA que tienes en el enlace, pero este concepto es importante conocerlo, por lo tanto lo voy a explicar por si acaso.

Y es que un Mardown es un tipo de archivo que está escrito de forma que la IA puede entender bien y puede leer bien y rápido y que además nosotros como humanos también vamos a ser capaces de entender y de leer eh bien. Y es que tal y como estamos viendo en este vídeo, ¿no? En esta captura en directo que tenemos, lo que a la izquierda vemos es eh un marnow escrito, ¿no? Pero a la derecha es cómo podemos interpretarlo a través de pues cualquier herramienta de obsidian, de notion, incluso.

En definitiva, vemos que por ejemplo si estamos escribiendo con una almohadilla o con un hashtag, ¿no?, que dirían esas personas con una almohadilla antes de eh este texto, ¿para quién es el producto? Vemos que aquí esto se está reflejando en un heading uno porque almohadilla es un heading uno y que si tenemos dos almohadillas pues es un heading dos, como por ejemplo, ¿quién habla? Aquí lo estamos viendo. Que si eh incluimos, por ejemplo, varios guiones, puede ser un divider, que si estamos incluyendo eh un guion puede ser una especie de bullet point.

Y en definitiva vemos como este texto aquí que parece que no tiene formato, gracias [resoplido] al mardown lo tiene. Este formato para la IA es eh muy fácil de leer y es una forma de decirle a la IA qué cosas son importantes y cuáles lo son menos, porque un heading 1 se supone que es más importante que un heading 4, ¿no? Tal y como estamos viendo aquí. Pero es que además también para nosotros mismos el Marddown es una forma fácil de escribir instrucciones para la IA, ya que no requiere especialmente un código extraño o superraro o incómodo de leer, sino que el Mardown también es cómodo de escribir y de leer y tampoco, además, son miles de instrucciones.

Vas a ver que todos son almohadillas, asteriscos, barras y poco más. Es decir, en un nivel básico vas a poder dominar Mardown superrápido. Ahora bien, ¿qué es lo que eh queremos aprovechar del Mardown? Pues que la IA va a consumir muchos archivos Marddown que nosotros le demos porque es un formato, como hemos dicho, bastante fácil para la propia IA. Y el primero de todos estos archivos es un design.md. Un Design MD es un archivo que creó Google, es un estándar que creó Google para poder compartirle a la IA unas guidelines de diseño de una forma básica y estandarizada.

Un design.md MD no tiene el nivel de complejidad que tiene un sistema de diseño, pero es simplemente una forma, digamos, introductoria o simple de decirle a la IA, okay, este este producto que me está generando esta interfaz, quiero que siga estas directrices, ¿no? Y es que vamos a poner aquí el ejemplo de eh la web de Stripe, ¿no? Por ejemplo, un Design MD que trata de replicar lo que sería la estética o la identidad visual de Stripe.

Y vemos que, por ejemplo, en este caso, este design MD incluye cuáles son los tokens de color, incluye también, si no me equivoco, la tipografía, el borde radius, el espaciado, cómo debe de comportarse esto en diferentes momentos. Aquí lo estamos viendo, ¿no? Incluye tokens de tipografía. Eh, también incluso puede incluir órdenes de cómo deben de comportarse o cómo deben de ser diferentes componentes, sobre todo componentes principales como botones o como checkbox, etcétera.

En definitiva, vemos que de una forma simple, porque lo que estamos viendo no es más que texto que la IA va a interpretar como Mark Down y vemos que no tiene, digamos, la envergadura que tiene un sistema de diseño, pero de una forma simple ya estamos diciéndole a la IA cómo debería de ser un diseño para que sea eh algo mucho más consistente que si estamos tirando proms eh a la ligera, ¿no? Por lo tanto, este de aquí es el primer archivo que nos interesa, tener un design.md MD que recoja ese mínimo contexto visual, pero también nos puede interesar mucho tener un agents.m y es que un agents.md, que es un archivo bastante popular actualmente, ¿no?

También deberías de conocerlo si no lo tienes en el notion de la descripción. un agents. Mmd, es decir, pun markdown, es un archivo que la IA antes de ejecutar cualquier orden va a leer. Normalmente suele ser un archivo simple porque si lo haces superrecargado pues estás haciendo que la IA tenga que leer más y por lo tanto estás haciéndole más complicado el hacer cada tarea. Pero la IA antes de ejecutar cualquier tipo de tarea va a leer este agents.md.

Por lo tanto, en este agents.md puedes meter unas instrucciones básicas, un contexto mínimo de tu proyecto o de archivos que quiere que la que quieres que la IA lea siempre, de cómo quieres que la IA trabaje y en definitiva darles uno darle a la IA unos cuantos eh detalles, unas cuantas normas mínimas que tú quieres que siempre sí o sí tenga en cuenta. Con estos dos archivos simples, con este design.md md y con este agents.md ya estamos empezando a construir un nivel de contexto que claramente es superior a lo que veníamos haciendo hasta ahora, donde oye, quiero una card, se lo digo a la IA, quiero una card de pricing minimalista, se lo digo a la I que la IA lo interprete, ¿no?

Claramente ya estamos aumentando el nivel de contexto que le damos a la IA, simplemente con este design.md, MD donde la IA va a tener unas guidelines visuales de lo que tiene que hacer y con este agents.m donde la iba a tener un contexto mínimo de cómo tú quieres que trabaje. Ya con esto empezamos estamos empezando a dirigir a la IA, estamos empezando a guiarla, que es lo que hacemos con este nivel CCO, ¿no? También decir que no solamente tienes por qué tener archivos design.md o agents MD, tú mismo puedes crearte otros archivos.

Por ejemplo, imagínate que te interesa tener un archivo que sea product.m. md donde le cuentes a la IA de qué va tu producto y cosas que quieres que tenga en cuenta. Oye, pues ten en cuenta que mi producto es para este tipo de usuario o que la finalidad de mi producto es esta. Por lo tanto, quiero que esto lo tengas siempre en cuenta en cada decisión. Al fin y al cabo, tú mismo puedes crear un archivo mardown y que la IA lo lea.

Por lo tanto, pues puedes crear tantos archivos Marddown como quieras, aunque tienes que tener cuidado, sobre todo con el agents.m, porque si necesitas que la IA antes de cada decisión lea un nivel de contexto impresionante, pues evidentemente vas a ralentizarla. Ahí entra el hecho de que seas eh consciente de que necesitas y que la solo lo use cuando le haga falta. No que lea todo en todo momento, sino que lea lo que necesita cuando le haga falta.

Bien, por lo tanto, imagínate que ya tienes este design.md, ¿no? Y este agents.md, por ejemplo. Pues en ese caso, la IA, imagínate que ya tenemos, ¿no?, nuestra card. Recordemos con este gradient, ¿no?, con este blur ya tenemos esta card. Si la IA ya tiene este design.md MED y ahora le pedimos que genere, por ejemplo, una card, ya no de pricing, sin una card donde te vas a apuntar a una weightlist, ¿no? Y vas a dejar tu correo electrónico.

La IA gracias a este design.md ya va a tener un contexto de de qué va tu producto, de qué tipo de visual quieres y por lo tanto ahora para replicar, para crear una card nueva, no va a inventarse todo absolutamente de cero, sino que va a tener en cuenta ese design.md med que tú le has compartido va a tener en cuenta ese contexto, cosa que hasta la fecha no había podido hacer porque no tenía ningún lugar al que recurrir, ¿no?

Por lo tanto, gracias a este inicio, ¿no?, de esta sistematización, de este contexto que le estamos dando a la IA, vamos a poder replicar cosas que de forma simple, porque un design.md MD no es un sistema de diseño brutal, pero ya vemos como la empieza a tener idea de eh por dónde tiene que tirar, ¿no? Por lo tanto, en este nivel ya empieza a haber una consistencia mínima entre los diferentes elementos. Es decir, se nota que en tu web va a existir unas normas, ¿no?

Que en tu producto hay una consistencia mínima gracias a haber construido pues este design MD, este product MD si quieres, o este agents.m, ¿no? Bien, ¿cuáles son los errores habituales en este nivel CCO? Pues que todo esto sigue siendo pues un simple, entre comillas, que es muy poderoso, pero sigue siendo un simple mar down, por lo tanto, no estás cubriendo todos los casos de uso que hay en tu cabeza y que te imaginas.

Es simplemente una base, una base bastante interesante que está muy bien de hecho, para partir. Ahora bien, ¿qué herramientas vamos a usar para esto? Pues también, al igual que hicimos el nivel anterior, te voy a compartir herramientas que vas a poder usar para esto, recursos que te van a interesar bastante, ¿no? Y que de nuevo podrás encontrarlos también en el Notion. Y es que eh por una parte puedes irte a designmd.co donde vas a encontrar muchos archivos de design.md, media, o sea, archivos en Mardown que van a poder darle directrices de diseño a la IA para que diseñes un producto pues mejor y que ya tenga una cierta consistencia visual, ¿no?

Vemos que aquí, oye, pues tienes un montón de posibles design.mds me des y que puedes usar el que quieres. En este caso, vamos a imaginarnos que estamos usando el de Apple y vas a poder eh eh digamos orientar a la IA con esas guidelines que tendría Apple en su design MD, ¿no? Mejor dicho, que tiene el design MD inspirado en Apple a nivel de tipografía, color, espaciado, border radios, etcétera. Lo mismo puedes encontrarte en designmd.ai, AI, ¿no?

Ii. También vas a poder encontrarte muchos marnows, eh, design MDS que son muy interesantes y que de nuevo vas a poder replicar e incorporar a tu producto, ¿no? Aquí lo estamos viendo, pues tienes tipografía, colores, ciertos componentes, eh elevations también, ¿no? Es decir, shadows, etcétera, que van a facilitar la consistencia en tu diseño. Luego también otra eh web que te puedo recomendar y que es bastante interesante es newform.ai, AI, ¿no? ¿Dónde vas a poder ver diseños y piezas visuales que son interesantes y design.mds inspirados en esas piezas por si quieres replicarlo e incorporarlo a tu producto.

Y luego, por último, la que diría que fue la la pionera en en recopilardesigns.mds, que es getdesign.md, MD, ¿no? Es decir, Marddown es el propio dominio. MD, ¿no? Donde aquí vas a encontrar de nuevo un montón de mards si quieres incorporarlos a tu producto, ¿no? Bien, piensa que hasta aquí tú puedes haber hecho dos cosas. Has tenido dos caminos realmente, que es, oye, yo he ido acumulando patrimonio, ¿no? Recordemos la ley de patrimonio.

Yo he ido acumulando patrimonio hasta este nivel, hasta el nivel cinco. He ido generando cosas que me han ido interesando. Se lo he pedido a la IA, le he dado una referencia, le he dicho que no, le he dicho que me haga algo minimalista. eh le he compartido una captura, le he compartido un enlace, he hecho algo en firma y lo he conectado con MCP. En definitiva, he ido generando cosas y una vez que he tenido algo que me ha convencido, he trabajado con la propia IA el design.md de mi proyecto en base a lo que ya tengo.

Es decir, yo mismo me he creado el design.md md gracias a todo lo que yo he ido construyendo, gracias a ese patrimonio que he ido acumulando, esa es una opción, pero también puedes tener otra opción que es directamente irte a una de estas webs que te comparto y ya vas a tener ese punto de partida. Ese punto de partida no va a estar tan personalizado, tan a medida como si lo hubieses construido tú. gracias a la ley del patrimonio, no no va a estar tan personalizado porque ese patrimonio no lo has ido construyendo tú, sino que lo vas a ver cogido de una de estas webs, pero es también más rápido.

Entonces va a depender de en qué clase de proyecto estás. Oye, estás haciendo algo que quieres que sea supercurado, que tú vas a ir construyendo paso a paso, tú mismo vas a ir diseñando cómo quieres que se va tu interfaz. Oye, pues tal vez entonces tienes más sentido apalancarte de la ley del patrimonio y eh ir construyendo tu propio design MD. Oye, es un proyecto que quieres hacerlo rápido, no lo consideras relevante, tal vez es un tema interno que te da un poco igual, que no importa mucho el look andfield.

Oye, pues entonces tal vez sea interesante usar una de estas webs, irte a designmd.ai, a newform, a getdesign.md, MD, eh, y usar un design MD ya existente, que me cuadre, que tenga sentido, que te guste y usarlo en tu producto directamente, de forma que, oye, va a tener el look and feel y el visual absolutamente único y espectacular, ¿no? Pero te vas a garantizar una consistencia 100%. Por lo tanto, en ese caso tiene sentido ir directamente a un design.md y no a construirlo tú.

Por lo tanto, tienes estas dos vías, ¿no? Hasta aquí habríamos llegado al nivel cinco, donde claramente hemos visto un salto de calidad porque la IA pues ha aprendido, ¿no?, a generar este patrimonio. Pero si queremos avanzar hacia el siguiente nivel, aquí la cosa se pone mucho, mucho más interesante. Y es que ya no estamos hablando de simplemente guiar a la IA, sino que estamos hablando de sistematizar. Y aquí es donde entra en juego un concepto que eh creo que era razonable que llegase en un momento del vídeo, que son los sistemas de diseño.

Y es que en este caso ya no solamente estaremos trabajando con un Design MD, ¿no? Con un Marddown que bueno, que está bien, que estás gando la guía, ¿eh? Ok, correcto. Sino que estamos hablando de que vamos a trabajar con un sistema de diseño que tiene tokens y que tiene componentes. Por lo tanto, esto de aquí nos garantiza que cuando estemos usando una card o cuando le pidamos a la IA una Card, si es que nuestro sistema de diseño tiene una card, ya no se va a inventar cómo debe de cómo debe de verse esa CAR, sino que va a usar componentes que ya existen. va a literalmente agarrar eh el componente de la card que está en tu sistema de diseño y usarlo.

Es simplemente así. Es decir, la ya va a dejar de tomar ese nivel de decisiones eh tan amplio donde se inventa cosas continuamente y va a usar aquellas cosas que existen en tu en tu sistema de diseño. Por lo tanto, ya vamos a hablar de que visualmente tu producto se va a ver mucho más consistente porque además no solo es una cuestión de componentes, sino también de tokens. Es decir, la IA va a tener definido claramente qué colores tiene que usar, dónde tiene que usar esos colores, qué tipografías debe usar, cómo usarlas, dónde usarlas, qué bordes radius, qué espaciados, eh qué sombras.

Es decir, vas a tener un conjunto de normas que la IA si las sigue, que va a seguirlas, pues el resultado evidentemente va a ser muchísimo más consistente, ¿no? Sí que es cierto que cuando estamos este nivel, en este nivel seis, hay un fallo de expectativa que es entender que la IA ya como ya tiene, digamos, estos tokens y ya tiene unos ciertos componentes, la IA va a poder interpretar perfectamente todo y que ya va a ser cuestión de pedirle cosas, de tirarle promps y que la ya va a saber interpretarlos.

Eso de ahí no es del todo cierto porque la IA no va a poder interpretar a la perfección cosas que aún no tiene definidas. Y es que si tú en tu sistema de diseño hay cosas que no tienes definidas, pues la IA va a tener que inventárselo y probablemente el resultado pues no sea justo el que tienes en mente, ¿no? Llegados a este momento, ya estamos construyendo algo, ya tenemos algo que evidentemente permanece. Esto no es como en los niveles del uno al cuatro, donde todo se quedaba en la sesión y bueno, tenemos una car, tenemos aquí una tabla de pricing, sino que ya estamos construyendo cosas que permanece, que perduran, ¿no?

Y eh concretamente hablamos, por ejemplo, de tener tus globalscs, es decir, tus tokens de color, tipografía, etcétera, y tus componentes. Por lo tanto, ya la IA no solamente estamos dándole pues un design MD tal vez o un Agence MD o un producto MD, ¿no? archivos en Mardown, sino que estamos dándole un design system, es decir, estamos dándole en este caso unos eh tokens de color, tipografía, etcétera. Estamos dándole tal vez un componente de pricing cards, un componente de botón o los componentes que tengamos en nuestro sistema de diseño, componente X, Y, ¿no?

A la IA le estamos dando eso. Por lo tanto, ya no es simplemente un mero design MD que va [resoplido] a dar una especie de instrucciones un poco simples de de qué va este componente que queremos diseñar o cómo queremos que luzca nuestro producto, sino que si tenemos un sistema de diseño sólido, por ejemplo, va a poder entender diferentes estados, ¿no?, de de un componente, de forma que al darle nuestro sistema de diseño a la IA nos puede generar esa card de pricing, pero además nos generará esa car de pricing en los diferentes estados con las diferentes normas que nosotros hayamos definido en nuestro sistema de diseño, porque de nuevo, si no lo tenemos en nuestro en nuestro sistema de diseño, la IA va a tener que inventarse algo, pero si sí que lo tenemos, va a poder replicarlo.

Por lo tanto, estamos hablando de un nivel de profundidad y de complejidad mayor que del nivel al que veníamos anteriormente de tener ese design MD en el nivel 5 de contexto, ¿no? Por lo tanto, vemos como en el caso de que queramos no solo esta card de pricing, sino la card para apuntarte a la wait, ¿no? Esta card donde vas a poder dejar tu mail. Oye, pues, ¿qué ocurre? ¿Cómo se ve la Card cuando el mail está lleno? ¿Cómo se ve la CARZ cuando el mail es erróneo y no has introducido un mail válido? por ejemplo, ¿no?

Todos estos estados eh al estar en un nivel de contexto más avanzado y superior, la IA podría ser capaz de reflejarlo, ¿no? Y bien, en este caso, ¿qué herramientas podemos usar? Porque ya no estamos hablando de solamente que estamos tirándole promps a a Cloud Code o a Codex, ¿no?, sino que ya estamos trabajando con un sistema de diseño. Bueno, pues al igual que antes eh te compartí una serie de recursos para tener Design MDS ya preparados y listos para usar, aquí voy a hacer lo mismo con sistema de diseño.

Y es que hay una serie de lugares donde vas a poder conseguir un sistema de diseño sólido y ya construido que te puede interesar, ¿no? El primero de todos es daisyui.com, donde vas a poder encontrar eh componentes basados en Tailwin, ¿no? Concretamente eh componentes para empezar a usarlos. Por lo tanto, estos componentes al formar parte de un sistema de diseño ya te garantiza que hay una cta una cierta consistencia entre ellos, que hay unos guidelines, hay e unos diferentes estados, etcétera, que en definitiva ha habido un equipo previamente que ha trabajado en que este sistema de diseño esté bien construido.

Puedes conseguirlo en dacui de nuevo, todo esto de aquí lo tienes en el notion de la descripción. Todas estas eh referencias, todos estos enlaces los tienes ahí. Otra otra eh herramienta, otro recurso que puede interesarte es parki.com donde de nuevo también vas a poder conseguir un montón de componentes, un sistema de diseño ya preparado para que tú mismo eh cojas y lo uses. Y también tienes Shat CN, que tal vez sea uno de los más populares y de hecho hay muchas herramientas de ella que se apalancan el Shad CN porque es un sistema de diseño que luce moderno, que es relativamente adaptable y que eh está bastante consolidado.

Por lo tanto, shaci.com ahí vas a poder encontrar este sistema de diseño que probablemente será de los más recomendables. Bien, hasta aquí. Ya. Eh, puedes tomar de nuevo, como ocurrió en el nivel anterior, uno de los dos caminos. Tú mismo puedes ir acumulando patrimonio mediante la ley del patrimonio. Vas a poder ir acumulando cosas que a ti te gusten, que tú consideres que forman parte de la estética de tu producto, que tú quieres que tu producto vaya hacia allí y con todo eso te vas armando tú mismo tu propio sistema de diseño.

Oye, ya tengo una CARZ que me gustó porque eh yo mismo la diseñé en FA y me gustó. Ya tengo además eh un una lista, ¿no?, de eh productos que me gustaron porque oye, yo lo construí en parte, me apalanqué de un design. Que me gustó, pero a mí esto me convence. Tengo además, por ejemplo, un carrusel que lo vi en 21st.de def. Y a mí esto me gustó y por lo tanto esto me lo quedo, ¿no? En definitiva, has ido amasando un patrimonio y llega el punto, un patrimonio de contexto.

Entonces llega un punto donde dices, "Vale, me voy a armar ahora sí mi propio sistema de diseño." Ese de ahí es un camino, el camino del patrimonio. Pero luego tienes el segundo camino, al igual que pasaba antes, que es el camino de elegir uno de estos sistemas de diseños ya construidos y llevártelos a tu proyecto. Al igual que antes, tú podías decir, "Oye, yo no voy a usar eh yo no voy a construir mi propio design MD porque a mí este proyecto no me importa tanto, no necesito un look and feel tan diferencial, es una cosa que quiero quitármelo rápido de encima.

Oye, pues voy a un design MD, lo cojo de, por ejemplo, de getdesign.md, me lo llevo y ya me garantizo una consistencia visual mínima." Pues esto mismo puedes hacerlo con tu sistema de diseño. Puedes labrártelo tú mismo mediante la ley del patrimonio o puedes irte a Shat CN y usar el sistema de diseño que ellos ya han construido. Esto de aquí eh no hay una opción que sea mejor que la otra, va a depender de tus necesidades, pero desde luego si quieres empezar un proyecto en un nivel donde ya tengas un sistema de diseño, puedes empezarlo directamente en el nivel seis usando SAT CN.

Hasta aquí esto que hemos construido, ¿no? Es decir, ya estamos en un nivel seis, ya tenemos nuestro propio sistema de diseño, hemos llegado a un punto donde a la IA ya no estamos dándole un burdo prom, un simple texto y que la lo interprete y que eh el resultado sea el modelo eh sea el promedio que ha entrenado el modelo, ¿no? Y bueno, pues oye, quiero una card de pricing. Bueno, pues oye, mira, eh según eh GPT 5.5, una card de pricing es esto.

Aquí lo tienes, ¿no? O sea, ya hemos trascendido ese nivel y hemos llegado a un nivel donde tenemos incluso un sistema de diseño con un globals.css con diferentes componentes. A lo mejor también tenemos un agent.md, MD, un producto MD, es decir, ya estamos en un nivel muchísimo más sólido, ¿no?, donde podemos generar componentes con diferentes estados, etcétera. Pero puede que te estés haciendo una pregunta bastante legítima y bastante razonable, que es, oye, ¿y con todo esto de la IA no tiene sentido que la IA me ayude no solo a crear mi sistema de diseño, sino también a mantenerlo, a proponerme nuevos componentes, a gestionarlo?

No tiene sentido que ese sea el siguiente paso. Y yo en este caso lo que te digo es que efectivamente tiene sentido y es que ya estaríamos hablando del nivel más alto de contexto eh en diseño. Y es que ya no estamos hablando de sistematizar, es decir, de usar tu sistema de diseño que ya has generado previamente, sino de orquestar. Este de aquí es el nivel más alto. Y es que, piénsalo, hasta ahora lo que habíamos hecho era definir de una forma bastante fina. bastante precisa, los componentes que queríamos usar, cómo deberían de comportarse cada uno, todo eso de ahí ha estado bastante bien.

Pero si vamos al siguiente nivel, de lo que estaríamos hablando es de los sistemas de diseño agénticos, es decir, no tanto de los sistemas de diseño tradicionales, por llamarles de alguna forma, sino de una nueva época, una nueva era de los sistemas de diseño, donde no solamente vas a tener una serie de componentes y de tokens, sino que va a haber una serie de reglas, de normas de cómo todo debe de funcionar, de cómo todo debe de comportarse y que en definitiva la gestión y mantenimiento de ese sistema de diseño, pues sea mucho más simple, ¿no?

Y es que en este caso la IA va a actuar bajo todas esas normas y restricciones que tú le has definido, ya que este sistema de diseño va a estar planteado para que la IA pueda trabajar mucho con él, ¿no? Es decir, no solamente para que coja una CAR y la use, sino va a estar pensado para constantemente estar interactuando con la IA para apalancarte al máximo de la inteligencia artificial. Y es que en este caso ya vas a tener el nivel más alto de control visual de tu producto porque ya vas a haber generado el máximo contexto posible, ¿no?

Y tal vez el único error, hay muchos, ¿no? Pero uno de los errores habituales en este nivel es no dedicar el tiempo suficiente a construir todo esto, todos estos componentes, todas estas normas, todas estas instrucciones. No dedicar tiempo a construir esto porque, bueno, esto de aquí es agéntico, ¿no? Ya la IA se encargará, ya la IA se busca la vida, da igual, ¿no? Esto, bueno, en definitiva, porque eso básicamente a lo que te lleva es a tener un sistema de diseño agéntico, pero muy pobre, muy simple, eh, y que pues puede incluso que sea una especie de AIS Lop, pero en sistema de diseño agéntico, ¿no?

Por lo tanto, ¿de qué hablamos realmente cuando hablamos de un sistema de diseño agéntico? pues ya no solamente tendríamos esos globals.css o esos eh componentes, sino que además puede que haya muchas eh formas de darle instrucciones y ordenas a la IA, pero te voy a contar dos que tal vez sean las más protagonistas en este sistema de diseño agéntico, ¿no? Por una parte son los skills, que los skills son esos archivos con órdenes repetibles que la IA puede seguir.

Y es que si tú normalmente de nuevo est otra otra palabra, otro concepto que ya deberías de conocer, pero bueno, lo tienes en el notion igualmente, un skill es algo que deberías de crear cuando te ves continuamente dándole las mismas instrucciones a la IA. Cuando tú a la IA no paras de darle las mismas órdenes, siempre estás repitiéndole lo mismo, tienes un proceso estandarizado que siempre es el mismo, es superrepetible, no deberías de estar replicándolo continuamente, sino que deberías de crear una skill. una skill, no deja de ser un conjunto de archivos marnow de referencias, scripts, etcétera, pero que en definitiva van a ayudarle a la IA a tomar decisiones o mejor dicho a replicar un proceso de forma continuada. ¿Cómo puedes crear un skill?

Puedes hacerlo manualmente creando tú los archivos, pero si no puedes irte o bien eh a eh Codex o bien a Cloud y ayudarte de ellos para construir el skill. Es decir, puedes pedírselo y ellos te van a ayudar a crear un skill. Los skill fue algo que inventó en su día Antropic, pero a día de hoy ya se ha convertido en absoluto estándar para esto, para precisamente el hacer que un proceso que repites continuamente no tengas que estar escribiéndolo a mano de forma reiterada, sino que crees una skill que la IA pueda consumir bien. pues puedes crear diferentes skills para tu sistema de diseño, para cómo debe de comportarse, qué órdenes debe de seguir, eh qué debe de hacer cuando haya un cierto componente, eh cuando deba de e proponer un componente, cómo te propone los componentes, cómo se aprueba un componente, cómo deben de relacionarse los componentes entre sí, qué estructura debe de seguir definitiva, todas estas órdenes propias de conseguir un sistema de diseño pueden ser eh repetibles y por lo tanto pues pueden ser consolidadas en skills y luego también puedes crear diferentes archivos markdown que le ayuden a la IA a comportarse y a entender qué es lo que tú quieres de tu sistema de diseño.

Y todos estos archivos puedes eh dejarlo en la carpeta de ehcloud/rules, donde en definitiva puedes agrupar en una sola carpeta todos estos archivos mardown de instrucciones para la IA. Como te estarás dando cuenta, el sistema de diseño agéntico no es que difiera tanto en el orden de, oye, los componentes que tiene en los tokens, no difier tanto en eso porque eso es lo propio, eso es lo inherente a un sistema de diseño, ¿no?

Por lo tanto, hasta aquí tiene sentido. Lo que verdaderamente es diferencial y lo que hace que esto de aquí sea algo next level, por decirlo de alguna forma, es que tienes una serie de instrucciones y de órdenes que le va a ayudar a la IA a poder gestionar, mantener y interpretar tu sistema de diseño. Y estamos hablando pues eso, pues de tener skills o de tener eh reglas de nuevo. Además, tú como siempre puedes apalancarte de un agents.m, MD, un producto MD y de cualquier archivo que tú consideres razonable crear para que la IA entienda mejor tu contexto.

Por lo tanto, cuando tú tienes este sistema de diseño agéntico, ya no es cuestión solamente de eh que vas a poder usar los componentes que ya tenías creados, como en tu sistema de diseño anterior, no agéntico, digamos, eh con sus diferentes estados, instrucciones, etcétera, sino que la te va a poder proponer nuevos componentes y tú pues decidirás si te interesan, si no cómo los vas a iterar, etcétera. OL ya tiene una mayor capacidad de proponer componentes en base a las guidelines que tú les has dado que anteriormente.

Por lo tanto, eh no sé si recordarás el primer nivel, si nos vamos a hacer el primer nivel donde estamos aún en un momento bastante pobre, bastante básico, ¿no? Con esa card de pricing minimalista, quiero una card o bueno, te paso una referencia para que me la card, ¿no? Recordemos esos niveles tan básicos al inicio hasta este momento al que hemos llegado, ¿no? Este momento eh importante, ¿no? tenemos ya el máximo nivel de contexto gracias a nuestro sistema de diseño agéntico.

Y de nuevo, aquí sí que te daré, al igual que antes te he dado, unos recursos donde oye, voy a poder eh rápidamente adquirir un sistema de diseño apalancándome en uno ya construido, como sería pues SHCN. Aquí en este caso en los sistemas de diseño agéntico estamos en un momento bastante inicial, pero sí que te quiero compartir una referencia que creo que es interesante de hacia dónde estamos yendo y te estoy hablando de eh Astrix.

Asterx es un sistema de diseño que es eh de meta, lo ha creado meta y es un sistema de diseño que está pensado para ser consumido por agentes y para trabajar con él eh mediante IA. Por lo tanto, nos da pistas de hacia dónde están yendo los sistemas de diseño actualmente y puede ser un buen ejemplo de contexto de nivel siete para que entiendas hacia dónde estamos yendo. Más allá de, por ejemplo, en el sistema en el en el nivel anterior donde teníamos por ejemplo un Shat CN con todos estos componentes que estamos hablando donde tenamos un por ejemplo un Park UI o un Daisy UI, pero no teníamos un sistema de diseño tan preparado o tan nativo, sobre todo, mejor dicho, tan nativo, porque Shafen es anterior, tiene, no digo que muchísimo tiempo, pero tiene tiempo ya. eh es eh a diferencia de ShaFZN o de DCUI, un Astrix es nativo de este momento, ¿no?

Está ha nacido pensado para eh esta era de los agentes, ¿no? De hecho, aquí eh eh el propio Meta te lo cuenta, ¿no? Es Agent Ready, ¿no? Bien, hasta aquí hemos llegado hasta el máximo nivel de contexto de diseño para IA. has pasado desde ese nivel uno donde pues eh decías cosas, ¿no? Como quiero una card minimalista y eh o o decir quiero una web minimalista y que lo que la ITD no sea la web de Apple y digas, "No, ¿cómo es posible? que yo tenía en mente la web de Apple, la IA no vale, eh, Open AI antropic son una basura, es una estafa.

Yo no quiero nada de esto. Has pasado de ese nivel donde lo que verdaderamente te ocurría era que no le estabas dando a la IA el contexto necesario y suficiente y por eso te defraudabas. Has ido subiendo de nivel, cada vez apalancándote de ese patrimonio que has ido construyendo, ¿no? De empezar teniendo referencias. De ahí a lo mejor me construyo un design.md MD en el nivel en el nivel cinco, ¿no? Donde ya empiezo un poco a guiar a la IA.

Luego incluso lo subo al siguiente nivel, ya tengo mis propios componentes, mis tokens donde este nivel seis, donde ya tengo mi sistema de diseño y luego ya incursiono al completo en la era de la IA y me voy incluso a un sistema de diseño agéntico, ¿no? vemos como has ido subiendo todos estos niveles y por lo tanto ya nunca más si quieres y si y si así lo trabajas vas a tener que frustrarte porque la IA te genere esos resultados genéricos que podíamos ver al inicio del vídeo, ¿no?

Con este AI slop absoluto, ¿no? poner este tipo de colores, este tipo de cards totalmente genérica y vas a poder, si quieres así pasar a niveles mucho más avanzado y ser uno de esos diseñadores que está construyendo cosas increíbles y que no está viviendo esta época como una época donde no creo en la IA, todo lo que produce es una basura, sino que vas a poder llevar tu trabajo como diseñador al siguiente nivel haciendo cosas que la realidad es que antes técnicamente eran muy difíciles, te hubiesen llevado mucho tiempo o aunque hubieses podido hacerlas, pues tal tardabas tantísimo y tenías que pasar tantos checks que prámente nunca llegasen a implementar.

Así que hemos pasado ya por todos los niveles de contexto y sí que quiero decirte algo y es que la mejor forma de subir de nivel es practicando y concretamente practicando en tu propio proyecto. construye tu propio proyecto, porque eso de ahí no solo te va a permitir subir tu nivel de IA, porque vas a tener un lugar donde aplicar lo que vas aprendiendo, vas a tener una excusa en la que trabajar, te vas a motivar, además, porque es tu propio proyecto, no solo te va a permitir todo esto, sino que además vas a tener un proyecto increíble para tu portfolio, porque un portfolio a día de hoy ya no es solamente un conjunto de pantallas bonitas hechas en Figma, sino que ahora un buen portfolio tiene proyectos reales, tiene proyectos que tú has construido y por eso he grabado un vídeo donde te cuento el proceso exacto para construir un proyecto para tu portfolio.

Un proyecto que no solo te va a permitir ser un diseñador de la era IA y vas a poder demostrarlo, sino que te va a ayudar a conseguir ofertas de trabajo. Y ese vídeo con todo este proceso exacto lo tienes aquí.