tecnologias e integraciones compatibles
React
Tailwind CSS
TypeScript
Figma
Webflow
GitHub
Netlify
Claude Code
Codex
Gemini CLI
Importa tu codigo. Editalo visualmente en un lienzo espacial. Cada cambio se escribe de vuelta en tu codigo fuente real. Publica desde la misma herramienta.
HTML/CSS · React/Tailwind · Importar Figma · Importar Webflow · Sin dependencia
tecnologias e integraciones compatibles
React
Tailwind CSS
TypeScript
Figma
Webflow
GitHub
Netlify
Claude Code
Codex
Gemini CLI
por que backdraft
La mayoria de herramientas te obligan a elegir: edicion visual o codigo real. Backdraft trabaja directamente con tus archivos fuente — sin capa de traduccion, sin formato propietario, sin dependencia.
Cada cambio visual se escribe de vuelta en tu codigo real de HTML, CSS, React y Tailwind.
Tu proyecto sigue siendo una carpeta normal de archivos. Abrelo en VS Code, haz commit con Git, despliega donde quieras.
Edita en el lienzo o en el editor de codigo — los cambios fluyen en ambas direcciones al instante.
Deja de usar Backdraft y tu codigo esta exactamente donde lo dejaste. Nada que exportar ni migrar.
como funciona
Abre cualquier proyecto HTML/CSS o React/Tailwind. O importa directamente desde Figma y Webflow. Backdraft analiza tu codigo en un lienzo en vivo sin cambiar una sola linea.
Arrastra, redimensiona, cambia estilos en el lienzo — o cambia al editor de codigo integrado. Los cambios se sincronizan en ambas direcciones, al instante. Pide al agente de IA que cree paginas, cambie fuentes o redisene secciones.
Haz commit en GitHub con mensajes generados por IA. Despliega en Netlify en dos clics. Lanza tu servidor de desarrollo. Todo sin salir de Backdraft.
experiencia principal
Esto no es generacion de codigo unidireccional. Backdraft mantiene un enlace bidireccional en vivo entre tus archivos fuente y el lienzo visual. Tu enrutamiento, estado, llamadas a API y logica de negocio nunca se tocan.
ai-powered
El agente de Backdraft no solo genera codigo — lee tus archivos, hace ediciones en multiples archivos, busca recursos en la web y luego renderiza una captura de pantalla para verificar que el resultado se ve bien.
Verificacion visual
Capturas de pantalla en breakpoints xs–2xl, comparadas con tu mockup de referencia.
13+ herramientas
Lectura de archivos, edicion de codigo, busqueda web, busqueda de imagenes, descubrimiento de fuentes, kits de animacion.
Tus modelos
Usa Ollama, LM Studio u OpenRouter. Tampoco hay dependencia de proveedor en la IA.
integracion CLI
El primer editor visual con integracion nativa de Claude Code, Codex, Gemini CLI y OpenCode. Ejecuta cualquier agente desde el panel de chat de Backdraft — ve los resultados en el lienzo en tiempo real.
Claude Code
Anthropic
Codex
OpenAI
Gemini CLI
OpenCode
OpenRouter
anotaciones
Presiona N, haz clic en elementos, escribe instrucciones, etiqueta con categorias. Acumula tantas anotaciones como quieras y envialas todas al agente en un solo lote.
Ajusta colores, gradientes, sombras y espaciado. Fija ajustes visuales directamente en elementos y deja que el agente los aplique en todos los breakpoints.
Reescribe titulares, refina textos, traduce contenido. Etiqueta cualquier elemento con notas editoriales y la IA reescribe el contenido en su lugar, preservando la estructura.
Reestructura grids, reordena secciones, cambia el comportamiento responsive. Describe el diseno que quieres y el agente reescribe el codigo subyacente de flexbox y grid.
Agrega animaciones de scroll, efectos hover, manejadores de clic y transiciones. Anota requisitos interactivos y el agente conecta el JavaScript y CSS.
overwatch
Ve todo tu proyecto renderizado simultaneamente en viewports de escritorio, tablet y movil. Cuando el agente de IA edita un archivo, el tile correspondiente se reconstruye en tiempo real.
herramientas de diseno
Layout, tipografia, colores, bordes, sombras, filtros, flex, grid, transformaciones. Todo visual, todo escribiendo en el codigo fuente.
Catalogo completo de Google Fonts. Vista previa en vivo, filtros por categoria, inyeccion CSS con un clic.
GSAP, Animate.css, AOS y CSS puro. Navega por categoria, copia codigo y tags CDN.
Unsplash integrado. Generacion de imagenes con IA: texto a imagen e imagen a imagen.
Explora componentes React resueltos. Ve props, vista previa del codigo. Arrastra para instanciar.
Extrae automaticamente colores, tipografia y tokens de espaciado del codigo o imagenes de mockup.
flujo de trabajo
Trae tu codigo existente o empieza de cero. Haz cambios visuales en el lienzo. Despliega directo a produccion sin cambiar de herramienta.
importa lo que sea
Abre cualquier proyecto HTML/CSS o React/Tailwind. O importa directamente desde Figma y Webflow — sin dependencia.
Figma
Webflow
publicar y desplegar
Haz commit en GitHub con mensajes generados por IA. Despliega en Netlify en dos clics. Lanza tu servidor de desarrollo.
GitHub
Netlify
Dev Server
precios
Todos los planes incluyen una prueba gratuita de 7 dias. Cancela cuando quieras.
Basic
facturado anualmente a $84/ano
Pro
Popularfacturado anualmente a $180/ano
Comparar planes en detalle · Opcion de licencia anual a $135
Importa un proyecto existente o empieza de cero. Backdraft trabaja con el codigo que ya tienes.
App de escritorio macOS + modo web. Windows y Linux proximamente.