Até pouco tempo atrás, criar uma interface de aplicativo exigia abrir o Figma, arrastar retângulos, ajustar espaçamentos pixel a pixel e escolher manualmente cada cor e tipografia. Quem não dominava essas ferramentas dependia de um designer. Esse cenário está mudando rápido.

Vibe design é o nome que a indústria adotou para descrever um jeito diferente de criar interfaces: em vez de manipular elementos visuais diretamente, você descreve o que quer em linguagem natural e a IA gera o design. O termo nasceu como extensão natural do vibe coding, cunhado por Andrej Karpathy em fevereiro de 2025, quando ele descreveu a prática de "se entregar completamente às vibes e esquecer que o código existe". Aplicado ao design, a lógica é a mesma: esqueça os painéis de propriedades e os atalhos de teclado. Diga o que você precisa.

Ferramentas como Google Stitch, Pencil.dev, Paper e Figma Make estão tornando isso concreto. E o Google Pomelli estende o conceito para marketing visual. Este post mapeia o que cada uma faz, onde se encaixam no fluxo de trabalho e o que isso muda para quem desenvolve software.

O que é vibe design

Vibe design é um workflow criativo onde o input principal é intenção, descrita em linguagem natural ou referências visuais, em vez de manipulação manual de ferramentas. Você não especifica componentes exatos. Descreve um objetivo de negócio ou o sentimento desejado ("minimalista e premium, como o Stripe") e a IA gera múltiplas direções de design para explorar.

A vantagem é velocidade de exploração. Dá para avaliar dez direções de design no tempo que levaria para wireframar uma. Segundo o State of AI in Design Report 2025, 89% dos designers relataram que a IA melhorou seu fluxo de trabalho. Uma pesquisa da 99designs encontrou que 52% dos designers já usavam ferramentas de IA generativa em 2024.

O que me pega nesse movimento é o efeito de democratização. Um fundador sem experiência em design agora consegue gerar mockups de app mobile que, poucos meses atrás, exigiriam contratar um designer. Isso é empolgante e meio inquietante ao mesmo tempo. Depende de qual lado da equação você está.

Google Stitch: o canvas que obedece a voz

O Google Stitch saiu de um experimento no Google Labs para uma das ferramentas de design mais comentadas de 2026. A atualização de março trouxe mudanças de peso.

O novo canvas é infinito e AI-native. Você descreve o que precisa e o Stitch gera até cinco telas de uma vez. O Voice Canvas leva isso adiante: você fala diretamente com o canvas e um agente de IA escuta, faz perguntas de esclarecimento, oferece críticas de design em tempo real e faz atualizações ao vivo. Dá para pedir "aumente o tamanho da fonte" ou dar instruções de alto nível como "destaque o botão de checkout".

Desde dezembro de 2025, o Stitch conecta telas em protótipos interativos com transições e gera automaticamente as próximas telas lógicas de um fluxo. Clique em "Play" e navegue pelo app como se ele existisse.

Para quem desenvolve, o ponto que interessa é a integração com ferramentas de código. O Google construiu um SDK e um MCP server que conectam o Stitch a assistentes como Claude Code, Gemini CLI e Cursor. O Stitch também exporta um arquivo chamado DESIGN.md — uma especificação em linguagem natural do seu design system (cores, tipografia, componentes, espaçamentos). Esse arquivo é legível por assistentes de IA de código.

npm install @google/stitch-sdk

Na prática, você pode dizer ao Claude Code "implemente a tela de dashboard do nosso projeto Stitch" e ele puxa o contexto do design via MCP, sem copiar specs manualmente.

O Stitch oferece 350 gerações gratuitas por mês, powered by modelos Gemini. Para comparação, uma equipe de 20 pessoas no plano Organization do Figma paga em torno de US$13.200 por ano (o plano Professional fica em torno de US$3.840).

Pencil.dev: design dentro do IDE

O Pencil.dev ataca o problema de um ângulo diferente. Em vez de ser uma ferramenta de design separada, ele vive dentro do seu IDE (VS Code ou Cursor).

A proposta é um canvas vetorial infinito integrado diretamente no editor de código. Você desenha componentes de UI usando prompts de IA, importa designs do Figma, edita visualmente, e tudo compila instantaneamente em HTML, CSS ou código React limpo. Os arquivos de design são JSON aberto e vivem no repositório Git junto com o código.

A integração com IA acontece via Model Context Protocol (MCP). O Pencil funciona com Claude Code, Claude Desktop, Cursor, Windsurf, Codex CLI e Antigravity. A experiência atual é otimizada para Claude Code, o que pode limitar quem usa outros LLMs.

O Pencil está em early access gratuito. A dependência de um plano Claude Pro (a partir de US$20/mês, que inclui acesso ao Claude Code) é o custo real de entrada.

O que diferencia o Pencil da maioria das ferramentas de vibe design é que ele elimina o handoff. Não existe "exportar do Figma e traduzir para código". O design já é um artefato de código desde o primeiro pixel.

