Um Designer + IA. Centenas de Entregáveis. — Vincent Wendy, Engenheiro de IA
AAI Engineer
컴퓨터/소프트웨어마케팅/광고경영/리더십
스크립트
00:00:00Olá a todos, espero que estejam se divertindo na conferência. Antes de
00:00:19começarmos, quantos de vocês são realmente designers, tipo design de produto? Vejam, uma
00:00:24mão, outra, ok, e quantos, suponho que o resto de vocês sejam engenheiros, estou certo?
00:00:32Sim, praticamente. Ok, então a palestra de hoje não é técnica, mas trata mais de uma
00:00:40experiência do mundo real, de como criei o design para os engenheiros de IA, esta conferência e
00:00:46nossa outra conferência anterior também, e de como a IA me ajudou. Então a palestra de hoje é um
00:00:54designer mais IA, que sou eu como designer, e centenas de entregáveis, certo? Vamos
00:01:00começar. Meu nome é Vincent Wendy, sou designer criativo sênior na AI Engineer, e
00:01:07na AI Engineer a equipe é bem pequena, temos apenas cerca de 12 a 15 pessoas no
00:01:15momento, e cada um tem feito as suas próprias coisas, e acho que a IA tem sido uma
00:01:24forma realmente útil de ajudar todo mundo a fazer de tudo. E para um evento dessa escala, nós
00:01:33temos um problema, obviamente, certo? E o problema é o problema de escala, ou eu chamaria de desafios,
00:01:40e como superá-lo? É basicamente automação, e chegaremos a isso na parte posterior desta palestra. Então, quando preparei esta palestra, esperávamos apenas
00:01:536.000 participantes, e agora são 7.000, bom para nós, e depois temos 140 patrocinadores, mais de 140 patrocinadores, e mais de 300 palestrantes, mais de 600 sessões e um designer.
00:02:10E todo mundo precisa de todo o design, certo? Tipo, cada coisinha precisa de design. Patrocinador precisa de recursos, palestrante precisa de gráfico,
00:02:19você precisa de sinalização para não se perder, e é basicamente isso que fazemos, o que eu faço. Então, desde adesivos — gostam do seu brinde, dos adesivos?
00:02:31Bem, espero que sim, porque eu crio esse design também — até uma página de destino, anúncio de palestrante, mascote da trilha, todas as coisas que você vê,
00:02:41a maior parte das coisas que você vê aqui, desde uma sinalização até uma sinalização digital, página de destino, tudo é um
00:02:51entregável, e 1.000 detalhes significam 1.000 maneiras de falhar, certo? Porque a falta de logotipos de patrocinadores vai ser um problema enorme,
00:03:04e palestrantes com a programação errada também causam problemas gigantescos, certo? E parece impossível lidar com tantos tipos de entregáveis, mas, sim, conheçam a minha equipe de design.
00:03:16Então sou eu, o Devin, o GPT e o Figma. E agora estamos no estágio em que as ferramentas não são mais um problema,
00:03:31mas ter um problema real é a nossa vantagem. Então, por exemplo, quando alguém me perguntou: “O que te inspirou ao fazer o design na AI Engineer?”
00:03:41eu não sabia a resposta na época, mas depois de pensar sobre isso, foi na verdade um problema
00:03:46que me inspirou a projetar nesta AI Engineer, e chegaremos a isso na parte posterior desta palestra.
00:03:53Então, vocês viram a palestra do Simon Willison em 2025?
00:04:00Sim.
00:04:01Sim, e é bem interessante, certo? Ele pediu — ele pediu para cada LLM criar um arquivo vetorial,
00:04:11que é basicamente um pelicando andando de bicicleta, e é basicamente para testar,
00:04:16e eu testei de novo, e o modelo básico ainda faz isso,
00:04:20e não é utilizável para mim como designer. Mas como designers, temos que pensar fora da caixa,
00:04:26e podemos simplesmente pedir ao GPT para criar uma imagem estática, como um PNG de um pelicano andando de bicicleta,
00:04:33e então posso vetorizá-la no Figma, e podemos lançar isso agora.
00:04:37Portanto, temos que pensar fora da caixa aqui, independentemente das capacidades do LLM.
00:04:44Então, como resolver esse problema de escala, certo?
00:04:52Basicamente, cinco coisas. Primeiro, fundamentos; designs reutilizáveis;
00:04:56fluxos de trabalho automatizados; saída validada; e também remoção de atritos.
00:05:00Os fundamentos são definitivamente a parte central que precisamos configurar corretamente,
00:05:06como o sistema de design, tipografia, cores, componentes e outras coisas.
00:05:11E uma vez que isso esteja configurado, por exemplo, quando criamos o site,
00:05:17está tudo configurado dentro disso. E sim, isso é apenas um exemplo.
00:05:22Temos as cores primárias e também as cores de destaque,
00:05:26a tipografia e também o texto e todas as outras coisas.
00:05:31E também, vocês — vocês estão familiarizados com design atômico?
00:05:37Então, sim, meu histórico anterior é que sou designer de produtos,
00:05:41então estou bastante familiarizado com a necessidade de criar um design centrado no usuário,
00:05:46e também com designs atômicos, certo? Onde criamos a menor parte possível
00:05:50e depois a combinamos em peças de Lego, por assim dizer,
00:05:53e então em entregáveis. E isso é bastante útil na minha função atual.
00:06:02Então, uma vez que configuramos todos esses fundamentos, precisamos basicamente criar —
00:06:09por exemplo, usamos muito o Devin. No escritório, nós — todo mundo usa o Devin.
00:06:14Todo mundo, tipo, abusa do Devin, por exemplo. Sim.
00:06:18E então, nesse caso, eu só preciso dizer: “Ei, usamos esta tipografia de desktop
00:06:25e esta tipografia mobile”, porque sabemos
00:06:29que o Claude ou qualquer outro LLM adora jogar alguns tamanhos de fonte aleatórios, certo?
00:06:35E se não definirmos isso, ele simplesmente entrega algo mal feito, como o resultado anterior.
00:06:41E sim, tipografia, cor e coisas do tipo, e então chegamos ao design reutilizável.
00:06:50Portanto, uma vez que configuramos isso direito, o site tem a identidade visual aplicada,
00:06:57todas as outras equipes da AI Engineer, como por exemplo as equipes de marketing,
00:07:02podem criar praticamente tudo. Elas podem criar um design de e-mail com base nisso.
00:07:08Elas podem criar um folheto, um documento baseado apenas no site,
00:07:13porque já está definido — definido com antecedência.
00:07:18E sim, uma vez que você obtém o design, basta repetir o processo.
00:07:24Por exemplo, o mascote, ele tem praticamente o mesmo design,
00:07:28e é só repetir. E se você já definiu essas coisas,
00:07:34você pode basicamente criar um design que funcione para todos.
00:07:38E esta é a parte sobre a qual estou mais interessado em falar,
00:07:41que são os fluxos de trabalho automatizados.
00:07:43Antes, por exemplo, se você olhar para fora da sala,
00:07:48há uma programação, certo? A programação de cada um e de todos.
00:07:52Costumávamos fazer isso manualmente no Figma, mas agora usamos o Devin para isso.
00:07:58E deixe-me mostrar.
00:08:02Ei.
00:08:04Então, agora, nós apenas buscamos os dados mais recentes.
00:08:08Eu apenas peço ao Devin: “Ei, eu quero esta sala neste espaço.”
00:08:14E então podemos simplesmente exportar, baixar em PNG,
00:08:18e os dados são precisos, e aí podemos colocar em um pen drive
00:08:22e exibir na tela.
00:08:25E isso era meio que impossível antes,
00:08:28porque o atrito era simplesmente alto demais
00:08:31entre os designers e os desenvolvedores.
00:08:33Não conseguíamos fazer as coisas com perfeição de pixels,
00:08:35porque uma vez que dizíamos ao designer —
00:08:38desculpe, aos engenheiros que criavam o design, por exemplo:
00:08:40“Ei, preciso que isso seja entregue” —
00:08:44eles não criavam com perfeição de pixels.
00:08:46Havia muito feedback, certo?
00:08:49Havia muito feedback, certo?
00:08:52Mas com o Devin, nós apenas dizemos:
00:08:54“Ei, você pode tornar isso mais preciso?”
00:08:58Podemos apenas conectá-lo ao MCP,
00:09:00e se não funcionar,
00:09:02podemos sempre fornecer uma ficha técnica ou algo do tipo
00:09:06ou algo que possa ser definido, como qual é o espaçamento,
00:09:11qual é o tamanho da fonte, e assim por diante.
00:09:14E é isso que fazemos para o anúncio dos palestrantes.
00:09:20Temos mais de 300 palestrantes,
00:09:22e é impossível para mim lidar com um por um, certo?
00:09:26Então criamos esta coisa, que se chama —
00:09:29à qual você também pode acessar para o anúncio de palestrantes,
00:09:32e você também pode testar por conta própria, como este aqui, por exemplo.
00:09:38Você pode selecionar bem aqui,
00:09:40e também pode alterar o seu nome.
00:09:42Bem, sim.
00:09:44Por exemplo, nisto, você pode mudar o nome para o que quiser.
00:09:48E também temos o modo paisagem,
00:09:51que também pode ser carregado.
00:09:53Se o palestrante também tiver a foto de rosto e todos os detalhes,
00:09:56isso será exportado automaticamente.
00:09:59E também temos os cards colecionáveis,
00:10:01que são surpreendentemente bastante populares.
00:10:05E temos um tema diferente.
00:10:07E isso é tudo com perfeição de pixels, certo?
00:10:11Por exemplo, este aqui.
00:10:14Este é inspirado no TBPN, então sim.
00:10:19E como eu entrego isso com perfeição de pixels?
00:10:23Vamos direto ao ponto.
00:10:25Portanto, o processo aqui é que, antes, quando comecei minha carreira
00:10:34como designer de produto, costumava ser apenas,
00:10:37ok, precisamos pesquisar.
00:10:39Precisamos construir o produto, tipo design thinking em geral, certo?
00:10:42E depois ciclo de feedback e coisas assim.
00:10:45Mas agora, para mim, isso está simplesmente ultrapassado.
00:10:49Tipo, no meu caso, nós apenas vamos ao Slack, ao Figma,
00:10:54e depois mandamos de volta para o Slack, porque o nosso Devin vive no Slack.
00:10:58E então enviamos todas as coisas que ele precisa.
00:11:01Tipo, por exemplo, se pudermos conectar o MCP ou também o documento de especificação,
00:11:07que é, por exemplo, a ficha técnica como esta,
00:11:10que é um plugin no Figma, caso você tenha interesse.
00:11:15É gratuito.
00:11:15E ele basicamente adiciona anotações ao PDF.
00:11:20E sim, todos os designers não nomeiam suas camadas.
00:11:24Então sim, isso é apenas algum frame três, frame quatro aleatório.
00:11:29Mas o LLM vai entender.
00:11:31E ele está basicamente definindo todo esse espaçamento, todo esse tamanho de fonte,
00:11:37e depois todas as cores e coisas do tipo.
00:11:40Isso com certeza vai ajudar você a desenvolver um produto perfeito.
00:11:44E nós também temos, recentemente, tipo hoje, fotos,
00:11:51para as quais precisamos criar a miniatura de cada palestrante, certo?
00:11:55E aí nós perguntamos pro Devin: ei, quem é essa pessoa?
00:11:58E é, ele meio que fez.
00:12:01Tipo, eu crio uma espécie de Tinder, sabe,
00:12:06de detecção para ver se é a mesma pessoa ou não.
00:12:09E acho que é bem preciso.
00:12:11É o Jason Liu.
00:12:12Isso.
00:12:13E aí podemos usar isso, tipo, para contexto.
00:12:18Tipo antes, quando criávamos a miniatura,
00:12:19tínhamos que procurar todos os códigos do fotógrafo
00:12:23e procurar um por um e talvez por horário, se possível.
00:12:27Mas agora podemos só dizer: ah, esse é o Jason Liu.
00:12:30Baixe essa foto.
00:12:31E aí podemos colar na miniatura, né?
00:12:34E é bem incrível.
00:12:36Quer dizer, o mundo em que vivemos agora está basicamente, tipo,
00:12:40no ápice para mim como designer.
00:12:43Porque o que mais você poderia pedir, certo?
00:12:48Digo, já temos coisas para automatizar.
00:12:50Já temos coisas para criar o design rapidamente.
00:12:54Basicamente, tudo o que você precisa é de um problema.
00:12:56Porque assim que você tem um problema que vale a pena resolver,
00:12:59você basicamente consegue resolver qualquer coisa.
00:13:03E voltando à minha palestra.
00:13:04Eu me desviei do assunto assim.
00:13:06É.
00:13:07E aí-- é.
00:13:09E esta é também a coisa incrível que testamos.
00:13:11Então, como sabem, temos centenas de patrocinadores, certo?
00:13:16Mais de 140.
00:13:18E como vocês podem ver no-- no saguão,
00:13:21temos o banner com todos os patrocinadores.
00:13:24E eu basicamente disse ao Devin: oi, você poderia comparar--
00:13:29você poderia verificar se falta algum logotipo neste gráfico?
00:13:33E a precisão é de 100% com base no teste que fiz.
00:13:38Então-- o que é bem impressionante.
00:13:40E usamos a mesma coisa para a camiseta que vocês ganharam de brinde.
00:13:48E, é, surpreendentemente, o Devin sabe como, tipo, visualizar as coisas, né?
00:13:54Tipo, como detectar coisas visualmente.
00:13:56E isso é muito surpreendente.
00:13:58Porque como humanos, podemos cometer erros, tipo.
00:14:02Ah, acaba faltando um pequeno serviço.
00:14:05Mas com esse tipo de coisa, podemos fazer uma verificação dupla.
00:14:09Então, humano mais IA, combinados.
00:14:13Bem, você tem sua própria equipe de QA.
00:14:15E então remova o atrito.
00:14:17Então esta é apenas a forma de pensar.
00:14:21Portanto, como designers, temos que pensar como um usuário, não como um designer.
00:14:26Certo?
00:14:27Porque cada usuário tem suas necessidades.
00:14:29Você pode percorrer, por exemplo, o mapa do evento aqui.
00:14:33Então, basicamente, estou imaginando como um participante indo para o credenciamento,
00:14:39indo para o--
00:14:41vendo a sinalização e o QR code e todas essas coisas.
00:14:46Basicamente, tudo precisa estar conectado para vocês não se perderem
00:14:50e saberem como encontrar as salas de vocês e outras coisas.
00:14:55E o trabalho real é lidar com exceções.
00:15:00Então, por exemplo-- ah, eu tenho-- é.
00:15:03Por exemplo, há uma atualização na programação, certo?
00:15:09E quando criamos isso, não tem um botão de edição.
00:15:13E aí, numa certa manhã, simplesmente: ei, esta programação precisa ser atualizada.
00:15:19E nós não temos esses botões de edição.
00:15:21Eu poderia apenas pedir ao Devin: ei, você pode me adicionar um botão de edição?
00:15:25E então ele fez.
00:15:26Portanto, podemos alterar tudo agora e depois exportar para PNG e colocar de volta na tela,
00:15:32o que é bem conveniente, não é?
00:15:34E essas exceções, né, não-- não eram possíveis antes quando tínhamos que fazer tudo manualmente e tal.
00:15:41Mas agora ficou mais fácil.
00:15:43E então a lição aqui é que, para resolver o problema de escala, você precisa na verdade pensar pequeno.
00:15:51Pense em todas as menores coisas possíveis.
00:15:53Pense em tudo o que pode dar errado e vai dar errado e tente resolver isso antes.
00:15:59E também, tipo, agora, basicamente, você pode automatizar tudo.
00:16:04E neste momento, ter um problema vai realmente beneficiar você
00:16:11porque isso vai ajudar você a entregar um produto melhor, a entregar coisas boas.
00:16:18E, é, acho que é tudo o que posso compartilhar.
00:16:20Espero que minha palestra tenha trazido algum benefício para vocês.
00:16:23E, é, é isso.
00:16:26Obrigado, pessoal.
00:16:29Muito obrigado.
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기