Un Diseñador + IA. Cientos de Entregables. — Vincent Wendy, Ingeniero de IA
AAI Engineer
컴퓨터/소프트웨어마케팅/광고경영/리더십
스크립트
00:00:00Hola a todos, espero que la estén pasando bien en la conferencia, así que antes de
00:00:19empezar, ¿cuántos de ustedes son realmente diseñadores, como diseño de productos? A ver, levanten
00:00:24la mano, y otra, okay, ¿y cuántos, supongo que el resto de ustedes son ingenieros, es correcto?
00:00:32Sí, más o menos, okay, así que la charla de hoy es una charla no técnica, sino más bien de
00:00:40experiencia del mundo real, cómo creé el diseño para AI Engineer, esta conferencia y
00:00:46nuestra otra conferencia anterior también, y cómo la IA me ha ayudado, por lo que la charla de hoy es un
00:00:54diseñador más IA, que soy yo como diseñador, y cientos de entregables, bien, vamos a
00:01:00empezar. Mi nombre es Vincent Wendy, soy diseñador creativo sénior en AI Engineer, y
00:01:07en AI Engineer somos un equipo muy pequeño, solo tenemos entre 12 y 15 personas en
00:01:15este momento, y cada uno ha estado haciendo lo suyo, y creo que la IA ha sido una
00:01:24forma realmente útil para ayudar a todos a hacer de todo, y para un evento de esta escala, tenemos
00:01:33un problema, obviamente, ¿verdad? Y el problema es el problema de escala, o lo que yo llamaría los desafíos,
00:01:40¿y cómo superarlo? Básicamente es la automatización, y llegaremos a eso en la última parte de esta charla, así que cuando preparé esta charla, solo
00:01:53esperábamos 6000 asistentes, y ahora son 7000, bueno, qué bien por nosotros, y luego tenemos 140 patrocinadores, más, más de 140 patrocinadores, y luego más de 300 speakers, más de 600 sesiones y un diseñador.
00:02:10Y todo el mundo necesita cada diseño, ¿verdad?, o sea, absolutamente todo necesita diseño. Los patrocinadores necesitan recursos, los speakers necesitan gráficos,
00:02:19se necesita señalización para no perderse, y esto es básicamente lo que hacemos, lo que yo hago. Así que desde los stickers, ¿les gustan sus regalos, sus stickers?
00:02:31Bueno, espero que sí, porque yo también creo ese diseño, hasta una página de destino, anuncio de speakers, mascota de la pista, todas las cosas que ves,
00:02:41todas las cosas que ves, la mayor parte de lo que ves aquí, desde una señalización hasta una señalización digital, página de destino, todo es un
00:02:51entregable, y 1000 detalles significan 1000 formas de fallar, ¿verdad? Porque faltar el logo de un patrocinador va a ser un problema enorme,
00:03:04y los speakers que tengan un horario incorrecto también generan grandes problemas, ¿verdad? Y parece imposible manejar tantos tipos de entregables, pero, sí, conozcan a mi equipo de diseño.
00:03:16Así que somos yo, Devin, GPT y Figma. Y ahora mismo, estamos en la etapa en la que las herramientas ya no son un problema,
00:03:31sino que tener un problema real es nuestra ventaja. Por ejemplo, cuando alguien me preguntó: "¿Qué te inspiró al diseñar en AI Engineer?"
00:03:41No sabía la respuesta en ese entonces, pero después de pensarlo, en realidad es un problema
00:03:46lo que me inspiró a diseñar en este AI Engineer, y llegaremos a eso en la última parte de esta charla.
00:03:53Entonces, ¿vieron la charla de Simon Willison, como en 2025?
00:04:00Sí.
00:04:01Sí, y es bastante interesante, ¿verdad? Le pidió a -- le pidió a cada LLM que creara un archivo vectorial,
00:04:11que es básicamente un pelícano montando en bicicleta, y básicamente es para probar,
00:04:16y lo volví a probar, y todavía hace esto con el modelo básico,
00:04:20y no me sirve como diseñador. Pero como diseñadores, tenemos que pensar fuera de la caja,
00:04:26y simplemente podríamos pedirle a GPT que cree una imagen fija, como un PNG de un pelícano montando en bicicleta,
00:04:33y luego puedo vectorizarlo en Figma, y ya podemos lanzarlo.
00:04:37Por lo tanto, tenemos que pensar fuera de la caja aquí, independientemente de las capacidades del LLM.
00:04:44Entonces, ¿cómo resolver este problema de escala, verdad?
00:04:52Básicamente, cinco cosas. Primero los cimientos, diseños razonables,
00:04:56flujos de trabajo automatizados, resultados validados y también eliminar fricciones.
00:05:00Los cimientos son definitivamente la parte central que necesitamos configurar bien,
00:05:06como el sistema de diseño, la tipografía, los colores, los componentes y otras cosas.
00:05:11Y una vez que esto está configurado, por ejemplo, cuando creamos el sitio web,
00:05:17todo se configura dentro de esto. Y, sí, este es solo un ejemplo.
00:05:22Como tenemos los colores, el principal y también los colores de acento,
00:05:26la tipografía y también el texto y todas las demás cosas.
00:05:31Y también, ¿están familiarizados con el diseño atómico?
00:05:37Entonces, sí, mi experiencia previa es que soy diseñador de productos,
00:05:41así que estoy bastante familiarizado con lo de crear un diseño centrado en el usuario,
00:05:46y también, como el diseño atómico, ¿verdad?, donde creamos la parte más pequeña posible,
00:05:50y luego la combinamos en, básicamente, piezas de Lego,
00:05:53y luego en entregables. Y esto es bastante útil en mi puesto de trabajo actual.
00:06:02Así que, una vez que establecemos todos esos cimientos, básicamente necesitamos crear --
00:06:09por ejemplo, usamos mucho a Devin. En la oficina, todos usamos a Devin.
00:06:14Todos, digamos, abusan de Devin, por ejemplo. Sí.
00:06:18Y entonces, en este caso, solo necesito: "Oye, usamos esta tipografía de escritorio
00:06:25y esta tipografía móvil"," porque sabemos
00:06:29que Claude o cualquier otro LLM adora arrojar algunos tamaños de fuente aleatorios, ¿verdad?
00:06:35Y si no lo definimos, simplemente entrega algo chapucero, como el trabajo chapucero anterior.
00:06:41Y sí, tipografía, color y cosas así, y luego se pasa al diseño reutilizable.
00:06:50Entonces, una vez que lo configuramos bien, por ejemplo, el sitio web tiene la marca incorporada,
00:06:57todos los demás equipos de AI Engineer, como por ejemplo los equipos de marketing,
00:07:02pueden crear de todo, básicamente. O sea, pueden crear un diseño de correo electrónico basado en eso.
00:07:08Pueden crear un volante, un documento basándose simplemente en el sitio web,
00:07:13porque ya está definido, se definió con anticipación.
00:07:18Y sí, una vez que obtienes el diseño, puedes simplemente repetir el proceso.
00:07:24Por ejemplo, la mascota, todo tiene prácticamente el mismo diseño,
00:07:28y es un proceso repetitivo. Y si ya estás definiendo esas cosas,
00:07:34básicamente puedes crear un diseño que funcione para todos.
00:07:38Y esta es la parte de la que estoy más interesado en hablar,
00:07:41que son los flujos de trabajo automatizados.
00:07:43Antes, por ejemplo, si echas un vistazo fuera de la sala,
00:07:48hay un horario, ¿verdad? El horario para cada uno de ustedes.
00:07:52Así que solíamos hacerlo manualmente en Figma, pero ahora usamos a Devin para eso.
00:07:58Y déjenme mostrarles.
00:08:02Hola.
00:08:04Entonces, ahora mismo, simplemente extraemos los datos más recientes.
00:08:08Le pido a Devin algo como: "Oye, quiero esta sala en este espacio".
00:08:14Y luego simplemente podemos exportarlo, descargarlo a PNG,
00:08:18y los datos son precisos, y luego podemos pasarlo a una memoria USB
00:08:22y ponerlo en la pantalla.
00:08:25Y era algo imposible antes,
00:08:28porque la fricción era simplemente demasiado grande
00:08:31entre los diseñadores y los desarrolladores.
00:08:33No podemos hacer las cosas con precisión de píxel,
00:08:35porque una vez que le decimos al diseñador,
00:08:38"Oye, este es el diseño", y luego --
00:08:40perdón, a los ingenieros que crearon el diseño, por ejemplo.
00:08:44"Oye, necesito que esto sea entregado",
00:08:46y luego no lo crean con precisión de píxel.
00:08:49Hay muchísimos comentarios, ¿verdad?
00:08:52Pero con Devin, simplemente decimos:
00:08:54"Oye, ¿puedes hacer esto más preciso?"
00:08:58Podemos simplemente conectarlo a MCP,
00:09:00y si no funciona,
00:09:02siempre podemos dar una hoja de especificaciones o algo
00:09:06que se pueda definir, como cuál es el espaciado,
00:09:11cuál es el tamaño de fuente, etcétera.
00:09:14Y esto es lo que hacemos para el anuncio de los speakers.
00:09:20Así que tenemos más de 300 speakers,
00:09:22y es imposible para mí manejarlos uno por uno, ¿verdad?
00:09:26Así que creamos esto, que se llama --
00:09:29a lo cual también puedes acceder para los anuncios de speakers,
00:09:32y también puedes probarlo tú mismo, como este, por ejemplo.
00:09:38Puedes seleccionarlo aquí mismo,
00:09:40y también puedes cambiar tu nombre.
00:09:42Bueno, sí.
00:09:44Por ejemplo, aquí, puedes cambiar el nombre a lo que quieras.
00:09:48Y también tenemos el modo horizontal,
00:09:51el cual también se puede cargar.
00:09:53Si el speaker también tiene su foto y todos los detalles,
00:09:56se exportará automáticamente.
00:09:59Y también tenemos las tarjetas coleccionables,
00:10:01que sorpresivamente son bastante populares.
00:10:05Y tenemos un tema diferente.
00:10:07Y todo esto tiene una precisión perfecta de píxeles, ¿verdad?
00:10:11Por ejemplo, este.
00:10:14Está inspirado en TBPN, así que sí.
00:10:19¿Y cómo logro entregar esto con precisión perfecta de píxeles?
00:10:23Vamos a profundizar en ello.
00:10:25Así que el proceso aquí es que antes, cuando comencé mi carrera
00:10:34como diseñador de productos, solía ser simplemente,
00:10:37de acuerdo, necesitamos investigar.
00:10:39Necesitamos construir productos, como el pensamiento de diseño en general, ¿verdad?
00:10:42Y luego el ciclo de retroalimentación y cosas por el estilo.
00:10:45Pero ahora mismo, para mí eso ya está desactualizado.
00:10:49Como en mi caso, simplemente vamos a Slack, Figma,
00:10:54y luego lo enviamos de regreso a Slack, porque nuestro Devin vive en Slack.
00:10:58Y luego enviamos todas las cosas que necesita.
00:11:01Por ejemplo, si podemos conectar el MCP o también el documento de especificaciones,
00:11:07que es, por ejemplo, la hoja de especificaciones como esta,
00:11:10que es un complemento en Figma, por si les interesa.
00:11:15Es gratis.
00:11:15Y básicamente añade anotaciones al PDF.
00:11:20Y sí, los diseñadores nunca nombran sus capas.
00:11:24Así que sí, esto es solo algún marco aleatorio 3, marco 4.
00:11:29Pero el LLM lo entenderá.
00:11:31Y básicamente define todo este espaciado, todo este tamaño de fuente,
00:11:37y luego todos los colores y cosas así.
00:11:40Definitivamente te va a ayudar a desarrollar un producto perfecto a nivel de píxeles.
00:11:44Y también tenemos, justo recientemente, como hoy, fotos,
00:11:51de las cuales tenemos que crear la miniatura para su ponente, ¿verdad?
00:11:55Y luego le preguntamos a Devin, oye, ¿quién es esta persona?
00:11:58Y sí, más o menos lo hizo.
00:12:01Como si hiciera una especie de Tinder, ya sabes,
00:12:06detección de si es la misma persona o no.
00:12:09Y creo que es bastante preciso.
00:12:11Es Jason Liu.
00:12:12Sí.
00:12:13Y luego podemos usar esto para, digamos, obtener contexto.
00:12:18Como antes, cuando creamos la miniatura,
00:12:19teníamos que buscar todos los códigos que tiene el fotógrafo
00:12:23y buscarlos uno por uno y tal vez por hora, si fuera posible.
00:12:27Pero ahora podemos simplemente, oh, este es Jason Liu.
00:12:30Descarga esa foto.
00:12:31Y luego podemos pegarla en la miniatura, ¿verdad?
00:12:34Y es bastante increíble.
00:12:36O sea, el mundo en el que vivimos ahora mismo está, de verdad,
00:12:40en su punto álgido para mí como diseñador.
00:12:43¿Porque qué más se puede pedir, verdad?
00:12:48O sea, ya tenemos cosas que automatizar.
00:12:50Ya tenemos cosas para crear el diseño rápidamente.
00:12:54Básicamente, todo lo que necesitas es un problema.
00:12:56Porque una vez que tienes un problema que vale la pena resolver,
00:12:59básicamente puedes resolver cualquier cosa.
00:13:03Y volviendo a mi charla.
00:13:04Me desuscribí así de repente.
00:13:06Sí.
00:13:07Y luego... sí.
00:13:09Y esto es también lo increíble que probamos.
00:13:11Así que, como saben, tenemos cientos de patrocinadores, ¿verdad?
00:13:16Como más de 140.
00:13:18Y como pueden ver en... en el vestíbulo,
00:13:21tenemos el cartel con todos los patrocinadores.
00:13:24Y básicamente le digo a Devin, oye, ¿podrías comparar...?
00:13:29¿podrías comprobar si falta algún logotipo en este gráfico?
00:13:33Y la precisión es del 100% según la prueba que hago.
00:13:38Así que... lo cual es bastante alucinante.
00:13:40Y usamos lo mismo para la camiseta que recibieron como obsequio.
00:13:48Y, sí, sorprendentemente, Devin sabe cómo... visualizar las cosas, ¿verdad?
00:13:54Como detectar cosas visualmente.
00:13:56Y eso es muy sorprendente.
00:13:58Porque como humanos, podemos, ya sabes, cometer errores.
00:14:02Ah, resulta que falta un pequeño servicio.
00:14:05Pero con este tipo de cosas, podemos verificarlo doblemente.
00:14:09Así que humano más IA, combinados.
00:14:13Bueno, tienes tu propio equipo de control de calidad.
00:14:15Y luego elimina la fricción.
00:14:17Así que esta es simplemente la forma de pensar.
00:14:21Entonces, como diseñadores, tenemos que pensar como usuarios, no como diseñadores.
00:14:26¿Verdad?
00:14:27Porque cada usuario tiene sus necesidades.
00:14:29Puedes recorrer, por ejemplo, el plano del mapa aquí.
00:14:33Así que básicamente me imagino como un asistente que va al registro,
00:14:39va a...
00:14:41ve la orientación y el código QR y todas esas cosas.
00:14:46Básicamente, todo debe estar conectado para que no se pierdan
00:14:50y sepan cómo encontrar sus salas y las demás cosas.
00:14:55Y el verdadero trabajo es gestionar las excepciones.
00:15:00Así que por ejemplo... oh, tengo... sí.
00:15:03Por ejemplo, hay una actualización de horario, ¿de acuerdo?
00:15:09Y cuando creamos esto, no tiene un botón de edición.
00:15:13Y luego una mañana, simplemente, oye, este horario necesita ser actualizado.
00:15:19Y no tenemos esos botones de edición.
00:15:21Podría simplemente pedirle a Devin, oye, ¿me puedes añadir un botón de edición?
00:15:25Y lo hizo.
00:15:26Así que ahora podemos cambiar todo y luego exportarlo a PNG y volver a conectarlo a la pantalla,
00:15:32lo cual es bastante conveniente, ¿verdad?
00:15:34Y esas excepciones, ¿verdad?, no... no eran posibles antes cuando teníamos que hacerlo manualmente y todo eso.
00:15:41Pero ahora se ha vuelto más fácil.
00:15:43Y entonces la conclusión aquí es que para resolver el problema de escala, en realidad hay que pensar en pequeño.
00:15:51Pensar en lo más pequeño posible.
00:15:53Pensar en todo lo que puede salir mal e irá mal e intentar resolverlo de antemano.
00:15:59Y también, como, sí, ahora mismo, básicamente puedes automatizarlo todo.
00:16:04Y en este momento, tener un problema te va a beneficiar en realidad
00:16:11porque eso te va a ayudar a lanzar un producto mejor, a lanzar cosas que sean buenas.
00:16:18Y, sí, creo que eso es todo lo que puedo compartir.
00:16:20Espero que mi charla les haya aportado algún beneficio.
00:16:23Y, sí, eso es todo.
00:16:26Gracias, chicos.
00:16:29Muchísimas gracias.
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기