sobre o /draft
O Backdraft transforma a energia rápida e criativa do vibe coding em resultados tangíveis e controláveis — padrões de design que você pode ver, refinar e reutilizar em ambientes de produção.
a tese
A fronteira entre "criar design" e "escrever código" é um acidente histórico das ferramentas, não uma lei fundamental. Em algum momento, dividimos o ofício ao meio — mockups de um lado, código-fonte do outro — e passamos décadas construindo pontes entre eles.
O Backdraft elimina a ponte. Seu código é o arquivo de design. Seu canvas é o codebase. Cada edição visual escreve diretamente no código-fonte. Cada linha de código renderiza ao vivo no canvas.
Para designers migrando para código
Você já pensa visualmente. O Backdraft permite que você continue visual enquanto escreve código-fonte real — sem exportar specs para alguém reconstruir.
Para devs migrando para design
Você já conhece a linguagem. O Backdraft oferece um canvas espacial para ver o que seu código realmente produz — e refiná-lo visualmente sem trocar de contexto.
Para equipes que entregam rápido
Importe mockups, extraia design systems e mantenha consistência a partir do código-fonte — não de um documento de handoff desconectado que já está desatualizado.
consistência de design
Alimente o Backdraft com um mockup — um screenshot, um frame do Figma, um save do Dribbble — e ele extrai cores, tipografia, espaçamento e padrões em um design system reutilizável. Não um PDF. Não um style guide que ninguém lê. Um conjunto de tokens vivos incorporado no seu CSS real.
Extraia de qualquer coisa
Screenshots, imagens de mockup, exports do Figma, URLs ao vivo. A IA lê o visual e produz tokens estruturados.
Variáveis CSS, não docs
Cores, famílias de fontes, escalas de espaçamento viram --primary, --heading-font — tokens que o agente e você usam.
Consistência por padrão
Quando o agente de IA cria novas páginas, ele lê o design system primeiro. Mesmas fontes, mesma paleta, mesmo espaçamento — automaticamente.
história de origem
O Backdraft não começou como uma única ideia. Começou como uma dúzia.
Extrator de design system
Uma ferramenta independente que podia analisar um screenshot ou mockup e extrair tokens de design estruturados — cores, tipografia, escalas de espaçamento. Agora é um recurso central do agente de IA do Backdraft.
Sincronização bidirecional de código
Um projeto de pesquisa em parsing com preservação de CST — editando propriedades visuais enquanto mantém cada linha de lógica, cada comentário, cada import intocado. O problema mais difícil que resolvemos, e a base de tudo.
Agente de verificação visual
Uma arquitetura de agente de IA que não apenas gera código — renderiza o resultado, tira um screenshot, compara com o mockup e itera. Nasceu da frustração com geração de código às cegas.
Conversores Figma & Webflow
Utilitários separados para rastrear sites Webflow e parsear layouts do Figma em código limpo e editável. Agora integrados como fluxos de importação com um clique dentro do Backdraft.
Anos construindo com IA
Centenas de projetos construídos com programação assistida por IA — aprendendo o que funciona, o que quebra e o que falta. A lacuna era sempre a mesma: você consegue gerar código rápido, mas não consegue controlá-lo visualmente. O Backdraft fecha essa lacuna.
Local-first
Seus arquivos ficam na sua máquina. Sem dependência de nuvem. Sem atrasos de sincronização. O código está ali mesmo.
Honestidade bidirecional
O que você vê no canvas é o que está no arquivo. Sem camadas ocultas. Sem abstrações geradas. Verdade nas duas direções.
IA centrada no humano
A IA é uma mesa de rascunho, não um substituto. Ela propõe, você decide. Ela verifica visualmente, você publica quando estiver pronto.
Sem lock-in de fornecedor
Traga seu próprio LLM. Exporte seu código a qualquer momento. Seu projeto é uma pasta no disco, não um formato proprietário.
Pare de gerar código descartável. Comece a construir design systems que duram.