Increíbles habilidades de diseño con Claude que necesitas para crear sitios web hermosos
AAI LABS
컴퓨터/소프트웨어창업/스타트업AI/미래기술
스크립트
00:00:00Hay algo en lo que la gente se equivoca.
00:00:01Los modelos han mejorado mucho en diseño y los vemos progresar cada día.
00:00:05Pero en algún momento, todos esos diseños geniales empiezan a parecerse.
00:00:08Así que la verdadera pregunta es, ¿qué hace que tu diseño realmente destaque?
00:00:12Gran parte de ello depende de las instrucciones y los prompts correctos.
00:00:15Y aquí es donde entran las habilidades, porque ahora las que realmente funcionan pueden empaquetarse
00:00:19en un flujo de trabajo reutilizable que puedes compartir con cualquiera.
00:00:21Así que mucha gente ha estado creando habilidades para el diseño y algunas de las mejores vienen
00:00:25directamente de los equipos detrás de las herramientas.
00:00:27Pero no todas las habilidades que existen valen la pena y muchas de ellas realmente no ayudan con
00:00:31tu diseño.
00:00:32Ahora, como contexto, somos una empresa de software y este es nuestro canal AI Labs y en este
00:00:37canal les mostramos cómo optimizar procesos con IA, al igual que nosotros hemos optimizado los nuestros.
00:00:41Antes de sumergirnos en algunas de las habilidades más creativas, comencemos con una que forma la
00:00:46base de muchas otras habilidades de diseño.
00:00:48La habilidad de diseño front-end de Anthropic es la que define la dirección de diseño de tu sitio
00:00:53y la hemos usado también en nuestro video anterior.
00:00:55Después de haber generado suficientes páginas de destino con IA, empiezas a notar un patrón donde
00:01:00los sitios son todos diferentes pero de alguna manera se sienten iguales.
00:01:03Eso es porque el modelo aprendió de una gran cantidad de datos llenos de los mismos patrones.
00:01:07Así que siempre que tiene que tomar una decisión de diseño, recurre a la más común.
00:01:11Por lo tanto, el diseño sigue derivando hacia las mismas opciones genéricas y seguras sin importar cuál sea el proyecto
00:01:16en realidad.
00:01:17Y ese es el problema exacto que resuelve esta habilidad.
00:01:19Escapa de esas opciones seguras forzando al modelo a comprometerse con una dirección de diseño real antes de
00:01:24que escriba nada.
00:01:25En lugar de optar por el aspecto común y seguro, tiene que elegir una dirección y ser coherente
00:01:30con ella.
00:01:30Incluso señala la típica “basura de IA” directamente en su archivo skill.md, que es básicamente la
00:01:36hoja de instrucciones de la habilidad, para que el modelo deje de recurrir a las mismas fuentes usadas en exceso y los
00:01:41degradados púrpuras sobre fondos blancos.
00:01:42Y eso importa más de lo que parece.
00:01:44Porque cuando la mayoría de los modelos construyen una página de destino, están optimizando para ser correctos.
00:01:48Pero esta habilidad los impulsa a comprometerse con una dirección de diseño.
00:01:52Así que principalmente recurrimos a ella en páginas de destino o portafolios donde el diseño en sí es parte
00:01:56del producto, ya que le da al modelo un punto de vista más fuerte antes de empezar.
00:02:00Para probarlo, hicimos que creara una página de destino y le dimos nuestros requisitos.
00:02:03Y generó un sitio sin nada de la típica basura de IA porque se mantuvo fiel a la dirección de diseño
00:02:08con la que se comprometió en lugar de derivar hacia los valores predeterminados habituales.
00:02:11En el sistema de diseño de AI Labs, tenemos dos habilidades, cada una hecha para un trabajo diferente.
00:02:15Está la habilidad funcional que construye la interfaz de usuario que la gente realmente tiene que usar, como los paneles de control.
00:02:20Y luego hay una para la interfaz de marketing.
00:02:22Dentro de la de marketing, el skill.md utiliza un prompt llamado “romper lo predeterminado”.
00:02:27Y esa es básicamente la habilidad de diseño front-end de Anthropic.
00:02:29Solo que un poco modificada.
00:02:31La modificamos porque la original se ha vuelto un poco obsoleta para los modelos más nuevos.
00:02:35Opus 4.8 y Fable 5 se lanzaron con guías de prompts que muestran cómo cambiaron los modelos
00:02:40y cómo las instrucciones que les das también deben cambiar.
00:02:42Así que incorporamos una versión de eso en nuestro propio sistema de diseño.
00:02:45Como ya dijimos, la habilidad de diseño de Anthropic no funciona bien con interfaces funcionales.
00:02:50Una vez que estás construyendo productos reales, el problema cambia por completo.
00:02:53Ya no intentas solo hacer que algo se vea bien.
00:02:55Estás intentando construir algo que funcione como producto
00:02:58con muchos componentes que tienen que comportarse correctamente.
00:03:01Aquí es donde las cosas pasan de páginas de destino a aplicaciones reales.
00:03:04Por ejemplo, en AI Labs Pro, puedes ver que la página de destino tiene un lenguaje de diseño mucho más artístico
00:03:09en comparación con la capa funcional de la comunidad, que parece realmente aburrida
00:03:14y simple, tal como cualquier otra interfaz web con la que hayas interactuado.
00:03:18Y ahí es donde entra ShadCN.
00:03:20Ahora, los modelos pueden construir paneles de control por sí mismos.
00:03:23Pero cada uno de los componentes comúnmente utilizados en los paneles ya existe,
00:03:27construido con un estándar profesional por personas reales.
00:03:29Así que el modelo no tiene que generar componentes desde cero y configurar animaciones por su cuenta.
00:03:34Puede simplemente tomar el componente que ya está preconstruido en el registro,
00:03:38que es básicamente una gran biblioteca de componentes listos para usar.
00:03:41Ese es todo el punto de ShadCN.
00:03:43En lugar de que el modelo construya a mano cada componente,
00:03:46simplemente toma de esa biblioteca de piezas que ya son de grado profesional y las usa en tu aplicación.
00:03:51Y es por eso que el resultado se siente como un producto real.
00:03:53Porque no estás empezando desde un primer borrador y arreglándolo poco a poco.
00:03:57Estás empezando desde piezas que ya fueron construidas para lanzarse.
00:03:59La configuración de ShadCN tiene dos partes que funcionan juntas.
00:04:02La primera es la habilidad.
00:04:03Piénsalo como un libro de reglas.
00:04:05ShadCN tiene una forma específica y correcta de construir cosas y la habilidad contiene todas esas reglas.
00:04:10Además de eso, observa cómo está configurado tu propio proyecto.
00:04:12Así que cuando le pides al modelo que construya algo,
00:04:15la habilidad asegura que el resultado siga las reglas de ShadCN y se ajuste a la forma en que tu proyecto ya funciona.
00:04:20El beneficio es simple.
00:04:21Obtienes un resultado limpio a la primera en lugar de tener que volver atrás y corregir los mismos errores una y otra vez.
00:04:26La segunda es el MCP de ShadCN.
00:04:29Es básicamente una conexión en vivo al registro de ShadCN
00:04:32que permite al modelo explorar y extraer componentes reales directamente en tu proyecto.
00:04:36Ahora podrías pensar,
00:04:37¿por qué usar la habilidad si el MCP ya existe y te da los componentes que necesitas?
00:04:41La respuesta es que la habilidad solo se carga cuando es realmente necesaria,
00:04:44en lugar de estar en la ventana de contexto todo el tiempo como el MCP.
00:04:48La habilidad de ShadCN le da al agente de codificación las reglas,
00:04:50patrones y el contexto sobre tu proyecto.
00:04:53Juntos, le dan el juicio para usar los componentes correctamente.
00:04:56Con una aplicación normal, la construyes un componente a la vez y ese enfoque funciona bien.
00:05:00Así que podrías esperar que se aplique directamente a un panel de control.
00:05:03Y en parte es así.
00:05:04Pero los paneles de control tienen un problema central diferente al de las aplicaciones normales.
00:05:07Se trata menos de mantener los componentes consistentes y más de cómo se organiza toda la información
00:05:12en la pantalla.
00:05:12Eso significa descubrir cómo agrupar los datos y cuánto puede haber en una pantalla antes de que se vea demasiado abarrotada.
00:05:17Así que hay una habilidad separada llamada dashboard hecha solo para eso.
00:05:21No de ShadCN, sino de otro desarrollador.
00:05:23Y enfoca al modelo exactamente en esa disposición.
00:05:26Y debido a que razona sobre esa disposición primero, el resultado realmente se siente como una herramienta
00:05:30de análisis en lugar de estar abarrotada.
00:05:33UIUX Pro Max funciona de manera diferente a todo lo visto hasta ahora.
00:05:36La mayoría de las habilidades le dan al modelo algunos principios de diseño y confían en que los aplique.
00:05:40Pero esta ejecuta un motor real primero.
00:05:43El problema en torno al cual está construida es que incluso con una buena dirección y un conjunto sólido de componentes,
00:05:47el modelo aún tiene que decidir qué tipo de opciones de diseño se ajustan a tu producto.
00:05:51La mayoría de las habilidades tratan el diseño como una idea general de bien.
00:05:54Por lo que todo deriva hacia el mismo aspecto sin importar lo que estés construyendo.
00:05:58Y esa es la brecha que esta habilidad cierra.
00:06:00Cuando le pides que construya algo, no salta directamente al código.
00:06:03Ejecuta un motor primero.
00:06:04Detrás de escena, este motor dispara cinco búsquedas a la vez a través de su propia base de datos
00:06:09de código abierto en GitHub.
00:06:11Extrae los estilos que se ajustan a tu producto de 161 categorías de la industria.
00:06:15Y de esas opciones, elige una paleta de colores, una combinación de fuentes y un diseño de página que realmente
00:06:20se adapte a la industria para la que estás construyendo.
00:06:22Luego filtra cualquier cosa que se vería mal para ese tipo de producto y le entrega al
00:06:26modelo un sistema de diseño a medida, que es básicamente el libro de reglas completo que sigue el modelo para
00:06:31construir el sitio web.
00:06:32Así obtienes un sitio web genuinamente fuerte donde coincide cada atributo de diseño con tu idea de sitio web.
00:06:37En lugar de que el modelo invente un diseño y espere que funcione, está construyendo a partir
00:06:41de uno que fue realmente razonado para tu caso de uso exacto.
00:06:44Esta habilidad es realmente diferente de las demás.
00:06:46Las otras le dan al modelo mejor gusto, mientras que esta le da una decisión antes de empezar,
00:06:50ajustada al tipo de producto que estás haciendo realmente.
00:06:53Pero antes de seguir adelante, unas palabras de nuestro patrocinador, SciSpace.
00:06:56Si haces cualquier tipo de investigación, probablemente hayas usado ChatGPT para ello.
00:07:00El problema es que, con confianza, inventa citas y artículos que ni siquiera existen,
00:07:04y generalmente no te das cuenta hasta que esa cita falsa ya está en tu trabajo.
00:07:08SciSpace soluciona eso, y ahora vive justo dentro de ChatGPT.
00:07:12Para probarlo, abrí SciSpace, navegué a mi perfil y seleccioné la aplicación ChatGPT desde allí para
00:07:17conectar SciSpace.
00:07:18Pedí una revisión bibliográfica y ChatGPT extrajo estudios relevantes de la biblioteca de más de 280
00:07:24millones de artículos reales de SciSpace.
00:07:25También los resumió y me dio citas reales y clicables en lugar de alucinar.
00:07:30Y cada cita enlaza directamente a la fuente.
00:07:33Así que puedes abrir el artículo y verificar la línea exacta tú mismo con un clic.
00:07:37En pruebas directas, incluso encontró artículos más relevantes que herramientas como Elicit y ConsenSys.
00:07:42Así que si eres estudiante o investigador, conecta la aplicación SciSpace dentro de ChatGPT usando el primer enlace
00:07:48en la descripción y comienza a obtener investigación en la que finalmente puedes confiar.
00:07:52Hasta ahora, todo lo que hemos añadido hace que el sitio se vea bien mientras está quieto.
00:07:56Pero una página estática solo te lleva hasta cierto punto.
00:07:58Las animaciones son realmente importantes porque mejoran la experiencia del usuario y aumentan el tiempo que
00:08:04la gente permanece en el sitio web. Pero el problema es que la animación es donde el código generado por IA se desmorona.
00:08:09El problema real es que cuando pides a un modelo que añada una animación, casi siempre hace exactamente
00:08:15lo mismo, donde las cosas se deslizan a la vista mientras te desplazas por la página. Ese movimiento de revelar al desplazar
00:08:20es básicamente el único truco que conoce. Pero también es la misma animación en la mitad de los sitios construidos con IA,
00:08:25y no es ni de lejos lo que el movimiento real puede hacer.
00:08:27Aquí es donde entra la habilidad GSAP. GSAP es la biblioteca de animación que muchos sitios profesionales
00:08:32ya utilizan, y esta habilidad viene directamente del equipo que la construye. Así que en lugar de que el
00:08:37modelo adivine cómo funciona, trabaja a partir de los patrones correctos, y cubre todo, desde el
00:08:42movimiento básico hasta las animaciones más grandes que se reproducen mientras te desplazas por una página. También maneja el
00:08:47lado del rendimiento, que es la parte que la mayoría de la gente subestima. Una gran razón por la que las animaciones de IA se sienten
00:08:52entrecortadas es que el modelo mueve las cosas cambiando su tamaño o posición, y esos cambios fuerzan al
00:08:57navegador a reconstruir toda la página en cada cuadro. Así que la habilidad guía al modelo hacia el
00:09:02tipo de movimiento que el navegador puede manejar fácilmente, y ese hábito por sí solo es lo que mantiene la animación
00:09:07fluida. GSAP está en su mejor momento en páginas de destino y narración impulsada por desplazamiento, donde todo se
00:09:12revela como una historia, para que los detalles importantes lleguen al espectador, y eso es lo que lleva a tu
00:09:16sitio web de una página estática a una dinámica. Es por esto que en el sistema de diseño de AI Labs, hemos mencionado explícitamente
00:09:22en la habilidad de interfaz de marketing que siempre que se requieran animaciones, debe usar la habilidad GSAP
00:09:27para implementar esas animaciones en las páginas de destino. Este siguiente grupo de habilidades no es para sistemas
00:09:33completos. Son preajustes de gusto que añades para empujar al modelo hacia un aspecto específico de tu elección.
00:09:38Primero está la interfaz de usuario minimalista. Es el tipo de diseño donde en lugar de abarrotar demasiado la
00:09:43página, mantienes las cosas simples y abiertas. Es la que buscas en periódicos o blogs donde quieres que el
00:09:49contenido respire en lugar de que todo luche por la atención. En el lado completamente opuesto está
00:09:54la habilidad de interfaz industrial brutalista que es cruda y pesada con ese estilo anti-corporativo. Luego está
00:09:59front-end UI UX, un todoterreno general para valores predeterminados sólidos cuando no quieres nada extremo. Es la
00:10:05elección segura para una página de destino de producto o empresa que solo necesita verse limpia y profesional. Y luego
00:10:10está la habilidad de interfaz de usuario front-end premium que hace que los sitios luzcan como esas páginas de destino de marcas de lujo.
00:10:16Así que no apilas todas estas a la vez. En cambio, eliges la que coincide con la vibra que buscas
00:10:21y dejas que guíe el diseño. Si ya tienes una dirección en mente, estas son la forma más rápida
00:10:25de entregarla directamente al modelo. A estas alturas puedes construir un sitio que esté bien estructurado,
00:10:30se mueva bien y tenga un estilo real. Pero los sitios web de grado profesional necesitan más que solo animaciones. Para
00:10:36aplicaciones profesionales necesitas imágenes y visuales de video reales. Los modelos por sí solos en su mayoría solo toman fotos de stock
00:10:41de internet y la mayoría de las veces no coinciden con lo que necesitas. Higgs field es
00:10:46lo que usamos para evitar eso. Conecta la generación de imágenes y video directamente a tu agente para que puedas pedir
00:10:51una imagen de héroe o un clip de fondo justo donde estás trabajando sin salir de la terminal.
00:10:56Y Higgs field no está atado a un solo modelo. Tiene la mayoría de los buenos modelos de imagen y video, así que no estás
00:11:01atrapado con las fortalezas de uno solo y puedes usar el que más te convenga. Si haces video,
00:11:06Cdance es el que vale la pena usar ya que es uno de los mejores modelos de generación de video ahora mismo, así que obtienes
00:11:12visuales reales en lugar de texto estático o cajas grises de marcador de posición en tu sitio web. Las habilidades anteriores
00:11:17eran todas para web. Ahora vamos a cubrir las habilidades móviles donde mucha interfaz generada por IA silenciosamente
00:11:23se desmorona por una razón simple. Los modelos tienden a tratar un teléfono como un sitio web pequeño, tomando los mismos hábitos
00:11:29web y reduciéndolos. Pero el móvil no es una web más pequeña. Es su propia cosa con sus propias reglas. La forma
00:11:35en que la gente sostiene un teléfono donde su pulgar realmente puede llegar, cómo debería funcionar la navegación, todo es diferente
00:11:40y cada plataforma tiene su propio lenguaje de diseño que el modelo generalmente no sigue adecuadamente. Hay
00:11:45múltiples habilidades para optimizar el desarrollo móvil también. La primera es el diseño de interfaz de aplicaciones móviles, la capa de principios.
00:11:51Por sí solo, el modelo trata las reglas del buen diseño móvil con mucha libertad, pero esta habilidad
00:11:56las incorpora directamente. Eso cubre cosas como la zona del pulgar que mantiene los botones principales donde tu
00:12:01pulgar realmente puede alcanzar, junto con un espaciado consistente y un conjunto limpio y limitado de tamaños de fuente en lugar de 10
00:12:06diferentes. Y estas son básicamente las mismas reglas detrás de aplicaciones populares como Airbnb, Duolingo,
00:12:11y Spotify. Así que el modelo termina diseñando con ese sentido en lugar de adivinarlo. La segunda es
00:12:16Material 3, que es básicamente la versión móvil de lo que ShadCN hizo para la web. Le da al modelo
00:12:21el sistema de diseño real de Google, el que está detrás de la mayoría de las aplicaciones de Android y Pixel. El lenguaje de diseño de Google tiene una personalidad real.
00:12:27Es audaz y colorido, con grandes formas redondeadas y movimiento elástico que se sitúan en el extremo
00:12:33más expresivo del diseño móvil. La habilidad trae todo el sistema de componentes y colores, así que le das
00:12:38un color y construye un tema completo a juego. Incluso verifica qué tan cerca sigue tu aplicación las directrices
00:12:43de Google para que la aplicación que estás construyendo coincida exactamente con el sistema de diseño. Pero si estás construyendo completamente
00:12:48nativa en el iPhone, puedes usar las habilidades de Swift UI. El diseño de Apple se sitúa en el extremo opuesto al de Google.
00:12:53Donde el material es audaz y colorido, Apple es más restringido y se inclina por ese aspecto translúcido
00:12:58y vidrioso que ahora llama cristal líquido. La habilidad extrae la documentación propia de Apple directamente de
00:13:04Xcode en tu Mac y se la entrega al modelo como las reglas. Así que el modelo no está adivinando cómo debería sentirse una aplicación
00:13:09de Apple, está trabajando a partir de la guía real de Apple. Y en lugar de algo que solo
00:13:14se parece aproximadamente a una aplicación de iPhone, en realidad obtienes una que se siente nativa. Y si estás construyendo para
00:13:18iPhone y Android al mismo tiempo, existe la habilidad oficial de Expo. Expo es un marco para
00:13:23hacer una aplicación que se ejecute tanto en Android como en iOS. Así que no estás construyendo la misma aplicación dos veces. Cubre
00:13:29todo lo que necesitas para una aplicación real que se ejecute en ambos, desde la navegación y el estilo hasta las características de la plataforma
00:13:34todo en un solo lugar. Así que ya sea que estés construyendo para una plataforma o para ambas a la vez, hay una habilidad
00:13:39que realmente conoce el territorio. Ahora todas las habilidades y flujos de trabajo y todo lo demás que construimos y
00:13:43te mostramos en estos videos se pueden encontrar en AI Labs Pro, que es nuestra comunidad. Ahí es donde
00:13:48obtendrás los recursos, los paquetes de inicio y más junto con un lugar para interactuar con un montón de nerds
00:13:53de ideas afines, incluido nuestro equipo. Así que si encontraste valor en lo que hacemos y quieres apoyar el canal,
00:13:58esta es la mejor manera de hacerlo. El enlace está en la descripción. Eso nos lleva al final de este
00:14:02video. Si te gustaría apoyar el canal y ayudarnos a seguir haciendo videos como este, puedes hacerlo
00:14:07usando el botón de super gracias de abajo. Como siempre, gracias por mirar y nos vemos en el próximo.