Claude Code acaba de recibir su mejor actualización de diseño del año (y así es como puedes dominarla)
CChase AI
Computing/SoftwareInternet Technology
Transcript
00:00:00Claude Code acaba de recibir su mayor actualización en sus capacidades de diseño front-end en mucho tiempo con la nueva habilidad Slash Design.
00:00:07Ahora, la habilidad Slash Design toma esencialmente lo mejor de la aplicación web independiente Claude Design, que ves aquí, y la inserta en el propio Claude Code.
00:00:16En lugar de tener que saltar entre dos aplicaciones separadas o transferir torpemente tus diseños de Claude Design a Claude Code, ahora tenemos lo mejor de ambos mundos.
00:00:25Además, obtenemos la funcionalidad adicional de todas las habilidades que ya usamos dentro de Claude Code.
00:00:30Por lo tanto, podemos combinar esta nueva función Slash Design con cosas como Impeccable o la habilidad Taste, dándonos resultados mucho mejores.
00:00:36Así que hoy no solo te voy a mostrar cómo funciona Slash Design, sino que te daré el mejor flujo de trabajo para sacarle el máximo provecho.
00:00:42Por lo tanto, si haces cualquier trabajo de diseño front-end con Claude Code, querrás quedarte para este video.
00:00:46Ahora, el atractivo de la habilidad Slash Design es lo que ves aquí mismo.
00:00:49Ahora estoy dentro de la aplicación de escritorio de Claude, pero lo mismo aplica si estás usando la terminal.
00:00:53Y la idea es que cuando uso la barra diagonal y diseño y le pido que cree algo para mí, va a generar una mesa de trabajo muy similar a la aplicación web de Claude Design.
00:01:02Tengo múltiples opciones para elegir, y cuando miro estas opciones, puedo ser muy detallista con los cambios.
00:01:09Como puedes ver a la derecha, al hacer clic en diferentes componentes del diseño front-end que ha creado, puedo cambiar prácticamente todo.
00:01:17Además de eso, puedo pedir muy fácilmente múltiples versiones del mismo tipo de resultado, y una vez que me gusta una versión en particular, puedo hacer que Claude Code se ponga a trabajar y codifique esto.
00:01:27Esto me ahorra un montón de tiempo en comparación con estar dentro de la aplicación web de Claude Design, hacer todo, decir que quiero transferirlo, ponerlo en un archivo zip, soltarlo en la carpeta, apuntarlo en Claude Code, hacer toda esa molesta rutina.
00:01:38Y más allá de ser conveniente, como mencioné antes, ahora podemos combinar habilidades.
00:01:43Cuando estoy dentro de la aplicación web de Claude Design, no necesariamente puedo usar o invocar algo como la habilidad Impeccable o la habilidad Taste.
00:01:49Puedo hacerlo aquí.
00:01:50Así que en última instancia, mis resultados van a ser mucho mejores, además de ser más convenientes.
00:01:54Ahora, usar la habilidad de diseño es muy fácil.
00:01:56Todo lo que haré es escribir slash design y luego le daré la instrucción de lo que estoy intentando crear.
00:02:01Digamos que quiero crear una publicación para redes sociales, o pensar en algo como una publicación de Instagram, detallando lo que hace la nueva habilidad slash design.
00:02:10Y digamos que quiero crear tres variaciones de esto en tres estilos de diseño muy separados, y quería usar la habilidad Impeccable.
00:02:19Simplemente voy a abrir mi micrófono y decir algo exactamente así.
00:02:22¿Podemos crear una maqueta para una publicación en redes sociales?
00:02:27Piensa en esto como algún tipo de publicación de Instagram que detalle lo que hace la nueva habilidad slash design de Claude Code.
00:02:34Quiero tres variaciones extremadamente diferentes, estilos de diseño muy diferentes, estilos estéticos muy diferentes.
00:02:41Y cuando hagas esto, quiero que invoques la habilidad Impeccable para ayudarte a crearlo.
00:02:45Ahora, si hiciera exactamente la misma habilidad dentro de la aplicación de escritorio de Claude, se va a poblar dentro de este tipo de panel lateral, que es más o menos por qué me gusta hacer esto dentro de la aplicación de escritorio, porque todo está en un solo lugar.
00:02:57Dentro de la terminal, lo que verás es que va a crear un artefacto, por lo que esencialmente se abrirá en mi navegador.
00:03:02Así que, aunque no es tan conveniente como una aplicación de escritorio, sigue siendo bastante fácil hacer las cosas.
00:03:06Ahora, antes de ver el artefacto, unas breves palabras del patrocinador de hoy, yo.
00:03:10Acabo de lanzar una versión actualizada de mi Claude Code Masterclass, y es la forma número uno de pasar de cero a desarrollador de IA, especialmente si no vienes de un entorno técnico.
00:03:19Nos centramos en casos de uso reales, casos de uso prácticos, y actualizo esto todas las semanas.
00:03:24Así que si eres alguien que está intentando averiguar cómo usar realmente esta loca herramienta, entonces esto es para ti.
00:03:32Puedes encontrarlo dentro de Chase AI+.
00:03:33Hay un enlace en el comentario fijado.
00:03:35Y aquí tienes un vistazo al artefacto que creó.
00:03:37Así que tenemos tres estilos de diseño diferentes para nuestras publicaciones de Instagram, tal como vimos dentro de la aplicación de escritorio.
00:03:44Tenemos esta barra de propiedades aquí a la derecha.
00:03:46Puedo hacer zoom, puedo hacer clic en algo y empezar a obtener muchos más detalles sobre lo que estoy ajustando exactamente.
00:03:52También notarás aquí arriba a la derecha, tenemos una sección de ajustes, que ahora mismo está vacía.
00:03:57En cualquier momento, puedo pedirle a Claude Code que me dé un panel de ajustes, tal como lo verías dentro de la aplicación web de Claude Design.
00:04:03Y puedo ajustar aún más cosas de las que veo aquí mismo.
00:04:07Así que en términos de usar realmente esta cosa, es relativamente simple.
00:04:10Solo escribe slash design y pide lo que quieras.
00:04:12Ahora, ¿cómo debería ser realmente nuestro flujo de trabajo?
00:04:14¿Cómo le sacamos el máximo provecho?
00:04:16Bueno, hay un flujo de trabajo simple de tres pasos que debes usar cada vez que hagas cualquier tipo de diseño front-end con Claude Code.
00:04:22Y el primer paso va a ser la inspiración, porque lo que quiero darle a Claude no es solo un mensaje diciendo, oye, quiero tres cosas diferentes.
00:04:30Lo que idealmente quiero darle a Claude Code son algunos ejemplos.
00:04:33Quiero tomar capturas de pantalla de carteles que me gusten.
00:04:35Quiero tomar capturas de pantalla de estilos de diseño que disfrute.
00:04:39Alimentar con eso a Claude Code y decir, oye, ¿puedes crear algo en la misma línea que esto?
00:04:43Ahora mismo solo estamos trabajando en un cartel, pero esto también aplicaría si estuvieras creando una página de destino o una sección principal o cualquier cosa por el estilo.
00:04:50Ahora, tu siguiente pregunta debería ser, ¿dónde puedo encontrar inspiración?
00:04:52Y por suerte, hay un montón de lugares para obtener ideas.
00:04:55Un buen sitio web es Pinterest.
00:04:57Simplemente busqué infografía de Instagram y veo todos estos diseños potenciales.
00:05:01Otro bueno es Landbook, que es realmente bueno para el diseño web y secciones principales.
00:05:06Y también tenemos cosas como Dribbble, y eso es Dribbble con tres bes.
00:05:11La idea es que solo necesitas salir y realmente deberías empezar a crear algún tipo de biblioteca de diseños a los que siempre puedas hacer referencia y traer a Claude Code cuando quieras diseñar algo.
00:05:21Para que no tengas que repetir este proceso de inspiración cada vez.
00:05:24Así que voy a tomar algunas capturas de pantalla de algunas que más o menos me gustan.
00:05:27Esta me gusta.
00:05:29Creo que esto se ve bastante interesante.
00:05:31Y recuerda, solo buscas una estética general de la que quieras que Claude extraiga ideas.
00:05:36Y creo que esta también se ve bastante interesante.
00:05:39Así que ahora voy a arrastrar esas tres capturas de pantalla a la ventana de comandos.
00:05:43Y ahora esencialmente le voy a dar la misma instrucción que le dimos antes, como, oye, quiero ese tipo de publicación de Instagram.
00:05:48Quiero tres versiones diferentes.
00:05:49Excepto que esta vez, voy a decir, haz referencia a estas capturas de pantalla.
00:05:52Quiero que se utilicen como inspiración.
00:05:54Puedes tener un tipo de diseño diferente para cada captura de pantalla.
00:05:59Y también voy a decir, oye, asegúrate de usar la habilidad Impeccable.
00:06:02Y también le diré que, si quiere generar recursos externos, use algo como el MCP Higgs field que tengo.
00:06:09Podrías usar otras cosas, como si tienes file.ai para otros generadores de imágenes.
00:06:14La idea es que, como ya estamos dentro de Claude Code, podemos traer lo que queramos a este proceso de diseño.
00:06:19Y de nuevo, no tienes que usar imágenes externas si no quieres.
00:06:23Pero así es como va a sonar mi instrucción.
00:06:25Así que vamos a recrear realmente estas tres publicaciones que hemos hecho.
00:06:29De nuevo, estamos usando la habilidad slash design.
00:06:31Pero he dejado tres capturas de pantalla aquí.
00:06:33Y me gustaría usarlas como inspiración para nuestro proceso de diseño.
00:06:37Así que quiero tres nuevas generaciones.
00:06:39Haz una generación que extraiga ideas de cada una de estas capturas de pantalla apropiadas.
00:06:43Nuevamente, usa la habilidad de diseño Impeccable.
00:06:45Y recuerda, tienes acceso al MCP Higgs field.
00:06:48Así que si sientes que necesitas generar recursos externos que podamos usar para los carteles, hazlo también.
00:06:55Dejo eso a tu discreción.
00:06:56Y esos son realmente el paso uno y dos de este proceso.
00:06:59El paso uno es encontrar la inspiración.
00:07:00Y el paso dos es usar realmente esas habilidades adicionales que realmente no podemos usar dentro de la aplicación web de Claude Design.
00:07:08Y si estás pensando, oye, sigues mencionando Impeccable, no tengo idea de qué es esto.
00:07:11Esta es solo una habilidad gratuita de código abierto que puedes agregar a Claude Code.
00:07:16Y se trata completamente de diseño front-end.
00:07:18Esencialmente, su truco principal es que reconoce cómo se ve la basura generada por IA, se deshace de ella y agrega mejores principios de diseño a lo que sea que estés creando.
00:07:26Y si quieres profundizar más en eso, tengo videos que entran en detalle sobre cómo usar mejor Impeccable.
00:07:31Y ahora aquí hay un vistazo a los nuevos carteles que Claude creó usando Slash design.
00:07:35Y puedes ver que definitivamente se inspiran en la inspiración que le dimos.
00:07:39Y en cualquier punto, al igual que antes, puedo hacer zoom aquí.
00:07:43Puedo echar un vistazo a las propiedades y puedo empezar a editar cosas.
00:07:46Ahora, hablemos de los ajustes.
00:07:49Así que este diseño aún no tiene controles ajustables.
00:07:50Describe lo que quieres ajustar y Claude agregará un panel de ajustes para ello.
00:07:53Bueno, hagamos eso porque ahora estamos en el paso tres del proceso donde queremos empezar a ajustar las cosas hasta que nos guste.
00:08:00Así que lo que voy a hacer es abrir la terminal, dónde estás, y decir, oye, ¿podemos agregar algunos controles ajustables aquí?
00:08:10Me gustaría que los ajustes fueran muy agresivos.
00:08:12Así que quiero poder editar casi cualquier cosa tanto como pueda, como tanto como sea posible usando el panel de ajustes dentro de Claude Design.
00:08:21Así que ahora puedes ver esta parte de ajustes aquí a la derecha.
00:08:24Y estamos mirando este del medio.
00:08:25¿Así que puedo cambiar el color del papel, verdad?
00:08:29¿Qué queremos hacer aquí?
00:08:30Y también recuerda, estos ajustes pueden darte ideas.
00:08:33Así que en cualquier momento, puedes volver a Claude Code y pedir estos diferentes cambios.
00:08:39De nuevo, lo importante de ver todo esto visualmente es que puedo iterar muy rápido en lugar de tener que pedirle a Claude Code, esperar la generación, ver si me gusta, pedirle a Claude Code, esperar la generación, ¿verdad?
00:08:52Esto hace que todo el proceso sea mucho más rápido.
00:08:55Podemos cambiar el aspecto del texto.
00:08:58Puede cambiar el tamaño real, el grosor, el interlineado, etcétera.
00:09:03Así que todo lo que ves aquí se puede editar.
00:09:06Pero también recuerda que podemos hacer grandes cambios.
00:09:08No me gusta el aspecto general del segundo.
00:09:12También podemos hacer eso.
00:09:13Puedo darle otra instrucción diciendo que no me gusta el contenido real de esto.
00:09:17Quiero que se centre más en explicar a la gente lo que hace slash design.
00:09:21Así que puedo decir algo como para el diseño, el segundo, me gustaría usar ese.
00:09:26Pero para ser honesto, me gustaría cambiar el contenido.
00:09:29Buscamos algo como una infografía que explique lo que slash design ofrece realmente.
00:09:34Así que cuando lo recrees, puedes ignorar los otros dos.
00:09:36Solo quiero centrarme en ese por ahora.
00:09:38Ve a una búsqueda web, asegúrate de entender lo que slash design aporta realmente y ponlo en la nueva versión de esta infografía.
00:09:48Y aquí está la versión actualizada de ese póster.
00:09:49Como ves, hay mucha más información sobre lo que hace el nuevo slash design.
00:09:53Y de nuevo, como usamos esta nueva habilidad de slash design, es muy fácil de editar.
00:09:56Oh, no me gusta el texto de aquí.
00:09:59Puedo moverlo a donde quiera.
00:10:00Puedo ajustar el texto en sí, etcétera, etcétera.
00:10:03A partir de aquí, continúas ese proceso de tres pasos: inspiración, uso de las habilidades correctas e iteración en el diseño que te guste.
00:10:11Si queremos elegir el del medio, le diríamos a Claude Code que solo queremos trabajar con ese.
00:10:16E iterarías e iterarías hasta que te guste lo que has creado.
00:10:20Y luego puedes hacer lo que quieras con ello.
00:10:22En general, esta habilidad de slash design facilita mucho el diseño front-end dentro del propio Claude Code.
00:10:28A menudo, teníamos que depender de herramientas externas como Impeccable para hacer este tipo de diseño web en vivo.
00:10:34Así que tómate el tiempo de probar esta nueva función.
00:10:36Creo que es perfecta para cualquiera que use Claude Code pero le haya gustado la aplicación web Claude Design y le pareciera incómodo cambiar entre ambas.
00:10:45Ese es el nicho.
00:10:46Esa es la audiencia a la que se dirige.
00:10:48Así que, como siempre, dime qué te ha parecido.
00:10:51Asegúrate de revisar Chase AI Plus si quieres acceder a mi clase magistral de Claude Code.
00:10:55Y aparte de eso, nos vemos luego.