00:00:00Voy a proponerles, junto a cientos de otros diseñadores, un experimento muy genial.
00:00:06Quiero ver hasta dónde podemos llevar el diseño con IA, y esta vez se trata específicamente de Claude Code,
00:00:13para producir una sección hero basada en la misma idea de negocio ficticia.
00:00:19Actualmente hay un desafío de diseño de UI de 30 días en curso en designcourse.com.
00:00:24Es 100% gratuito.
00:00:25Ya hemos tenido un desafío con más de 200 entregas, y este es el
00:00:30segundo desafío.
00:00:31Voy a mostrarles cómo usar Claude Code y dotarlo de una habilidad especial de diseño
00:00:37para producir algunos diseños realmente buenos.
00:00:40El objetivo de este desafío es que les daré a todos la misma idea de negocio
00:00:44ficticia, pero veremos qué tan buenas son sus habilidades de prompting para crear la mejor
00:00:50UI posible para esta tarea.
00:00:52En un momento, les mostraré exactamente cómo participar en este desafío hoy.
00:00:56No importa cuándo vean esto, podrían haber pasado meses.
00:00:58Siempre pueden participar en este desafío para ver qué está haciendo la gente.
00:01:01Pero primero, les mostraré cómo configurar todo lo necesario.
00:01:04Primero, obviamente van a necesitar Claude Code, ¿de acuerdo?
00:01:07Esta es la página para la configuración.
00:01:10Hay diferentes entornos.
00:01:11No voy a explicarlo todo, así que simplemente dejaré el enlace a la página de configuración.
00:01:15Pueden averiguar cómo instalarlo si aún no lo han hecho.
00:01:17Una vez que esté listo, solo tienen que escribir “Claude” y debería cargarse justo
00:01:22aquí.
00:01:23Bien.
00:01:24El siguiente paso es asegurarse de dotarlo de una habilidad especial.
00:01:26Una habilidad es solo un conjunto de instrucciones que se introducen en el contexto de la
00:01:30IA.
00:01:31Y hay un montón de habilidades diferentes.
00:01:32Antes de mostrarles la habilidad, así es como se instalan las habilidades en su sistema.
00:01:37Tienen que buscar dónde está su carpeta de Claude Code según el sistema operativo
00:01:43y el entorno que estén utilizando.
00:01:44Luego, simplemente tomarán este archivo markdown, que es una habilidad, y lo colocarán en
00:01:49esa carpeta.
00:01:50La habilidad en particular de la que hablo se llama Front End Design, justo aquí.
00:01:55La enlazaré en la descripción para que puedan acceder a ella.
00:01:58Lo que deben hacer es clic en Skills, Front End Skills, Skill.md, y luego justo
00:02:03aquí, Descargar Archivo Raw, ¿entendido?
00:02:06Una vez que tengan ese archivo de habilidad, búsquen su carpeta de Claude Code en
00:02:12la URL que les acabo de mostrar.
00:02:14Mi carpeta aquí en Windows 11 resulta ser C:\Users\Gary\.claude.
00:02:21Dentro de ella, es posible que no tengan una carpeta “skills”.
00:02:24Si no la tienen, créenla.
00:02:25Yo ya la tengo.
00:02:26Hagan doble clic y creen una carpeta llamada “Designer”.
00:02:31Y dentro de ella, ahí es donde pegan ese archivo de habilidad, Skill.md.
00:02:35Si ya tienen Claude ejecutándose, asegúrense de cerrarlo primero presionando Control
00:02:39C unas cuantas veces.
00:02:41Escriban Claude de nuevo y luego escriban /skills para listar todas las habilidades disponibles.
00:02:47Ahora mismo solo tengo tres.
00:02:48Vemos aquí mismo: Front End Design.
00:02:51Y la forma de acceder a esta será con /frontend-design.
00:02:56Luego pegan su prompt.
00:02:58Ahora permítanme mostrarles esto en acción.
00:03:00Si pongo /frontenddesigner, “Diseña una sección hero de una landing page para un servicio de
00:03:06verificación de identidad con IA.”
00:03:07“Debe tener un fondo beige claro con dos columnas, un titular fuerte y un texto
00:03:11a la izquierda con una llamada a la acción.”
00:03:13“Y a la derecha debe haber una animación de UI ficticia pero simplista que demuestre la
00:03:16idea de la verificación de identidad.”
00:03:20“Coloca esto en un archivo HTML con CSS e incluye variables.”
00:03:23Ese es todo mi prompt, y esto es lo que terminó produciendo.
00:03:28No sé ustedes, pero esto es realmente sólido, y lo logró al primer intento.
00:03:33Y ya vieron el prompt.
00:03:35Es muy corto.
00:03:36Así que voy a mostrarles el desafío y la idea de negocio del prompt que quiero
00:03:41que usen para el negocio ficticio, y quiero ver qué pueden producir.
00:03:46La idea es que lo complementen con sus propias preferencias de diseño para crear algo que sea
00:03:51único e incluso animado si lo desean.
00:03:53El primer paso es ir a [designcourse.com/foundations](https://www.google.com/search?q=https://designcourse.com/foundations) challenge.
00:03:58El enlace está por aquí abajo.
00:04:00Al entrar, verán esta página con 613 estudiantes y 197 entregas
00:04:06para el primer desafío que ya realizamos.
00:04:08Este es para el segundo desafío.
00:04:09Solo tienen que hacer clic aquí y verán: “Obtén la plantilla de Figma UI/UX 2026”.
00:04:16Allí encontrarán el desafío número dos, y eso es lo que quiero que usen.
00:04:20Se ve de la siguiente manera.
00:04:23Este es el desafío número dos, y aquí están las instrucciones.
00:04:27Esta es la parte del prompt que quiero que incluyan.
00:04:29Esta es la idea de negocio ficticia.
00:04:31No quiero que usen ninguna otra idea.
00:04:32Quiero que todos usemos la misma idea: un negocio de inspección de viviendas con IA.
00:04:37Usa visión artificial para analizar imágenes de sótanos, techos y cimientos en busca de defectos comunes
00:04:42y genera automáticamente informes de inspección estandarizados.
00:04:45Nuestro objetivo es instruir a la IA con este prompt inicial para crear
00:04:50una sección hero de nivel superior con nuestra habilidad de diseñador de Claude Code.
00:04:56Y por aquí están las instrucciones.
00:04:58Usen Claude Code para generar una sección hero para la idea de negocio ficticia que aparece
00:05:03a la derecha de este marco.
00:05:05Asegúrense de pegar eso como parte de su prompt.
00:05:08E incluyan la idea de negocio, pero también sus propias preferencias de diseño y estilo.
00:05:13Así es como lo dirigí para intentar crear esa pequeña tarjeta animada que
00:05:17acabamos de ver.
00:05:18Pueden usar tantos prompts como quieran para perfeccionar el resultado final.
00:05:22Pueden integrar animaciones si lo desean.
00:05:24Al entregar, incluyan primero el número de prompts que les tomó llegar al resultado final,
00:05:29porque quiero que perfeccionen el resultado si así lo prefieren.
00:05:32Y también incluyan el prompt mismo en el apartado de comentarios.
00:05:36También pueden usar el plugin de Claude Code a Figma para compartir un prototipo de Figma del diseño
00:05:42en su entrega, aunque no es obligatorio.
00:05:44Una captura de pantalla funcionará perfectamente.
00:05:47El plugin de Claude Code a Figma les permite tomar el resultado final de su UI y
00:05:53enviarlo a Figma.
00:05:54No mostraré cómo hacerlo aquí porque subí un video ayer
00:05:58que explica exactamente eso.
00:06:00Repito, no es obligatorio hacerlo.
00:06:01Una captura de pantalla bastará para su entrega.
00:06:04Aquí se muestra cómo enviar su participación.
00:06:09Si deciden compartir un documento de Figma de lo que están haciendo,
00:06:14lo cual me permitirá hacer revisiones si llego a revisar el suyo, simplemente pulsen
00:06:18“Share” (compartir) aquí.
00:06:20Hagan clic en “Copy prototype link”, asegúrense de que cualquiera pueda verlo, y envíenlo junto
00:06:25con su participación.
00:06:26Este va a ser un desafío muy genial porque veremos si los resultados
00:06:30serán muy similares.
00:06:32Lo serán si no proporcionan mucha dirección, su propio interés creativo en los
00:06:37estilos y cómo infunden sus ideas creativas.
00:06:40Si lo hacen, creo que veremos muchas variaciones y conceptos interesantes
00:06:47producidos.
00:06:48Nuevamente, especifiquen el esquema de colores y cualquier tipo de ilustración
00:06:53o animación interesante que deseen.
00:06:55El objetivo es intentar maximizar lo que la IA puede producir.
00:06:58Muy bien, espero ver a todo el mundo participando en esto.
00:07:01Es un desafío muy genial.