00:00:00hay un monstruo dentro de Claude code y se llama AI Slop.
00:00:03Gradientes púrpuras, fuente Inter para todo y el mismo diseño de tarjetas en cada
00:00:09página web. Ya sabes de qué tipo de AI Slop estoy hablando,
00:00:12pero hoy te voy a dar 10 herramientas diferentes para ayudarte a vencer a esta bestia
00:00:16y no, ninguna de ellas es la habilidad de diseño front-end. De hecho,
00:00:20muchas de estas herramientas son relativamente nuevas.
00:00:22Así que, incluso si has estado en el espacio de diseño de Claude code por algún tiempo,
00:00:26te prometo que hoy vas a aprender algo.
00:00:28Ahora, todas estas herramientas que vamos a revisar hoy sirven esencialmente para lo mismo
00:00:31y eso es darte una oportunidad de crear un diseño web front-end de alta calidad
00:00:35con Claude code, porque por muy bueno que sea Claude code,
00:00:39esa es una área en la que es extremadamente deficiente.
00:00:42Y la primera herramienta en la lista es Impeccable.
00:00:44Esta es una sola habilidad que incluye 18 comandos.
00:00:46Y dejaré el enlace en la descripción, así como el de todas las demás herramientas que cubriremos
00:00:50hoy.
00:00:51Me gusta mucho Impeccable porque lo que es capaz de hacer es de un alcance
00:00:55extremadamente amplio. Es una habilidad, pero son 18 comandos.
00:00:58Y si seguimos el enlace en el GitHub hacia impeccable.style,
00:01:01podemos ver todos sus comandos en acción. Y mejor aún,
00:01:05podemos ver el resultado genérico de la IA: fuente Inter, gradientes púrpuras,
00:01:09y la imagen del "después" usando los diferentes comandos. Por ejemplo,
00:01:15tenemos algo como "clarify",
00:01:16que trata sobre errores de UX y mensajes de error.
00:01:19Y puedes ver la diferencia entre los dos aquí.
00:01:21También tiene una extensión de Chrome,
00:01:23que resaltará esa estética de AI Slop directamente en tu página web,
00:01:28como en este ejemplo. Y me gusta mucho cómo esta habilidad usa anti-patrones.
00:01:32Básicamente le enseña a los modelos de lenguaje grandes
00:01:34qué aspecto tiene realmente el AI Slop: esos acentos en los bordes,
00:01:38esos bordes acentuados en pestañas laterales que ves en todas partes, ya sabes,
00:01:42gráficos de líneas, glassmorphism, ¿verdad?
00:01:45Simplemente vemos estas cosas una y otra y otra vez.
00:01:47Así que, ¿por qué no usar una habilidad que le diga a los LLM: "esto es AI slop" literalmente?
00:01:52En lugar de usar algo como la habilidad de diseño front-end, que es como:
00:01:54"por favor, no hagas AI slop", porque eso no funciona. Y como puedes imaginar,
00:01:58esta habilidad es bastante densa, como vemos aquí. Y sigo bajando.
00:02:03Y eso es porque tiene varias referencias para cada dominio de diseño
00:02:07específico.
00:02:08Casi puedes pensar en ellos como sub-habilidades y los mencionados 18 comandos
00:02:13diferentes. Ahora,
00:02:14la forma más fácil de ver todos estos comandos en acción es simplemente ir a la
00:02:17documentación de Impeccable. Y tal como viste en la página principal,
00:02:21puedes ver los ejemplos del antes frente al después.
00:02:25Y ver visualmente lo que todas estas cosas pueden hacer es mucho mejor que
00:02:29solo mirar la descripción y esperar que Claude code use lo que esperas.
00:02:33Y ni siquiera es algo puramente visual.
00:02:35Cuando miras habilidades como "adapt",
00:02:37se asegura de que realmente funcione en diferentes plataformas como móvil y tableta
00:02:41en lugar de solo escritorio. Así que te sugiero mucho que le eches un vistazo.
00:02:45Solo lleva fuera un mes. Ahora, antes de pasar a la herramienta número dos,
00:02:48un pequeño anuncio de mi masterclass de Claude code, que lancé el mes pasado.
00:02:52Y ya he publicado un montón de actualizaciones.
00:02:54Es el lugar número uno para pasar de cero a desarrollador de IA.
00:02:57Y el precio de esto va a subir en solo unos días.
00:03:01Así que si quieres conseguirlo, asegúrate de revisarlo.
00:03:04Hay un enlace en el comentario fijado. Ahora hablemos de la herramienta número dos,
00:03:06que es Skill UI. Esta es una herramienta de la que me enteré esta misma mañana.
00:03:12Ni siquiera lleva 24 horas publicada. Tiene siete estrellas.
00:03:15Estamos en el comienzo. Yo no hice esto. No conozco a este tipo.
00:03:18Simplemente vi que publicó sobre ello en Twitter.
00:03:21Estaba haciendo scroll infinito y vi esto y pensé: "parece una habilidad genial".
00:03:24Y nos permite aplicar ingeniería inversa a cualquier sistema de diseño para crear una habilidad lista para Claude.
00:03:29¿Qué significa eso? Significa que tomamos esta habilidad.
00:03:31La apuntamos a algún sitio web que ya existe.
00:03:34Y esencialmente analiza cómo se construyó ese sitio web y lo convierte en
00:03:39una plantilla, en una habilidad, esencialmente. Déjenme mostrarla en acción. Aquí,
00:03:45tenemos el sitio web de Stripe, un sitio web muy genial, con mucho contenido.
00:03:49Obviamente tiene muchos gráficos personalizados y cosas así.
00:03:52Es imposible para Claude code recrearlo necesariamente sin muchos de esos gráficos y visuales.
00:03:56Todavía. Pero digamos que me gusta el diseño general,
00:04:00cómo está configurado en cuanto a tarjetas y diseños.
00:04:03Y quisiera usar esto como base para mi propio sitio web. Bueno,
00:04:06en videos anteriores hemos hablado de formas en las que podemos hacer eso.
00:04:08Como mirar el HTML y todo eso, pero ya sabes,
00:04:11termina siendo una solución al 60 o 70%. Así que tomé esa habilidad Skill UI.
00:04:15La apunté a Stripe y luego dije: "Oye,
00:04:17hazme un sitio web falso de Stripe con ese estilo".
00:04:21Y esto es lo que generó en un solo intento. Eso fue todo lo que le dije.
00:04:25No le di más información y creó esto.
00:04:27Y definitivamente tiene un aire a Stripe. De nuevo,
00:04:32estos son gráficos personalizados en Stripe.
00:04:34No va a poder recrear eso solo con un prompt, pero,
00:04:39está bastante bien. De hecho, si me preguntas, ya sabes,
00:04:44todavía tiene algunas cosas estándar de IA.
00:04:47En cómo está configurado todo y los iconos,
00:04:50pero no hizo simplemente una caja bento de dos por dos con las tarjetas.
00:04:55Me gustan los colores que usaron. Me gusta el gráfico, pero aquí,
00:04:59esto es honestamente muy bueno para haber dicho solo: "Oye, mira el sitio
00:05:03web de Stripe y hazme una base". Y como lo convirtió en una habilidad,
00:05:06ahora tengo una habilidad de diseño de Stripe, que está solo a nivel de proyecto,
00:05:10pero podría usarla en cualquier momento.
00:05:12Así que digamos que quiero hacer otro sitio web que también use el estilo de Stripe.
00:05:16Puedo hacerlo, pero puedo apuntar Skill UI a cualquier cosa.
00:05:18Y puedes verlo en acción en el video de ejemplo que tiene en el GitHub,
00:05:22donde apuntó esta herramienta a Notion.
00:05:24Y luego le dijo a Claude code: "hazme esencialmente un clon de Notion".
00:05:27Y eso es lo que ves ahí mismo. Así que para usar esta habilidad,
00:05:30solo sigues los comandos de instalación aquí en la página de GitHub.
00:05:33Y tiene dos modos diferentes. Si quieres algo que, esencialmente,
00:05:38tome todo, como capturas de pantalla con scroll y diferentes interacciones,
00:05:41cuando pasas el ratón por encima, usa Playwright
00:05:45para descifrar todo eso. Así que no solo está mirando el HTML,
00:05:48como hacen las cosas normales, como mi habilidad personalizada de desglose de sitios
00:05:52ha hecho en el pasado. Si usas el modo ultra, realmente incorpora Playwright.
00:05:55Así que hay un cierto nivel de sofisticación aquí. En resumen,
00:05:58es una habilidad muy ingeniosa, estás en el comienzo. Si empiezas a usarla,
00:06:00serás como un usuario hípster de repositorios de habilidades de GitHub.
00:06:03Y te sugeriría mucho que hicieras esto si estás empezando un nuevo sitio web y
00:06:07no tienes idea de cómo deberías empezar desde cero, porque de nuevo,
00:06:10este es un gran punto de partida. Puedo editar lo que quiera desde aquí.
00:06:13Ahora, la herramienta número tres es una que, seré honesto, está un poco fuera de mi
00:06:17especialidad, pero me parece superinteresante.
00:06:19Estoy intentando aprender más sobre ella y usarla yo mismo.
00:06:21Y esa es una habilidad de WebGPU.
00:06:23Las WebGPU son esencialmente como componentes de diseño web donde la
00:06:28página web interactúa con tu tarjeta gráfica.
00:06:30Y esto nos permite crear animaciones supergeniales. Como ves aquí,
00:06:34como esto también.
00:06:36Cuando hablamos de... si viste mis siete niveles de diseño web con Claude code,
00:06:40e incluso vimos cosas como el sitio web de Igloo en el nivel siete,
00:06:44estaban usando cosas como WebGL y shaders personalizados.
00:06:47Este es el tipo de terreno del que hablo.
00:06:49Y esta habilidad le enseña a Claude code
00:06:52cómo escribir básicamente código que haga eso.
00:06:54Le dice cómo configurar el renderizado, cómo hacer shaders,
00:06:58cómo crear el material basado en nodos. Y al usar la habilidad,
00:07:00solo le di un par de prompts de texto y fue capaz de crear esto.
00:07:06¿Es esto tan genial como, ya sabes, esto otro? No,
00:07:08pero lo hice en dos minutos... bueno, en realidad tardó unos 10 minutos con la
00:07:13GPU, pero con un par de prompts y yo no tenía ni idea de lo que estaba haciendo.
00:07:16Así que, si este tipo de cosas te interesan, y de todas las herramientas de las que hablo
00:07:19aquí, esta es probablemente la más inusual,
00:07:22pero me gustó. Si te interesa esto,
00:07:26es una habilidad que deberías revisar porque te orienta en esa
00:07:28dirección.
00:07:29Pero obviamente esto es algo mucho más avanzado que simplemente cambiar
00:07:32el aspecto de nuestras tarjetas o la tipografía de un sitio web,
00:07:35pero es algo a tener en cuenta.
00:07:37La herramienta número cuatro es uno de los repositorios de IA más populares del último mes.
00:07:41Y se trata de awesome-design.md. Es este de aquí, con más de 50.000 estrellas a estas alturas.
00:07:46Así que ha estado arrasando totalmente.
00:07:48Y esto es similar en cierto sentido a la herramienta Skill UI de la que hablamos porque
00:07:52es una habilidad que nos permite mirar otros sitios web que ya existen y
00:07:57usarlos un poco como plantilla para un sitio web que vayamos a construir. Ahora,
00:08:01Awesome Design está muy influenciado por Stitch.
00:08:04Y hablaremos de Stitch un poco más adelante.
00:08:06Stitch tiene este concepto de design.md, archivos markdown de diseño,
00:08:11y son simplemente prompts que describen cómo deberías construir tu sitio web.
00:08:14La diferencia es que Google hizo un muy buen trabajo creando estos prompts.
00:08:18Como ves aquí. Y se vuelve muy, muy específico sobre cuál es la visión general.
00:08:22Cuál es el objetivo principal, cómo manejamos los colores... simplemente añade una gran estructura.
00:08:26En lugar de, otra vez, algo como la habilidad de diseño front-end de Claude code,
00:08:29que es como: "bueno, hagamos las cosas de esta o esta otra manera".
00:08:32Esto es mucho más concreto sobre lo que necesita hacer.
00:08:34Y así ha tomado esa idea de estos prompts de sistemas de diseño muy específicos y
00:08:39esencialmente los ha creado para un montón de sitios web diferentes en un montón de
00:08:43dominios diferentes. Así que algo como ElevenLabs,
00:08:47hago clic en él aquí.
00:08:50Puedo ver esencialmente toda la idea de diseño de ElevenLabs
00:08:55desglosada: elementos de formulario, ejemplos de tarjetas, botones, encabezados,
00:09:00tipografía, colores, todo eso. Y no es solo esa vista previa en vivo.
00:09:04Vemos que es el prompt real que luego podemos pasarle a Claude code. Y de nuevo,
00:09:07tienen un montón de sitios web aquí, incluyendo cosas que no son de texto,
00:09:10cosas como Bugatti, ¿verdad? Es decir, esencialmente,
00:09:15esto te está dando las piezas de construcción de algún sitio web que te gusta para que puedas construir
00:09:19el tuyo usando esas mismas piezas.
00:09:21Así que mientras la herramienta Skill UI que vimos antes básicamente mira cualquier sitio web que
00:09:25quieras y luego lo construye por ti.
00:09:26Esto simplemente desglosa las partes que lo componen.
00:09:29Y luego depende de nosotros construirlo. Ahora, tras elogiar Awesome Design,
00:09:33lo justo es que para la herramienta número cinco,
00:09:35hablemos de la aplicación que realmente la inspiró.
00:09:38Y esa es la propia Stitch de Google. Stitch es genial.
00:09:41Si quieres empezar desde un enfoque visual antes de salir ahí fuera y
00:09:46empezar a construir tu página web.
00:09:48Lo que haces es entrar en Stitch y simplemente le das un prompt de lo que
00:09:50estás intentando construir. Esto puede incluir capturas de pantalla de inspiración.
00:09:53Lo que va a hacer es crear ese mismo tipo de archivo design.md
00:09:57que viste antes, pero en su hábitat natural.
00:09:59Nos da un desglose de los colores, el tipo de tipografía, las etiquetas,
00:10:04los botones, y luego podemos ver por aquí todo el sistema de diseño,
00:10:08el mismo tipo de design.md que viste antes,
00:10:11pero ahora personalizado para lo que sea que le hayas pedido. Y una vez que hace eso,
00:10:14luego te da un montón de variaciones del tipo de sitio web que vas a
00:10:18crear. No es solo la sección principal. Lo hace todo.
00:10:20Y una vez que crea esa maqueta, puedo editarla como desee, puedo hacer clic en ella.
00:10:25Puedo ir al botón derecho. Puedo obtener variantes específicas.
00:10:28Puedo personalizar las diferentes variantes. Puedo cambiar de,
00:10:31quiero tres variantes, cinco variantes. Puedo darle un rango creativo,
00:10:34instrucciones, etcétera, etcétera.
00:10:35Básicamente tengo un montón de formas diferentes de generar un montón de visuales de mi
00:10:40posible sitio web. Y esto es genial porque es difícil.
00:10:43Cuando estás dentro de Claude code y cada vez que quieres hacer un cambio visual,
00:10:46¿verdad? Tiene que escribir el código. Tienes que iniciar el servidor de desarrollo.
00:10:48Tienes que revisarlo en la página web. Y a menudo cuando hacemos estas cosas,
00:10:52especialmente desde un punto de vista de diseño front-end,
00:10:56quiero ver las opciones frente a mí, ¿verdad?
00:10:58Es mucho más fácil para mí ver estas tres y decir: "vale, odio esta,
00:11:02odio esta otra. Quizás me guste esta", en lugar de: "vale, no, Claude code, inténtalo de nuevo".
00:11:06No. Inténtalo de nuevo. No. Así que esto también es gratis,
00:11:11lo cual es genial. Y lo que sea que construya aquí,
00:11:13es muy fácil de transferir a Claude Code porque si hago clic en el que
00:11:16me gusta, voy a "más" y puedo ver el código.
00:11:19Luego puedo copiar el código y llevarlo a Claude Code.
00:11:23Incluso puedes hacer cosas como copiar a Figma.
00:11:25También puedes llevarlo a AI Studio,
00:11:27pero el camino más fácil a Claude Code es exportar y copiar al portapapeles.
00:11:31Hay un MCP. Así que puedes hacer todo esto a través de la terminal de Claude Code.
00:11:35Pero, para ser honesto, no entiendo muy bien qué ventaja te da.
00:11:39Siento que estar involucrado en estos sentidos visuales vale la pena.
00:11:43De hecho, tengo un análisis profundo sobre Stitched en Claude Code y lo enlazaré
00:11:46arriba si quieres ver más de esto en acción. Ahora,
00:11:49debates si poner la habilidad número seis en este video porque siento que se está
00:11:52volviendo muy ubicua. Casi todo el mundo sabe que existe, pero nunca se sabe.
00:11:55Podría ser la primera vez que alguien la ve. Y esa es la habilidad UI UX pro max.
00:12:00Creo que este es el sucesor espiritual o lo que
00:12:05la habilidad de diseño front-end de Anthropic debería ser. Imagina una habilidad
00:12:09de diseño front-end de Anthropic que esté realmente entrenada en diferentes
00:12:14convenciones para distintos tipos de sitios web en diversos dominios porque
00:12:19no todos los sitios web necesitan parecerse a un SaaS, como un SaaS de nivel B.
00:12:23Y de eso se trata esta habilidad.
00:12:25Es un generador de sistemas de diseño inteligente.
00:12:27Así que en realidad te va a hacer preguntas.
00:12:29Va a averiguar de qué trata tu sitio web,
00:12:31de qué trata tu servicio, y luego lo diseñará basándose en su función.
00:12:35Tiene 161 reglas de razonamiento específicas de la industria.
00:12:39Realmente construyeron esta herramienta a fondo.
00:12:43No vas a obtener esa especie de basura genérica de IA sin habilidad,
00:12:47y no vas a obtener lo que se está convirtiendo lentamente en la versión
00:12:51de Claude Code de basura de IA con la habilidad de diseño front-end.
00:12:52También está construida con mucha orientación específica para el stack.
00:12:55Así que no te empujan solo a algo como React y, en última instancia, es una gran
00:13:00habilidad si no tienes ni idea de hacia dónde quieres ir.
00:13:04Mucho de lo que ya hemos hablado requiere que tengas alguna idea de
00:13:09lo que quieres, especialmente si tienes un sitio web de ejemplo, ¿verdad?
00:13:12Cuando vimos Skill UI, si tengo un ejemplo,
00:13:15puedo prácticamente copiarlo, y lo mismo con Awesome Design.
00:13:19Es como si estuviera eligiendo entre estos sitios web que ya existen.
00:13:21Si no quieres ir por ese camino,
00:13:22pero aún estás algo confundido sobre dónde deberías estar, usa esta habilidad.
00:13:26Es un gran punto de partida.
00:13:28Ahora, la herramienta número siete trata sobre componentes y realmente clavar los detalles
00:13:33de nuestra página web. Y ahí es donde entra 21st.dev,
00:13:36que es un sitio con un millón de componentes diferentes para elegir e
00:13:40integrar directamente en nuestro sitio web. Por ejemplo,
00:13:43digamos que estoy tratando de resolver algo para nuestra página principal.
00:13:46Bueno, simplemente voy a la sección de héroes en 21st.dev y busco uno.
00:13:51Me gusta, digamos, esta página de héroe que utiliza Spline.
00:13:56Tiene este robot que realmente sigue mi ratón. Bueno,
00:14:00en lugar de averiguar cómo usar Spline y escribir ese código,
00:14:04simplemente entro en 21st.dev.
00:14:06Copio el prompt haciendo clic en el botón de copiar prompt de arriba.
00:14:09Voy a Claude Code y lo pego, ¡boom! Tendré esto como mi sección de héroe.
00:14:14Ahora,
00:14:15obviamente las secciones de héroe son probablemente lo más pesado que podríamos
00:14:19importar en nuestra web porque si tenemos una página con un robot mirando
00:14:22por todos lados, todo el sitio tiene que encajar con esa estética. Por suerte,
00:14:26creo que se obtiene el mayor valor de algo como 21st.dev cuando se trata de
00:14:29los componentes más pequeños y los pequeños adornos como los botones, ¿verdad?
00:14:33Solo el hecho de que este botón tenga esta pequeña luz.
00:14:36Cuando lo muevo, comparado con un botón estándar, es algo que hará
00:14:39que tu sitio web se vea mejor; o tarjetas que tengan esta,
00:14:43bueno, especie de animación de iluminación que sigue a mi ratón o algo así. De nuevo,
00:14:46son estos pequeños detalles menores, estas sombras brillantes.
00:14:49Este es el tipo de cosas que elevan tu página web,
00:14:52la hacen parecer más premium y simplemente muestran que te importó.
00:14:56Y que realmente lo intentaste. Y si no hay nada más,
00:14:59lo que esto debería hacer es simplemente darte inspiración porque
00:15:03no hay nada que diga que no puedes copiar un prompt para cualquiera de estos
00:15:07componentes, ya sean bordes, héroes o lo que sea,
00:15:09y luego ajustarlo a tu gusto con Claude Code.
00:15:12No es una cuestión de todo o nada.
00:15:14Y creo que especialmente para aquellos de nosotros que no venimos de un entorno
00:15:17de diseño web, yo ciertamente no vengo de ahí, ya sabes,
00:15:19simplemente no sabes lo que no sabes y estar expuesto a todas estas diferentes
00:15:23formas en que podemos crear un botón hace que tu mente se mueva en distintas
00:15:26direcciones. Y te ayuda con el tiempo.
00:15:29Cuanto más te expones a ello, más desarrollas tu propio gusto y descubres
00:15:32qué es lo que te gusta. Pero hasta que no ves estas cosas,
00:15:34ni siquiera sabes lo que te gusta.
00:15:36Todo lo que has visto es lo que Claude Code te da.
00:15:39Así que te sugiero encarecidamente que eches un vistazo; casi todo esto es gratis y
00:15:43deberías estar integrando al menos algunas de las cosas más pequeñas,
00:15:46como la forma en que hacen los botones y las tarjetas, en tu próxima página web.
00:15:49Ahora, la frase que escuchas una y otra vez estos días es que la IA no tiene gusto.
00:15:53Bueno, ¿y si le diéramos el gusto como una habilidad? Bueno,
00:15:56eso es lo que intentamos hacer con la herramienta número ocho.
00:15:59Y ese es el repositorio Taste Skill.
00:16:01Es una colección de habilidades que intenta dar a Claude
00:16:06Code algo de gusto, es decir, alejarse de la basura de la IA,
00:16:11que es el tema que ves una y otra vez.
00:16:13Esta habilidad de gusto incluye varias sub-habilidades diferentes como ves aquí,
00:16:17y tiene diferentes configuraciones. Así que puedes ajustar qué tan,
00:16:21abstracta se vuelve comparada con una generación de IA normal.
00:16:24Y lo que ves aquí es un ejemplo de algunos de los sitios web que se han
00:16:28creado usando esta habilidad. Y de inmediato,
00:16:31notas que es un poco diferente, ¿verdad? Quiero decir, no es algo asombroso,
00:16:36pero de entrada es diferente, y lo diferente es bueno.
00:16:38Cuanto menos se parezca a cada plantilla de SaaS, mejor.
00:16:41Y muchos de estos incluyen cosas como animaciones de scroll y, ya sabes,
00:16:46no estamos viendo cajas bento una y otra vez.
00:16:47Así que esta es una habilidad genial, quizás secundaria, que podrías al menos
00:16:52probar y ver cómo le va en comparación con tus generaciones normales de Claude Code.
00:16:56Ahora, la herramienta número nueve les parecerá muy simple a muchos de ustedes,
00:16:59pero se sorprenderían de la cantidad de personas que no saben que Google
00:17:03Fonts existe.
00:17:05Google Fonts es un repositorio gigante y gratuito de un billón
00:17:10de fuentes diferentes que puedes usar en literalmente todos tus proyectos de código.
00:17:14No necesitas ser un esclavo de Inter o de las
00:17:18cinco fuentes que Claude Code usa para todo.
00:17:20Puedes ir a Google Fonts y está desglosado por apariencia,
00:17:24por sentimiento, ya sabes, por familia, y decirle a Claude Code: usa esto,
00:17:29usa aquello; Claude Code también tiene acceso a todas ellas.
00:17:31Porque la tipografía es una parte enorme,
00:17:34enorme de cómo se ve y se siente tu diseño. Además,
00:17:38puedes usar Claude Code para ayudarte a buscar en Google Fonts.
00:17:42Simplemente dile a Claude Code el tipo de sitio web que estás construyendo,
00:17:45el tipo de sentimiento que buscas.
00:17:47Y debería darte un ejemplo o cinco tipos de fuentes para mirar.
00:17:50Puedes verlo en tiempo real aquí. De nuevo,
00:17:53no quieres dejarlo todo al azar y que dependa de cómo se
00:17:57sienta Claude ese día respecto a qué fuente te va a dar, porque
00:18:01va a parecer Inter; siempre es Inter, siempre. Y por último, pero no menos importante,
00:18:05la herramienta número 10, Playwright CLI.
00:18:06Ahora, Playwright CLI no es una herramienta de diseño per se,
00:18:10aunque es algo de lo que ya hemos hablado en el pasado con Skill UI y
00:18:13su capacidad para salir ahí fuera y tomar capturas de pantalla de páginas web.
00:18:15Así que puedes usarla como una especie de herramienta de investigación e ideación.
00:18:19En lo que realmente quiero centrarme, sin embargo,
00:18:21es en la idea de forma y función y en que cuando construimos cosas en el front-end,
00:18:25piensen en algo tan simple como una página de envío de formulario,
00:18:27vamos a tener que probarla.
00:18:29Vamos a tener que asegurarnos de que estas cosas realmente funcionen.
00:18:32Y la forma más fácil de hacerlo a escala es Playwright CLI, no Playwright MCP.
00:18:36El CLI es mucho más efectivo.
00:18:38Y la forma en que lo hacemos es que, una vez que creas tus cosas de diseño front-end,
00:18:41todo lo que tienes que hacer tras instalar la herramienta CLI es decirle a Claude Code:
00:18:44Quiero que pruebes cada interacción en esta página usando Playwright CLI.
00:18:49Creará un montón de instancias diferentes de Chrome.
00:18:52Puedes hacer que sea visible si realmente quieres verlas o invisible (headless).
00:18:55Así que es invisible y lo probará por su cuenta.
00:18:57Esto hace que todo el proceso de diseño front-end vaya mucho más rápido porque
00:19:02creo que todos hemos estado ahí, cuando añadimos algo y luego queríamos verlo.
00:19:05Y luego queremos probarlo y simplemente toma una eternidad,
00:19:06especialmente cosas como los envíos de formularios,
00:19:08donde hay toneladas de casos límite con cómo algún usuario extraño va a
00:19:13entrar ahí y realmente poner su información.
00:19:15Así que esas son mis 10 habilidades favoritas de Claude Code relacionadas
00:19:20con el diseño, plugins y CLIs. Espero que al menos algunas de ellas fueran nuevas para ti.
00:19:24Digo, Skill UI, mejor que solo tres personas supieran de esto. Así que, eh,
00:19:29pero sí, el espacio del diseño front-end,
00:19:31me parece súper interesante con Claude Code porque es muy malo en ello desde
00:19:36un punto de vista del gusto.
00:19:37Aunque odio decir incluso la palabra gusto estos días porque es de lo único de lo que
00:19:40se habla, pero como Claude Code es malo en eso,
00:19:42eso debería ser algo bueno para ti como individuo, ¿verdad?
00:19:46Porque ese es ahora un espacio donde puedes diferenciarte del resto,
00:19:50y cada vez que puedes diferenciarte de todos los demás que se están subiendo a
00:19:55Claude Code estos días, eso es algo bueno.
00:19:57Y estas habilidades y herramientas pueden ayudarte a hacerlo. Así que, como siempre,
00:20:00déjame saber qué te pareció.
00:20:01Asegúrate de echar un vistazo a Chase AI Plus si quieres acceder a la
00:20:04masterclass, y nos vemos por aquí.