Tus carruseles de Claude Code son un desastre (aquí tienes la solución)

CChase AI
마케팅/광고컴퓨터/소프트웨어AI/미래기술

Transcript

00:00:00Claude Code es terrible para los carruseles, y es tu culpa.
00:00:03Ahora mismo, las redes sociales están inundadas
00:00:05de carruseles de baja calidad creados con Claude Code
00:00:08que no obtienen ninguna interacción.
00:00:10Y eso es porque todos se ven exactamente igual,
00:00:12y todos están hechos simplemente con HTML puro.
00:00:15Y esto es un gran problema si eres alguien
00:00:17que intenta aprovechar la IA en su marketing en redes sociales,
00:00:20porque los carruseles son una de las formas de contenido
00:00:23en redes sociales que mejor convierten hoy en día.
00:00:25Así que en este video, voy a ayudarte
00:00:27mostrándote cómo romper con esta tendencia
00:00:29con un enfoque híbrido que toma lo mejor de Claude Code
00:00:32y sus recursos HTML, y lo combina con modelos de imagen externos
00:00:36como GPT Images 2 y Nano Banana Pro
00:00:39para crear carruseles que realmente funcionan.
00:00:42Entonces, cuando hablamos de carruseles que convierten,
00:00:45me refiero a algo como esto.
00:00:46Esta es una publicación que hice hace unas cinco semanas,
00:00:49cientos de miles de vistas.
00:00:50Obtuvimos unos 18,000 “likes” en esta publicación,
00:00:52y es el ejemplo perfecto de este tipo de enfoque híbrido
00:00:55que te voy a enseñar.
00:00:56Primero que nada, cuando hablamos de carruseles,
00:00:59debemos pensar en la imagen de portada.
00:01:01Esto es lo primero que la gente va a ver,
00:01:03y debe ser lo más visualmente llamativo.
00:01:05Lo que ves aquí fue creado con GPT Images 2,
00:01:08y es con esta imagen de portada
00:01:10que vamos a apoyarnos en herramientas externas,
00:01:12ya sea GPT Images 2
00:01:14o algo como Nano Banana Pro.
00:01:16A medida que recorremos el resto del carrusel,
00:01:19cuando miramos las diapositivas de cuerpo o valor,
00:01:22aquí es donde algo como los recursos HTML
00:01:25creados por el propio Claude Code están perfectamente bien.
00:01:28Ya los enganchaste con la diapositiva de portada.
00:01:30Ya los tenemos aquí.
00:01:31Ahora necesitamos darles algo de valor real,
00:01:34y no hay tanto énfasis
00:01:35en que sea visualmente impresionante.
00:01:38Solo necesitamos aportar valor,
00:01:40y necesitamos poder hacer esto
00:01:41de una manera repetible,
00:01:42que podamos hacer una y otra vez
00:01:44de forma sistematizada
00:01:45en una cantidad de tiempo relativamente rápida.
00:01:47Que también sea económica,
00:01:49porque recuerda,
00:01:50no es gratis crear estas imágenes
00:01:52con algo como GPT Images 2
00:01:54o Nano Banana Pro.
00:01:55No puedo hacer eso para cada una de las imágenes.
00:01:59Bueno, quiero decir, podría,
00:02:00pero simplemente tomaría una eternidad, ¿verdad?
00:02:01Necesitamos equilibrar la velocidad con la calidad,
00:02:04y he descubierto después de hacer esto
00:02:06una y otra vez yo mismo
00:02:07que esta es la mejor manera
00:02:09de abordar los carruseles en la IA y las redes sociales,
00:02:12y hablamos de que las redes sociales
00:02:13están inundadas de estos carruseles de baja calidad.
00:02:15Sabes de lo que hablo,
00:02:16especialmente si estás en el nicho de la IA.
00:02:18Cuatro de estos seis que ves aquí mismo
00:02:19fueron creados claramente con Claude Code.
00:02:21Ni siquiera necesito señalártelos, ¿verdad?
00:02:23Tienen ese estilo de diapositiva HTML,
00:02:26y se ven muy, muy parecidos,
00:02:27y solo vas a ver más y más de esto.
00:02:29Así que si quieres que los tuyos conviertan,
00:02:31tienes que encontrar algo que destaque.
00:02:34Y entonces, como te acabo de mencionar,
00:02:36es un proceso de dos partes.
00:02:37La primera es la imagen de portada.
00:02:39Ahí es donde usamos la generación de imágenes por IA.
00:02:41Para hoy, les voy a mostrar
00:02:43cómo hacer esto usando la CLI de Higgsfield.
00:02:46Me gusta la CLI de Higgsfield
00:02:47porque me da una forma de acceder
00:02:49a cualquier herramienta generadora de imágenes por IA,
00:02:52ya sea Nano Banana,
00:02:55GPT Images 2,
00:02:55o cualquier otra cosa que salga la próxima semana,
00:02:57y hacerlo a través de la terminal.
00:02:59Y la segunda parte son las diapositivas de cuerpo
00:03:00a través de Claude Code usando recursos HTML.
00:03:04Pero primero, antes de empezar a construir nada,
00:03:06necesitamos encontrar inspiración.
00:03:07Necesitamos hacer algo de investigación,
00:03:08ver qué funciona cuando se trata de formatos de carrusel,
00:03:11fuera de tu nicho, especialmente,
00:03:13para tener algo sobre lo cual construir.
00:03:15Si simplemente intentas hacer todo esto desde cero,
00:03:17te prometo que vas a sufrir,
00:03:18y te va a tomar muchísimo tiempo.
00:03:20¿Por qué empezamos desde cero?
00:03:21Solo mira qué funciona,
00:03:23y no los copies, pero toma inspiración.
00:03:25¿Y dónde la encuentras?
00:03:27Bueno, la encuentras en las redes sociales.
00:03:29Así que lo fácil de hacer
00:03:30es simplemente ir a Instagram,
00:03:31ir a TikTok,
00:03:32buscar carrusel,
00:03:33eso es todo lo que puse arriba,
00:03:34y empezar a hacer scroll
00:03:35y ver qué es lo que más te llama la atención.
00:03:39¿Qué te atrae visualmente?
00:03:41¿Qué crees que se ve genial?
00:03:43Eso es lo que vamos a hacer.
00:03:44Y si veo algo que me gusta,
00:03:45voy a hacer dos cosas.
00:03:48Una, simplemente voy a hacer clic en ello
00:03:50y tomar una captura de pantalla de la imagen de portada,
00:03:54y luego voy a hacer lo mismo en el cuerpo.
00:03:57Voy a echarle un vistazo a la diapositiva de cuerpo,
00:03:59ver si es algo que me gusta,
00:04:00y voy a tomar una captura de eso también.
00:04:02Y si es tu primera vez haciendo esto,
00:04:04francamente, deberías hacer esto
00:04:05por al menos unos 20 a 30 minutos.
00:04:07Y necesitas empezar a construir una biblioteca
00:04:10de inspiración visual.
00:04:13Yo mismo tengo una carpeta completa
00:04:15dedicada a la inspiración de carruseles,
00:04:16y no es todo cosas de IA.
00:04:18Francamente, deberías mirar cosas
00:04:19fuera de tu nicho
00:04:21que puedas traer a tu nicho.
00:04:22Porque si solo estoy haciendo lo mismo
00:04:24que todos los demás en el espacio de la IA,
00:04:26o estás haciendo todo
00:04:26lo que todos los demás están haciendo en tu espacio,
00:04:28no va a destacar.
00:04:30Así que siempre es genial ver
00:04:31qué están haciendo otras personas
00:04:32en dominios completamente diferentes.
00:04:34Así que paso cero, inspiración.
00:04:36Quiero que empieces a construir esa biblioteca.
00:04:38Y para el video de hoy,
00:04:39quiero que te centres en uno específico
00:04:41que te gustaría usar
00:04:43o tomar como plantilla
00:04:44para el carrusel que vamos a construir hoy.
00:04:46El siguiente paso, paso uno,
00:04:47es instalar la CLI de Higgs Field.
00:04:48De nuevo, esto te da acceso
00:04:49a todos los diferentes generadores
00:04:51de imágenes y videos que existen.
00:04:53Así que solo ve a Higgs Field.ai,
00:04:56irás a la pestaña de MCP y CLI,
00:04:58haz clic aquí en la CLI.
00:04:59Hay un MCP también,
00:05:00pero prefiero la CLI.
00:05:02Y luego simplemente la vas a instalar
00:05:03usando este comando.
00:05:04Luego vas a ejecutar
00:05:05Higgs Field Auth Login
00:05:07para iniciar sesión en tu cuenta.
00:05:09Y luego puedes añadir estas habilidades también.
00:05:12Así que ahora hablemos de crear estos carruseles.
00:05:15Primero lo primero,
00:05:15quieres crear una carpeta para tus carruseles.
00:05:18Yo llamo a la mía Chase AI Carousels.
00:05:19No importa cómo llames a la tuya.
00:05:21La razón de esto es que, a largo plazo,
00:05:24quieres empezar a construir una biblioteca
00:05:25de tus propios carruseles que han funcionado bien.
00:05:28Ya hicimos todo eso, ¿verdad?
00:05:29Donde estamos buscando a través de
00:05:30todos estos en busca de inspiración.
00:05:32Bueno, imagina que después de haber creado
00:05:3430, 40, 50, 60 carruseles,
00:05:36y sabes que tienes como 10 o 15 plantillas
00:05:39que siempre funcionan.
00:05:41Bueno, poder crear carruseles
00:05:43más adelante se vuelve infinitamente más fácil
00:05:44porque entonces solo tienes que decirle a Claude Code,
00:05:46oye, ve a hacer el carrusel versión 10.
00:05:49Ahora vamos a hacerlo sobre este tema.
00:05:51Blah, blah, blah, blah, blah.
00:05:51Así que vas a empezar a construir
00:05:53esa base hoy aquí.
00:05:54Pero hoy, como no tenemos nada,
00:05:56necesitamos empezar con algo de inspiración.
00:05:57Así que lo que vamos a hacer
00:05:59es tomar una captura de pantalla
00:06:00de la página de título que nos gusta
00:06:03que estamos intentando hacer nosotros mismos.
00:06:04Ahora, encontré esta diapositiva de título para inspiración.
00:06:06Así que esto es lo que voy a usar.
00:06:08Y el tema del que voy a hablar
00:06:10para mi carrusel son los cinco mejores
00:06:12plugins de Cloud Code para junio.
00:06:15Y con la captura de pantalla
00:06:16de esa imagen en Cloud Code,
00:06:18ahora voy a dar una instrucción
00:06:19algo así como,
00:06:21oye, aquí está la imagen
00:06:22que quiero usar de inspiración.
00:06:24Usa la CLI de Higgs field.
00:06:26Usa este modelo de imagen en particular.
00:06:28También usaremos imágenes de GPT.
00:06:29Y luego voy a entrar en
00:06:30cómo quiero que se diferencie
00:06:32de la imagen original.
00:06:34Así que quiero que uses esta CLI de Higgs field
00:06:36para crear una imagen de portada
00:06:38para mi nuevo carrusel
00:06:40que tratará sobre
00:06:41los cinco mejores plugins de Cloud Code para junio.
00:06:45Ese es el título que quiero en la página.
00:06:46Los cinco mejores plugins de Cloud Code para junio.
00:06:48Quiero usar la captura de pantalla
00:06:51que acabo de darte como imagen de referencia.
00:06:53Así que quiero que sea
00:06:54esencialmente exactamente igual que esa imagen,
00:06:57pero cambia a la mujer actual
00:07:02que es como la estatua en el medio,
00:07:03cámbiala por un hombre.
00:07:05Así que lo cambiamos un poco,
00:07:06pero mantén todo lo demás igual
00:07:08en cuanto a estética.
00:07:09Lo que también quiero que cambie
00:07:10es que no quiero que esas cosas
00:07:12sean iconos de Photoshop.
00:07:14Que sean iconos de GitHub
00:07:17o un icono de Anthropic.
00:07:20Quiero que uses imágenes de GPT también.
00:07:22Quiero que uses una relación de aspecto
00:07:24que sea lo más cercana posible a cuatro a cinco.
00:07:27Quiero que sea de alta calidad.
00:07:28Quiero que sea 2K.
00:07:29Y quiero que crees cuatro imágenes.
00:07:32Y una vez que estén listas,
00:07:33adelante, muéstramelas.
00:07:35Así que ahora va a seguir adelante
00:07:36y empezará a construirla para mí.
00:07:37Así que le dije la imagen de referencia.
00:07:39Le dije cómo quiero que cambie.
00:07:41Porque recuerda, si lo observamos,
00:07:42básicamente estoy diciendo que cambie la estatua
00:07:45por algo que sea masculino,
00:07:46que quite los iconos de Photoshop
00:07:48y los ponga como iconos de GitHub,
00:07:49y luego cambie el texto real.
00:07:51Más allá de eso, le dije qué modelo de imagen
00:07:52usar, GPT images too,
00:07:54y luego le di algunas instrucciones
00:07:56en cuanto a la calidad.
00:07:59Ahora, si no sabes
00:08:00qué tipo de entradas debes dar
00:08:01para un modelo de imagen en particular,
00:08:02digamos que estás usando Nano Banana Pro
00:08:04en lugar de GPT images too,
00:08:05Cloud Code lo sabe.
00:08:07Tiene las habilidades.
00:08:07Tiene la CLI.
00:08:08Así que puede decirte lo que cree que es mejor.
00:08:11Lo más importante es obtener el prompt correcto
00:08:14en términos de lo que quieres cambiar.
00:08:16Ahora, la otra cosa que debes recordar es,
00:08:19especialmente al principio,
00:08:20cuando recién estás empezando aquí,
00:08:21probablemente tengas que hacer esto varias veces.
00:08:23Nos va a devolver una imagen.
00:08:24Probablemente tengamos que editarla.
00:08:25Así que existe este proceso creativo iterativo.
00:08:28Es muy raro que logres esto al primer intento.
00:08:30Y por eso hacemos esto solo para la página de título.
00:08:33Imagina pasar por este proceso
00:08:34para cada una de las diapositivas,
00:08:36cada imagen en tu carrusel,
00:08:38que podría ser como 10 imágenes.
00:08:39Simplemente toma demasiado tiempo.
00:08:41Por eso hacemos esto solo en el título,
00:08:42y el resto lo hacemos mucho más rápido a través de HTML.
00:08:46Así que aquí están las imágenes con las que regresó.
00:08:48Lo primero, le falta el texto real.
00:08:52Pero diría que, en general, no está mal
00:08:56en términos de la vibra general que buscamos.
00:08:58Me gusta cómo salió la estatua.
00:09:00Me gusta cómo salieron los iconos.
00:09:01Podríamos criticar un poco el icono de Anthropic.
00:09:05Tal vez la crema se ve un poco diferente.
00:09:07Pero tiene un poco de lo que buscamos.
00:09:09Si tan solo pudiéramos imaginar el texto puesto ahí,
00:09:11estaría feliz con esto.
00:09:13Incluso tenemos algunas sombras y cosas así.
00:09:14Y si lo comparamos con el original,
00:09:16y me saldré de la pantalla por un momento,
00:09:18bastante cerca, ¿verdad?
00:09:20Como puedes ver de dónde vino la inspiración.
00:09:23Hay un poco más ocurriendo
00:09:24con el original, ¿verdad?
00:09:26Tendrían otro icono en la parte superior izquierda,
00:09:27pero me gusta.
00:09:28Creo que si ahora solo agregamos el texto aquí,
00:09:30estaría totalmente feliz.
00:09:31Para ser honesto, no estoy totalmente seguro
00:09:32de por qué desapareció el texto,
00:09:34pero es un movimiento bastante fácil de cara al futuro, ¿verdad?
00:09:36Y en realidad tienes dos opciones aquí.
00:09:38La primera es que tomamos esta portada
00:09:40porque me gusta esta de las cuatro que produjo.
00:09:43Simplemente la volvemos a introducir en Cloud Code
00:09:45y decimos, oye, mantén todo igual.
00:09:47Todo lo que quiero que hagas es agregar el texto en la parte superior.
00:09:51La otra opción es que podrías llevar esto
00:09:52a algo como Canva
00:09:53si quieres ser un poco más práctico.
00:09:55La elección es tuya.
00:09:57Pero para el video de hoy,
00:09:57vamos a darle esta imagen y decir,
00:09:59oye, agrega el texto para los cinco mejores habilidades
00:10:02o los cinco mejores plugins para Cloud Code en junio
00:10:05y resalta alguna parte de él
00:10:07para que tenga ese, ya sabes,
00:10:08efecto de arcoíris que vemos a lo largo de los ojos.
00:10:11Así que me gusta esta imagen que creamos,
00:10:13pero quería agregar el texto
00:10:15y quería emular el texto
00:10:16de la imagen original que usamos como referencia.
00:10:20Así que recuerda para el título,
00:10:21el texto que quiero es que diga
00:10:23los cinco mejores plugins de Cloud Code para junio.
00:10:27Y luego alguna parte de eso
00:10:29debería tener ese gradiente de arcoíris,
00:10:33la misma clase de cosa que pasa a lo largo
00:10:35de los ojos de nuestra estatua, por así decirlo.
00:10:38Así que sigue adelante y haz eso
00:10:40y crea cuatro versiones de eso también.
00:10:41Y así es más o menos como debe ir ese vaivén
00:10:44cuando pasas por esto.
00:10:45No necesitas complicarlo demasiado.
00:10:46Solo di lo que quieres.
00:10:47Pide múltiples imágenes.
00:10:48Puede hacer cuatro a la vez.
00:10:50En realidad, creo que puede hacer hasta 16 a la vez,
00:10:52pero descubrí que cuatro es un buen punto medio.
00:10:55Veremos con qué regresa.
00:10:56Así que aquí está lo que obtuvimos cuando le dijimos que agregara el texto.
00:10:58Como dije, obtuvimos cuatro opciones de las cuatro.
00:11:02Creo que esta es la que más me gusta.
00:11:05Si tuviera más tiempo, probablemente la editaría un poco más,
00:11:09tal vez añadiría algún tipo de sombra paralela al texto mismo
00:11:12para darle un poco más de impacto.
00:11:14Pero puedes seguir para siempre tratando de conseguir algo que te guste.
00:11:18Pero creo que esto es lo suficientemente bueno por ahora.
00:11:20Si viera esto mientras me desplazo por mi propio Instagram o TikTok o lo que sea
00:11:23y viera esto como imagen de portada, me detendría.
00:11:25Así que una vez que tenemos la imagen de portada bloqueada, ahora podemos pasar a las diapositivas del cuerpo.
00:11:29Y recuerda, cuando hablamos de las diapositivas del cuerpo,
00:11:31esto es solo todo después de la diapositiva de título.
00:11:35Y algunas cosas que queremos tener en mente es
00:11:37que no tenemos mucho espacio para operar aquí.
00:11:40Así que como esta diapositiva individual, ¿verdad?
00:11:42Tenemos una imagen, tenemos una especie de título,
00:11:45y luego tenemos una o dos líneas de texto con las que trabajar.
00:11:48Quieres tratar esto casi como lo harías con una presentación de diapositivas normal con PowerPoint.
00:11:51No queremos llenarlo de texto.
00:11:53Las imágenes son buenas.
00:11:54Todos amamos las imágenes.
00:11:55Crea algún tipo de título, y luego obtienes como,
00:11:58obtienes un par de oraciones.
00:12:00Entonces, ya sabes, la economía de la acción es muy importante aquí.
00:12:03Pero en lo que necesitas pensar es, está bien, ¿qué serán las imágenes?
00:12:07¿Cuál será el fondo general?
00:12:08¿Y qué será el texto?
00:12:10Ahora, lo grandioso aquí es que esto está casi completamente hecho con HTML.
00:12:14Así que Cloud Code genera todo esto por sí solo.
00:12:17Con una excepción, que son estas capturas de pantalla.
00:12:20Así que le di a Cloud Code estas capturas de pantalla que ves para muchas de estas cosas.
00:12:24Bueno, para algunas de estas cosas.
00:12:25Así que esta fue una captura de pantalla que di, y le dije que la pusiera ahí.
00:12:28Esta fue una captura de pantalla que le di.
00:12:30Pero también puede crear la suya propia.
00:12:31Así que esta cosa que muestra como una terminal, Cloud Code creó todo eso.
00:12:35No hice nada.
00:12:36Así que en esta parte, lo que necesitamos hacer es descubrir cómo queremos que se vean estas diapositivas.
00:12:42Y luego, al igual que hicimos con la diapositiva de portada, tendremos una especie de proceso iterativo.
00:12:46Pero podemos ser mucho más prácticos.
00:12:48Porque lo que voy a mostrarles es que haremos que Cloud Code cree estas diapositivas HTML para nosotros.
00:12:52Pero las traeremos a nuestro navegador.
00:12:54Y en realidad podemos hacer ajustes.
00:12:55Como que podemos entrar ahí, cambiar el texto, mover cosas, decirle que haga ediciones.
00:13:00Así que obtenemos aún más control que con la diapositiva de título.
00:13:03Pero al igual que la diapositiva de título, aquí es donde también podemos usar inspiración.
00:13:07Así que digamos que quería copiar lo que he hecho aquí y una de las mías ya.
00:13:11O querías copiar una de las mías.
00:13:12¿Qué vamos a hacer?
00:13:13Vamos a tomar una captura de pantalla.
00:13:15Vamos a pegarla aquí.
00:13:16Y ahora le voy a dar un prompt, algo diciendo como, oye, ahora trabajemos en el título.
00:13:20Ahora veamos las diapositivas del cuerpo.
00:13:21Hemos terminado con las diapositivas de título.
00:13:23Aquí está más o menos lo que estoy viendo.
00:13:24Quiero hacer algo de HTML puro.
00:13:26¿Podemos traerlo al navegador?
00:13:27Ahora solo estoy haciendo estos prompts en bruto.
00:13:30Todos estos prompts que le estoy dando a Claude Code ahora podrían ser también habilidades, porque podemos codificar todo esto perfectamente.
00:13:36Ahora tengo mis propias habilidades personales para todas estas cosas, así como ejemplos de mis propios carruseles.
00:13:42Puedes conseguir todo eso dentro de mi comunidad.
00:13:44Pondré un enlace a eso en el comentario fijado.
00:13:47Pero si estás haciendo esto por tu cuenta, así es como debería sonar.
00:13:50Ahora pasemos a hacer la diapositiva del cuerpo.
00:13:53Así que tenemos la diapositiva del título bloqueada.
00:13:54Me gusta lo que hicimos ahí.
00:13:55Y ahora con la diapositiva del cuerpo, será en HTML.
00:13:57Esta imagen que viste es la que quiero usar como inspiración.
00:14:00Quiero usarla como plantilla para cómo hacemos nuestras diapositivas del cuerpo.
00:14:04Me gusta el estilo textil.
00:14:05Me gusta el fondo.
00:14:06Me gusta todo eso.
00:14:07Así que quiero crear las diapositivas del cuerpo.
00:14:10Quiero que sea en HTML.
00:14:11Quiero que puedas abrir este HTML en el navegador.
00:14:14Y quiero poder hacer los ajustes.
00:14:15Quiero poder mover las cosas, cambiar el tamaño de fuente, cambiar el texto real,
00:14:19y poder hacerlo a través del navegador.
00:14:21Tengo que copiar el JSON.
00:14:23Cuando haga esos cambios, que así sea.
00:14:24Pero quiero que sea lo más fácil posible.
00:14:27Y para las cinco diapositivas del cuerpo, quiero que se relacionen con los cinco plugins de junio.
00:14:33Por ejemplo, cinco plugins que podemos hacer.
00:14:35Hagamos uno de ellos.
00:14:36Hagamos Caveman.
00:14:38El siguiente, haremos el plugin Codex.
00:14:41El tercero, hagamos Impeccable.
00:14:43Y luego inventa el cuarto y quinto plugin por tu cuenta.
00:14:47Y luego tráelo una vez que hayas hecho eso.
00:14:49Así que siguió adelante y construyó las diapositivas, nos dijo los cinco plugins que creó,
00:14:53y luego también creó esta cosa de bucle de ajustes.
00:14:55Así que lo estamos abriendo aquí dentro del navegador.
00:14:58Puedes verlo.
00:14:59Así que recuerda, ¿qué le dimos?
00:15:01Le dimos una captura de pantalla del carrusel que creé aquí.
00:15:05Así que es relativamente similar, puedes ver que intentó emular el logotipo de Anthropic aquí atrás.
00:15:10Podría darle fácilmente a Claude Code una imagen real del logotipo de Anthropic
00:15:14y hacer que se base en eso.
00:15:16Pero tenemos una especie de pastilla aquí arriba, plugin número uno, modo cavernícola.
00:15:21Y además, no le dije qué era Caveman.
00:15:25Recuerda que, por sí solo, hizo su investigación, echó un vistazo a GitHub,
00:15:28creó todo el texto para nosotros.
00:15:30No le di ningún texto.
00:15:31Y siguió adelante y lo hizo para casi todo.
00:15:34Y puedes ver aquí abajo, esta pequeña cosa de terminal que creó,
00:15:38relativamente simplista porque, de nuevo, solo está trabajando con sus propios activos HTML.
00:15:41No le di ninguna captura de pantalla.
00:15:43Pero el verdadero poder de esto está aquí en los ajustes.
00:15:45Así que esta idea surgió de Claude Design, que también tiene su propia especie de modo de ajustes.
00:15:50Así que pensé, oye, ¿por qué no empezamos a implementar algo así,
00:15:53lo cual es bastante fácil de hacer cuando hacemos nuestro carrusel.
00:15:56Así que puedo cambiar, ya sabes, el tamaño del titular, el tamaño del cuerpo, la opacidad en el fondo.
00:16:03Y luego realmente puedo, ya sabes, cambiar cosas sobre la marcha, ¿verdad?
00:16:10Este es el poder de hacer todo a través de HTML en lugar de tener que hacerlo todo a través de un generador de imágenes por IA.
00:16:15Y cualquier cosa aquí, puedo ajustarla, ¿verdad?
00:16:17La tarjeta, podemos ajustarla para inclinar todo.
00:16:20Ahora, si cambio algo, cuando crea esta cosa de ajustes para ti, de nuevo, tengo mi habilidad exacta para ello en la comunidad.
00:16:29Pero si haces esto tú mismo, probablemente dirá, oye, como cuando haces estos cambios, necesitas exportar tus ajustes.
00:16:34Así que hay ajustes de exportación en la parte inferior, que solo están en JSON.
00:16:38Así que cada vez que hacemos un cambio, y puedo hacer esto en varias diapositivas a la vez, simplemente exporto los ajustes, vuelvo aquí,
00:16:44y luego los pego directamente en Claude Code.
00:16:47Y luego se actualizará solo.
00:16:49Así que es muy fácil cambiar las cosas.
00:16:51Y desde aquí, ¿qué vamos a hacer?
00:16:54Bueno, solo vamos a revisar las diapositivas.
00:16:55Vamos a ver si coincide con nuestra visión.
00:16:57Sabes, ¿es demasiado redundante, o no?
00:17:00Está hablando de las cosas correctas?
00:17:01Y luego creo que donde realmente puedes añadir a esto es agregando capturas de pantalla a las cosas.
00:17:07Así que, por ejemplo, ¿qué tenemos aquí?
00:17:10Modo cavernícola.
00:17:11Así que puedo ir al GitHub de Caveman.
00:17:13Y podría ser tan simple como yo tomando una captura de pantalla de esta imagen, yendo a Claude Code,
00:17:19pegando la imagen allí y diciendo, oye, ¿podemos añadir esta imagen a la diapositiva de Caveman?
00:17:26Es la imagen de Caveman en lugar de lo que sea que hayas creado.
00:17:30Y luego simplemente repetiríamos ese proceso una y otra vez.
00:17:33Y puedes ver que añadió la imagen de Caveman aquí.
00:17:36Y es bastante grande.
00:17:37Así que simplemente puedo, ya sabes, moverla hasta que obtenga algo que me guste.
00:17:43Y además, también puedes decirle a Claude Code que salga a Internet y encuentre imágenes apropiadas para todas estas cosas también.
00:17:49No es solo HTML o capturas de pantalla, puedes ser bastante creativo aquí.
00:17:53Y en este punto, simplemente repetiríamos este proceso una y otra vez hasta que obtengamos algo que nos guste.
00:17:58De nuevo, en términos de creatividad, mucho vendrá de la inspiración que encontraste.
00:18:02La mía fue esta.
00:18:03Pero tal como hablé antes, donde vamos a buscar carruseles en Instagram, lo hicimos para la imagen de portada.
00:18:09Puedes mirar todas sus diapositivas del cuerpo también.
00:18:11Y eso es prácticamente todo en cuanto a cómo hacerlo.
00:18:14Ahora, para que se vea bien, ya sabes, las cosas creativas dependen de lo que estés hablando.
00:18:18Pero eso es la parte de Claude Code.
00:18:20Eso es el lado de construcción.
00:18:21Y es muy simple.
00:18:23Y de nuevo, como hablé antes, simplemente vas a hacer esto para todos tus carruseles.
00:18:27Y todos van a tener plantillas diferentes.
00:18:28Y entonces cuando llegue el momento de, ya sabes, construir el carrusel número 20, cuando has estado haciendo esto una y otra vez,
00:18:35ni siquiera tienes que pasar por todos estos problemas por los que hemos pasado en este punto,
00:18:38de acuerdo, encuentra la inspiración, haz estos ajustes.
00:18:39Ya está pre-construido.
00:18:41Solo cambias el texto.
00:18:43Y así es a través de este proceso de tres pasos de encontrar inspiración, crear la imagen de portada con modelos de IA externos,
00:18:49y luego tres, crear las diapositivas del cuerpo con HTML, que obtenemos un proceso sostenible y repetible
00:18:57que nos da lo mejor de ambos mundos.
00:18:58Obtenemos toda la creatividad genial y todas las imágenes geniales con los modelos de IA,
00:19:03pero el HTML es como la columna vertebral, pero es lo suficientemente fácil de ejecutar para que podamos hacer esto a escala una y otra vez
00:19:08y no estar sentados frente a la computadora durante horas cada día.
00:19:11Así que con todo eso en mente, ahí es donde te voy a dejar hoy.
00:19:14Espero que esto arroje algo de luz sobre cómo crear carruseles que son un poco mejores, creo, que lo que ves por ahí.
00:19:20No caigas en la trampa de “oh, todo lo que necesitas es esta única habilidad dentro de Claude Code”.
00:19:25Podemos hacer un poco más.
00:19:26Y de nuevo, no es mucho más trabajo.
00:19:29Solo tienes que construir una base.
00:19:31Así que como siempre, déjame saber lo que pensaste.
00:19:34Asegúrate de echar un vistazo a Chase AI Plus si quieres tener en tus manos mi Claude Code Masterclass,
00:19:38así como todas mis habilidades y ejemplos de mis carruseles.
00:19:41Eso está dentro del comentario fijado.
00:19:43Además de eso, nos vemos por ahí.

