O que é Paper.design
Paper é construído sobre uma ideia simples: o que você projeta visualmente é código real. Em vez de um formato proprietário (como o que o Figma tem), o Paper usa HTML e CSS reais como sua base.
A ferramenta está em alpha aberto e recentemente lançou adições legais como um aplicativo de desktop e um poderoso servidor MCP. Isso transforma o Paper de uma ferramenta de design simples em uma tela totalmente conectada que qualquer agente de IA pode ler e escrever, e que pode ser usada para geração de UI por IA.
Recursos do Paper.design
Canvas HTML/CSS
Recurso principal com o qual o Paper foi lançado. Você tem um canvas de formato livre semelhante ao Figma onde pode usar elementos reais da web. Cada elemento que você cria é renderizado como HTML e CSS, o que significa que o design é exportado como código sem nenhuma etapa de conversão.
Você obtém layouts reais de flexbox, propriedades reais de CSS e renderização de fontes reais.
Servidor MCP do Paper
Você pode conectar o design do Paper a qualquer agente de codificação de IA e usá-lo como um local para ver visualmente o front-end que eles geram.
Existem várias ferramentas MCP que permitem que agentes interajam com seus arquivos de design em um nível granular. Os agentes podem criar quadros, atualizar estilos, definir conteúdo de texto, obter capturas de tela e até mesmo recuperar a saída JSX ou Tailwind de qualquer nó.
Ele suporta tanto leitura quanto escrita, o que significa que pode ser usado para extrair contexto de outras fontes para seu design. Os documentos têm exemplos com guias para sincronizar tokens do Figma e até mesmo puxar conteúdo do Notion!
Shaders do Paper
Um dos recursos mais distintivos do Paper é sua biblioteca de shaders. Esses são efeitos visuais animados e acelerados por GPU. Gradientes em malha, metal líquido, padrões de meio-tom, vidro canelado, texturas de grão e muito mais. Você pode aplicá-los diretamente aos elementos no canvas.
Geração de Imagens
O Paper possui geração de imagens por IA integrada, impulsionada por diferentes provedores de modelos. Você pode usar o Flux 2 com suporte multi-referência e fotorealismo, Nano Banana Pro (impulsionado pelo Gemini), OpenAI Image Edit 1.5 e Seedream 4.5. Você pode gerar imagens, editá-las em contexto e colocá-las diretamente no canvas.
Preços do Paper.design
O Paper.design oferece uma assinatura Pro fixa, além de um nível gratuito e um plano personalizado para equipes. Custa US$ 16/mês ou US$ 144/ano e inclui:
1M de chamadas de ferramentas MCP/semana
100x mais gerações de imagens/dia
Exportação de vídeo, armazenamento ilimitado e feedback prioritário
O nível gratuito é generoso o suficiente para explorar a ferramenta seriamente. O plano Pro tem um preço competitivo pelo que oferece, especialmente dado o limite de chamadas de ferramentas MCP.
Alternativas ao Paper.design
Banani
O Banani permite que você gere designs de UI a partir de prompts de texto e os organize em um canvas, com exportação Figma de um clique super simples. É uma boa opção para exploração de design, pois oferece mais ferramentas de IA integradas, como Variantes, geração de fluxo de usuário completo e mais.
Semelhante ao Paper, ele é projetado diretamente usando HTML e CSS, e também lançou MCP recentemente, para que você possa conectar seus agentes de codificação para ler e implementar seus designs.
Ao contrário de outras alternativas nesta lista, você não precisa de uma assinatura separada para o Claude ou de um agente de IA separado para usar os recursos generativos. Eles são integrados e uma parte central do produto, sem necessidade de configuração.
Pencil.dev
O Pencil é uma ferramenta de geração de UI baseada em canvas que integra o Claude Code. Como o Paper, ele oferece uma interface semelhante ao Figma para trabalhar com agentes de IA. A principal diferença é que o Pencil é uma camada sobre o Claude e não pode ser usado com outros agentes no momento em que escrevi este artigo.
Subframe
Outra ferramenta de design de código em canvas que gera código React pronto para produção. Você projeta visualmente com componentes reais, e os engenheiros puxam o código diretamente para seu repositório de código com uma sincronização CLI. Também possui um servidor MCP, para que você possa conectá-lo ao Cursor ou Claude Code e solicitar novos designs do seu IDE com contexto completo do repositório.
Variant.ai
O Variant é focado em gerar um feed de variações de design a partir de um único prompt. Um caso de uso muito diferente do Paper. Se o seu objetivo é a exploração visual rápida, o Variant é atraente. Se seu objetivo é projetar algo que realmente será lançado, a abordagem nativa de código do Paper é mais apropriada.
Figma Make
A comparação óbvia. O Figma é mais maduro, tem um ecossistema maior e é a escolha padrão para a maioria das equipes de design. Mas o canvas do Figma é proprietário, e seus recursos de IA ainda estão se atualizando. A aposta do Paper é que um canvas nativo de código terá mais importância à medida que os agentes de IA se tornem uma parte maior do fluxo de trabalho.
Casos de Uso do Paper.design
Designers que estão cansados do Figma
Designers explorando agentes de codificação por IA que querem uma camada visual
Desenvolvedores que querem prototipar UI
Designers que querem brincar com efeitos visuais e shaders
Designers + desenvolvedores que querem uma única fonte de verdade entre design e código
Deveria tentar o Paper
Se você já sentiu a frustração de desenhar algo no Figma, entregá-lo a um desenvolvedor e ver ele se afastar lentamente da visão original, o Paper.design é uma solução incrível para esse problema.
Seu canvas HTML/CSS é uma abordagem realmente diferente, e o novo servidor MCP o torna uma das ferramentas de design mais prontas para agências disponíveis atualmente.
