00:00:00Hoy aprenderán cómo combinar el poder del nuevo Claude Design y Seed Dance 2.0
00:00:06para crear sitios web animados como este. Los llevaré por todo mi flujo de trabajo paso
00:00:12a paso para que puedan recrearlo incluso si nunca han hecho algo así. Y a lo largo
00:00:17del camino les mostraré cómo aprovechar al máximo la nueva herramienta de Anthropic con algunos consejos y
00:00:22trucos. Ahora, cuando se trata de crear una página web como esta, el primer lugar por donde debemos empezar es este
00:00:28video de fondo, y para obtener el video de fondo primero necesitamos una imagen inicial. Ahora vamos
00:00:32a crear esa imagen inicial usando Nano Banana Pro y luego tomaremos esa imagen inicial
00:00:37y la convertiremos en un video usando Seed Dance 2.0, y todo eso ocurrirá aquí en Higgsfield, que
00:00:44es mi ventanilla única para todas y cada una de las herramientas de creación de contenido con IA. Así que para empezar, simplemente iremos
00:00:49a imagen y nos dirigiremos a Nano Banana Pro, y de inmediato verán algunas de las imágenes en las que he estado trabajando
00:00:55y deberían parecerles muy familiares a nuestra página web, particularmente estos chicos. Ahora, el prompt exacto
00:01:01que usé se puede encontrar dentro de mi School gratuita, y habrá un enlace a eso en la descripción
00:01:05pero en lo que quiero enfocarme aquí cuando hablamos de la imagen es menos en el prompt específico
00:01:11en sí mismo, porque la imagen que vas a querer crear será diferente a la mía
00:01:15pero más en la composición. ¿Por qué esta imagen está configurada de esta manera? Bueno, cuando miramos el
00:01:21producto final aquí, es bastante obvio, ¿verdad? Tenemos esta gran imagen hero ocupando el lado derecho
00:01:26de la pantalla, pero aún necesitábamos algo de espacio muerto a la izquierda para nuestro texto, y cuando hice que Nano Banana
00:01:31Pro creara esta imagen, tenía ese tipo de composición en mente. Pensé: "vale, vamos a tener una imagen
00:01:38donde esté como dividida a la mitad; en el lado derecho tendremos nuestra imagen llamativa y luego a la izquierda,
00:01:44aquí es donde irá el texto principal". Así que esto es algo así como el eslogan por aquí.
00:01:51Vamos a tener algún tipo de banner arriba con la barra de navegación donde la gente pueda, ya saben, ir a
00:01:55inicio o a las diferentes páginas. Tendremos algunos botones aquí que digan, de acuerdo, regístrate
00:02:00o "conoce más", y luego tal vez tengamos algún tipo de indicador en la parte inferior. Ya sabía eso al entrar,
00:02:04y eso es algo que necesitas saber al entrar cuando le pides a Nano Banana Pro que cree la imagen
00:02:10por ti, porque sea cual sea la composición de este tipo de configuración, eso va a dictar
00:02:17tu prompt. Y ahora, tu pregunta probablemente sea: "bueno, Chase, no tengo idea de cuáles son mis opciones",
00:02:22no sé cuál debería ser la composición en primer lugar, ¿cómo descubro eso? Bueno, la
00:02:25forma más fácil de hacer eso es simplemente encontrar algunos sitios web que te gusten y empezar a desglosar su composición de "hero" y
00:02:30página de inicio de esa manera, y un gran lugar para ver ejemplos de eso es Dribbble. Así que eso es
00:02:35Dribbble con tres "b". Si busco "landing page SaaS", puedes buscar "landing page" de
00:02:40lo que sea; verás de lo que estoy hablando. Entonces, ¿qué vemos aquí, verdad? Este justo aquí, bueno,
00:02:47tienen la imagen en la parte inferior y el texto arriba. Podríamos hacer algo similar con
00:02:52esto, ¿verdad? Podríamos moverlo aquí al centro, tal vez ponemos las nubes a los lados
00:02:56en su lugar, y luego el texto va aquí. Nuevamente, eso cambia la composición por completo. ¿O queremos algo
00:03:02como esto, donde la imagen es el centro de atención y el texto va alrededor, y añadimos otros elementos?
00:03:07Ya sabes, a medida que avanzas y te desplazas hacia abajo, ves que hay un millón de formas diferentes en las que puedes
00:03:11hacer esto, pero necesitas saberlo de antemano, o al menos necesitas tener dos o tres ideas en tu
00:03:16bolsillo trasero, y luego, cuando vayas a Nano Banana Pro, puedes darle prompts que reflejen ese
00:03:22estilo. Así que, para recapitular, cuando estamos creando nuestra imagen, lo primero que debemos resolver es la
00:03:26composición. Y con composición me refiero a: ¿dónde estará el espacio muerto? ¿Dónde estará ese texto?
00:03:32¿Va a estar a la izquierda, en el centro, a la derecha, arriba? No importa, solo necesitas elegir y hacer que
00:03:37tu prompt lo refleje. Y también, cuando se trate del prompt, apóyate en cosas como Claude para ayudar a
00:03:42escribirlo por ti. Ahora, para nuestra demostración de hoy, usaremos esta imagen, y también tendré una copia de
00:03:47esto dentro de la comunidad si quieres simplemente copiarme paso a paso. Y con nuestra imagen fija en
00:03:51la mano, ahora vamos a dirigirnos a Claude Design, y el flujo general será: imagen creada en
00:03:56Nano Banana Pro, vamos a diseñar nuestra página web aquí en Design, y una vez que tengamos un sitio web que nos guste,
00:04:01ya saben, un diseño que nos guste, una "landing page" y todo eso, entonces tomaremos esa imagen y la convertiremos en
00:04:05un video, porque es muy simple hacerlo como paso final. Así que si eres nuevo en Claude Design,
00:04:10no te preocupes, tocaremos los puntos principales que necesitas saber en este video, pero también tengo un análisis
00:04:14profundo que entra un poco más en los detalles que también deberías ver, y lo enlazaré arriba. Pero para
00:04:18nuestros propósitos, lo que queremos hacer es dirigirnos aquí a la izquierda, ir a "prototype" y simplemente
00:04:24darle algún tipo de nombre al proyecto; llamaré al mío "sd2" para el sistema de diseño. Probablemente no tendrás
00:04:30un sistema de diseño, no necesitas uno en este caso por ahora. Nuevamente, si quieres aprender más sobre sistemas de diseño,
00:04:35mira ese video de análisis profundo. Vamos a hacerlo en alta fidelidad y luego vamos a crear.
00:04:40Eso te llevará a esta página, y lo primero que queremos hacer es añadir algo de contexto,
00:04:45y el contexto que vamos a añadir es la imagen que descargamos, así que pueden ver abajo a la izquierda
00:04:49que he subido mi captura de pantalla. A continuación, queremos darle un prompt. Ahora, puedes continuar añadiendo más
00:04:55capturas de pantalla aquí, y te aconsejo totalmente que lo hagas si tienes buenos ejemplos de alguien como Dribbble. Así que
00:04:59si encontraste algo en Dribbble que te gusta en términos de la composición general, añádelo también.
00:05:04Ahora, cuando se trate del prompt en sí, sugiero encarecidamente que te apoyes en algo como Claude
00:05:09Code para escribirlo por ti. Y aquí hay un vistazo al prompt que Claude Code creó y que voy
00:05:13a pegar en Claude Design. Esto es para nuestra empresa SaaS ficticia "Olympus", que es una plataforma de inteligencia
00:05:19de mercado, así que profundiza en de qué trata la empresa, se vuelve bastante detallado con el "hero", habla sobre
00:05:25qué secciones quiere que estén en la "landing page" y luego añade algunas cosas como, ya sabes, movimiento. Ahora,
00:05:30muy importante, tenemos esta línea al final que dice: "hazme cualquier pregunta antes de comenzar". Lo genial
00:05:36de Claude Design es que puede actuar un poco como Claude Code, en el sentido de que creará un modo de "plan",
00:05:42así que voy a darle un prompt, este exacto que ven aquí, y luego me hará un montón
00:05:46de preguntas para profundizar mejor en lo que estoy tratando de construir. Y lo genial de esa
00:05:50función de modo "plan" donde nos hace preguntas, es el hecho de que si llegas con un mal prompt que
00:05:54ni siquiera es la mitad de detallado que este, puedes ir a Claude Design y obtener un primer pase
00:06:01bastante sólido porque pasaste por todo ese proceso de preguntas y respuestas con Claude. Así que lo pegué todo allí y solo
00:06:06vamos a presionar enviar. Ahora, una aclaración rápida sobre el uso con Claude Design: Claude Design opera con
00:06:11sus propios límites de uso; están separados de tus límites "pro", o de tus límites de Max 5 o Max 20 con
00:06:18Claude. Es algo aparte y puede ser un devorador de recursos, así que siempre mantén un ojo en ello. En mi caso,
00:06:23ya los he agotado porque lo he estado usando muchísimo, así que estoy en mi uso
00:06:28extra. Como referencia, cuando hice todo esto que están viendo hoy por mi cuenta, en términos de uso
00:06:33extra, me costó alrededor de cinco dólares crear la "landing page", y podría haberlo obtenido incluso más barato, pero solo
00:06:38para que tengan una idea de dónde estamos. Y aquí están las preguntas que me devuelve:
00:06:43sección de tipografía, ¿qué queremos hacer? Hagamos una moderna, mítica, paleta de colores,
00:06:52hagamos una invertida, y finalmente tendremos más opciones una vez que realmente cree esto usando "tweaks"
00:06:58como verán más adelante. Voz de copia, pongamos algo de "mítico" esparcido por ahí, porque en caso de que no se dieran cuenta,
00:07:06estamos haciendo algo como que Olympus es el nombre de la empresa, es como una aplicación de inteligencia, así que toda esta imagen
00:07:11con la que hemos estado tratando se supone que es como una analogía de fuego prometeo. Así que composición del
00:07:17hero: imagen a sangre completa, hagamos una sección de imagen a sangre completa, orden de secciones, pum, pum, pum, pum, y puedes
00:07:26siempre decidir por mí si simplemente no lo sabes; eh, prueba social, decide por mí, decide por mí,
00:07:32y aquí hay una cosa genial: "tweaks". Los "tweaks" tendrán más sentido aquí en un segundo, pero siempre
00:07:39sugiero usar tantos "tweaks" como sea posible y siempre podemos añadir más más tarde. Así que vamos a presionar continuar,
00:07:45y ahora va a seguir adelante y creará esto por nosotros. Ahora, una rápida visión general
00:07:50para un diseño de garra, aquí arriba a la derecha donde dice "share", si hago clic en esto,
00:07:56no estamos atrapados dentro de Claude Design para siempre. Lo que es realmente genial de esto y lo que les mostraré más tarde
00:08:01es que podemos exportar esto a Claude Code y luego, una vez que tengamos una solución, ya saben, terminada,
00:08:07cuando nos estén destruyendo en términos de uso, podemos llevarlo a Claude Code y trabajar en ello a nuestros, ya saben,
00:08:12corazones contentos. También podemos exportarlo como HTML, enviarlo a Canva, exportarlo como PowerPoint o PDF para
00:08:17descargar cosas. Así que podemos traer compañeros de equipo, así que esto puede ser algo colaborativo. Así que,
00:08:22muchas opciones, y Claude Design en general es muy versátil. Y esto es lo que Claude Design
00:08:27devolvió, y estaré moviendo todo esto por todas partes durante este video. Ahora, lo primero que quiero
00:08:33llamar su atención es a los "tweaks" aquí a la derecha. Así que los "tweaks" son un menú en esta página que nos permite
00:08:40cambiar muy rápidamente diferentes microelementos de nuestra página. Así que puedo cambiar los acentos, puedo cambiar
00:08:48el tema de claro a oscuro, lo cual es más obvio aquí abajo; puedes cambiar el titular, la marca del logo,
00:08:54los nombres de precios, cualquier tipo de movimiento, así que hace que sea muy, muy fácil iterar entre diferentes versiones de
00:09:03nuestro sitio. Más allá de eso, tengo la capacidad de editar cosas a un nivel granular si vengo aquí al
00:09:07arriba a la derecha y presiono "edit". Puedo hacer clic en diferentes cosas como este botón de aquí arriba y podría cambiar
00:09:13el color directamente, puedo cambiar la fuente, ya saben, el relleno, la opacidad, todo. Y también tengo
00:09:19la capacidad de comentar, así que puedo hacer clic en ese mismo botón y en lugar de cambiar realmente los
00:09:25valores específicos, podría dejar un comentario como "hazlo más grande", "hazlo más pequeño", o puedo dibujar sobre él. Así que puedo
00:09:30dibujar sobre esto, ya saben, seleccionar todo esto y decir como: "hey, muévelo a la izquierda" y luego enviar eso a
00:09:39Claude aquí abajo, y básicamente tomará una captura de pantalla de lo que acabo de escribir
00:09:44y será como: "oh, está bien, movamos eso un poco a la izquierda". Y podemos ver ahora que lo movió a la izquierda y
00:09:49tiene esta cosa horrible ahí que podemos eliminar también. Pero lo que deberías hacer en este
00:09:55punto es, en primer lugar, ya saben, echar un vistazo rápido a "¿qué pienso del diseño general?"
00:10:02El primer pase parece estar bien. Lo más importante, en términos de nuestra imagen, ¿necesitamos volver adentro
00:10:09de Nano Banana Pro y editar esta imagen? ¿Necesitamos hacerla más pequeña, más grande, lo que sea? Si eso se ve
00:10:14bien, mi sugerencia cuando estamos en Claude Design es que usemos un proceso de dos pasos. Uno, lo que quiero
00:10:21hacer es ver diferentes variantes de mi página web, y no estoy hablando de pequeños "tweaks",
00:10:26quiero ver al menos dos diseños más completamente diferentes para tener una idea de qué camino
00:10:32quiero seguir. Y una vez que encontremos una variante que nos guste a nivel macro, bueno, entonces nos enfocamos en ella y
00:10:37obtenemos más "tweaks" para nosotros, no solo cinco "tweaks", hablo como de 15 "tweaks", para que realmente podamos obtener
00:10:43algo que nos guste, porque el objetivo es llegar a una solución del 90 % antes de traer el video y luego
00:10:48antes de traerlo a Claude Code para hacerlo nuestro. Y para hacer eso es realmente fácil; todo lo que tenemos que
00:10:53hacer es pedirle a Claude Design... así que voy a decir: "¿puedes crear dos variantes de diseño adicionales para nuestra
00:10:58página web que pueda ver, además de esta actual?". Así que solo algunos diseños nuevos que podríamos
00:11:03incluir. Y esta idea de crear variantes macro y luego, una vez que decidimos una variante, crear un montón
00:11:09de "tweaks", esto es lo que realmente separa a Claude Design de Claude Code. Ahora, prompt
00:11:16por prompt, en el vacío, creo que Design es un poco mejor que Claude Code en el front-end, pero esta
00:11:20especie de variación e iteración visual que podemos hacer muy, muy rápidamente, creo que es el gran
00:11:27desbloqueo con Claude Design, y ahí es donde radica el valor, porque si intentamos hacer lo mismo dentro
00:11:32de Claude Code, es un poco laborioso. Y así que esto es de lo que estoy hablando: arriba tenemos la versión
00:11:37cinematográfica, que era la original, y ahora nos dio una de archivo, así como una versión de terminal, y puedes
00:11:45ver que todas son bastante únicas, y esto también se aplica al resto de la página, no solo a la sección del hero,
00:11:53sino a todo. Y honestamente, mirando esto, creo que la terminal en realidad se ve algo genial. Tendríamos
00:12:01que cambiar la imagen aquí y definitivamente tendríamos que alejarnos del video, pero, de inmediato,
00:12:09ves esto y... creo que esto se ve realmente genial y definitivamente se ve diferente a tu
00:12:13sitio web estándar creado por IA. Así que esto es de lo que estoy hablando cuando se trata de
00:12:20aprovechar realmente el poder de Claude Design, es ver estas variaciones, porque yo
00:12:24nunca habría pensado en hacer algo como esto o incluso saber cómo pedirlo para que me dé esto. Realmente
00:12:29me gusta esto, pero para mantener este video en curso, lo que vamos a hacer es que nos quedaremos con la
00:12:35cinematográfica, pero quería mostrarte eso porque la idea es que hagas esto, elijas la que te guste y luego
00:12:40pases al paso dos del proceso de Claude Design, que es "tweaks, tweaks, tweaks". Así que tenemos todos
00:12:46estos "tweaks" aquí, pero al igual que cómo le pedí a Claude Design anteriormente que me diera algunas variaciones más, ahora
00:12:51voy a pedirle que sea muy agresivo con los "tweaks" que me da. No tengo que saber qué "tweaks"
00:12:56quiero, no tengo que saber si, oh, quiero ser capaz de cambiar el tema o el titular o el logo. No
00:13:00lo sé, solo dame un montón y lo resolveremos. Así que escribí aquí abajo: "vamos a quedarnos con la
00:13:04cinematográfica, puedes eliminar las otras dos y también aumentar agresivamente el número de "tweaks" disponibles".
00:13:11Y veremos qué se le ocurre. Ahora podemos ver todos los "tweaks" adicionales que añadió, así que
00:13:15pasamos de unos cinco "tweaks" a unos 15 más o menos, lo cual es genial, así que tenemos estos originales
00:13:22con los acentos, el tema, la marca del logo, ese se ve bien, fuentes, fuente del cuerpo, fuente mono, escala de tipo
00:13:36espera, el punto es que ahora puedo pasar por todos estos una y otra vez. Incluso puedo
00:13:42cambiar la oscuridad de la superposición del CTA, el resplandor de las brasas... como que no se detiene, no se detiene. Así que recorrí
00:13:51todos los "tweaks" por mi parte, me deshice de las brasas y esto es lo que obtuvimos finalmente. Ahora tengo
00:13:56la capacidad de verlo en pantalla completa si voy a "present" arriba, en pantalla completa, para que podamos tener una mejor idea de
00:14:02cómo se verá. Y por ahora, para mí, esto se ve bastante bien. Recuerden que no necesitamos una solución
00:14:08al 100 % dentro de Claude Design. Queremos acercarnos lo más posible, queremos tomar todas las decisiones de diseño
00:14:14que podamos y luego lo que queremos hacer finalmente es traerlo de vuelta a Claude Code y hacer los pequeños
00:14:18ajustes, porque recuerden, Claude Design es un devorador de recursos; solo tienes una cantidad limitada, así que queremos hacer
00:14:23que cuente. Así que ahora podemos hacer la transición a la sección de video donde tomamos este fondo y realmente
00:14:29lo animamos. Ahora, nota al margen: es importante que hayamos hecho todo esto con el fondo estático, porque
00:14:35cuando hablamos de usuarios móviles, no queremos que nuestros usuarios móviles sean golpeados con algún video gigante que
00:14:39puede ralentizarlos. Así que si alguien está en el móvil y va a nuestro sitio web que configuramos aquí, simplemente
00:14:43verán la imagen fija. Así que vamos a usar Seed Dance para esto. Así que, de nuevo, estoy aquí adentro
00:14:47de Higgsfield, voy a ir a Seed Dance 2.0. No tienes que usar Seed Dance; Seed Dance es solo el mejor que existe
00:14:52en este momento. Otras opciones incluyen Kling 3.0, también puedes usar algo como Veo 3.1, y la configuración del video
00:14:58es muy fácil. Literalmente, solo vas a tomar tu imagen y vas a dejarla caer aquí,
00:15:04así que literalmente solo arrastra y suelta aquí como el fotograma inicial y luego solo le damos
00:15:08un prompt. Ahora, el prompt es muy básico; todo lo que escribí fue: "mantén el movimiento extremadamente lento, las nubes apenas
00:15:15se mueven, brasas del fuego en sus manos flotando lentamente". Y obtenemos algo como esto. Queremos
00:15:21sutil, no queremos nada loco, no quieres que parezca un videojuego salvaje, quieres que casi
00:15:26parezca simplemente un GIF animado discreto, y eso es porque la imagen del hero solo nos está dando algo de
00:15:32estilo a nuestro sitio, no quieres que se apodere de todo. Y en segundo lugar, como verán aquí, va
00:15:37a ser fugaz, porque como máximo vas a obtener 15 segundos de esta cosa. Idealmente, puedes crear
00:15:43un bucle perfecto, pero eso puede ser algo difícil. Así que la mejor apuesta es hacer lo que hicimos aquí y simplemente tener un
00:15:48video de 15 segundos, lo cual suena como mucho al principio, pero en realidad no es demasiado pesado. Y la
00:15:54otra cosa, cuando vamos por 15 segundos, las probabilidades de que alguien vaya a tu sitio web y
00:15:59simplemente se siente allí en tu página de "hero" leyendo durante 15 segundos y luego se sorprenda
00:16:04por el corte cuando vuelve al bucle es poco probable. Lo más probable es que vayan a
00:16:10tu hero, "vaya, se ve genial", 10 segundos después ya están bajando por el resto de la "landing page" para ver de qué
00:16:15tratas. Así que mantén el prompt simple, manténlo sutil. Si quieres volverte loco, adelante, hazlo
00:16:20tan largo como sea posible. Durante 15 segundos, querrás que sea de 16 por 9 y querrás que sea al menos
00:16:261080p. Algunos modelos te darán la opción de mejorar el prompt, donde es prácticamente
00:16:30decir: "hey, pusiste tu mal prompt y nosotros lo hacemos mejor". No hagas eso, siempre quieres tener control total
00:16:34de tu prompt, y espera que tengas que hacer un par de variaciones de esto hasta que lo consigas
00:16:40bien. Así que, probablemente, para obtener uno que realmente funcione, tendrás que hacer esto cuatro o cinco veces
00:16:45hasta que finalmente obtengas la salida que estás buscando. Pero una vez que obtengamos esa salida, todo lo que necesitamos hacer es
00:16:50descargarla y luego saltamos de nuevo a Claude Design y vamos a dejar caer ese archivo MP4 en
00:16:57la ventana del prompt. Así que lo subí aquí abajo a la izquierda y luego escribí: "¿podemos cambiar la imagen
00:17:01fija por el video que acabo de subir para el fondo del hero?". Y luego te dará algo como
00:17:05esto, y es literalmente así de simple. Y es en este punto que estamos prácticamente terminados dentro
00:17:12de Claude Design. Quiero decir, si quieres hacer más cambios, haz más "tweaks", totalmente depende de ti. Pero si
00:17:17estás en este lugar, diría que estás listo para moverte fuera de Claude Design y ahora traer
00:17:22esto a algo como Claude Code, como hablamos hace poco. Es muy fácil de hacer: vamos arriba a
00:17:26share y vamos a ir a "hand off to Claude Code". Ahora, porque esto incluye un video en un MP4,
00:17:34si intentas hacer solo el comando de "copy", podría tener algunos problemas para descargarlo realmente. Así que lo
00:17:38que vas a querer hacer en su lugar es simplemente descargar el ZIP, así que va a tomar
00:17:44todos los archivos, todo ese video en vivo, todas las cosas de codificación bajo el capó y simplemente ponerlo en un archivo ZIP.
00:17:49Así que puedes hacer "download ZIP", luego querrás extraer todo esto y luego simplemente vas a
00:17:56tomar esa carpeta extraída, soltarla en Claude Code y decir: "descarga todo. Ahora vamos
00:18:03a crear un sitio web usando todo este código", y estás prácticamente terminado en ese punto. Así que lo dejé caer
00:18:10y dije: "extrae todos estos archivos para la página web que estamos construyendo" y luego pon en marcha un servidor de desarrollo, y
00:18:14aquí está la página web en el servidor de desarrollo, se ha puesto en marcha y con eso la transferencia a Claude Code está completa.
00:18:19Has configurado la sección del hero animada; tiene el video, tiene la imagen fija, todo está listo para ir
00:18:25para que hagas cambios menores y luego lo envíes a GitHub antes de enviarlo a Vercel y realmente
00:18:29alojarlo en línea. Así que ahí es donde los dejaré por hoy; espero que esto haya sido capaz de arrojar
00:18:33algo de luz sobre cómo combinar el poder de Claude Design y Seed Dance 2.0 para crear este tipo de
00:18:39sitios web animados. Como siempre, háganme saber lo que pensaron, asegúrense de revisar Chase AI si
00:18:44quieren tener en sus manos todos esos recursos, y los veré por ahí.