Esse é o meu workflow de design em 2026. Sem Figma.

Projeto software desde 2016. Sketch primeiro. Depois veio a onda das ferramentas web com multiplayer: Figma, InVision. Prototipagem com Origami e Framer. Colaboração com Pixelcloud, Wake, Abstract. Handoff com Zeplin. Uma lista interminável de plugins customizados.

Desde 2024 venho experimentando novas maneiras de criar produtos com IA. Em 2026 experimentei um jeito fundamentalmente diferente de projetar e construir, e que de fato funciona.

Agentes de IA gerando HTML e CSS diretamente no canvas via MCP. O output são frames editáveis que você ajusta e modifica no canvas. E quando termina, você empurra os designs de volta pro agente, que escreve o código e manda pra produção.

Minha previsão: designers vão trabalhar mais com agentes do que com outros humanos em breve. Isso é mais um colateral da retração do mercado, menos pessoas e mais robôs. Paper e Pencil são os canvases padrão dessa nova era, e vão surgir outros.

O Figma segue um caminho distante do que os builders estão construindo. Estratégia ou confusão, não importa. O mercado já escolheu outro caminho.

Nesse artigo compartilho como eu uso os dois pra projetar e construir.

Configurando Claude Code + Paper

Uso principalmente o Claude Code com Opus para design no Paper e implementação de UI. Opus é o mais confiável pra tarefas de UI que já testei.

Assumindo que você tem o Claude Code instalado, baixa o app de desktop do Paper. Abre o terminal e roda:

claude mcp add paper --transport http http://127.0.0.1:29979/mcp --scope user

Reinicia o Claude Code, digita /mcp dentro do Claude pra ver os servidores conectados. Pronto.

Configurando Claude Code + Pencil

O Pencil tem uma lógica diferente: o canvas de design vive dentro do seu IDE. Os arquivos ficam no seu repositório Git, em formato aberto .pen. Versionável como qualquer outro arquivo de código.

Baixa o app em pencil.dev. O Pencil detecta automaticamente o Claude Code instalado e configura a conexão via MCP sem precisar de comando manual. Abre o app, vai em Agents & MCP e confirma que o Claude Code está habilitado.

Projetando com agentes

Começando do zero

Se você está num projeto novo, Claude + Paper é ótimo pra exploração rápida. Algumas dicas:

Seja descritivo. Prompts curtos e genéricos geram resultados curtos e genéricos. Quebre a tarefa em páginas ou componentes específicos em vez de jornadas complexas inteiras. Dê contexto adicional: spec de produto, screenshots de referência.

Meu hack favorito pra começar do zero é o Paper Snapshot, plugin pra Chrome que permite copiar e colar sites direto no Paper como layers editáveis. Sem precisar de screenshot.

Meu workflow virou:

1. 1.Paper Snapshot pra dropar padrões de UI de referência
2. 2.Claude remixando as referências com a spec do produto

Economizou muitas horas de setup de componentes básicos.

Trabalhando com designs existentes

Claude + Paper também funciona bem pra explorar com designs que já existem. Gosto de criar uma nova página no arquivo pra ter sessões focadas com agentes. Algumas dicas:

Use o Paper Snapshot na branch de QA ou deploy pra trazer o app real pro canvas. O Claude sabe qual frame você selecionou, então você pode digitar: “olha o frame que selecionei no Paper e faz...” Seja específico nas explorações: “olha as referências na página X e constrói um fluxo de onboarding que segue os requisitos da spec abaixo.”

Se você está apresentando mocks e quer algo mais realista, pode pedir pro Claude preencher o frame selecionado com informações de persona X ou indústria Y. Incrível pra previews rápidas.

O mesmo vale pro Pencil

O diferencial do Pencil aqui é o modo de agentes paralelos. Você pode rodar até seis agentes simultaneamente no mesmo canvas, cada um gerando uma direção diferente a partir do mesmo briefing. Pra exploração de variantes, isso não tem paralelo.

O output também é mais estruturado: tokens de design como variáveis nativas, componentes reutilizáveis nomeados, tudo organizado. Pra quem trabalha com design systems, isso muda a equação.

Sente a diferença

Quando você vê pela primeira vez o canvas sendo construído em tempo real pelo agente, você sente. Não é demo. É o workflow real.

Lembra que é um processo iterativo de colaboração humano-agente. O agente projeta os frames iniciais, você edita estilos e layouts no canvas, pede variações, o agente explora. Quando os designs estão prontos pro código, peça por páginas e componentes específicos, nunca a página inteira de uma vez.

Quanto mais específico e modular, melhor o agente entrega.

Por que Paper e Pencil e não outra ferramenta de IA

Pergunta frequente. A resposta mais direta:

Paper é uma ferramenta de design centrada no humano, não uma ferramenta de “design por mim”. Você está no comando dos agentes. O Paper te devolve tempo das tarefas repetitivas e mecânicas.

O Paper é construído com React nativo. Os agentes escrevem HTML e CSS puro e dropam no canvas. Mais rápido, mais estável, output previsível e copiável diretamente como React.

O Pencil opera na mesma lógica de agentes mas com foco no desenvolvedor. Canvas dentro do IDE, arquivos no Git, output com tokens e componentes estruturados. Pra quem vive no terminal, é o caminho natural.

O Figma MCP ficou pra trás dos dois. Boa intenção, execução que ainda não chegou lá. Boa ferramenta não deveria exigir que você leia a documentação inteira pra descobrir o que ela faz.

Alguns pontos de atenção

Modelos ainda não são ótimos em UI. É por isso que o processo é iterativo. Alinhamento quebra em layouts complexos. Responsividade precisa de ajuste manual às vezes.

Paper ainda tem lacunas em relação ao Figma em termos de atalhos e funcionalidades. Pencil também. As equipes evoluem rápido, mas existem.

Mas o caminho é esse. Quem esperar a ferramenta ficar perfeita pra começar vai chegar atrasado.

Designer, ainda se sente para trás? Clica aqui que eu te coloco na frente de 99% do mercado. Clique no botão abaixo