00:00:00Claude design es lo mejor que le ha pasado
00:00:01a tu trabajo de frontend desde que aparecieron las habilidades.
00:00:05Pero si no sabes lo que estás haciendo,
00:00:06agotarás toda tu cuota de uso
00:00:09antes de que puedas montar una página de aterrizaje.
00:00:11Pero esta clase magistral de Claude design
00:00:12ayudará a resolver ese problema
00:00:14al mostrarte qué funciones realmente valen tu tiempo.
00:00:17Además de eso, haremos una prueba comparativa
00:00:19con Claude code normal frente a Claude design.
00:00:22Y hablaremos sobre algunos de los casos de uso interesantes
00:00:25que van más allá del simple trabajo de páginas de aterrizaje.
00:00:27Esta es una herramienta increíble y tenemos mucho que cubrir.
00:00:30Así que vamos a empezar.
00:00:31Entonces, Claude design es la respuesta de Anthropic a Stitch de Google.
00:00:35Y al igual que Google Stitch,
00:00:37nos da la capacidad de crear un montón de maquetas visuales
00:00:40para nuestras aplicaciones web, móviles e incluso presentaciones.
00:00:43Para acceder a Claude design, debe ser en la aplicación web.
00:00:45Es decir, claud.ai/design.
00:00:47No está disponible en Claude code
00:00:48y no está disponible en la aplicación de escritorio.
00:00:51Y hablando de limitaciones,
00:00:52una gran limitación que debemos señalar de inmediato
00:00:54son los límites de uso.
00:00:56Tiene su propio límite semanal y es el mismo límite
00:00:59tanto si estás en Pro, Max 5 o 20X.
00:01:02Y esto es un consumidor voraz de recursos,
00:01:05especialmente si usas una cierta herramienta
00:01:08de la que hablaremos más adelante en este video.
00:01:10Pero incluso con esas limitaciones,
00:01:11Claude design es un gran paso adelante
00:01:14cuando se trata de trabajo de diseño frontend con Claude.
00:01:17Cosas como el sistema de ajustes facilitan mucho ver
00:01:20cómo diferentes cambios ajustarían la sensación general
00:01:23de tu aplicación web.
00:01:23Cosas como editar te permiten entrar rápidamente en los detalles
00:01:28y cambiar las cosas a un nivel granular
00:01:30sin depender de prompts de texto.
00:01:31Pero si quieres seguir con el sistema de comentarios,
00:01:33podemos hacerlo.
00:01:34Tienen un botón de comentarios real
00:01:35donde puedo seleccionar partes individuales de la aplicación web
00:01:39y dejar comentarios que van directamente a Claude code
00:01:42o que se agregan a una cola de comentarios para que otros miembros de mi equipo
00:01:46añadan sus opiniones, porque esto es muy colaborativo.
00:01:48Puedes compartir estos diseños con otras personas
00:01:50y todos pueden trabajar en lo mismo desde diferentes lugares.
00:01:53Puedo dibujar en la aplicación para mostrar lo que quiero que se cambie.
00:01:56Puedo ver muy fácilmente la presentación en pantalla completa.
00:02:00Y lo más importante,
00:02:02puedo exportar esto muy fácilmente a Claude code.
00:02:05Y esta configuración visual hace que sea mucho más fácil
00:02:09obtener el tipo de resultados frontend que deseas
00:02:11en lugar de estar puramente dentro de Claude code
00:02:13y tener que hacer ese desarrollo de código con servidor que se actualiza,
00:02:18la dinámica que hemos tenido durante mucho tiempo.
00:02:19Pero para sacar el máximo provecho de esta herramienta,
00:02:21hay algunas cosas que debes saber.
00:02:22Así que primero comenzaremos con el trabajo de diseño frontend
00:02:25para una aplicación web, que es lo que la mayoría busca.
00:02:29Y también mostraremos lo que Claude code nos habría dado
00:02:33frente a Claude design.
00:02:34Así que puedes ver lo que estamos obteniendo aquí
00:02:37y si esto realmente vale la pena.
00:02:38Pero antes de hacer eso, una palabra rápida de nuestro patrocinador, yo mismo.
00:02:42Acabamos de lanzar la clase magistral de Claude code
00:02:44dentro de Chase AI plus.
00:02:45Y es la forma número uno de pasar de cero a desarrollador de IA,
00:02:48especialmente si no vienes de un entorno técnico.
00:02:51Y últimamente nos hemos estado centrando en nuestro sistema operativo agentico
00:02:54dentro de la clase magistral,
00:02:55donde usamos Claude code como motor
00:02:58y lo complementamos con Obsidian para la memoria,
00:03:00con GWS para adjuntar toda nuestra suite de Google.
00:03:03Y luego, con esta base,
00:03:05adjuntando todos y cada uno de los paquetes de habilidades personalizados,
00:03:09podemos idear lo que tenga sentido para nuestros casos de uso.
00:03:12E incluso hablamos de cómo empaquetar todo eso
00:03:14y venderlo a los clientes.
00:03:15Así que si eso es algo que te interesa,
00:03:17definitivamente échale un vistazo.
00:03:18Está dentro de Chase AI plus,
00:03:19habrá un enlace en el comentario fijado.
00:03:21Entonces, hablemos de Claude design y tu aplicación web,
00:03:24porque hay algunas decisiones que debemos tomar
00:03:26antes de empezar a darle prompts a esto.
00:03:28Y ahora me estaré moviendo por toda la pantalla
00:03:31durante este video, así que tenme paciencia.
00:03:32Ahora, la primera pregunta que nos haremos es:
00:03:35¿vamos a usar un sistema de diseño?
00:03:38Aquí, para mí, ves ninguno
00:03:40y ves un sistema de diseño de OS agentico.
00:03:42El tuyo dirá ninguno al principio.
00:03:44Si queremos crear un sistema de diseño,
00:03:47vamos a venir aquí arriba
00:03:48y vamos a ir a sistemas de diseño.
00:03:50Así que probablemente no tendrás nada aquí
00:03:52y presionarás crear.
00:03:53¿Qué es un sistema de diseño?
00:03:56Bueno, esencialmente es como una plantilla visual
00:04:00que puedes aplicar a cualquier proyecto que crees en el futuro.
00:04:03Así que si tienes fuentes específicas, usas logos específicos,
00:04:07cualquier cosa específica, incluso si es solo un estado de ánimo general,
00:04:10puedes hacerlo aquí.
00:04:11Aquí es donde configuras eso.
00:04:12Así no tienes que repetirte
00:04:13para cada proyecto individual.
00:04:15Si tienes algún tipo de línea conductora
00:04:17desde un punto de vista visual de diseño.
00:04:20Entonces ingresas el nombre de tu empresa
00:04:21y luego proporcionas ejemplos.
00:04:23Ahora, estos ejemplos pueden ser código.
00:04:25Así que puedo vincular un repositorio de GitHub.
00:04:27Puedo arrastrar una carpeta aquí.
00:04:29Puedo subir archivos.
00:04:30Puedo añadir fuentes, activos, lo que sea.
00:04:33Aquí es donde defines tu marca.
00:04:36Ahora, una advertencia.
00:04:39De esto es de lo que hablaba cuando decía consumidor de tokens.
00:04:42Y con consumidor de tokens, quiero decir que ejecutar un sistema de diseño
00:04:45tomará, A, entre cinco y 15 minutos
00:04:47porque lo ingiere todo, depende un poco del tamaño.
00:04:50Y B, esto tomará alrededor del 20 al 25% de tu uso
00:04:55de entrada.
00:04:56Así que entiende eso, no vengas aquí pensando,
00:04:57oh, lo primero que voy a hacer
00:04:58es crear cinco sistemas de diseño.
00:05:00Absolutamente no, absolutamente no.
00:05:02Haz uno si sabes lo que quieres hacer
00:05:05y te mostraré cómo se ve
00:05:07a medida que lo configuramos.
00:05:08Pero no hagas más que eso.
00:05:09Al menos no ahora, hasta que aumenten los límites
00:05:11que probablemente harán en el futuro.
00:05:12Así que consumidor de recursos, consumidor de recursos, consumidor de recursos,
00:05:16no dejes que esto te arruine.
00:05:17Ahora, si quieres hacer esto,
00:05:19simplemente llenarás todo esto
00:05:20y luego presionarás continuar a la generación
00:05:21y aparecerá un cuadro emergente que dirá algo como,
00:05:24oye, esto tomará de cinco a 15 minutos.
00:05:26Una vez que termine de ingerir todos esos activos,
00:05:29obtendrás algo como esto
00:05:30donde te pide revisar el borrador del sistema de diseño
00:05:33que ha creado.
00:05:34Lo que le di fue el código de mi panel de control de OS agentico
00:05:38que te mostré un poco antes.
00:05:40Tiene este tema de color de Claude.
00:05:43Tiene una fuente de texto específica, todo eso.
00:05:45Así que esto es lo que le di,
00:05:46fue esencialmente este tipo de visual.
00:05:48Y volvió con todo esto.
00:05:49Así que, oye, esto se ve bien.
00:05:53Esto se ve bien.
00:05:53Oye, mira esa mascota.
00:05:54Se ve algo familiar.
00:05:55Eso se ve bien.
00:05:57Voice revisa todos los colores.
00:05:59Así que llega a niveles muy, muy detallados
00:06:03de, está bien, ¿qué quieres que sean estos colores?
00:06:06¿Qué quieres que parezcan las tarjetas?
00:06:07Es muy específico.
00:06:08Es realmente agradable.
00:06:09Y de nuevo, muy parecido a Stitch.
00:06:11Muy, muy parecido a este tipo de cosas.
00:06:14Así que seguí adelante y aprobé todo.
00:06:16Dice que le falta la fuente de marca.
00:06:17Así que si tuviera fuentes específicas que siempre quisiera usar,
00:06:20también puedo subirlas.
00:06:21Y en cualquier momento puedo volver aquí
00:06:23porque desglosó todo el material de los componentes,
00:06:26hacer clic en él y luego echar un vistazo y editarlo según sea necesario.
00:06:30Y al igual que lo que verás más tarde
00:06:31con las páginas de aterrizaje reales y las presentaciones
00:06:33y todo eso, podemos compartir esto, verdad,
00:06:36a un equipo o lo que sea, o puedo exportarlo.
00:06:39Como PowerPoint, PDF, podemos enviarlo a Canva, HTML,
00:06:42Claude code, realmente, muy fácil, a solo un clic de distancia.
00:06:44Además, tenemos los archivos de diseño reales.
00:06:46Así que puedo mirar dentro de aquí y ver todo lo que está pasando,
00:06:50los archivos HTML reales y todo eso.
00:06:52Así que hay mucho que puedes personalizar y jugar aquí.
00:06:55No es una caja negra en absoluto, donde es como,
00:06:57bueno, espero que Claude design haya inventado algo bueno.
00:06:59¿Quién sabe qué está pasando debajo de la superficie?
00:07:01No, tienes información.
00:07:03Como, todo esto es código.
00:07:04Como, esta es una forma genial de crear código
00:07:06y podemos llevar ese código a nuestra propia máquina local
00:07:09en cualquier momento.
00:07:10No estamos atrapados aquí.
00:07:11Y así, para volver a Claude design y las aplicaciones web,
00:07:13esa es la primera pregunta que estamos respondiendo.
00:07:15¿Vamos a usar un sistema de diseño?
00:07:16¿Es esto algo en la misma línea visual
00:07:18de lo que hemos hecho en el pasado?
00:07:19Y más importante,
00:07:20¿incluso creaste un sistema de diseño?
00:07:22¿Has entregado tu 20% de tokens semanales
00:07:25a los dioses de Anthropic y ni siquiera tienen esta opción?
00:07:28Para esta demostración, nos quedaremos con nada.
00:07:30Así que todos estamos en la misma sintonía.
00:07:32La siguiente pregunta es, oye,
00:07:33¿quiero hacer un wireframe o quiero alta fidelidad?
00:07:37Lo más probable es que quieras alta fidelidad.
00:07:39Para que puedas ver cómo va a quedar realmente.
00:07:41Pero de nuevo, oye, si quieres hacer un wireframe,
00:07:43siempre puedes ir y volver.
00:07:44No estás atascado con una o la otra.
00:07:45Pero para esto, haremos alta fidelidad.
00:07:47Así que llamaremos a esto CD demo y vamos a crear.
00:07:50Luego nos llevará aquí y nos pedirá contexto.
00:07:53¿Tienes ese sistema de diseño, una captura de pantalla,
00:07:56o una base de código o un archivo de Figma?
00:07:58De cualquier manera, si empiezas desde cero en el paso cero,
00:08:01o si tienes una base de código,
00:08:03idealmente querrás darle algo.
00:08:05Si tienes una base de código, como dijimos,
00:08:07ya has estado trabajando en una aplicación, dásela a esto.
00:08:09Dáselo a Claude Design.
00:08:10Va a funcionar mejor.
00:08:12Pero incluso si no es así y empiezas desde cero,
00:08:14sugiero encarecidamente que, como mínimo,
00:08:16vayas por ahí al mundo
00:08:18y encuentres algo de inspiración que te guste,
00:08:20ya sea de Dribbble, Awwwards o Godly Websites,
00:08:23cualquier cosa, ¿sabes?
00:08:25Empezar desde una hoja en blanco y esperar que Claude Design
00:08:27haga todo el trabajo pesado,
00:08:28porque apuesto a que tu prompt será pésimo.
00:08:30Solo entiende que cuanto menos contexto le des,
00:08:33mayor es la probabilidad de una regresión a la media.
00:08:35Así que tenlo en cuenta al empezar.
00:08:36Tenemos la capacidad de hacer bocetos.
00:08:38Así que, ya sabes, podemos dibujar aquí
00:08:40y decir, vale, aquí está nuestra imagen.
00:08:44Quiero el texto por aquí.
00:08:48Y luego quiero la imagen principal.
00:08:53Imagen principal por aquí.
00:08:59Y luego hagamos un banner deslizante.
00:09:10Le daremos algo,
00:09:12incluso si es una obra de arte brillante como esta.
00:09:15Y puedes hacer mucho más que solo eso.
00:09:16Podemos cambiar el lápiz, ¿verdad?
00:09:18Podemos añadir texto.
00:09:19Puedo poner diferentes cosas, como añadir notas adhesivas.
00:09:21Así que hay mucho que hacer aquí.
00:09:25Y desde aquí, solo tienes que dar instrucciones a la cosa.
00:09:28También tienes la capacidad de cambiar el modelo.
00:09:30Opus 4.7 es lo que sugeriría,
00:09:33porque especialmente si añades cosas como capturas de pantalla,
00:09:35Opus 4.7 tiene la mayor fidelidad
00:09:37y las resoluciones más altas para la captura.
00:09:403 veces lo que obtienes con Opus 4.6.
00:09:42Así que ahora démosle un prompt.
00:09:44Diré que cree una página de aterrizaje para Argus,
00:09:46una plataforma de inteligencia de redes sociales
00:09:48que ayuda a los creadores a detectar temas en tendencia
00:09:49en su nicho antes de que exploten.
00:09:51Eso es un diseño, ya sabes,
00:09:53reflejando bastante lo que escribiste aquí.
00:09:55Así que ese es un prompt tan básico como podemos darle.
00:09:58Un tipo de SaaS básico.
00:10:00Así que veamos qué se le ocurre.
00:10:02Y aquí es lo que se le ocurrió a Claude Design,
00:10:03con un prompt muy minimalista y sin contexto fuera de nosotros
00:10:06garabateando en la página.
00:10:08Y es esto, que creo que es decente para un primer intento.
00:10:13En términos de uso, alerta de uso, 4%.
00:10:16Tomó el 4% de nuestro uso semanal total
00:10:18para generar esta página de aterrizaje.
00:10:20Y esto es lo que nos dio Claude Code
00:10:21con el mismo prompt exacto,
00:10:22usando también la habilidad de diseño de front-end.
00:10:25No está mal.
00:10:26O sea, hay algunas cosas menores que podemos criticar de inmediato,
00:10:28como, oye, el texto está cortado aquí y aquí.
00:10:32No hay tantas cosas mal en este.
00:10:35El texto se solapa un poco aquí.
00:10:39Muestra "rising now" aquí abajo,
00:10:41que también se solapa un poco, pero está bastante cerca.
00:10:45Quiero decir, para ser honesto,
00:10:46me gusta un poco más el diseño de Claude,
00:10:47pero podría ver que a alguien le guste este
00:10:49un poco más también.
00:10:50Así que, primer intento, no hay una diferencia masiva.
00:10:52Entonces, ¿por qué usar Claude Design?
00:10:54¿Dónde empieza a destacar?
00:10:55Bueno, empieza a destacar
00:10:56cuando empezamos a hablar de variaciones
00:10:59y de ser capaces de iterar.
00:11:00Y lo ves de inmediato con los ajustes.
00:11:03Así que la capacidad de hacer esto es algo importante.
00:11:07Ser capaz de cambiar el titular muy rápidamente
00:11:10o ver el ticker.
00:11:13Y podemos expandir esto también.
00:11:16Así que escribí "aumentar la cantidad de ajustes agresivamente".
00:11:18Quiero poder jugar con esto tanto como sea posible.
00:11:20Así que veamos con qué regresa.
00:11:22Muy bien, así que ahora podemos ver que añadió muchos más ajustes
00:11:26para que trasteemos.
00:11:27¿Y cuál fue la tasa de uso?
00:11:30Añadir todos estos ajustes sumó un 7%.
00:11:32Así que puedes ver que solo añadiendo una página de aterrizaje
00:11:36y como 14 ajustes, ya hemos usado, ¿qué es eso?
00:11:39Alrededor del 11% de nuestro total.
00:11:40Ahora, creo que los ajustes son importantes.
00:11:43Hablé antes en la introducción,
00:11:44como ¿cuáles son las características en las que realmente queremos centrarnos
00:11:47cuando se trata de Claude Design?
00:11:48Porque cuando solo hicimos el intento único,
00:11:49no era una locura diferente de lo que obtuve
00:11:51con la habilidad de diseño de front-end.
00:11:52Bueno, estos ajustes y la capacidad de jugar
00:11:55con todas estas cosas y estos cambios sutiles rápidamente,
00:11:59verdad, ese es realmente el poder de Claude Design.
00:12:02Así que voy a alejarme un poco
00:12:03para que podamos ver los ajustes en acción un poco mejor,
00:12:05pero puedo hacer todo ahora desde la paleta hasta los acentos,
00:12:10radio de esquina, cuadrícula de fondo, sin cuadrícula de fondo,
00:12:14fuentes, énfasis, diferencias de titulares, cambios de diseño, ¿verdad?
00:12:19Este es el poder aquí.
00:12:21El poder no es como, oh, puede hacer el diseño de interfaz
00:12:23y el diseño de interfaz desde el principio es tan bueno.
00:12:25No, es el hecho de que realmente puedo iterar muy rápidamente,
00:12:29muy rápidamente, esto es, piensa en lo rápido que estoy haciendo esto
00:12:33y piensa en cuánto tiempo tomaría
00:12:34hacer todo esto dentro de Claude Code.
00:12:36Quiero decir, incluso podemos cambiar el nicho
00:12:39de qué tipo de cosa de redes sociales está mirando
00:12:41en esta imagen, desde IA y tecnología, a juegos, a finanzas.
00:12:46Gracias a Dios puedo ajustar la velocidad del ticker
00:12:47porque esta cosa estaba volando, pero sí, esto es increíble.
00:12:52Esto es la parte uno y creo que hay dos cosas.
00:12:54Bueno, en realidad hay algunas más que eso,
00:12:56pero creo que los ajustes son el mayor valor añadido de Claude Design
00:12:59porque se trata de iteración visual.
00:13:01Y en mi opinión, la segunda característica más impactante
00:13:04de Claude Design es la varianza de las páginas web.
00:13:07Así que los ajustes son muy micro, ¿verdad?
00:13:09Estamos hablando de colores, estamos hablando de acentos,
00:13:11estamos hablando de fuentes, pero ¿qué pasa si quiero variaciones
00:13:14de la página de aterrizaje en su conjunto, como volverme loco con eso.
00:13:18No estoy hablando de una fuente diferente,
00:13:19estoy hablando de un diseño completamente diferente
00:13:21y quiero poder verlos apilados.
00:13:23De nuevo, igual que puedo hacer con Stitch.
00:13:25Quiero poder hacer esto.
00:13:26Bueno, podemos hacer eso dentro de Claude Design
00:13:28y es realmente fácil.
00:13:29Solo vamos a pedirle que haga exactamente eso.
00:13:32Así que le pedí el diseño y le dije,
00:13:33¿puedes ahora crear dos variantes más de esta página de aterrizaje
00:13:36entre las que pueda hacer clic y que sean estilos salvajemente diferentes,
00:13:39sugiriéndome diferentes estilos de variante primero.
00:13:42Así que volvió con seis opciones diferentes para mí.
00:13:44Podemos hacer terminal, estilo Bloomberg,
00:13:48hipermaximalista editorial, brutalista, synthwave, pastel suave,
00:13:53o periódico impreso.
00:13:56Vamos, sí, algo como uno y dos.
00:13:59Así que diré, hagamos uno y dos
00:14:03y obviamente mantén el diseño actual también.
00:14:08Así que Claude Design terminó con una variante.
00:14:10Así que aquí está la editorial, la con la que empezamos.
00:14:13Ahora tenemos una opción de terminal.
00:14:18Así como una opción editorial maximalista,
00:14:21que es bastante interesante, algo diferente.
00:14:24Ahora, si no se lo dices,
00:14:25solo hará los ajustes para el original.
00:14:28Así que cuando haces estas variantes,
00:14:30creo que el flujo de trabajo general debería ser,
00:14:33es que primero empiezas con las variantes.
00:14:35Así que a nivel macro, estás pensando, está bien,
00:14:37quiero ir un poco en esta dirección.
00:14:39Y luego, una vez que eliges una de estas macros,
00:14:42digamos que decidimos quedarnos con la que nos gusta,
00:14:44entonces entrarías en la etapa de ajuste muy agresivo.
00:14:47Así que puedes ver todo
00:14:49y profundizar en lo que quieres.
00:14:51Porque con la forma en que está configurado el uso ahora,
00:14:54si vas a nivel macro y dices,
00:14:56no quiero solo tres opciones.
00:14:57Quiero cuatro, cinco variantes y quiero ajustes en todas ellas.
00:15:00Solo vas a quemar tu uso.
00:15:02Porque añadir estas dos variantes, maximalista y terminal,
00:15:04eso fue un 5% extra.
00:15:05Así que eso nos lleva a alrededor de,
00:15:07creo que estamos en un 17% ahora por la página de aterrizaje,
00:15:11dos variaciones de la página de aterrizaje más ajustes.
00:15:13Y sé que sigo insistiendo en el uso,
00:15:14pero para mucha gente, esto es un gran problema
00:15:16y debería serlo.
00:15:17Creo que en el futuro,
00:15:18esto probablemente cambiará todo lo relacionado con el uso,
00:15:19pero solo tenlo en mente.
00:15:20Y así, con estas dos cosas actuando en tándem,
00:15:23esta varianza en los ajustes,
00:15:26nos permite llegar a una solución del 80%, una solución del 90%.
00:15:31Ahora puedo enfocarme aún más en esto.
00:15:35Podemos ir aquí arriba, tal como les mostré al principio.
00:15:37Podemos hacer ediciones.
00:15:39Así que puedo hacer clic en este encabezado superior.
00:15:42Puedo cambiar la opacidad.
00:15:43Puedo cambiar el ancho, el color, todo eso.
00:15:45Así que podemos ser muy, muy específicos si queremos,
00:15:47pero el verdadero poder viene de alcanzar esa solución del 90%,
00:15:50y pensar: de acuerdo, me gusta la primera editorial.
00:15:54Me gusta que el énfasis esté en la marca,
00:15:55siendo una... ese anillo se ve terrible, siendo una marca.
00:15:59Me gusta este subencabezado específico, este titular, lo que sea.
00:16:04Y luego decir: de acuerdo, nos quedaremos con eso.
00:16:05Me gustan los retoques.
00:16:06Ahora terminemos el resto de la página de destino,
00:16:09porque esto es solo la sección principal.
00:16:11Y luego lo que haces es exportarlo a Claude Code.
00:16:14Le entregas esto a Claude Code.
00:16:15Cuando hago clic aquí, tienes algunas opciones.
00:16:17Puedes descargar el archivo zip o simplemente copiar este comando
00:16:20y llevarlo dentro de Claude Code.
00:16:22Y creo que este tipo de flujo de trabajo es infinitamente más rápido
00:16:25que estar aquí, que es lo que Claude Code nos dio
00:16:28con el mismo comando exacto.
00:16:29Es decir, de acuerdo, Claude Code,
00:16:32vamos a cambiar el color ahora.
00:16:35Vamos a hacer algunas variaciones.
00:16:36Vamos a jugar con el titular ahora y hacer algunas variaciones.
00:16:39Eso puede llevar horas, mientras que esto tomó minutos.
00:16:44Y al menos para mí, necesito ver las cosas
00:16:47y necesito ver un montón de opciones
00:16:48antes de ver realmente lo que me gusta.
00:16:50Y mejor aún, es probable que una vez que vea algo,
00:16:53podría cambiarlo.
00:16:54Porque para ser honesto, si están viendo esto,
00:16:54me gusta un poco la versión súper vertical.
00:16:56Quizás hagamos algún tipo de iconos aquí o lo que sea.
00:16:58Simplemente quiero iterar.
00:17:00Solo quiero ver cosas diferentes.
00:17:02Así que esas son las dos mejores prácticas que puedo darles
00:17:05cuando se trata de la parte de la aplicación web de esto.
00:17:08Macro, correcto, pide variaciones.
00:17:11Y luego micro, pide más retoques.
00:17:13Lo único que no hicimos aquí,
00:17:15y lo mostraremos en cosas como la presentación
00:17:18y otras cosas similares,
00:17:19es pedirle que básicamente ejecute su propio modo de plan.
00:17:22Así que le dimos la instrucción y de inmediato,
00:17:24nos escupió esto.
00:17:25Lo que podríamos haber hecho en su lugar es decir,
00:17:26oye, quiero hacer un modo de plan contigo.
00:17:28Quiero que me hagas un montón de preguntas.
00:17:30Y en su lugar, te hará
00:17:32una cantidad significativa de preguntas,
00:17:33como cinco, ocho, 10 preguntas sobre, por ejemplo,
00:17:35de acuerdo, ¿qué quieres aquí?
00:17:36¿Qué quieres ahí?
00:17:37¿Qué quieres allí?
00:17:38De esa manera no tienes que hacer tantas iteraciones
00:17:40y, en última instancia, te ahorra uso.
00:17:42Y seguí el mismo tipo de flujo
00:17:44cuando estaba creando el front-end
00:17:46para mi panel de control del sistema operativo agente.
00:17:47Pueden ver aquí arriba,
00:17:48esto es con lo que comencé originalmente.
00:17:51Y luego pude recorrer
00:17:52todas estas opciones diferentes.
00:17:53Eventualmente me quedé con esta, la de la cabina,
00:17:56aunque pensé en hacer esta con el gráfico genial.
00:17:58Y luego simplemente traje esta versión de vuelta a Claude Code
00:18:01e hice pequeños ajustes en los márgenes
00:18:03y realmente la conecté.
00:18:04Para que fuera una aplicación web adecuada.
00:18:06Ahora hagamos el diseño de Claude y la presentación.
00:18:08Así que lo haremos un poco más rápido
00:18:09porque muchos de los fundamentos que revisamos
00:18:13cuando se trata de aplicaciones web, también se aplican a las presentaciones.
00:18:16Así que no me detendré en esos puntos.
00:18:17Y esta vez mostraremos el sistema de diseño en acción.
00:18:21Y recuerden que ese sistema se basa en los visuales
00:18:24de nuestro sistema operativo agente.
00:18:26Así que vamos a darle a crear.
00:18:27¿Y qué vemos?
00:18:28La misma configuración que antes.
00:18:30Y algo pidiéndote que proporciones contexto,
00:18:32ya sean capturas de pantalla, bases de código o archivos de Figma.
00:18:35Ahora, el único contexto que le daremos
00:18:37es el sistema de diseño que ya está allí.
00:18:39Además de una instrucción que dice,
00:18:41queremos una presentación que hable sobre las diferencias
00:18:45entre el diseño de Claude y Google Stitch.
00:18:48Y tuve a Opus 4.7 en otra ventana con Claude Code,
00:18:53pensando en la instrucción.
00:18:54Así que tuve que hacer una búsqueda web.
00:18:55De acuerdo, aquí están más o menos las diferencias entre los dos.
00:18:57Ahora, al final, escribí antes de que construyas nada,
00:19:01hazme cualquier pregunta que tengas.
00:19:02Para que estemos en la misma sintonía.
00:19:05Así que, en cierto sentido, casi lo estamos obligando a hacer
00:19:07algo como un modo de plan.
00:19:08Y así es como ven esto poblándose aquí.
00:19:10Nuevamente, puedes hacer que este modo de plan forzado
00:19:12ocurra totalmente cuando haces aplicaciones web también.
00:19:14Solo asegúrate de ponerlo en la instrucción inicial.
00:19:16¿Para quién es esta presentación?
00:19:18Digamos que es para una charla pública.
00:19:20Diremos, lo mantendremos breve y sencillo.
00:19:24Ponlo en seis, haremos cinco minutos.
00:19:28Haremos cinco diapositivas.
00:19:30Haremos un estilo ligeramente opinativo, estilo de título, pieza central.
00:19:34Diremos solo mapa de posicionamiento dos por dos.
00:19:37Llamada al precio, sí.
00:19:39Y luego simplemente pasaremos por el resto de estas.
00:19:43Sin notas.
00:19:44Así que, en general, nos pide una, dos, tres, cuatro, cinco,
00:19:47seis, siete, ocho, nueve, 10, 11, 12, 13, 14 preguntas.
00:19:52Además, ya sabes, un pequeño comodín por aquí,
00:19:56que realmente me gusta.
00:19:58Nuevamente, el modo de plan de Claude Code a veces hará,
00:20:00siento que a lo sumo, ya sabes, algunas,
00:20:03como dos iteraciones de cuatro preguntas cada una.
00:20:05Así que esto es genial.
00:20:06Y aquí hay un vistazo a la presentación.
00:20:07La puse en pantalla completa y como referencia,
00:20:10esto tomó el 5% de nuestro uso.
00:20:12Así que alrededor del 1% por diapositiva.
00:20:15Así que tenemos la página de título, una pequeña nota al pie sobre la presentación
00:20:19generada por Claude Design.
00:20:22Tenemos los números, ya sabes, dónde caen.
00:20:26Bueno, obtuvimos una especie de gráfico que muestra dónde caen
00:20:30en términos de costo.
00:20:31Obviamente, Claude Design es mucho más caro.
00:20:34Informe de campo.
00:20:37Y luego nos da una especie de,
00:20:38oye, aquí hay un pequeño gráfico que muestra
00:20:40qué deberías usar para qué caso de uso.
00:20:43Así que creo que la presentación se ve bastante bien,
00:20:45para ser honesto contigo.
00:20:46Pero más importante que eso,
00:20:48se mantuvo con el sistema de diseño.
00:20:49Este sistema operativo agente sobre el que se construyó todo el sistema de diseño
00:20:53está definitivamente reflejado en la presentación.
00:20:55Estas dos cosas parecen haber venido del mismo lugar.
00:20:59Y al igual que con la aplicación web,
00:21:00podemos seguir el mismo flujo.
00:21:03Esta fue la original que nos dio.
00:21:05Ahora podemos pedir variantes macro y decir,
00:21:07de acuerdo, ¿realmente queríamos quedarnos con, ya sabes,
00:21:09nuestro sistema de diseño?
00:21:11¿O queremos ir en una dirección completamente diferente?
00:21:13De acuerdo, vemos, ya sabes, dos, tres, cuatro variantes diferentes.
00:21:16Bien, concentrémonos en una.
00:21:17Y ahora traigamos los retoques
00:21:19y realmente ajustemos esto.
00:21:20Y esa es más o menos la forma en que creo
00:21:22que deberías abordar la presentación.
00:21:23De la misma manera que abordamos las aplicaciones web.
00:21:24Ahora, como referencia, aquí está la presentación
00:21:27que Claude Code nos produjo.
00:21:29Le di exactamente la misma instrucción
00:21:31y creé esto desde el mismo directorio,
00:21:34el sistema operativo agente en vivo.
00:21:36Así que tenía acceso total al mismo sistema de diseño,
00:21:38por así decirlo.
00:21:39Además de eso, también le pedí que me hiciera preguntas.
00:21:42Solo me hizo siete.
00:21:43Y las preguntas, para ser honesto, no fueron tan buenas.
00:21:46Eran un poco más superficiales
00:21:47en términos de, bueno, número de diapositivas.
00:21:49Y qué quieres que sea la relación de aspecto
00:21:51frente a lo que vimos en el diseño.
00:21:52Y creo que eso se refleja en general,
00:21:55en un resultado mucho más insípido.
00:21:57Y me sorprende un poco que no estuviera más cerca
00:22:00en términos de estilo visual en comparación con lo que nos dio el diseño.
00:22:02Quiero decir, no está mal.
00:22:05Es decir, los colores son similares, el texto es similar,
00:22:07pero quiero decir, seamos serios.
00:22:10Esto de alguna manera lo supera,
00:22:12si vamos a ser honestos.
00:22:13Por último, hablemos del diseño de aplicaciones móviles.
00:22:15Y tienes dos opciones aquí.
00:22:17Uno, vas directo a móvil.
00:22:19No estás haciendo nada de aplicaciones web.
00:22:21Y es bastante simple.
00:22:22Vas a hacer exactamente lo que hicimos con la parte de la aplicación web
00:22:25al principio de este video.
00:22:26Y solo vas a decir al principio,
00:22:28esto es para una aplicación móvil.
00:22:29Asegúrate de que los visuales reflejen eso.
00:22:32Pero si estás tomando una aplicación web
00:22:33y luego quieres traducir eso a una plataforma móvil,
00:22:35es bastante simple.
00:22:36Si bien podríamos quedarnos aquí en esta ventana de instrucción en la que estamos,
00:22:40de hecho, de acuerdo, ahora muéstramelo en móvil.
00:22:42Probablemente tiene más sentido tener un proyecto separado
00:22:45con exactamente las mismas cosas sucediendo.
00:22:46Pero ahora tenemos una clara delimitación
00:22:48entre la aplicación web en la que estamos trabajando y la móvil.
00:22:51Y para hacer eso, simplemente vas a ir a la parte superior derecha
00:22:53donde dice compartir.
00:22:54Y luego vas a presionar duplicar proyecto.
00:22:57Una vez que hagas eso, te llevará a una página como esta.
00:23:00Pero si vuelves a la página de inicio,
00:23:02ahora podemos ver que hay un remix de demostración de CD.
00:23:05Y ese remix es el proyecto duplicado.
00:23:08Y ahora simplemente voy a darle la instrucción y decir,
00:23:10¿puedes mostrarme el mismo diseño en un formato móvil?
00:23:13Y aquí están las versiones móviles que nos dio.
00:23:15Siguió adelante y creó variantes de las tres.
00:23:18No especifiqué eso, pero lo hizo.
00:23:19Así que nos dio esencialmente nueve maquetas
00:23:21y el costo total fue del 5% de uso.
00:23:25Así que el mismo flujo de siempre.
00:23:27Nos dio el macro justo aquí.
00:23:29Así que elegiríamos el que nos gustara,
00:23:30obviamente sería el que decidiste para tu aplicación web.
00:23:32Y a partir de ahí, diríamos,
00:23:34oye, me gusta la editorial.
00:23:36Ahora trae un montón de retoques para que pueda clavar esto.
00:23:38Pero a decir verdad,
00:23:39si tienes todo configurado en la versión de la aplicación web,
00:23:42lo más probable es que ya hayas hecho los retoques.
00:23:44Así que no debería haber demasiado
00:23:47que necesites cambiar en este punto.
00:23:48Pero siempre hay un poco,
00:23:51siempre te encuentras con problemas cuando pasas de una aplicación web estándar
00:23:53a un diseño móvil.
00:23:55Pero como ven aquí, es muy fácil de hacer,
00:23:57solo una sola instrucción.
00:23:58Así que ahí es donde los dejaré por hoy.
00:23:59Espero haber podido aclarar las diferencias
00:24:02entre Claude Design y Claude Code,
00:24:04especialmente destacando las características
00:24:06que realmente nos hacen ganar dinero dentro de Claude Design,
00:24:09que son los retoques y que son las variantes.
00:24:11Y realmente lo que nos compra es velocidad de iteración.
00:24:15Puedo pasar por un montón de versiones diferentes
00:24:17de lo que sea que estoy tratando de crear
00:24:19para poder finalmente aterrizar en algo que me guste.
00:24:21Y una vez que hago eso,
00:24:22entonces lo llevo al ecosistema de Claude Code.
00:24:25Y espero haber podido hacer que los costos de uso
00:24:27sean un poco más claros al mencionar los porcentajes que perdimos
00:24:31después de cada iteración y creación.
00:24:33Así que, como siempre, háganme saber qué piensan.
00:24:35Definitivamente estén atentos a más material de Claude Design
00:24:38porque creo que esta es una herramienta súper genial.
00:24:40Asegúrense de revisar Chase AI+
00:24:42si quieren tener en sus manos la Masterclass de Claude Code,
00:24:45y nos vemos por ahí.