Key Takeaway

La creación de carruseles de alto rendimiento requiere un modelo híbrido que utiliza IA generativa para imágenes de portada impactantes y HTML para las diapositivas de valor, permitiendo un flujo de trabajo sistematizado y escalable.

Highlights

  • Claude Code genera carruseles visualmente idénticos y de bajo rendimiento cuando se utiliza exclusivamente con HTML puro.

  • El enfoque híbrido combina modelos de generación de imágenes por IA externa para la portada con HTML generado por Claude Code para las diapositivas de valor.

  • La CLI de Higgsfield permite acceder de forma centralizada a múltiples motores de generación de imágenes como GPT Images 2 y Nano Banana Pro directamente desde la terminal.

  • La creación de una biblioteca personal de 30 a 60 carruseles previos permite reutilizar plantillas exitosas y acelerar la producción futura.

  • El proceso iterativo de edición permite ajustar fuentes, opacidad y diseño en tiempo real exportando ajustes en formato JSON desde el navegador.

Timeline

El problema de los carruseles estandarizados

  • Los carruseles de baja calidad creados solo con HTML puro generan nula interacción.
  • El uso de IA externa para portadas aumenta significativamente la tasa de conversión.
  • La saturación visual en nichos como la IA exige una diferenciación en la estética del diseño.

