- Com o surgimento de ferramentas de prototipagem com IA, designers estão migrando de mockups estáticos para workflows em que eles próprios criam protótipos interativos e até implementações reais em código
- Em grandes startups como Perplexity e Vercel, designers já são responsáveis até por escrever código frontend e fazer deploy em produção usando ferramentas de IA como Cursor, Claude, Lovable e V0
- Na área de branding, eles estão construindo diretamente com o Lovable ferramentas de geração de sistemas gráficos para entregar aos clientes, automatizando expansão de padrões e manutenção da marca
- Intuição de produto (product intuition) e fundamentos de design gráfico (cor, espaçamento, senso visual) continuam sendo competências centrais, enquanto a IA atua como acelerador de execução
- O papel do designer está se expandindo de “desenhar retângulos” para “comunicar visão e tomar decisões”, e clareza de ideias e rapidez de julgamento passam a importar mais do que habilidade com ferramentas
Workflow de branding com ferramentas de IA
- Nick Patterson (responsável por branding na Lovable, Craft, Maven etc.) usou o Lovable para criar, em 1 hora, uma ferramenta de geração de sistemas gráficos de marca
- No projeto de branding da processadora de pagamentos Flow Glad, ele construiu a ferramenta Pattern Architect, baseada em padrões geométricos islâmicos
- Ferramenta interativa em que o cliente pode ajustar em tempo real raio, densidade das estrelas, espessura das linhas, espaçamento etc.
- Em um sprint de 2 semanas (10 dias), foram desenvolvidas várias versões da ferramenta de geração de padrões e entregues ao cliente
- Já é possível apresentar visuais de alta qualidade desde a etapa de moodboard
- Antes, essa fase se apoiava principalmente em referências de trabalhos de outros designers; agora, produções próprias viraram o centro do moodboard
- Já no segundo dia, o trabalho integrava tipografia e padrões no estilo de mapa de metrô
- Uma nova forma de handoff: entregar a ferramenta ao cliente
- Depois de construir a marca, a própria ferramenta é entregue para que o cliente possa expandir e adaptar os padrões por conta própria
- Quando o cliente pede um “meio-termo”, ele mesmo pode ajustar os parâmetros e expressar sua intenção
- Isso ajuda empresas que se movem rápido a implementar e escalar sua marca imediatamente
Uso prático de ferramentas de prototipagem com IA
- Pranati Perry (design lead do Vercel V0) usa o V0 para geração de assets e prototipagem de interações
- Criação de um componente de cartucho para portfólio: gerar SVG no Figma → transformar em ferramenta dinâmica no V0
- Com um único prompt, foi possível alterar cores de gradiente do SVG, tornar textos dinâmicos e adicionar efeitos de transparência
- Também criou animações em sprite e se preparou para desenvolver um jogo de RPG para web
- Workflow de product design: etapas pré (Pre), durante (During) e pós (Post)
- Pré: exploração de ideias no Figma e no V0; o Figma já não é mais a fonte única da UI
- Durante: uso do Claude para escrever código de produção, com designers implementando diretamente grande parte do design
- Pós: o Vercel Agent deixa comentários automáticos em PRs para apoiar code review
- Escopo de uso do V0
- Protótipos complexos, como fluxos de billing: em vez de prototipagem “espaguete” no Figma, os fluxos de modal são definidos em linguagem natural
- Ferramenta para gerar efeito de cubo com dithering para anúncios da conferência Next.js e headers de e-mail (trabalho do designer de marca Dan)
- Animações de botões CTA finalizadas no V0 e entregues diretamente para o design engineer
- Tendências entre usuários do V0
- No início, o uso se concentrava em landing pages, gráficos e shaders
- Mais recentemente, profissionais de vendas e PMs passaram a usar a ferramenta para criar software pessoal de trabalho
- PMs estão gerando mockups interativos para complementar PRDs, indo além de protótipos estáticos com conexão a dados reais e integração de IA
Integração de ferramentas de IA no design de produto
- Henry Modiset (VP of Design da Perplexity) define o papel do designer como resolver problemas + comunicar visão
- Ferramentas de IA são usadas como meios de comunicação interativa, com foco em visualizar direções em vez de produzir mockups perfeitos de apps
- Isso permite explorar ideias de forma rápida e barata antes de pedir execução aos engenheiros
- Como a equipe de design da Perplexity usa IA
- Equipe de branding: experimenta e combina todas as ferramentas com base nos princípios de velocidade (velocity) e volume (volume)
- Equipe de product design: escreve código de produção todos os dias com Cursor e Claude Code
- Alguns designers ajustam animações em sandboxes de prototipagem antes de repassar aos engenheiros
- Equipe de game design: colaboração entre designer de mecânicas, designer de UI e designer de geração musical
- Ferramenta mais adotada: Cursor
- É a ferramenta mais completamente integrada do ponto de vista de design de produto
- Para explorar partes menores, como uma animação específica, usam-se ferramentas sandbox como V0 e Lovable
- A equipe de branding montou um pipeline que vai de Midjourney → Sora (vídeo) → geração de música → Frame.io
- Espectro técnico dos designers
- Quem já tem anos de experiência escrevendo código de produção usa a IA como principal acelerador
- Designers sem experiência em programação começaram a aprender código para ajustar melhor animações e adicionar detalhes de branding
- Gunnar (designer), que não tinha experiência com código, agora escreve componentes de UI em Svelte com Cursor
Como designers contribuem para a base de código
- Implementação agora virou table stakes (competência básica esperada de um designer)
- Como a velocidade de implementação aumentou, ficou possível investir mais tempo em pensamento criativo
- O trabalho complementar de uma funcionalidade, que antes levava 2 a 3 semanas, agora pode ser concluído em 1 semana
- Definir o escopo do protótipo é essencial
- Prototipar o fluxo inteiro é ineficiente; no meio do processo, gera-se um PR e a equipe parte para a implementação real
- Ferramentas de IA são mais eficazes em prototipagem pontual de interações
- Para edge cases, descrever condições em linguagem natural é mais eficiente do que criar mockups manualmente
- Abordagem de code review e aprendizado
- É preciso evoluir além do “blind coding” e realmente entender o código escrito pelo LLM
- Tratar o LLM como um “estagiário” e fornecer instruções técnicas específicas melhora a qualidade do resultado
- Ao registrar no Claude Memory “sou designer e quero aprender como o código funciona”, cria-se espaço para aprendizado
- Para não prejudicar os engenheiros, define-se como meta minimizar a pegada (footprint)
Evolução do papel do designer e critérios de contratação
- Competências centrais do designer na era da IA
- Intuição de produto (product intuition): capacidade de decidir o que construir e dizer “não” para a maioria das ideias
- “Por que as pessoas usariam isso? Funciona de forma intuitiva? Como se encaixa no mercado? É atraente o bastante para ficar na tela inicial?”
- Fundamentos de design gráfico: capacidade de julgar o que é “bom” ou “ruim” em cor, espaçamento, definição de personagem etc.
- Sinais observados pela Perplexity na contratação
- Experiência como designer fundador ou freelancer solo: pessoas acostumadas a tomar decisões de forma independente
- Profissionais com dupla capacidade de intuição de produto e direção de arte
- Disposição para aprender continuamente: como as ferramentas mudam rápido, adaptabilidade é crucial
- Redefinição do papel do designer
- Se ficar preso a “desenhar retângulos”, o designer perde poder
- Com ferramentas de IA, torna-se possível comunicar com muito mais força a visão que está na cabeça
- Principal vantagem de designers programarem: “é mais fácil construir diretamente do que explicar meu pensamento”
- Já é possível produzir resultados interativos e profundos em questão de dias
Estrutura de colaboração e conselhos práticos
- Um ambiente em que PMs e designers podem prototipar
- No pior caso, isso gera confusão; no melhor, leva a software melhor
- É preciso revisar os primeiros princípios: “planejar software com ferramentas de imagem estática não faz sentido”
- Protótipos interativos são uma forma natural de projetar software
- Necessidade de cultura clara de decisão e definição de ownership
- Quando qualquer pessoa pode construir, é preciso tomar decisões mais rápido
- O ponto forte do designer é saber escolher uma direção em meio à incerteza
- Conselhos para aplicação prática
- A ideia é 80%; uso de ferramenta, 20%
- Há 2 ou 3 anos, ainda se programava sem IA, mas hoje a mudança é tão grande que isso parece impensável
- Conversas em linguagem natural já permitem transformar listas de ideias em protótipos
- Aprender com erros é essencial, e a cultura organizacional precisa oferecer espaço para experimentação
Conclusão — o espectro de design que a IA amplia
- A IA não atua apenas como ferramenta para acelerar designers, mas como meio de ampliar o alcance da produção criativa
- Agora, designers evoluem de usuários de ferramentas para criadores de ferramentas, atravessando as fronteiras entre código, IA e gráficos
- A era do design pós-Figma caminha para projetar ideias interativas, e não imagens estáticas
- Com a popularização da IA, estamos entrando em uma era em que “quem consegue implementar” importa menos do que “o que se quer construir”
Ainda não há comentários.