Paper: O novo app de design com IA que está dando o que falar

O apresentador introduz o Paper como uma alternativa ao Figma focada em desenvolvedores que utilizam Claude Code ou Cursor. Ele explica que o aplicativo permite uma transição fluida entre componentes visuais e código real, sendo adotado por empresas como Vercel e Dub. O processo inicial envolve baixar o app no site oficial e configurar um servidor MCP para estabelecer a comunicação. Esta conexão é feita localmente para permitir que o assistente de IA controle a interface do desktop. A configuração é rápida e serve como base para todas as demonstrações de automação de design apresentadas no vídeo.

Nesta seção, o autor demonstra a capacidade de multitarefa utilizando o terminal Ghosty com Tmux para rodar quatro tarefas simultâneas. Ele solicita ao Claude Code a criação de um app de gastos, uma landing page, um dashboard financeiro e um design system estilo Twitter. O vídeo mostra o progresso em tempo real, onde a IA elabora briefings de design e paletas de cores antes de construir os elementos visuais. O resultado inicial é um app de despesas com design sólido e profissional gerado sem intervenção manual. Essa abordagem exemplifica como a produtividade pode ser escalada ao delegar múltiplas frentes de design para a IA de uma só vez.

O vídeo foca na flexibilidade do Paper, que mantém a familiaridade das ferramentas do Figma para edições manuais, como alterar cores ou remover seções. O apresentador demonstra como remover uma seção de upload e ver a mudança refletida enquanto outros processos continuam rodando ao fundo. O destaque é a qualidade profissional dos sistemas de design gerados, que poderiam custar caro se feitos por designers humanos. Após a criação visual, o autor mostra como transformar esses designs em páginas HTML funcionais no navegador. A integração permite que o usuário peça à IA para implementar o que acabou de ser desenhado visualmente.

O apresentador explora a funcionalidade de 'Copy as Tailwind' ou 'Copy as React', facilitando a migração do design para o ambiente de desenvolvimento. Ele testa a colagem de um componente de controle de despesas diretamente no editor Cursor, resultando em código limpo e funcional. São comparadas versões em HTML/CSS puro e React, ambas mantendo a fidelidade visual do projeto original no Paper. Embora existam limitações iniciais de responsividade, a ferramenta prova ser extremamente eficaz para prototipagem rápida. O autor ressalta que o design gerado via prompt é perfeitamente editável no código, mantendo a consistência entre a visão do designer e a implementação do desenvolvedor.

Além de interfaces, o Paper oferece ferramentas poderosas de geração de imagens integradas, utilizando modelos como o Nano Banana Pro. O autor gera anúncios para seu produto, Inbox Zero, e fica impressionado com a qualidade gráfica e a precisão do texto gerado pela IA. Ele também demonstra efeitos visuais únicos, como o 'metal líquido' e efeitos de água, que podem ser aplicados a imagens com um único comando. Um ponto técnico importante mencionado é o seletor de cores uniforme, que resolve o problema comum de discrepância de cores entre o design e o navegador. Esses recursos tornam o Paper uma ferramenta completa para marketing e criação de ativos visuais de alta fidelidade.

Na parte final, o vídeo tenta demonstrar a criação de um design system baseado em uma base de código já existente, embora atinja um limite de uso da ferramenta Pro. O autor explica o valor imenso de poder importar código para o Paper, editá-lo visualmente e exportar as mudanças de volta para o projeto. Isso é especialmente útil para criar capturas de tela editáveis para landing pages sem a necessidade de manipular imagens estáticas. O apresentador conclui reforçando que o Paper é uma ferramenta indispensável para o fluxo de trabalho moderno de desenvolvimento assistido por IA. Ele encoraja os espectadores a experimentarem a ferramenta e compartilha sua intenção de assinar a versão Pro devido ao ganho de produtividade.