Wonder

O que é Wonder?

O Wonder é uma ferramenta de design baseada em canvas que unifica design e desenvolvimento frontend em um único fluxo de trabalho. Diferente das ferramentas de design tradicionais, que exigem um handoff separado para os engenheiros, o Wonder gera designs que correspondem 1:1 a código pronto para produção (React + Tailwind). Os designers podem fazer prompts, iterar e refinar os visuais diretamente no canvas, enquanto o código por trás é atualizado em tempo real. Ele também se integra a agentes de codificação como Cursor e Claude Code via MCP server, permitindo que desenvolvedores tragam o contexto do design direto para a sua codebase, sem screenshots nem retrabalho.

Recursos Principais

• Design-to-Code em tempo real

  Cada elemento criado no canvas é sustentado por HTML/CSS de verdade. O formato do design corresponde 1:1 ao código, então não há lacuna entre o que os designers veem e o que os desenvolvedores entregam.

• Geração por IA baseada em canvas

  Descreva o que você quer e o Wonder gera layouts, componentes e variantes de estilo diretamente no canvas. Selecione qualquer elemento para refiná-lo ali mesmo.

• Integração com MCP Server

  Conecte o Wonder a agentes de codificação como Cursor ou Claude Code pelo MCP server integrado. Seu agente lê o contexto do design diretamente, eliminando a necessidade de redesenhar manualmente ou tirar screenshots.

• Geração de imagens integrada

  Gere imagens direto no canvas, sem trocar de ferramenta. Sem assets de placeholder: basta descrever o que você precisa e a imagem aparece no contexto.

• Suporte a shaders para visuais interativos

  Adicione efeitos de shader acelerados por GPU aos designs para criar visuais ricos e interativos que vão muito além de mockups estáticos.

• Preços em camadas baseados em créditos

  Quatro planos (Free, Pro, Pro+, Max) com alocações mensais de créditos que vão de 300 a 60.000, cobrindo desde a experimentação até a entrega diária em produção.

Casos de Uso

• Design de UI de produto : Designers que criam web apps ou interfaces mobile podem gerar, iterar e exportar componentes React + Tailwind prontos para produção sem sair do canvas.
• Fim do handoff entre design e desenvolvimento : Times que sofrem com perdas na tradução do design para o código podem usar o Wonder para garantir que o produto entregue corresponda exatamente ao design, sem reconstrução manual.
• Marketing e landing pages : Times de marketing e growth podem prototipar e entregar rapidamente landing pages, pitch decks e peças promocionais a partir de um único canvas.
• Desenvolvimento assistido por agentes : Desenvolvedores que usam agentes de codificação com IA (Cursor, Claude Code) podem puxar o contexto de design ao vivo via MCP para acelerar a implementação do frontend.
• Prototipagem visual com código real : Fundadores e solo builders podem transformar ideias em estágio inicial em protótipos interativos e prontos para entrega, sem precisar de um time dedicado de design ou engenharia.

Perguntas Frequentes