Fable 5 y GPT 5.6: Crea un sitio web de $10,000 de un solo golpe con esta habilidad
CChase AI
Computing/SoftwarePhotography/ArtInternet Technology
Transcript
00:00:00Todo este sitio web fue creado de una sola vez por Claude Fable 5 con una sola habilidad.
00:00:05No es solo una animación de desplazamiento, son varias animaciones de desplazamiento que se han unido
00:00:10para brindarte una experiencia fluida, de alta calidad y coherente.
00:00:15Esto es absolutamente increíble.
00:00:16Este es un producto extremadamente premium y te voy a mostrar la habilidad que te permite hacer todo esto.
00:00:22Además, te mostraré cómo no solo hice esto dentro de Claude Code,
00:00:25sino que también haremos una demostración de lo mismo dentro del nuevo GPT 5.6 Sol
00:00:31porque, ¿por qué detenerse con una sola herramienta de IA hoy en día?
00:00:35Y esto es realmente genial.
00:00:37Como dije, si intentas hacer esto manualmente sin este tipo de habilidad de animación de desplazamiento que encontré y mejoré,
00:00:42ya sabes lo difícil que es.
00:00:43Haces varios videos, obtienes los fotogramas iniciales, intentas hacer una coincidencia,
00:00:47sacas todos los fotogramas uno por uno, es un verdadero dolor de cabeza
00:00:50y esto hace que todo el proceso sea extremadamente fácil de ejecutar.
00:00:53Ahora, el verdadero crédito por esta habilidad es para Peter Wang.
00:00:55Él fue quien hizo la versión original.
00:00:57La encontré en Twitter y fue lo suficientemente amable como para hacerla de código abierto.
00:01:00Así que su “scroll world” estará enlazado abajo para que puedas echarle un vistazo.
00:01:03Ahora, lo que hice fue bifurcar esto e hice algunas mejoras,
00:01:07específicamente introduciendo niveles de presupuesto para que puedas hacerlo sin tener que gastar tanto.
00:01:10No necesitamos necesariamente seis escenas diferentes para nuestro sitio web
00:01:14e incluí muchas mejoras en la versión móvil y algunas cosas relacionadas con el SEO.
00:01:19Ahora, la forma en que funcionan estas animaciones de desplazamiento, a grandes rasgos, es empezando con una sola imagen.
00:01:23Eso es lo que ves justo aquí.
00:01:24Luego tomamos esa imagen y la convertimos en un video.
00:01:27Esta animación de desplazamiento en un momento fue un video, pero luego extraemos todos los fotogramas individuales del video usando FFmpeg
00:01:34y luego los asociamos con una posición en la que tú, el usuario, te encuentras en el sitio web.
00:01:40Ahora, hay mucho más detrás de escena para que sea una experiencia fluida y no sea completamente tosca.
00:01:46Y además, nos aseguramos de que todas nuestras escenas se referencien entre sí cuando las construimos.
00:01:50De esa manera, todas se ven coherentes.
00:01:52Como si todo fuera parte de una historia singular.
00:01:55En cuanto a cómo estamos generando las imágenes y videos, lo hacemos a través del MCP de Higgsfield.
00:02:00Y podemos hacerlo tanto con Claude Code como con Codex.
00:02:02Nunca tenemos que salir de la terminal.
00:02:04Está llamando a todos esos modelos de imagen, concretamente GPT Image 2, y a todos los modelos de video, como SeeDance, a través de ese MCP o la CLI.
00:02:12Ahora, para conectar esas herramientas a tu agente de IA preferido, solo dirígete a Higgsfield, ve a MCP y CLI, y simplemente sigue estos pasos.
00:02:20Solo copiarás la URL para el MCP y luego realizarás el proceso de autenticación.
00:02:25Lo único que necesitas después de eso es la habilidad misma.
00:02:27Y también pondré mi versión enlazada abajo.
00:02:30Puedes simplemente copiar la URL, dársela a Claude Code o Codex, o puedes hacerlo como un plugin.
00:02:35Cualquiera de las dos formas funciona.
00:02:36Ahora, como dije en la introducción, haré una demostración de esto dentro de Codex con el nuevo Sol 5.6, pero esto es lo que parecía dentro de Claude Code.
00:02:44Es exactamente el mismo proceso.
00:02:46Pasas por una entrevista, le dices qué tipo de sitio web estás tratando de construir, qué quieres que sea cada escena, y te guiará paso a paso.
00:02:53Y se asegurará de preguntar: “Oye, ¿te gusta esta imagen?” antes de que realmente cree todos los videos.
00:02:57No solo ejecutas la habilidad y aparecen todos los videos sin que hayas tenido voz ni voto en el proceso.
00:03:01Así que realmente te lleva de la mano durante todo el proceso.
00:03:04Así que dentro de Codex, he llamado a la habilidad “scroll world”.
00:03:07Así que simplemente dije: “/scroll world”.
00:03:08Y dije: “Estoy intentando crear un sitio web para una marca boutique de viajes a Japón”.
00:03:14Y la dirección de arte general que quiero es que vamos a optar por un estilo de origami.
00:03:18Ahora, si no sabes qué estilo quieres, puedes simplemente tener un intercambio con la IA y te hará varias preguntas.
00:03:25Yo ya sabía de antemano más o menos lo que quería.
00:03:27Así que no te preocupes si no tienes una idea exacta cuando llegues. Ahora, después de darle algo de dirección creativa, te preguntará: “¿Qué quieres hacer en cuanto al presupuesto?”
00:03:36Y: “¿Qué quieres hacer en cuanto al presupuesto para móviles?”
00:03:38Está diciendo: “¿Cuántas escenas quieres como referencia?”
00:03:41Esto fueron seis escenas.
00:03:43Esta es una cantidad significativa de video y, de hecho, es un viaje bastante largo de principio a fin.
00:03:48Esto probablemente sea excesivo para la mayoría de las personas.
00:03:50Además, esto te va a costar una gran cantidad de créditos de Higgsfield, me costó unos 800 al final del día.
00:03:56Así que si no estás en uno de los planes más caros, probablemente quieras quedarte con cuatro escenas, creo que es un punto ideal.
00:04:03Lo siguiente es qué quieres hacer con los móviles.
00:04:04Puedes hacer de todo, desde simplemente recortarlo de forma segura hasta una cadena completa en formato vertical, donde creará videos adicionales específicamente para dispositivos móviles.
00:04:12Así que tienes algo de margen para trabajar, dependiendo de qué tan lejos quieras llegar en ese frente.
00:04:15Pero para este video, solo vamos a ser eficientes y usar el recorte seguro.
00:04:20Así que las opciones más baratas, y entiende que también podrías hacer menos escenas.
00:04:24Podrías reducirlo a tres; esto es solo lo que ofrece por defecto.
00:04:28Pero luego te llevará a través de la propuesta de viaje y dirá: “Oye, esto es lo que se verá cada escena”.
00:04:32Y dirá: “Esta es la cantidad de generaciones que tomará”.
00:04:35Así que tomará un total de cuatro generaciones de imágenes y cuatro videos de inmersión de escena.
00:04:40Necesita haber un conector entre algunos de los videos y algunos fundidos cruzados.
00:04:43Así que en total dice nueve generaciones y te da un tiempo de generación estimado, que suele ser bastante conservador.
00:04:49No suele tardar tanto, aunque estemos hablando de video de IA.
00:04:52Y una vez que apruebas eso, lo siguiente que hará es generar el ancla.
00:04:56El ancla será ese fotograma inicial.
00:05:00Y hablamos de ese fotograma inicial.
00:05:01Estamos hablando de algo similar a esto en el fondo.
00:05:03Solo será una imagen fija.
00:05:04Y ahora depende de ti decir: “De acuerdo, me gusta esto”.
00:05:06Esta es la dirección artística que dominará todo.
00:05:09O: “No, cambiemos algunas piezas”.
00:05:11Esta es la parte que realmente tienes que lograr, porque si no te gusta y dices que sí, todo se basará en ello.
00:05:17Así que aquí tienes un vistazo a la imagen que creó.
00:05:19Y ahora me gusta.
00:05:20Probablemente ya te hayas dado cuenta.
00:05:21Si estás haciendo todo esto a través de Codex y Sol, bueno, tiene generación de imágenes.
00:05:26No necesitamos enviar ninguna solicitud a Higgsfield para crear imágenes con GPT Image 2
00:05:31cuando tenemos esa capacidad de forma nativa dentro de Codex.
00:05:34Así que harás que Codex haga eso de forma nativa, pero aún tendrás que enviarlo a Higgsfield para la generación de video.
00:05:41Por otro lado, si haces esto en Claude Code, obviamente no tiene generación de imágenes.
00:05:44Así que Higgsfield tiene que cargar con el trabajo durante todo el proceso.
00:05:48Pero aquí está la imagen.
00:05:50Me gusta.
00:05:51Entonces, ¿qué vamos a hacer?
00:05:52Vamos a decir: “Oye, esto es genial”.
00:05:55No puedo escribir.
00:05:57Seguir adelante.
00:05:59Así que después de 32 minutos, ha completado nuestro sitio web.
00:06:01Tenemos cuatro escenas diferentes.
00:06:02Tomó 10 generaciones.
00:06:04Y ahora está en nuestro host local listo para funcionar.
00:06:06Así que echemos un vistazo.
00:06:07Aquí está nuestro sitio web de turismo japonés.
00:06:08Lo que haremos es simplemente desplazarnos por él y echar un vistazo rápido.
00:06:12Gente viajando, el metro.
00:06:15Nos movemos aquí a la casa.
00:06:17Se abre.
00:06:19Luego van al hotel.
00:06:20Se despliega.
00:06:22Bastante genial.
00:06:23Y luego tenemos el pájaro por aquí, que comienza a volar.
00:06:28En general, ¿qué me gusta?
00:06:30¿Qué no me gusta?
00:06:31Me gustan las imágenes.
00:06:32Creo que esto se ve genial.
00:06:34Sabes, creo que individualmente dentro de cada escena, me gusta cómo progresó cada una.
00:06:38Como esta parte donde llega el metro.
00:06:41Impresionante.
00:06:41Mi problema aquí es la transición cuando vamos de la escena uno a la escena dos.
00:06:46Un corte bastante brusco.
00:06:47Tal vez quieras un corte brusco.
00:06:48Supongo que hay algo de dirección creativa ahí.
00:06:51Pero eso es algo que podríamos cambiar.
00:06:52Lo mismo aquí.
00:06:53A medida que pasamos de la escena dos, con detalles increíbles, para ser honesto.
00:06:57Pero a medida que pasamos de la escena dos a la tres, de nuevo, otro corte brusco.
00:07:01En comparación con la escena tres a la cuatro, creo que esta es una transición impresionante.
00:07:04Así que esto se abre.
00:07:06Boom.
00:07:06Están en el hotel.
00:07:07Pero si observas el fondo, nota la escena número cuatro, como entrando en el encuadre.
00:07:12Al principio está borrosa, aparece, da mucho este efecto 3D.
00:07:17Y le da profundidad al sitio web.
00:07:19Y luego hace una transición perfecta a la escena cuatro.
00:07:22Eso es genial.
00:07:23Si tuviera eso al pasar de la escena uno a la dos y de la dos a la tres, estaría super feliz.
00:07:28Esa es mi queja principal con esto.
00:07:31Pero todo lo demás se ve bien.
00:07:32Y poder agregar ese tipo de transiciones de escena y suavizarlas, no creo que
00:07:35fuera demasiado difícil.
00:07:36Porque si comparas esa generación, que de nuevo fue Sol GPT 5.6, con lo que creamos
00:07:41en Claude Code, las transiciones de escena son definitivamente un poco más elegantes aquí.
00:07:45Así que esta es la escena uno, ¿verdad?
00:07:46Así que estas cosas empujan desde arriba y es como una transición perfecta a esas
00:07:52siendo como, bueno, lo más cercano a la perfección a esas siendo como cables aquí.
00:07:56Lo mismo aquí mismo.
00:07:57Entramos.
00:07:58Oh, boom.
00:07:58Se abre.
00:07:59Y luego simplemente pasamos por encima a la siguiente escena.
00:08:01Así que escena a escena con las transiciones de Fable 5, creo que somos mejores.
00:08:06Lo mismo aquí.
00:08:06Boom.
00:08:07Estamos aquí.
00:08:07Alejar zoom.
00:08:08Siguiente escena.
00:08:09Así que esa es mi queja principal.
00:08:11Definitivamente le daría a Fable 5 la ventaja frente a Sol 5.6 aquí.
00:08:15Pero bueno, esto es un solo disparo, ¿verdad?
00:08:18Como con una sola habilidad.
00:08:19Estoy muy impresionado en general con lo bien que se ha creado la habilidad, ya sabes.
00:08:25Esto es increíble.
00:08:26Ahora, la siguiente pregunta es, de acuerdo, este es un espectáculo visual.
00:08:29¿Podemos convertir esto en un sitio web que sea más funcional dependiendo de lo que intentes
00:08:33hacer?
00:08:33Y no creo que eso sea un problema en absoluto.
00:08:34Creo que los problemas técnicos de crear un sitio web de desplazamiento animado como este, que
00:08:38se ve coherente y no se ve tosco y no se ve de baja calidad, es bastante difícil.
00:08:43Ya sabes, si te pidiera que simplemente hicieras esto por tu cuenta, creo que tendrías muchos problemas
00:08:46y te tomaría mucho tiempo llegar allí.
00:08:47Con este tipo de base, creo que es realmente fácil entonces, bueno, ¿qué estamos haciendo
00:08:51con el texto?
00:08:52¿Qué estamos haciendo con la CTA?
00:08:53¿Cómo estamos atrayendo realmente al usuario desde el héroe hasta el final?
00:08:56Es como completar algún tipo de formulario.
00:08:57No creo que eso sea demasiado difícil.
00:08:58No creo que tengamos que reinventar la rueda ahí.
00:09:01Eso es lo que hace cada sitio web.
00:09:02Y poder poner eso encima de lo que tenemos aquí, de nuevo, con Fable 5 y con
00:09:06Sol 5.6 no es un desafío en absoluto.
00:09:09Y el hecho de que esto sea solo una habilidad en un disparo es algo alucinante.
00:09:13De nuevo, si quieres hacer esto por tu cuenta, hace tres meses, seis meses, nueve meses
00:09:16atrás, era un verdadero dolor de cabeza.
00:09:18Así que de nuevo, un saludo a Peter Wang por la versión original de la habilidad.
00:09:21Ambas versiones, la mía y la suya, estarán enlazadas en la parte inferior de esta descripción.
00:09:24Y como viste, esto es súper sencillo.
00:09:26Realmente no tienes que hacer nada.
00:09:27Solo necesitas aparecer.
00:09:28Necesitas invocar la habilidad.
00:09:29Necesitas darle algún tipo de dirección creativa, y simplemente se pondrá a trabajar.
00:09:32Así que ahí es donde realmente los voy a dejar por hoy.
00:09:37Déjenme saber, como siempre, qué pensaron sobre esto en los comentarios.
00:09:40Asegúrense de echar un vistazo a Chase AI Plus si quieren poner sus manos en mi Clase Maestra de Claude Code
00:09:43y en más lecciones de IA como esta.
00:09:46Y aparte de eso, los veré luego.