El autor del diseño tendencia n.º 1 de GitHub acaba de volver a arreglar el diseño con IA
AAI LABS
Computing/SoftwareInternet Technology
Transcript
00:00:00Si alguna vez has diseñado un sitio con IA, sabrás lo genéricos que pueden ser
00:00:04los diseños que generan estos modelos. Hay muchas herramientas y habilidades que intentan solucionar ese problema, y algunas
00:00:09ofrecen diseños bastante sólidos. Pero hay un vacío que absolutamente todas tienen, y por eso
00:00:14sus diseños se siguen sintiendo generados. Para llenar ese vacío, existe una herramienta llamada Inspo,
00:00:19creada por la misma persona detrás de Hallmark, una de las habilidades de diseño más populares en
00:00:23GitHub desde hace tiempo. Inspo resuelve el problema de una forma que no solo mejora los diseños
00:00:28de tu agente, sino que le da un mejor criterio de diseño. Y mientras otras herramientas similares
00:00:33para tu agente son de pago, esta es totalmente gratuita. Si es tu primera vez aquí, somos una
00:00:38empresa de software y este es nuestro canal, AI Labs. En este video te mostraremos exactamente
00:00:43cómo Inspo soluciona el problema de diseño de tu agente. Pero antes de ver qué hace la herramienta,
00:00:48debes entender por qué los modelos crean sitios con aspecto genérico. Un modelo se entrena con una cantidad enorme
00:00:54de datos y, durante su entrenamiento, aprende los patrones que más se repiten en los
00:00:59diseños que analiza. Como aparecen tantas veces, el modelo asume que ese diseño es
00:01:05la opción más segura. Por eso, cuando no das muchas indicaciones de diseño en tu prompt, elige
00:01:10los patrones que ha visto con más frecuencia, pues es lo que considera seguro. Esas elecciones
00:01:14pueden verse bien al principio, pero tras verlas en muchos sitios, se identifican como el estilo
00:01:19propio del modelo. Cada modelo tiene un patrón característico que se repite en todos sus sitios. En algunos,
00:01:25era usar tonos morados o azules sobre fondos blancos. En otros modelos, se volvió habitual usar
00:01:30colores cálidos como naranja y crema. Por eso necesitas algo que te permita guiar al modelo lejos
00:01:35de este aspecto genérico para que tu sitio destaque de los demás. Hoy en día existen muchas habilidades de diseño
00:01:40que solucionan este problema y hemos mostrado varias en nuestro canal. Todas funcionan muy
00:01:45bien, ayudando a su manera al darle al modelo una dirección de diseño para que logre
00:01:50generar un buen resultado. Una de ellas es la que mencionamos antes, Hallmark, sobre la cual ya tenemos
00:01:55un video. Es una de las habilidades que más utilizamos porque le da al modelo una guía visual
00:02:00y compara la página con los patrones repetitivos en los que suelen caer los modelos. También usamos otras habilidades,
00:02:06y las que integramos en nuestros flujos están en nuestro sistema de diseño AI Labs Pro, que compartimos
00:02:11con la comunidad. Todas estas habilidades le dan instrucciones al modelo sobre qué debe hacer y le señalan
00:02:16qué patrones comunes debe evitar. Algunas, como Hallmark, también incluyen referencias de
00:02:21sitios populares exitosos para que el modelo pueda inspirarse en ellos mientras trabaja
00:02:26en el diseño, ya que son ejemplos probados. Sin embargo, la mayoría de esas referencias
00:02:30e instrucciones están descritas en archivos markdown, que son solo texto a partir del cual el agente debe
00:02:36deducir cómo se verá la página terminada. Puede leer qué fuentes usar y cómo organizar la página,
00:02:41pero esa descripción no ayuda al modelo a entender cómo lucirá el sitio cuando todos los componentes
00:02:46trabajen juntos. Los modelos tampoco comprenden el tipo de diseño que necesita el sitio y simplemente diseñan
00:02:51lo que está detallado en sus instrucciones. Por eso mismo era necesario Inspo, porque le ofrece a los
00:02:56modelos mucho más que simples instrucciones. Antes de continuar con la herramienta, te agradeceríamos que te
00:03:01suscribas al canal y le des me gusta al video. Este pequeño gesto de apoyo significa mucho para nosotros.
00:03:07Inspo es en realidad un servidor MCP que resuelve el problema del que hablábamos dándole a tu agente de código
00:03:13acceso a sitios web reales en lugar de solo instrucciones de diseño. Esto ayuda porque ahora, con esta
00:03:18herramienta, el agente sabe qué diseño ha funcionado para el tipo de sitio que estás creando y puede
00:03:23estudiar el diseño de verdad. A partir de ahí, genera uno nuevo para ti. Incluye 832 sitios con
00:03:292320 páginas capturadas en formato de imagen. También tiene capturas de pantalla de esos sitios tanto en
00:03:36escritorio como en móvil, para que tu agente vea cómo se adapta el diseño a una pantalla más pequeña y pueda diseñar
00:03:42para todo tipo de pantallas. Posee referencias de partes individuales de una página, como el menú de navegación
00:03:47o la sección de precios. Así, cuando el agente trabaja en una parte específica de tu sitio, puede consultar
00:03:53ejemplos de esa sección. El agente incluso puede obtener el código de la que quiera usar. Pero lo más importante
00:03:58es que cada sitio incluye un archivo design.md, que describe el diseño de manera estructurada para que los
00:04:04agentes lo entiendan mejor. Contiene la paleta de colores con sus valores exactos, además de las
00:04:09tipografías exactas y las medidas registradas para tamaños de texto y espaciados. El agente puede
00:04:15usar este archivo para entender los componentes de diseño sin tener que adivinar fuentes y estilos solo a partir
00:04:20de la imagen y las referencias. Puedes explorar los sitios en su página principal, donde encontrarás una gran
00:04:25variedad de opciones, cada una con su propio estilo de diseño. También puedes visitar los sitios originales,
00:04:30es completamente gratis y no necesitas una cuenta ni una clave API para conectar tu agente.
00:04:35Pero antes de instalar Inspo, debes entender cómo funciona internamente. Cuando le das
00:04:40un prompt a tu agente, este envía a Inspo una descripción de lo que quieres construir mediante una herramienta
00:04:46llamada recommend. Inspo busca coincidencias entre las páginas capturadas y analiza cómo están organizadas las
00:04:51páginas de los resultados más cercanos. Luego elige la estructura que más se repite entre esos
00:04:56primeros resultados y devuelve hasta cinco ejemplos que la utilizan. Así, el agente recibe varias referencias con
00:05:01una disposición similar, las cuales compara antes de decidir cómo diseñar tu página. Junto con esos
00:05:06ejemplos, Inspo también devuelve referencias de componentes coincidentes y una paleta de colores sugerida. Además,
00:05:12la respuesta incluye hasta tres capturas de pantalla. Así el agente observa las páginas y ve cómo esas
00:05:17decisiones de diseño funcionan juntas. Todo se combina y se le envía al agente, quien lo utiliza para
00:05:22decidir cómo construir lo que pides. Inspo cuenta con filtros de búsqueda para distintas industrias
00:05:27y diferentes estructuras de página, además de opciones para definir si el diseño usa un tema claro u oscuro. Así puedes
00:05:33indicarle al agente en tu prompt qué estilo específico buscas, y este reducirá los resultados
00:05:37usando esos filtros para obtener referencias más adecuadas. Una vez que el agente encuentra referencias que encajan,
00:05:43solicita más detalles sobre esas páginas y sus archivos design.md antes de empezar a construir. Inspo también
00:05:49le indica estudiar solo unas pocas en detalle antes de ponerse a programar. Esto se debe a que cada búsqueda adicional
00:05:54agrega más resultados a la conversación, dándole al modelo demasiado material para analizar, lo que puede confundirlo
00:06:00sobre qué estilo elegir. Por lo tanto, el agente no necesita seguir buscando una vez que tiene suficientes referencias.
00:06:04Pero antes de instalarlo, escuchemos unas palabras de nuestro patrocinador, Manid.
00:06:09Toda creación real termina necesitando datos que aún no tiene. Y obtenerlos implica registrarse en otra
00:06:13API y configurar otra clave a mano. Manid es como un Open Router para herramientas de agentes. Con una sola
00:06:19clave accedes a cualquier API y te saltas toda la configuración. Añadimos su habilidad en Cloud Code, luego pedimos exactamente
00:06:25lo que la construcción necesita, como el volumen de búsqueda de una palabra clave o el contacto tras un perfil, y encuentra el endpoint
00:06:30correcto, ejecuta la llamada y los datos llegan a nuestra sesión en segundos. Sin servidores que montar,
00:06:36sin configuraciones. Esa misma clave cubre más de 1900 herramientas adicionales: web scraping, búsqueda de contactos, datos de búsqueda, generación
00:06:43de video o lo que necesites después. Stripe acaba de comprar Open Router por 7 mil millones de dólares y Manid aplica esa
00:06:48misma idea a las herramientas de agentes. Una clave, todas las API. Tampoco hay suscripciones: pagas por llamada,
00:06:54por lo que el costo escala a medida que creces y obtienes créditos gratuitos al registrarte. Consigue tu clave y haz tu
00:06:59primera llamada hoy. El enlace está en la descripción. Ahora, para instalar Inspo, solo debes copiar
00:07:04este comando de instalación disponible en su sitio web, que estará en la descripción, y luego
00:07:09pegarlo en tu terminal. Al ejecutar el comando, el instalador detecta automáticamente qué agentes de
00:07:14código tienes instalados y te pregunta si deseas añadir Inspo a todos ellos. Puedes instalarlo
00:07:19en todos si quieres. Pero si solo lo deseas en un agente específico, la ruta de instalación
00:07:24no te permite elegir por ahora. Si escribes “no”, simplemente cancela la instalación por completo.
00:07:29Así que si quieres instalarlo solo para un agente específico, debes ejecutar el comando de instalación
00:07:34con el indicador del cliente y luego mencionar el nombre de tu agente. Se instala en el alcance del usuario,
00:07:39lo que significa que Inspo estará disponible cada vez que abras tu agente en cualquier carpeta y no se
00:07:44limitará solo al proyecto donde lo instalaste. Cuando la instalación termine, debes reabrir
00:07:49el agente que estés usando y ejecutar el comando MCP. Verás Inspo listado junto a
00:07:54tus otros servidores MCP instalados, con las 15 herramientas disponibles para que las use el agente.
00:08:00Para usar Inspo, solo debes darle a tu agente las indicaciones para el sitio que quieres construir.
00:08:05Lo probamos con la página de inicio de una marca de moda. En el prompt, le pedimos al agente que nos diera unos cuantos
00:08:11estilos para elegir antes de empezar a programar. No es obligatorio pedir alternativas, pero hacerlo
00:08:15antes de que comience el diseño te permite hacer una pausa antes de que cree el sitio completo y pedirle
00:08:20un enfoque diferente. Así que al darle la indicación, aunque no le pedimos explícitamente que usara
00:08:25Inspo, el agente llamó al MCP de Inspo que habíamos conectado antes. En lugar de enviar directamente la instrucción que
00:08:31le das, el agente añade más palabras clave relacionadas con el estilo que pediste en el prompt.
00:08:36Esto ayuda mucho, en especial cuando das una indicación que no describe a fondo el sitio que quieres,
00:08:40permitiendo delimitar la búsqueda exactamente a lo que deseas para que el MCP encuentre las referencias exactas
00:08:46referencias precisas que se ajusten a lo que pides. Luego estudia las referencias que recibe y
00:08:50compara sus patrones comunes, determinando qué elecciones de diseño corresponden a ese estilo.
00:08:55En nuestro caso, el agente analizó unos 24 sitios y usó esas referencias para tomar decisiones de diseño.
00:09:01Para nuestro sitio, el agente nos dio tres direcciones de diseño y las describió para que pudiéramos elegir.
00:09:06Una vez que elegimos una dirección, empezó a construir la página. Cuando terminó,
00:09:11el resultado fue distinto a los diseños que obteníamos de los modelos por sí solos, incluso con una habilidad de diseño.
00:09:16La primera sección de la página utiliza imágenes en lugar de colocar texto enorme en todo el ancho, que es lo que suelen hacer los modelos.
00:09:23El agente usó fuentes en negrita y colores neutros, adaptándose al tema que pedimos.
00:09:27Ahora bien, si alguna vez le has dado al agente un sitio como referencia, sabrás que la mayoría de las veces termina copiando el diseño tal cual, en lugar de usarlo como inspiración.
00:09:37Por eso queríamos ver si nuestra página había hecho lo mismo o si realmente había seguido el estilo de las referencias.
00:09:43Para ello, le preguntamos al agente qué sitios había tomado como referencia y nos dio los enlaces de todos los sitios que usó.
00:09:49Al revisar esos sitios, todos se veían diferentes entre sí y nuestra página no había copiado ninguno de ellos exactamente.
00:09:54Tomó el estilo de la sección principal de un sitio, los botones de otro y la disposición de los productos de un tercero.
00:10:00Así que el agente combinó partes de esas referencias en un diseño que no se parecía a ninguno de ellos.
00:10:05El agente también tomó como referencia las versiones móviles, así que tenía ejemplos de cómo esos sitios organizaban su contenido en una pantalla más pequeña.
00:10:12Por eso el diseño también funcionó bien cuando lo probamos en una pantalla más pequeña.
00:10:16Pero aunque el diseño estaba más cerca de lo que pedimos, la página seguía siendo estática y no tenía animaciones.
00:10:22Eso es algo que hace que el sitio esté completo, e Inspo no maneja esa parte.
00:10:26Para eso, usamos el servidor MCP UISkills.
00:10:29Este MCP le da al agente acceso a una biblioteca de habilidades de diseño de diferentes autores,
00:10:34así que puedes pedirle al agente que busque una habilidad para el sitio en el que estás trabajando,
00:10:38y buscará en su biblioteca para reducir la lista a las habilidades que coincidan con tu solicitud.
00:10:42También hablamos de este MCP en nuestro video anterior.
00:10:46Así que para nuestro sitio, le pedimos al agente que agregara animaciones usando el MCP.
00:10:51Al darle la indicación, cargó la habilidad de animación de Emil Kowalski y la de desplazamiento de Mengto.
00:10:57Luego el agente agregó las animaciones y las sincronizó correctamente.
00:11:01Probamos Inspo en varios sitios más y los resultados funcionaron bien la mayoría de las veces en esas creaciones.
00:11:07Ahora bien, aunque esta herramienta diseñó bastante bien el sitio, todavía es nueva, así que hubo algunos problemas.
00:11:12Durante las pruebas, en dos ocasiones obtuvo las referencias equivocadas, aunque nuestro prompt especificaba claramente el tipo de sitio que queríamos.
00:11:19Las referencias que Inspo devolvió eran de otros tipos de sitios completamente no relacionados.
00:11:24En una prueba, pedimos un sitio de suscripción de café, pero obtuvimos referencias de sitios de salud y negocios.
00:11:30Al buscar de nuevo con el filtro de la industria de alimentos y bebidas seleccionado, obtuvimos referencias de sitios de café.
00:11:36Y hay algunos problemas en las capturas de pantalla que muestra.
00:11:38Algunas tienen partes del diseño cubiertas por la ventana emergente que aparece al abrir el sitio.
00:11:43En nuestra prueba anterior, una de las capturas tenía un aviso de privacidad en medio de la página, por lo que el agente no podía ver el diseño detrás de él,
00:11:50y simplemente usó su propio criterio para construir esa parte del diseño, que es exactamente lo que querías evitar al instalar la herramienta.
00:11:57Por eso, como mencionamos antes, debes pedir primero direcciones de diseño, tal como hicimos cuando estábamos haciendo las pruebas,
00:12:03para que puedas darte cuenta si se está desviando en la dirección equivocada y pedirle que corrija estos problemas.
00:12:09Ahora bien, el sistema de diseño que les mostramos aquí, junto con otros recursos, están disponibles en AI Labs Pro, nuestra comunidad.
00:12:16Así que si han encontrado valor en lo que hacemos y quieren apoyar al canal, esta es la mejor manera de hacerlo.
00:12:20El enlace está en la descripción.
00:12:22Eso nos lleva al final de este video.
00:12:24Si quieren apoyar al canal y ayudarnos a seguir haciendo videos como este, pueden hacerlo usando el botón de Super gracias de abajo.
00:12:30Como siempre, gracias por ver y los veré en el próximo.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video