Um canvas visual, editor de código, agente de IA, integrações CLI, recursos de design e ferramentas de deploy.
editor de canvas
Selecione elementos em um canvas espacial, arraste para reorganizar layouts e edite propriedades visualmente. Cada alteração é escrita de volta nos seus arquivos reais — HTML, CSS, React, Tailwind.
com IA
O agente de IA lê seu projeto, busca arquivos, executa edições delimitadas e tira screenshots para verificar seu trabalho. Ele opera como um desenvolvedor, não como um preditor de texto.
Verificação visual
Tira screenshots em qualquer viewport para verificar o resultado visual.
Modos Edit + Generate
Modifique arquivos existentes ou gere projetos multi-arquivo do zero.
Extração de design system
Extrai automaticamente cores, tipografia e espaçamento em um design system reutilizável.
Sistema de anotações
Fixe notas em elementos e a IA as resolve em sequência.
Proteções de segurança
Proteção contra path traversal, bloqueio de SSRF, limites de taxa e detecção de loops.
integração CLI
Execute Claude Code, Codex, Gemini CLI ou OpenCode diretamente do painel de chat do Backdraft. Streaming em tempo real, sincronização de arquivos ao vivo, uma interface unificada.
importar e exportar
Assistente em múltiplas etapas com preservação de layout. Cole uma URL do Figma e veja os designs em camadas se transformarem em HTML e CSS semânticos.
Rastreamento completo do site, download de assets e reescrita de URLs. Traga qualquer projeto Webflow para o Backdraft com um clique.
Clone, push, pull, branch e mensagens de commit geradas por IA. Integração completa com Git sem sair do editor.
Deploy em dois cliques com configuração de build e variáveis de ambiente. Publique direto do seu editor.
responsivo
Veja todo o seu projeto renderizado simultaneamente em viewports de desktop, tablet e mobile. Quando o agente de IA edita um arquivo, cada painel é reconstruído em tempo real — para que você detecte problemas de layout antes de publicar.
recursos de design
Snippets curados de GSAP, Animate.css, AOS e CSS puro. Agrupados por categoria, copie com tags CDN.
Pacotes de ilustrações SVG e templates de componentes UI. Solte mockups diretamente no canvas.
Busque no Unsplash direto do editor. Arraste e solte imagens em alta resolução no seu projeto.
Catálogo completo do Google Fonts com pré-visualização ao vivo, filtros por categoria, injeção CSS com um clique.
Transforme qualquer imagem em arte Unicode autêntica com 12 presets de caracteres distintos.
Extraia automaticamente cores, tipografia e tokens de espaçamento a partir de código ou imagens de mockup.
ferramentas de desenvolvimento
Até 40 versões por arquivo. Navegue, compare e restaure qualquer estado anterior com um único clique.
Salve até 80 snapshots completos do projeto. Volte todo o seu workspace para qualquer ponto no tempo.
500 níveis de desfazer baseados em diffs byte-level no CST. Nunca perca uma alteração, mesmo ao trocar de arquivo.
Visualização completa da árvore DOM com busca, badges de posição e rolagem automática até a seleção. Arraste para reordenar.
Alterne a pré-visualização do modo escuro para projetos Tailwind v4. Defina class="dark" no elemento raiz.
Conjunto completo de atalhos para usuários avançados. Frame (R), Texto (P), Imagem (J), Anotação (N) e mais.