4 maneras increíbles en las que Claude Fable 5 construye sitios web asombrosos
AAI LABS
컴퓨터/소프트웨어창업/스타트업AI/미래기술
Transcript
00:00:00Todos tienen acceso a los mismos modelos de IA, pero nadie ha construido procesos en torno a ellos.
00:00:05Quizás hayas escuchado la frase de que el modelo ya no importa, lo que importa es el arnés.
00:00:09Los arneses son básicamente los procesos que creas para que siga tu modelo de IA.
00:00:13Pero esto es lo que debes entender.
00:00:14Los modelos siguen evolucionando, así que el arnés que construiste hace tres meses ya está obsoleto.
00:00:19Al momento de grabar, el mejor modelo que existe es Fable 5, el modelo insignia de Anthropic,
00:00:24pero no te preocupes, te guiaremos a través de diferentes formas de asegurarnos de que tu arnés
00:00:27siga evolucionando para cualquier modelo existente.
00:00:30Anthropic tiene una habilidad oficial para el diseño front-end,
00:00:34y la razón por la que existe es un problema que ellos mismos nombraron.
00:00:37Lo que sucede es que el modelo tiende hacia la versión más segura y promedio del diseño
00:00:42que pediste.
00:00:43Lo llaman converger en la distribución, lo que básicamente significa que construye la cosa
00:00:47que ha visto mil veces antes.
00:00:49Ahora, con lo potentes que han sido anunciados estos últimos modelos, podrías pensar que esto ya no
00:00:53es un problema, pero no es lo que he encontrado.
00:00:56Por ejemplo, en este prompt, simplemente le pedimos que construyera una página de inicio para un sitio web de una plantación.
00:01:01Para empujarlo en la dirección correcta, le dijimos que fuera lo más creativo posible y que no se centrara
00:01:06demasiado en el contenido en sí.
00:01:07También le dijimos explícitamente que no cargara ninguna habilidad, porque tenemos varias habilidades disponibles
00:01:13en nuestro sistema y queríamos asegurarnos de que no las estuviera aprovechando.
00:01:16Esto es lo que terminó creando.
00:01:18Ahora, no es un mal diseño de ninguna manera, pero ciertamente tampoco es el mejor.
00:01:22Por ejemplo, hay algunos problemas de contraste y algunas imágenes no cargan correctamente.
00:01:26Pero cuando usamos la habilidad aquí, las cosas cambiaron bastante.
00:01:29Ahora, no hay nada especial en la habilidad.
00:01:31No hay referencias ni recursos externos.
00:01:34Es literalmente solo un prompt.
00:01:35Usando solo eso, produjo un diseño mucho mejor.
00:01:37El diseño fue significativamente más pulido y estéticamente agradable.
00:01:41Incluía sutiles animaciones y mucha más atención al detalle.
00:01:45En general, el resultado fue notablemente mejor que lo que el modelo generaría normalmente por sí solo.
00:01:49Con cada nuevo modelo, estas empresas de IA lanzan nuevas guías de prompts para quienes usan las API de los modelos.
00:01:55Y usando la guía de Fable 5, modificamos la habilidad de diseño.
00:01:58Puedes simplemente copiar el prompt de diseño de propósito general y la guía de prompts.
00:02:02Pégalos ambos en Claude, dile que tienes la guía de prompts para el modelo
00:02:06y pídele que cree una versión actualizada basada en eso.
00:02:09Analiza el prompt y te da una versión reescrita para el nuevo modelo.
00:02:12Y puedes ver que el nuevo sitio se ve mucho mejor.
00:02:15Está estructurado mucho mejor y convirtió todos los diferentes elementos en tarjetas.
00:02:19Creemos que se ve mucho más creativo que lo que Claude suele ofrecer debido a pequeños detalles
00:02:24como la forma en que la sección de CTA se convirtió en una postal con un sello encima.
00:02:29Son estos pequeños detalles los que hacen que se vea mucho más creativo.
00:02:32Ahora, hay otra razón por la que estas empresas publican guías de prompts.
00:02:35Muchas veces, los modelos tienen problemas de comportamiento y las guías te dicen cómo solucionarlos.
00:02:39Cuando salió Opus 4.8, Anthropic señaló que el modelo tendía a predeterminar un estilo de diseño particular.
00:02:45Su solución fue pedir al modelo múltiples alternativas de diseño primero, y luego dejarte elegir qué dirección seguir.
00:02:51Pero cuando salió Fable 5, este problema ya no se mencionó en sus guías de prompts.
00:02:56Y por lo que vimos, el modelo todavía recurre a ese mismo estilo.
00:02:59No sucede todas las veces.
00:03:01Pero según nuestras pruebas, aproximadamente dos de cada tres sitios generados todavía terminan con estilos muy similares.
00:03:07Así que nunca se solucionó realmente.
00:03:08Por eso vale la pena consultar los documentos de modelos anteriores también.
00:03:11A menudo encontrarás cosas útiles que simplemente no llegaron a la guía más reciente.
00:03:15Así que, usando la guía de prompts para Opus 4.8, cambiamos a una habilidad de diseño diferente
00:03:20que en realidad nos preguntaba qué tipo de dirección de diseño queríamos.
00:03:23Basado en eso, generó este diseño.
00:03:25Esto también se ve bien.
00:03:26Pero honestamente, un mejor enfoque es usar archivos design.md aquí.
00:03:30Estos archivos contienen el lenguaje de marca que simplemente colocas en tu página.
00:03:33Get design.md es una muy buena fuente donde puedes obtener archivos de muchas marcas.
00:03:38Pero aun así, úsalos después de que el modelo ya haya generado la página de inicio.
00:03:42Y esto es específicamente para páginas de inicio porque si miras dentro de los archivos design.md,
00:03:47bloquean todo, hasta la fuente.
00:03:50Y como viste en los ejemplos, la fuente es una gran parte de lo que hizo que esos sitios se vieran mucho más creativos.
00:03:55Hay dos niveles cuando se trata de añadir animaciones.
00:03:58La interfaz de usuario de marketing y la interfaz de usuario funcional.
00:04:00Usar la habilidad de diseño en la interfaz de usuario funcional, como los paneles de control, hará que se vean hermosos,
00:04:05pero la gente realmente no podrá usarlos.
00:04:07Así que para añadir animaciones, usamos dos cosas.
00:04:10Para páginas de marketing, esta habilidad ya le dice al modelo que añada animaciones basadas en CSS,
00:04:15pero las animaciones GSAP son mucho mejores.
00:04:17Aquí es donde entra otro paso de la guía de prompts.
00:04:20El esfuerzo es la principal palanca que controla el modelo ahora.
00:04:22Para tareas simples, puedes mantenerlo de bajo a medio,
00:04:25pero para tareas como añadir animaciones, usar X-High es una opción mucho mejor,
00:04:30y te dará menos reintentos.
00:04:32En nuestra habilidad de interfaz de usuario de marketing, hay una regla que especifica cuándo se debe usar GSAP.
00:04:36Cada vez que esa condición se activa, también carga automáticamente la habilidad GSAP.
00:04:41De hecho, usamos esa configuración en la misma página de inicio que se muestra aquí.
00:04:44Incluso con esa planificación limitada por nuestra parte, hizo un trabajo sorprendentemente bueno.
00:04:48Clavó la ubicación donde se reproduce la animación de pantalla dentro de la postal,
00:04:52y las estaciones transicionan una tras otra.
00:04:55Es un buen ejemplo de cómo estas habilidades especializadas pueden manejar muchos de los detalles de implementación
00:04:59automáticamente.
00:05:00Hemos logrado este sistema de habilidades a través de mucha prueba y error.
00:05:03Y con eso, quiero decir alcanzar repetidamente los límites de uso de 5 horas.
00:05:07Si quieres saltarte todo eso, puedes obtenerlo en nuestro Community AI Labs Pro.
00:05:11El enlace estará en la descripción.
00:05:12Entonces, como ya hemos mencionado, hay dos tipos de interfaces de usuario.
00:05:15Todo el flujo de trabajo detrás de la interfaz funcional es completamente diferente al de la interfaz de marketing.
00:05:20Por ejemplo, la planificación es el primer paso, y es muy importante.
00:05:23No vamos a profundizar mucho en eso en este video, pero una vez que tengas tu plan listo,
00:05:27puedes dárselo a Claude.
00:05:27Después de eso, en lugar de pedirle que construya la aplicación, deberías pedirle que construya los mockups usando HTML.
00:05:33Nuestro proceso comienza con el design.md.
00:05:36Si ya has decidido qué design.md quieres usar, eso es genial.
00:05:40Si no tienes uno, también está bien.
00:05:42Puedes seguir adelante sin él.
00:05:43Por ejemplo, si miras nuestra comunidad creada a medida,
00:05:45notarás inmediatamente que el diseño en el exterior y el diseño en el interior son completamente
00:05:50diferentes.
00:05:51En nuestro caso, todo fue planeado usando mockups de HTML primero.
00:05:54Comenzamos creando un design.md, que estuvo parcialmente inspirado en Notion.
00:05:58Usando ese sistema de diseño, construimos todas las pantallas como mockups antes de escribir la aplicación real.
00:06:04Una vez finalizados y validados esos mockups, los convertimos en esta aplicación completamente funcional.
00:06:09Ahora, antes de pasar a la parte más importante en el diseño de interfaces funcionales, tengamos
00:06:13una palabra de nuestro patrocinador.
00:06:14Muchas personas que usan Claude Code recientemente notaron que sus costos se dispararon.
00:06:18Honestamente, por eso Kimi llamó mi atención.
00:06:20Construyeron un modelo de código abierto que es realmente bueno para codificar a alrededor de 1/8 del precio de Opus.
00:06:26Su último modelo, Kimi K2.6, acaba de alcanzar el número uno en Sweebench Pro,
00:06:30básicamente el punto de referencia de codificación del mundo real más difícil en este momento.
00:06:33No solo lanzaron el modelo, construyeron productos sobre K2.6 que son genuinamente útiles.
00:06:38Puedes generar sitios web listos para producción con un buen diseño de front-end,
00:06:41crear presentaciones completas desde un solo prompt, e incluso manejar bases de datos y autenticación desde el primer momento.
00:06:47Pero la característica más loca es probablemente Agent Swarm.
00:06:49Puedes activar 300 agentes de IA en paralelo en una sola tarea.
00:06:53En lugar de un agente manejando todo lentamente, tienes todo un equipo de IA trabajando simultáneamente.
00:06:58Y todo esto se ejecuta en un modelo de código abierto que cuesta mucho menos que las alternativas
00:07:03de código cerrado por las que la gente ha estado pagando.
00:07:05Así que, si usas Claude Code o Cursor todos los días y tu factura de API ha sido dolorosa
00:07:09últimamente, Kimi vale la pena intentarlo.
00:07:11Si te registras a través de nuestro enlace, también obtendrás un bono de cuota adicional del 10% en tu primera compra
00:07:16antes del 30 de junio. Haz clic en el enlace en la descripción y comienza a construir.
00:07:19Ahora, hay otra parte realmente importante del diseño de interfaces funcionales, que es la experimentación.
00:07:24Con el tiempo, hemos probado muchos enfoques diferentes para resolver este problema.
00:07:28Inicialmente, usamos listas de tareas con múltiples agentes trabajando en paralelo,
00:07:32donde cada agente generaba una variación diferente de la interfaz de usuario.
00:07:35El objetivo era experimentar con múltiples diseños y averiguar qué enfoque realmente funcionaba mejor.
00:07:40Más tarde, comenzamos a usar subagentes para este flujo de trabajo, pero ya no importa.
00:07:45Con un millón de tokens de contexto, puedes hacerlo también con el agente principal.
00:07:48También construimos algo internamente llamado Gallery Viewer.
00:07:51El propósito del Gallery Viewer es simple.
00:07:53Cuando generas múltiples mockups de HTML, no deberían perderse entre docenas de archivos.
00:07:58En cambio, se abren automáticamente juntos en una sola vista, lo que los hace fáciles de comparar
00:08:03lado a lado. Por ejemplo, cuando estábamos construyendo la plataforma comunitaria, inicialmente no sabíamos
00:08:08cómo debería verse un espacio de interacción comunitaria. Sabíamos que queríamos una experiencia comunitaria,
00:08:12pero había muchas formas diferentes en las que los usuarios podían interactuar entre sí. Así que, en lugar de comprometernos
00:08:17con un solo diseño, experimentamos usando mockups de HTML. Le encargamos al agente crear múltiples
00:08:22interfaces de canal comunitario como mockups de HTML, para que pudiéramos compararlos. El agente crearía entonces múltiples
00:08:28versiones automáticamente y las abriría dentro del Gallery Viewer. Desde allí, podríamos comparar cada
00:08:33variación y decidir qué dirección era la más fuerte. Una cosa que notarás en este ejemplo
00:08:37es que los diseños no se ven todos visualmente consistentes. Idealmente, deberían compartir el mismo lenguaje de diseño
00:08:42mientras exploran diferentes patrones de interacción. La razón por la que eso no sucedió aquí es
00:08:46porque no se proporcionó ningún design.md. Cuando existe un design.md, el modelo lo usa como fuente de verdad para
00:08:53colores, espaciado, tipografía, componentes y estilo general. Así que todos los mockups generados se mantienen
00:08:59visualmente consistentes mientras exploran diferentes enfoques de UX. También hay algunos detalles más pequeños que
00:09:04pueden marcar una gran diferencia, como añadir animaciones a las interfaces funcionales. Hemos documentado un conjunto de pautas de animación
00:09:10en nuestra propia habilidad y puedes copiarlas si quieres. Nos han funcionado bastante bien hasta
00:09:15ahora y las estamos refinando continuamente. Una cosa que recomendaría fuertemente, sin embargo, es no exagerar
00:09:20con las animaciones en la parte funcional de tu aplicación. Las animaciones excesivas pueden parecer impresionantes al
00:09:25principio, pero a menudo hacen que las interfaces enfocadas en la productividad se sientan más distractoras. Una vez que hayas
00:09:29finalizado el diseño, el siguiente paso es usar la habilidad ShadCN. Ya he conectado la habilidad de interfaz funcional
00:09:35a la habilidad ShadCN, así que maneja la mayor parte del flujo de trabajo automáticamente. Anteriormente, teníamos flujos de trabajo mucho más
00:09:40elaborados. Generaríamos un plan de implementación detallado específicamente para el ShadCN
00:09:45MCP y usaríamos ese plan para construir toda la interfaz. Si bien ese enfoque funcionaba, también
00:09:50añadía mucha complejidad. Hoy en día, el flujo de trabajo es significativamente más simple. Todo lo que necesitas es el mockup final
00:09:55de HTML y la habilidad ShadCN. La razón por la que esto funciona tan bien es que la habilidad ShadCN ya contiene
00:10:01una gran cantidad de contexto y conocimiento de implementación empaquetados por los propios creadores de ShadCN.
00:10:06Debido a eso, puede tomar un mockup final de HTML y reproducirlo casi uno a uno usando
00:10:11componentes reales de ShadCN. Así que en esta etapa, no necesitas preocuparte por crear planes de implementación
00:10:16complicados o flujos de trabajo de conversión. Si te gustan estos procesos de diseño, suscríbete al
00:10:21canal y haz clic también en el botón de hype. Publicamos contenido que te ayuda a aprender nuevas formas de optimizar
00:10:26diferentes procesos en diferentes negocios con IA. Tu apoyo aquí significaría mucho para nosotros.
00:10:31La guía también te pide que hagas explícita la autoverificación para estos modelos. Puedes poner un prompt en
00:10:36el Claude.md que le pida al agente que verifique su salida. Ahora, en lugar de usar el agente principal,
00:10:41deberías usar un subagente que pueda verificar la salida. Y para verificarla, necesitas algo
00:10:46que puedas comparar contra. Para eso, apunta siempre el subagente a tu design.md.
00:10:50Otra cosa que se menciona en la guía es que los modelos funcionan mejor cuando tienen contexto sobre
00:10:55tu tarea. Para el diseño, esto significa tener conocimiento sobre qué es realmente el producto.
00:10:59Ahora, muchos marcos han configurado un product.md separado, pero en nuestra opinión,
00:11:03cuando configuras un Claude.md, tiene suficiente contexto para que el modelo entienda de qué trata
00:11:09tu proyecto. Entonces, lo que hace la habilidad de interfaz funcional es que cada vez que recibe una nueva tarea,
00:11:13hace que el modelo lea también el Claude.md. Además de eso, también contiene una carpeta de mox
00:11:18que tiene todos los archivos HTML para que puedas hacer referencia a ellos cuando añadas nuevos elementos a tu
00:11:24aplicación. Además de eso, sería genial si también tuvieras el design.md. Estos son los archivos
00:11:28que necesitas tener en tu proyecto. Hoy en día, muchas aplicaciones SaaS pueden clonarse fácilmente.
00:11:32Nosotros mismos usamos software creado a medida para la gestión de equipos. Hemos construido nuestra propia versión porque
00:11:37no tenemos que alojar a mucha gente. En ese caso, realmente no tienes que hacerlo desde cero.
00:11:42Solo necesitas asegurarte de clonar su interfaz de usuario tan perfectamente como puedas. Con modelos más nuevos,
00:11:46su capacidad para entender imágenes ha mejorado tanto, así que el flujo de trabajo aquí se vuelve muy fácil.
00:11:51En la clonación, hay dos modos diferentes. El Modo B es para la interfaz de marketing. Para esto,
00:11:56hay una herramienta CLI muy útil llamada single-file CLI. Usándola, puedes capturar todo en una página,
00:12:01incluyendo el HTML, CSS e incluso las imágenes utilizadas en ese sitio web. Si el sitio contiene múltiples páginas,
00:12:07también puedes obtener su archivo sitemap.xml, que es esencialmente un mapa del sitio web. Usando ese mapa del sitio,
00:12:13el modelo puede descubrir y obtener las otras páginas también. El problema comienza cuando te encuentras con páginas que están
00:12:19detrás de una autenticación. Por ejemplo, si quisieras clonar la interfaz de usuario de Notion, no podrías simplemente apuntar la
00:12:23herramienta al sitio web de Notion. Cuando proporcionas la URL de Notion, solo obtendrás la página de inicio.
00:12:28Lo que realmente quieres es la interfaz de la aplicación detrás de la pantalla de inicio de sesión. Afortunadamente, los modelos se han
00:12:34vuelto muy buenos para entender interfaces a partir de imágenes, así que en esas situaciones, las capturas de pantalla son la
00:12:40mejor opción. Tienes que capturar los diferentes estados de la interfaz muy cuidadosamente. Digamos que tienes una
00:12:45página abierta, querrás capturas de pantalla que muestren qué sucede al pasar el cursor y cómo las diferentes interacciones afectan el diseño.
00:12:50Tomemos otro ejemplo. Supongamos que abres una página donde dos páginas están en una columna. Si solo proporcionas esto,
00:12:56el modelo no sabrá que puedes hacer dos columnas. Necesitas ser extremadamente minucioso y proporcionar todo el
00:13:01contexto que el modelo necesita. Una vez que hayas capturado las capturas de pantalla, no pegues las imágenes directamente en el prompt. En su lugar,
00:13:07arrástralas a Claude. Esto le da al sistema acceso a las rutas de imagen que el Modo A puede usar. El Modo A
00:13:13reunirá todas esas capturas de pantalla, las colocará dentro de la carpeta de clonación y las usará como material de referencia.
00:13:19Esas capturas de pantalla se convierten efectivamente en la base para el proceso de clonación. Desde allí, puedes generar una
00:13:25versión inicial de HTML de la interfaz y luego pasar a construir la aplicación final.
00:13:29Eso nos lleva al final de este video. Si deseas apoyar el canal y ayudarnos a seguir haciendo videos
00:13:35como este, puedes hacerlo usando el botón de super gracias de abajo. Como siempre, gracias por
00:13:39ver y nos vemos en el próximo.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video