La mayoría de los carruseles producidos mediante Claude Code son ignorados debido a su apariencia uniforme y genérica. La solución consiste en dividir el proceso: utilizar modelos avanzados de generación de imágenes para crear una portada llamativa y recurrir al HTML para las diapositivas informativas. Esto equilibra la alta calidad visual necesaria para el 'gancho' inicial con la eficiencia operativa requerida para el resto del contenido.

Investigación e inspiración visual

  • La construcción de una biblioteca de inspiración visual debe durar entre 20 y 30 minutos.
  • La búsqueda de referentes debe incluir dominios fuera del nicho propio para lograr originalidad.

El diseño de carruseles no debe comenzar desde cero. Se recomienda investigar plataformas sociales buscando qué captaciones visuales detienen el scroll. Guardar estas capturas en carpetas temáticas crea una base de datos de plantillas que pueden ser adaptadas posteriormente. La clave para destacar es la hibridación de estilos provenientes de sectores alejados del nicho principal.

Generación de la portada mediante CLI

  • La CLI de Higgsfield centraliza el acceso a diversos modelos de generación de imágenes.
  • El proceso de creación requiere un flujo iterativo entre la imagen de referencia y las instrucciones del modelo.
  • La edición de texto sobre imágenes generadas puede realizarse volviendo a introducir el archivo en Claude Code o mediante editores como Canva.

Tras configurar la autenticación en la CLI de Higgsfield, se utiliza una imagen de referencia para guiar el estilo de la nueva portada. El proceso implica proporcionar instrucciones específicas sobre cambios necesarios en la composición, como reemplazar sujetos o iconos, manteniendo la estética original. La iteración es fundamental, ya que el resultado óptimo rara vez se obtiene al primer intento.

Construcción escalable de diapositivas con HTML

  • El HTML permite ajustes rápidos mediante un panel de control configurable dentro del navegador.
  • Los cambios realizados en las diapositivas se exportan en formato JSON para aplicarse automáticamente en Claude Code.
  • El sistema se vuelve más eficiente a medida que se acumulan plantillas pre-construidas.

Las diapositivas de contenido se gestionan enteramente mediante HTML, lo cual ofrece un control superior sobre el diseño y texto respecto a las imágenes estáticas. Es posible implementar un panel de ajustes interactivo que permite modificar parámetros como el tamaño del titular o la opacidad del fondo. Una vez alcanzado un diseño satisfactorio, el archivo JSON resultante se integra en Claude Code, eliminando la necesidad de rediseñar diapositivas para futuros carruseles.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video