editor bidirecional código-design

Seu código é o
arquivo de design.

Importe seu código. Edite visualmente em um canvas espacial. Cada alteração é escrita de volta no seu código-fonte real. Publique pela mesma ferramenta.

Comece a construir visualmente Veja como funciona

HTML/CSS · React/Tailwind · Importação Figma · Importação Webflow · Sem lock-in

por que backdraft

Seu código é o arquivo de design.

A maioria das ferramentas força uma escolha: edição visual ou código real. O Backdraft trabalha diretamente com seus arquivos-fonte — sem camada de tradução, sem formato proprietário, sem lock-in.

Seus arquivos-fonte reais

Cada alteração visual é escrita de volta no seu código real HTML, CSS, React e Tailwind.

Sem formato proprietário

Seu projeto continua sendo uma pasta normal de arquivos. Abra no VS Code, faça commit com Git, publique em qualquer lugar.

Visual e código, em sincronia

Edite no canvas ou no editor de código — as alterações fluem nos dois sentidos instantaneamente.

Sem lock-in, nunca

Pare de usar o Backdraft e seu código está exatamente onde você deixou. Nada para exportar ou migrar.

como funciona

Três passos. Zero lock-in.

Importar

Abra qualquer projeto HTML/CSS ou React/Tailwind. Ou importe diretamente do Figma e Webflow. O Backdraft analisa seu código e cria um canvas ao vivo sem alterar uma única linha.

Editar

Arraste, redimensione e mude estilos no canvas — ou alterne para o editor de código integrado. As alterações sincronizam nos dois sentidos, instantaneamente. Peça ao agente de IA para montar páginas, trocar fontes ou redesenhar seções.

Publicar

Faça commit no GitHub com mensagens geradas por IA. Publique no Netlify em dois cliques. Inicie seu servidor de desenvolvimento. Tudo sem sair do Backdraft.

experiência central

Mude o código, veja no canvas.
Mude o canvas, veja no código.

Isso não é geração de código unidirecional. O Backdraft mantém um vínculo bidirecional e ao vivo entre seus arquivos-fonte e o canvas visual. Suas rotas, estado, chamadas de API e lógica de negócio nunca são tocados.

Sincronia em tempo real

Tailwind v3 & v4

Preserva toda a lógica

com IA

Um agente de IA que verifica seu próprio trabalho.

O agente do Backdraft não apenas gera código — ele lê seus arquivos, faz edições em múltiplos arquivos, busca assets na web e tira um screenshot para verificar se o resultado ficou correto.

Verificação visual

Screenshots em breakpoints de xs a 2xl, comparados com seu mockup de referência.

Mais de 13 ferramentas

Leitura de arquivos, edição de código, busca na web, busca de imagens, descoberta de fontes, kits de animação.

Seus modelos

Traga Ollama, LM Studio ou OpenRouter. Sem lock-in na IA também.

Veja o agente em ação

integração CLI

Seu agente CLI favorito,
dentro do seu editor visual.

O primeiro editor visual com integração nativa de Claude Code, Codex, Gemini CLI e OpenCode. Execute qualquer agente pelo painel de chat do Backdraft — veja os resultados no canvas em tempo real.

Claude Code

Anthropic

Codex

OpenAI

Gemini CLI

Google

OpenCode

OpenRouter

anotações

Fixe notas. Deixe a IA cuidar delas.

Pressione N, clique nos elementos, digite instruções, categorize com tags. Acumule quantas anotações quiser e envie todas ao agente de uma vez.

Estilo

Ajuste cores, gradientes, sombras e espaçamento. Fixe ajustes visuais diretamente nos elementos e deixe o agente aplicá-los em todos os breakpoints.

Conteúdo

Reescreva títulos, refine textos, traduza conteúdo. Marque qualquer elemento com notas editoriais e a IA reescreve o conteúdo no lugar, preservando a estrutura.

Layout

Reestruture grids, reordene seções, mude o comportamento responsivo. Descreva o layout desejado e o agente reescreve o código flexbox e grid subjacente.

Comportamento

Adicione animações de scroll, efeitos hover, handlers de clique e transições. Anote os requisitos interativos e o agente implementa o JavaScript e CSS.

overwatch

Cada página. Cada breakpoint.
Tudo de uma vez.

Veja todo o seu projeto renderizado simultaneamente em viewports de desktop, tablet e mobile. Quando o agente de IA edita um arquivo, o painel correspondente é reconstruído em tempo real.

ferramentas de design

Tudo o que você precisa, integrado.

Mais de 50 Propriedades CSS

Layout, tipografia, cores, bordas, sombras, filtros, flex, grid, transforms. Tudo visual, tudo escrevendo no código-fonte.

Biblioteca de Fontes

Catálogo completo do Google Fonts. Pré-visualização ao vivo, filtros por categoria, injeção CSS com um clique.

Biblioteca de Animações

GSAP, Animate.css, AOS e CSS puro. Navegue por categoria, copie código e tags CDN.

Busca e Geração de Imagens

Unsplash integrado. Geração de imagens com IA: texto para imagem e imagem para imagem.

Paleta de Componentes

Navegue por componentes React resolvidos. Veja props, pré-visualização do código. Arraste para instanciar.

Extração de Design System

Extraia automaticamente cores, tipografia e tokens de espaçamento a partir de código ou imagens de mockup.

fluxo de trabalho

Importe, edite, publique — tudo em um lugar.

Traga seu código existente ou comece do zero. Faça alterações visuais no canvas. Publique direto em produção sem trocar de ferramenta.

importe qualquer coisa

Comece a partir do que você já tem.

Abra qualquer projeto HTML/CSS ou React/Tailwind. Ou importe diretamente do Figma e Webflow — sem lock-in.

Projetos locais Figma

Figma

Webflow

publique e faça deploy

Do canvas à produção.

Faça commit no GitHub com mensagens geradas por IA. Publique no Netlify em dois cliques. Inicie seu servidor de desenvolvimento.

GitHub

Netlify Dev Server

planos

Preços simples. Sem surpresas.

Todos os planos incluem teste grátis de 7 dias. Cancele a qualquer momento.

Basic

$7 /mês

cobrado anualmente a $84/ano

Editor visual + editor de código
Agente de IA (edit + generate)
Agentes CLI
Integração com GitHub

Iniciar teste grátis

Pro

Popular

$15 /mês

cobrado anualmente a $180/ano

Tudo do Basic
Importação Figma & Webflow
Deploy no Netlify
Geração de imagens com IA