Paper, Figma Make e Pomelli

O ecossistema de vibe design não se resume a Stitch e Pencil. Outras ferramentas ocupam nichos complementares.

Paper se posiciona como "um espaço real para design na era dos agentes". Criado por Stephen Haney, o Paper conecta arquivos, CMS ou banco de dados diretamente aos layers do canvas. Agentes de IA podem ler e escrever no canvas, tratando tarefas como layouts responsivos e variações de estilo. O Paper Desktop e Paper MCP estão disponíveis desde março de 2026.

Figma Make é a resposta direta do Figma ao movimento de vibe coding. Lançado em maio de 2025, o Make permite gerar aplicações funcionais sem sair do Figma. Você importa suas bibliotecas de design (cores, tipografia, componentes) e o Make gera protótipos que respeitam o design system. A integração com Supabase torna os protótipos dinâmicos, não estáticos. O Figma MCP server traz o contexto de design para ferramentas como VS Code, Cursor e Claude Code.

Google Pomelli é um caso à parte. Não é uma ferramenta de design de interfaces, e sim de marketing visual. Lançado em beta público em outubro de 2025 pelo Google Labs e DeepMind, o Pomelli analisa seu site para criar um perfil de "DNA do negócio" (tom de voz, fontes, paleta de cores) e gera campanhas de social media alinhadas à marca. Em janeiro de 2026, lançou o Pomelli Animate (vídeos a partir de conteúdo estático, powered by Veo 3.1). Em fevereiro, o Photoshoot (fotos de produto em qualidade de estúdio). Em março de 2026, expandiu de 4 para mais de 170 países. Gratuito durante o beta.

O fluxo de trabalho na prática

Cada ferramenta resolve um problema diferente, e quem tira melhor proveito em 2026 combina várias delas.

Um fluxo que faz sentido:

  1. Use o Stitch para explorar direções de design rapidamente — gere dez variações em minutos
  2. Exporte o design vencedor e o DESIGN.md para manter consistência
  3. Use o Pencil.dev ou o Figma Make para refinar e traduzir em código
  4. Conecte via MCP ao seu assistente de código (Claude Code, Cursor) para implementação final
  5. Use o Pomelli para gerar os assets de marketing do lançamento

O Stitch domina a fase 0-a-1 (ideação). O Figma domina a fase 1-a-100 (refinamento production-ready com design systems). Ferramentas como Lovable e Bolt transformam designs polidos em aplicações full-stack.

O DESIGN.md do Stitch é um ponto de integração que merece atenção. Ele funciona como um contrato de design legível por humanos e por agentes de IA. Na prática, isso diminui aquela divergência clássica entre o que o designer criou e o que o dev implementou.

O que muda para quem desenvolve

A mudança mais concreta é na velocidade de prototipagem. Validar uma ideia visual antes de escrever código deixou de exigir dias de trabalho no Figma. Qualquer dev com acesso a essas ferramentas consegue gerar um protótipo navegável em minutos.

Mas existe uma tensão real aqui. Se qualquer pessoa gera interfaces "bonitas" com um prompt, o que diferencia um produto bem projetado de um que apenas parece bem projetado? A resposta não mudou: hierarquia de informação, acessibilidade, consistência entre plataformas e atenção ao contexto do usuário. Nenhuma dessas ferramentas resolve esses problemas por você. Elas aceleram a execução, não substituem o pensamento.

Outro ponto que merece atenção é a contra-tendência. Enquanto 2025 foi sobre incorporar IA generativa em tudo, 2026 trouxe o que alguns chamam de "rebelião tátil", com designers e empresas optando por um visual mais bruto, human-centered, que valoriza imperfeições. Como se o excesso de polimento gerado por IA estivesse criando uma reação em direção ao artesanal.

Para desenvolvedores que trabalham em equipes com designers dedicados, o MCP server é provavelmente a feature mais relevante. Ele transforma o design em contexto acessível ao assistente de código. O resultado é menos vai-e-vem de specs e screenshots no Slack.

Conclusão

Vibe design não é uma ferramenta específica. É uma mudança de paradigma sobre como interfaces são criadas. O Google Stitch popularizou o conceito com voice canvas e integrações de código. O Pencil.dev trouxe o design para dentro do IDE. O Figma Make preservou o ecossistema que designers já conhecem. O Paper aposta em agentes como cidadãos de primeira classe do canvas. E o Pomelli estende a lógica para marketing visual.

O denominador comum é o MCP (Model Context Protocol), que conecta essas ferramentas de design aos assistentes de código. É essa ponte que transforma vibe design de novidade em algo que encurta o caminho entre ideia e código em produção.

A recomendação prática: experimente o Stitch (gratuito, 350 gerações/mês) para ter uma noção do que vibe design significa na prática. Se já usa Claude Code ou Cursor, instale o Pencil.dev e veja como design dentro do IDE muda seu fluxo. Se trabalha com marketing, o Pomelli vale os cinco minutos de setup.

Referências pesquisadas nesta publicação