Los 3 niveles de diseño de IA... Solo unos pocos llegan al nivel 2
AAI LABS
Computing/SoftwarePhotography/Art
Transcript
00:00:00Si has estado siguiendo este canal durante un tiempo, probablemente sepas que hemos cubierto muchos
00:00:03flujos de trabajo y herramientas de diseño. Los hemos estado probando todos durante meses y finalmente descubrimos
00:00:08por qué el mismo modelo puede darte algo que parece completamente personalizado o algo que inmediatamente
00:00:13grita generado por IA. Todo se reduce a tres niveles. El nivel uno consiste en diseñar una sola página y
00:00:19hay una cosa que la mayoría de la gente pasa por alto, que es la razón principal por la que su resultado parece genérico. El nivel
00:00:23dos es donde dejas de diseñar páginas y empiezas a diseñar sistemas, y el flujo de trabajo aquí es
00:00:28completamente diferente. Y el nivel tres es cómo probamos los diseños entre sí para encontrar la versión
00:00:34que realmente funciona, que es la parte que usamos en cada proyecto real ahora. Así que el nivel uno trata sobre
00:00:39crear un buen diseño para una sola página. Este es el nivel que la mayoría de la gente enseña porque es la
00:00:44base de todo buen diseño. Hablamos en nuestro video anterior sobre cómo la capacidad de diseño de Opus 4.7
00:00:50ha mejorado mucho y gran parte de la morralla de IA que solíamos ver ha desaparecido. Al principio, cuando
00:00:55solíamos darle un mensaje simple como crear una página de aterrizaje, simplemente tomaba directamente el
00:00:59tema morado y blanco y construía todo alrededor de él. Ese patrón específico ha mejorado. Pero
00:01:04al igual que cualquier otro modelo de IA, este también converge en patrones seguros. Y de todas nuestras pruebas y
00:01:09experimentación con él, hemos descubierto que recurre por defecto a un estilo en particular cada vez. Así que ahora, siempre que
00:01:15vemos ese estilo, es una señal inequívoca de que el sitio vino de Opus 4.7 y es solo cuestión de tiempo
00:01:21antes de que se convierta en la próxima morralla de IA. Así que necesitamos otras formas de hacer que este sitio web se vea mejor.
00:01:25Ahora bien, este nivel se reduce principalmente a la ingeniería de prompts y a cómo especificamos la aplicación, porque
00:01:30si estructuras tu prompt adecuadamente, puedes crear la aplicación por completo al primer intento. El prompt debe comenzar
00:01:35con la intención del sitio web que pretendes construir, luego mencionar los aspectos innegociables, como las
00:01:39cosas exactas que quieres en la aplicación y cómo quieres que se vean los elementos de la interfaz. Después de eso, especificas el
00:01:44sistema de color. Aquí utilizamos OKLCH, que es básicamente una medida de luminosidad, croma y tono.
00:01:49Usar OKLCH en lugar del habitual RGB o HSL es mejor porque representa los colores de la forma en que el
00:01:55ojo humano realmente los percibe, por lo que maneja mejor la luminosidad y el equilibrio. También crea
00:01:59degradados más suaves, a diferencia de los códigos hexadecimales que pueden producir algunos que se ven desuniformes. Ahora, una vez que hayas
00:02:04establecido la combinación de colores, también debes mencionar los flujos de contraste. El contraste es un factor muy importante
00:02:08del diseño de interfaces porque en realidad crea una jerarquía que guía tus ojos hacia las cosas que
00:02:13importan. Sin un contraste explícito, el modelo trata cada elemento como igualmente importante,
00:02:18lo que dificulta formar la jerarquía visual. Y para asegurarte de que el sitio web no parezca
00:02:22morralla de IA, también tienes que controlar la tipografía desde el prompt, definiendo qué fuentes están prohibidas
00:02:27debido a la morralla de IA y cuáles usar en diferentes áreas del diseño. Fuentes como Inter y Geist
00:02:33se han convertido en delatores de la morralla de IA porque cada agente recurre a ellas por defecto, por lo que mencionarlas
00:02:38explícitamente obliga al modelo a buscar en otra parte. Luego defines la disposición y el ritmo del sitio web,
00:02:42pero primero debes saber sobre la simetría y la asimetría. Los diseños simétricos tienen componentes
00:02:47colocados uniformemente en la cuadrícula con un aspecto equilibrado, lo cual es más adecuado para diseños profesionales y
00:02:51directos. Pero para un aspecto más artístico, opta por la asimetría, ya que eso te da más margen
00:02:56para experimentar. Es especialmente buena cuando necesitas usar espacio negativo, ya que eso permite que el diseño
00:03:01respire. El tipo de producto que estás construyendo decide cuál encaja mejor. Luego define todas las secciones
00:03:06que deseas, los materiales que usarás y cómo debe comportarse el sitio web de manera responsiva. Y la parte más importante
00:03:11es mencionar los antipatrones. Estos son los sellos distintivos de la morralla de IA, como la llamada a la acción simple y centrado,
00:03:17los iconos Lucid y los degradados con diseño glassmorphic. Así que una vez que le des este prompt a Claude Code o
00:03:22al agente que estés usando, analizará tu aplicación y revisará los detalles de implementación. Luego
00:03:27construirá la aplicación tal como lo describió el prompt, con asimetría debido al objetivo artístico y un uso adecuado del espacio negativo.
00:03:34Por lo tanto, el nivel 2 consiste en mantener el mismo diseño en cada página del sitio, porque la mayoría de las aplicaciones generadas por agentes
00:03:40se desmoronan en el momento en que sales de la página de aterrizaje. A menudo, al generar aplicaciones completas con agentes, es posible que
00:03:45hayas experimentado exactamente esto. La página de aterrizaje suele ser bastante buena, pero cuando vas a las otras páginas,
00:03:50no siguen el estilo de la interfaz de manera tan coherente como deberían. El panel de control termina con diferentes
00:03:55estilos de botones, diferentes espaciados, diferente tipografía, casi como si el agente hubiera olvidado que estaba construyendo
00:04:00la misma aplicación. Las otras páginas terminan pareciendo que ni siquiera forman parte del mismo sitio y delatan
00:04:05que el sitio fue generado por un agente. A veces el diseño se mantiene en las páginas de autenticación, pero luego en
00:04:10el panel de control, el estilo se rompe por completo. Así que para eso, necesitas crear dos de los archivos más importantes,
00:04:15Claude.md y Design.md. Estos dos archivos son los que mantienen el diseño consistente en todo el sitio.
00:04:21En Claude.md, como hemos comentado muchas veces, solo pones la información de tu proyecto, no el diseño.
00:04:27Esto se debe a que el archivo permanece cargado en la sesión todo el tiempo y el contenido de diseño allí solo
00:04:32distraerá al agente cuando esté trabajando en otra cosa, pero sigue siendo el archivo clave porque mantiene
00:04:37el contexto del proyecto, lo que informa un buen diseño. Para el diseño en sí, necesitamos un archivo separado
00:04:42que mencione todo para el sistema visual, la disposición, los colores, la tipografía y todos los
00:04:47detalles que cubrimos en el nivel 1. El archivo Design.md debe ser del tipo que cualquier agente pueda tomar y
00:04:52entender inmediatamente cuál es el sistema visual. Y al igual que en el nivel anterior, necesitas
00:04:57definir el sistema de color en OKLCH aquí también. Para crear estos dos archivos, le dimitimos a Claude Code un prompt detallado
00:05:03que cubre lo que necesita cada archivo y generó ambos archivos para nosotros. El Claude.md es corto, solo
00:05:09contiene los detalles del proyecto. El Design.md es más largo con todos y cada uno de los detalles, incluidos los códigos de colores,
00:05:15las opciones de tipografía y todo lo demás. Pero ese no es el final del Design.md. Necesitamos seguir
00:05:20refinándolo con el tiempo. Así que ponemos una línea al principio, indicándole al agente que agregue cualquier nuevo valor de diseño
00:05:25que encuentre a este archivo. De esa manera, cada sesión comienza a partir de una versión más refinada del sistema de diseño
00:05:30que la anterior. Pero dejar que Claude cree el Design.md no es suficiente,
00:05:35porque lo que genera no sigue las mejores prácticas correctamente. Google ha publicado como código abierto su
00:05:40plantilla para el archivo Design.md. La plantilla también contiene comandos para verificar tu Design.md
00:05:46en comparación con ella y señalar cualquier error. Así que puedes simplemente pedirle a tu agente que itere usando esos comandos
00:05:51para perfeccionar el Design.md. Y esto todavía no es el final del nivel 2. Para generar diseños lo suficientemente buenos en
00:05:56este nivel, también necesitas auditarlos frente a los principios de diseño existentes. Para eso, hay
00:06:00muchas habilidades de código abierto que hacen exactamente esto. Puedes usar cualquiera de ellas, pero nosotros usamos la habilidad de VersaLab,
00:06:06porque en lugar de codificar rígidamente todos los principios dentro de la habilidad, apunta a una fuente externa
00:06:11que mantienen activamente. Así que los principios se mantienen actualizados con las mejores prácticas actuales en lugar
00:06:16de quedar congelados en lo que fuera lo más avanzado cuando se escribió la habilidad por primera vez. Instalas esta habilidad
00:06:21en el proyecto, la ejecutas, y tu diseño sale en mucho mejor forma que antes. Pero antes de que
00:06:25avancemos, escuchemos una palabra de nuestro patrocinador. Así que recientemente comencé a usar ZillysCloud y déjenme decirles
00:06:30por qué. La mayoría de las aplicaciones RAG funcionan bien con un puñado de documentos, pero en el momento en que introduces datos reales,
00:06:35empiezan a desmoronarse porque la configuración simplemente no fue diseñada para manejar ese tipo de carga.
00:06:40Milvus es la base de datos vectorial de código abierto con más estrellas en GitHub, con más de 44,000 estrellas,
00:06:46y está construida para manejar ese tipo de carga, pero el autoalojamiento significa administrar la infraestructura uno mismo.
00:06:51Así que ahí es donde entra ZillysCloud, la versión totalmente administrada con la misma API que es hasta
00:06:5610 veces más rápida, y puedes configurarla en minutos sin cambiar una sola línea de código.
00:07:00Así que ejecutamos una consulta de búsqueda semántica en ZillysCloud, y los resultados son realmente relevantes porque
00:07:05comprende el significado, no solo palabras clave, y el tiempo de respuesta es casi instantáneo incluso con un conjunto de datos grande.
00:07:11También ejecutamos una consulta de recomendación dado un artículo. Encontró los cinco más similares
00:07:16en todo el conjunto de datos ordenados por similitud en menos de un segundo. Y el panel de control rastrea el rendimiento de tu clúster,
00:07:21el uso de almacenamiento y las métricas de datos, incluidos los recuentos de colecciones y entidades en tiempo real. No se necesita tarjeta de crédito,
00:07:27simplemente haz clic en el enlace en el comentario fijado y prueba ZillysCloud gratis.
00:07:31Por lo tanto, el nivel tres consiste en probar el diseño de forma programática, de la misma manera que los ingenieros verifican
00:07:36el código con TDD. Ahora bien, sabemos que no se pueden escribir pruebas visualmente de la misma manera que se hace con el código. Con el código,
00:07:41hay entradas y salidas claras para todo. El diseño no tiene eso porque es más subjetivo
00:07:46y no se puede cuantificar como el código, pero el hecho de que sea subjetivo no significa que no podamos escribir
00:07:51pruebas para él. La razón por la que TDD funciona para el código es que la prueba fija cuál debe ser el comportamiento,
00:07:57y la implementación tiene que satisfacer esa fijación. La misma idea se aplica al diseño, solo que con diferentes
00:08:01tipos de fijaciones. En la aplicación que estábamos construyendo, el primer paso fue el mismo que antes, crear los
00:08:05archivos Claude.md y Design.md antes de siquiera pensar en la implementación. Ahora bien, las pruebas siempre deben
00:08:12escribirse antes que el código, de esa manera la implementación realmente se puede probar en su contra. Si escribimos pruebas
00:08:17después de la implementación, el agente se relaja. Simplemente escribe casos de prueba que se optimizan hacia el
00:08:22código existente, porque ese código ya está en su contexto. Escribir la prueba primero obliga a la
00:08:27implementación a ajustarse a la prueba en lugar de que la prueba se ajuste a la implementación. Así que usamos los archivos de diseño
00:08:32como la fuente de verdad para las pruebas porque estos archivos contienen todos los antipatrones que podemos
00:08:37verificar programáticamente. Cada antipatrón en Design.md se convierte en un caso de prueba. Cada regla de color,
00:08:44cada restricción de espaciado, cada opción de tipografía recibe una verificación programática. Le dimos a Claude Code un
00:08:49prompt detallado para escribir los casos de prueba especificando cada sección en la que debe enfocarse. Además, si estás
00:08:54disfrutando de nuestro contenido, considera presionar el botón de “Me gusta” porque nos ayuda a crear más contenido como
00:08:59este y llegar a más personas. Con tu prompt, escribirá todos los casos de prueba para el diseño
00:09:04de la aplicación. Escribe múltiples tipos de pruebas. Están las pruebas estáticas, que verifican directamente los
00:09:09antipatrones que mencionamos en el prompt. Luego están las pruebas visuales, que básicamente utilizan
00:09:14Playwright por debajo y ejecutan pruebas de regresión para mejorar el sitio de forma incremental. También
00:09:19escribirá casos de prueba para otros componentes y funciones auxiliares como escaneo e informes. Ahora bien, estas pruebas
00:09:24verifican los antipatrones estáticos, pero las pruebas de diseño necesitan otra cosa. Para eso, existe
00:09:28otra herramienta llamada Visly Test, que es básicamente una CLI que realiza TDD para interfaces de usuario. La forma en que funciona es
00:09:34que ejecuta TDD local, donde puedes verificar el diseño a medida que cambia el código. Así que puedes monitorear las
00:09:39diferencias tú mismo en lugar de depender del monitoreo propio del agente. También obtienes una mejor comparación con
00:09:44metadatos y otros detalles, lo que hace que la revisión sea más rápida. Sin esos metadatos, solo estás comparando dos
00:09:49capturas de pantalla una al lado de la otra y esperando notar la diferencia. Con ellos, Visly te dice exactamente qué
00:09:54píxeles cambiaron y en qué medida. Para usarla, primero instala la CLI ejecutando el comando de instalación de la
00:10:00documentación. Una vez que esté configurada e inicializada, estará lista para usar. Ahora solo abre Claude Code y dile que use
00:10:05TDD e implemente la parte de la interfaz que desees utilizando la CLI de Visly como medio de prueba. Cuando
00:10:10ejecutas el comando TDD de Visly, se inicia un servidor local que monitorea los cambios en las capturas de pantalla. Para enviar las
00:10:16capturas de pantalla, Claude básicamente escribe pruebas separadas con el nombre Visly. Estas pruebas utilizan mecanismos de captura de pantalla de Playwright
00:10:21para enviar las imágenes al visor en el servidor. Desde allí, puedes aprobar o rechazar el
00:10:27diseño y ver las diferencias comparándolo con la versión anterior. Cada diferencia rechazada se convierte en comentarios que el
00:10:32agente utiliza para ajustar la siguiente pasada. En unas pocas iteraciones, el diseño converge hacia lo que realmente
00:10:37quieres en lugar de lo que el agente piensa que quieres. Ahora, los prompts usados aquí se pueden encontrar en AI Labs Pro
00:10:43para este video y para todos nuestros videos anteriores, desde donde puedes descargarlos y usarlos para tus propios
00:10:47proyectos. Si has encontrado valor en lo que hacemos y quieres apoyar al canal, esta es la mejor manera de hacerlo. Los
00:10:52enlaces están en la descripción. Eso nos lleva al final de este video. Si te gustaría apoyar al canal
00:10:57y ayudarnos a seguir haciendo videos como este, puedes hacerlo usando el botón de supergracias a continuación. Como
00:11:02siempre, gracias por ver y nos vemos en el próximo.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video