Increíbles habilidades de diseño de Claude que necesitas para crear sitios hermosos
AAI LABS
Computing/SoftwareInternet Technology
Transcript
00:00:00Existen muchas habilidades que te permiten diseñar sitios web hermosos con IA, y cada una de
00:00:04ellas es diferente, pero no todas funcionan. Algunas tienen un flujo de trabajo intensivo que parece impresionante
00:00:09y al final terminan generando un sitio que se ve como cualquier otro. Solo unas pocas de
00:00:13ellas realmente cumplen lo que prometen. Ahora bien, podrías pensar por qué necesitarías estas habilidades en primer lugar
00:00:17porque los modelos ya son lo suficientemente potentes y diseñan muy bien ahora. Pero sin importar qué tan
00:00:22potente sea un modelo, cada uno sigue su propio patrón al diseñar y ese patrón es fácil
00:00:26de identificar. Por eso necesitas algo para alejarlos de ese patrón y hacer que tu
00:00:30sitio web destaque. Estas habilidades son desarrolladas por personas que tienen una amplia experiencia en diseño
00:00:36y han empaquetado el flujo de trabajo que probaron y les funcionó en un formato reutilizable para que
00:00:41tú también puedas usarlo. Si eres nuevo por aquí, bienvenido. Somos una empresa de software y esto es AI Labs, y en
00:00:46este video vamos a repasar las habilidades que probamos y que realmente nos dieron resultados. Y algo
00:00:51que vale la pena saber antes de empezar es que no necesitas agregar habilidades a Claude Design por separado. Las que
00:00:55agregues en tu configuración de Claude son las mismas que puedes usar en Claude Design. Así que solo añades la habilidad
00:01:00desde la configuración de Claude. Y aunque estemos usando estas habilidades en Claude Design, funcionarían con Claude
00:01:05Code, Codex o cualquier otro agente que estés usando y darían el mismo resultado. La primera de la que vamos a hablar
00:01:10son las habilidades creadas por Emil Kowalski. En este conjunto hay no una, sino nueve habilidades y cada una
00:01:15modifica una parte diferente del diseño. Estas son las habilidades que nosotros mismos usamos cuando trabajamos en
00:01:20diseños, ya sea que usemos Claude Code o Claude Design. Hay muchas habilidades allí,
00:01:25cada una enfocada en un área diferente del diseño. Entre ellas está la de diseño de Apple, que contiene todos los
00:01:30principios de diseño que Apple usa en sus propios productos y los pone a disposición para usarlos en otros sitios web.
00:01:35También hay una habilidad de vocabulario de animación, que básicamente convierte tu descripción vaga de una animación
00:01:40en palabras exactas que un modelo puede entender. Puedes agregar tantas habilidades como quieras, pero hay dos de
00:01:45ellas que más usamos debido a cuánto mejoran las capacidades de Claude Design.
00:01:50Una de ellas es la habilidad de ingeniería de diseño de Emil, que contiene instrucciones sobre cómo construir hermosos
00:01:55componentes de interfaz de usuario y añadirles animaciones, convirtiéndola en la mejor habilidad para iniciar tu diseño.
00:02:00La otra que usamos es animate (animar), que contiene un flujo de trabajo completo para añadir animaciones a un
00:02:05sitio web ya construido con un proceso detallado paso a paso. Para usarlas debes agregarlas a Claude
00:02:10y una vez añadidas puedes usarlas dentro de Claude Design. Desde allí escribes una barra diagonal y el nombre de la habilidad
00:02:15y en el mensaje le indicas qué sitio quieres. Como aún no teníamos el diseño creado, usamos primero
00:02:20la habilidad de ingeniería de diseño de Emil. Luego carga la habilidad, pero antes de construir nada te hace
00:02:25preguntas sobre la aplicación de la misma manera que lo hace Claude Design por sí solo. Cuando respondes a eso, construye el
00:02:30diseño. La primera versión que hace Claude Design se ve minimalista con un estilo monótono, pero las animaciones que
00:02:35resultaron no se veían tan pulidas y estaban desincronizadas en algunos lugares. Ahí es donde entra la habilidad animate,
00:02:40porque realmente perfecciona las animaciones en sitios web ya construidos. Esta habilidad entiende cómo
00:02:46funciona el sitio y determina qué necesita movimiento y qué no. Una vez que Claude terminó de hacer los
00:02:51cambios, las animaciones del sitio mejoraron enormemente. El movimiento estaba sincronizado con el desplazamiento y todo
00:02:56el conjunto se veía más intencional en comparación con lo que teníamos antes. Ahora podrías pensar que esto no es tan
00:03:01diferente de lo que Claude produce normalmente, pero eso es porque se trataba de una página de aterrizaje (landing page). Aunque
00:03:06mejoró las animaciones muy pequeñas y sutiles aquí, el principal estilo de animación que se ve bien en las páginas de aterrizaje
00:03:11son aquellas animaciones basadas en el desplazamiento, y hemos cubierto bastantes habilidades sobre eso en videos
00:03:16anteriores. Pero el lugar donde la habilidad realmente funciona bien es en los pequeños elementos de la parte funcional
00:03:21de las aplicaciones. Por ejemplo, estábamos trabajando en un sitio para un restaurante y usamos la habilidad animate para añadir
00:03:26animaciones en él, y agregó pequeñas animaciones que mejoraron la sensación de uso del sitio, como añadir una animación
00:03:32al enviar el formulario y gráficos que aparecen al pasar el cursor. Todos esos detalles juntos hicieron que el
00:03:37sitio se sintiera mucho más interactivo y mejoraron la experiencia de uso. Y puedes añadir
00:03:42tantas habilidades de Emil como quieras, porque todas ellas serán una incorporación significativa a tu kit de herramientas de diseño.
00:03:47Ahora, la siguiente de la que vamos a hablar es la habilidad garden de Conard Lee, y esta también es una
00:03:52colección en lugar de una sola habilidad. Hay cinco habilidades en ella que cubren cosas como presentaciones de video
00:03:57e imágenes, pero la más importante de todas es la habilidad de ingeniería de diseño web
00:04:02y esto se debe a que esta habilidad contiene instrucciones sobre cómo diseñar como un ingeniero de diseño de primer nivel.
00:04:07Esta habilidad se concentra únicamente en hacer que los elementos visuales sean impactantes, no funcionales. La forma en que esta
00:04:12habilidad funciona es que toma tus requerimientos y los trabaja contigo hasta tener claridad sobre lo que
00:04:17quieres, y luego busca diseños reales en los cuales basarse. Su principio es que el buen diseño nunca empieza
00:04:22de la nada, al igual que cada diseño existente está inspirado en algo que vino antes. También
00:04:27se fundamenta en diseños que han funcionado previamente. Esta habilidad también contiene un conjunto de
00:04:32referencias que cubren múltiples áreas relacionadas con el diseño. Abarcan cómo juzgar un diseño, las formas en que los diseños suelen salir
00:04:38mal y recetas de estilo para sitios conocidos como Apple y Linear, para poder observar cómo funcionan realmente esos sitios
00:04:44mientras construye el tuyo. Así que una vez que la hayas agregado en Claude Design, puedes usarla dándole un mensaje
00:04:49que describa lo que quieres construir. El sitio que obtuvimos de ella fue mucho más interesante que lo que Claude Design
00:04:55produce por sí solo. Fue más exhaustivo y mejor desde una perspectiva de diseño que la versión que Claude Design habría hecho solo.
00:05:01Y si ya tienes un diseño y ejecutas la habilidad, esta revisa dicho diseño y lo califica en diferentes áreas.
00:05:08Puedes seguir refinando el diseño y ejecutándola una y otra vez hasta que alcance una puntuación perfecta y coincida
00:05:13con el diseño que realmente deseas. Pero antes de explorar otras habilidades, sería genial si te suscribes al canal
00:05:18y haces clic en el botón de me gusta. Este pequeño gesto de apoyo nos ayuda muchísimo.
00:05:22La siguiente habilidad de la que hablaremos es la habilidad de diseño de IA de Elia Design, y esta vez es solo una habilidad única creada para páginas de aterrizaje.
00:05:30Todo lo que hace se encuentra en un solo archivo y su trabajo es tomar tu idea y convertirla en un sistema visual, que básicamente es el conjunto de reglas
00:05:37que luego sigue todo en la página, e incluye colores, tipografía y espaciado.
00:05:41Esta habilidad es un sistema completo y especializado para diseñar páginas de aterrizaje que realmente valgan la pena.
00:05:46La idea detrás de esto es que una página de aterrizaje no es una página de inicio. Una página de inicio intenta atender a muchas personas diferentes a la vez.
00:05:53Pero una página de aterrizaje tiene una sola tarea: lograr que las personas realmente tomen acción.
00:05:57Los modelos tienden a generar páginas de inicio que funcionan, pero no están especializados en diseñar páginas de aterrizaje de la manera en que lo hace esta habilidad.
00:06:03Por lo tanto, estructura la página en torno a esa única acción que deseas que tome quien visite tu sitio, enfocando la atención hacia esa acción mediante la estructuración de tu sitio a su alrededor.
00:06:12También mantiene el diseño bajo un estilo visual coherente y aborda otras áreas del diseño web que la mayoría de los modelos pasa por alto, incluido asegurarse de que el sitio web se pueda encontrar fácilmente a través de las búsquedas.
00:06:22Así que una vez que la hayas instalado en las habilidades de Claude, la ejecutas con un mensaje cada vez que quieras un diseño.
00:06:27También te hace preguntas primero y, una vez que las respondes, comienza a diseñar.
00:06:31El sitio que creó resultó con la sensación de una marca real y coincidió exactamente con la vibra que buscábamos.
00:06:36Y la forma en que se estructuró cada elemento hizo que fuera mucho más probable que quien entrara al sitio terminara haciendo una compra.
00:06:43Pero primero, escuchemos unas palabras de nuestro patrocinador.
00:06:45Make. Ya conoces Make para la automatización visual, pero acaban de lanzar Maya.
00:06:49Es un compañero de trabajo de IA que vive dentro del creador de Make.
00:06:52La mayoría de los constructores de IA te entregan una caja negra y solo te queda esperar que funcione.
00:06:56Maya es diferente. Le dices lo que quieres en inglés sencillo y ella lo construye justo frente a ti.
00:07:00Así que lo probamos. Le pedimos a Maya que enviara a nuestro equipo un resumen de Slack cada vez que un nuevo cliente potencial llegara a Salesforce, y fue directo al lienzo.
00:07:07Maya analizó la solicitud, eligió las herramientas correctas, mapeó cada módulo y conectó toda la automatización en el lienzo mientras nosotros observábamos.
00:07:15Ves cada decisión para que puedas intervenir y ajustar cualquier cosa en cualquier momento.
00:07:19En el proceso no solo obtienes una automatización, sino que aprendes cómo funciona realmente Make.
00:07:23Se puede probar gratis en versión beta ahora mismo. El enlace está en la descripción.
00:07:26Las siguientes habilidades de las que hablaremos son de Meng To.
00:07:29Él es un diseñador que ha estado en la industria durante mucho tiempo y es conocido por sus diseños inmersivos de narrativa basados en el desplazamiento.
00:07:36Y ha tomado todo lo que ha descubierto y lo ha empaquetado en un sistema de habilidades de diseño para que tú también puedas usarlo.
00:07:41Esto contiene muchas habilidades que abarcan diferentes áreas.
00:07:44Todas ellas están enfocadas en generar diseños de alta calidad que realmente cuenten una historia en lugar de limitarse a verse bien visualmente.
00:07:51Una de ellas es video to super prompt, que funciona tomando una grabación de pantalla o un recorrido por un sitio web y usando herramientas en tu máquina para convertir esa grabación en un mensaje para tu agente.
00:08:01Pero la habilidad de la que realmente queremos hablar es de sitios con calidad de premios.
00:08:05Awards es el sitio que organiza competencias de diseño impresionante y los sitios que ganan allí son reconocidos como los mejor diseñados de la web.
00:08:12Esta habilidad enumera los principios y detalles de diseño que contienen los sitios de nivel de premios.
00:08:17Y eso importa porque Claude no construye un diseño a ese nivel por sí solo.
00:08:21Así que la habilidad incorpora esos principios en el proceso y orienta la dirección del diseño.
00:08:25Y lo que los distingue es que, junto con los principios, el conjunto incluye las técnicas reales y los efectos específicos que hacen que un sitio luzca costoso, que es la parte que un modelo no producirá por sí mismo.
00:08:35Una vez que hayas agregado la habilidad de premios, le das un mensaje describiendo el sitio que deseas.
00:08:40Y lo que devuelve es un sitio estructurado y diseñado
00:08:45de la misma manera que los sitios ganadores.
00:08:49Utiliza ese enfoque narrativo basado en el desplazamiento,
00:08:54El siguiente conjunto de habilidades es de Jakub Krehel.
00:08:57Y a diferencia de los otros, donde una habilidad maneja cada parte del sitio a la vez, este lo divide en múltiples habilidades
00:09:05Todos los elementos que forman parte del diseño, incluyendo tipografía, color, accesibilidad y más, obtienen una habilidad separada
00:09:13Puedes añadir cualquiera de esas habilidades a Claude Design, pero la que usamos es la de revisión.
00:09:18La usamos porque revisa de forma exhaustiva todos los aspectos del diseño para poder iterar según la puntuación que otorga.
00:09:24Esta habilidad de revisión funciona mejor si la conectas a GitHub, ya que comprueba cómo era el diseño antes y después de los cambios.
00:09:31Si algo funcionaba antes de tu último cambio y ya no lo hace, lo señala y te indicará que dejó de funcionar debido a cierto cambio.
00:09:40Analiza aspectos como animaciones, accesibilidad y cómo se comporta el sitio en diferentes pantallas, y enumera todo lo hallado para corregirlo.
00:09:48También usamos una habilidad de mejor diseño, ya que aquí es donde Claude Design realmente tiene dificultades.
00:09:52Esta se ocupa del espaciado, la posición y la alineación de los elementos en todo el diseño, examinándolo a fondo.
00:09:58Por ejemplo, detectó que una fecha en la página necesitaba más espacio del asignado e incluso indicó cuántos píxeles extra requería.
00:10:04Así que solo le pides que corrija todas sus alertas.
00:10:06No hará que el sitio luzca drásticamente diferente, pero sí hará que sea correcto según los principios de diseño que los profesionales usan.
00:10:14La siguiente habilidad en la lista es Tastemaker.
00:10:16Su propósito principal es evitar los valores predeterminados genéricos y lo que la distingue es cómo lo logra.
00:10:22Funciona a partir de los píxeles reales de una referencia, evitando perder matices al convertir un estilo en palabras primero.
00:10:28Cuando le das al modelo una imagen de referencia, suele convertirla en un resumen de texto que usa como referencia después.
00:10:34Pero esta habilidad usa scripts para extraer los detalles exactos del diseño y los guarda en un formato estructurado para los agentes.
00:10:42Esto preserva los detalles de diseño que de otro modo se perderían en el resumen basado en texto.
00:10:46Se apoya primero en scripts para gestionar muchas tareas sin necesidad de que el agente las realice por sí mismo.
00:10:52Por ejemplo, los orienta en distintas direcciones y prueba variaciones.
00:10:55Las decisiones que toma se extienden a todo el proyecto en lugar de limitarse a una sola pantalla.
00:10:59Esta habilidad otorga a los modelos criterio de diseño para que no recurran a los mismos patrones genéricos de siempre.
00:11:05Una vez añadida, se ejecuta de la misma manera con el comando de barra inclinada y una instrucción.
00:11:09Le dimos el sitio que queríamos junto con los requisitos de estilo anteriores y dejamos que trabajara en ellos.
00:11:14El resultado fue un sitio muy impresionante, libre de ese estilo genérico y fiel a la apariencia del sitio que pedimos.
00:11:22El último conjunto es otra de las colecciones populares y se diferencia por estar basado en investigaciones reales,
00:11:28en leyes establecidas que los diseñadores emplean, con una habilidad independiente para cada una.
00:11:33Algunas cubren por qué la gente abandona la web a mitad de camino y cómo se refleja el comportamiento al navegar.
00:11:39Y no es obligatorio instalarlas todas.
00:11:41Solo instalas aquellas habilidades que se adapten a tu forma de trabajar.
00:11:44Para nuestra configuración, añadimos dos.
00:11:45La primera es la crítica de pantalla, que toma una pantalla y la evalúa desde múltiples ángulos,
00:11:50señalando los fallos basándose en pautas adecuadas para juzgar la calidad del diseño.
00:11:56La segunda son las leyes de percepción, que contienen instrucciones sobre cómo el ojo humano ve y comprende el diseño.
00:12:03Una vez que tienes tu diseño, ejecutas la revisión y te indica qué falla, como lo que destaca primero,
00:12:09la tipografía y el espaciado, listándolo todo para que puedas corregirlo.
00:12:12Y tras aplicar las leyes de percepción al sitio, todo se siente mucho más refinado.
00:12:17Esas eran las habilidades disponibles en GitHub para que todos las usen.
00:12:20Pero empleamos otras que hemos creado y perfeccionado mediante pruebas al construir productos reales.
00:12:26Si deseas acceder a ellas, puedes hacerlo en AI Labs Pro, que es nuestra comunidad.
00:12:31Estas incluyen algunas desarrolladas por nosotros y otras de código abierto.
00:12:36Si valoras lo que hacemos y quieres apoyar el canal, esta es la mejor manera de hacerlo.
00:12:41El enlace está en la descripción.
00:12:42Esto nos lleva al final de este video.
00:12:44Si deseas apoyar el canal y ayudarnos a seguir creando videos así, puedes hacerlo usando el botón de super thanks abajo.
00:12:50Como siempre, gracias por ver y nos vemos en el próximo.