Un lienzo visual, editor de codigo, agente IA, integraciones CLI, recursos de diseno y herramientas de despliegue.
editor de lienzo
Selecciona elementos en un lienzo espacial, arrastra para reorganizar layouts y edita propiedades visualmente. Cada cambio se escribe de vuelta en tus archivos fuente reales — HTML, CSS, React, Tailwind.
impulsado por IA
El agente de IA lee tu proyecto, busca archivos, ejecuta ediciones acotadas y toma capturas de pantalla para verificar su trabajo. Opera como un desarrollador, no como un predictor de texto.
Verificacion visual
Toma capturas de pantalla en cualquier viewport para verificar su resultado visual.
Modos Editar + Generar
Modifica archivos existentes o genera proyectos multi-archivo desde cero.
Extraccion de sistema de diseno
Extrae automaticamente colores, tipografia y espaciado en un sistema de diseno reutilizable.
Sistema de anotaciones
Fija notas en elementos y la IA las aborda en secuencia.
Protecciones de seguridad
Proteccion contra path traversal, bloqueo SSRF, limites de tasa y deteccion de bucles.
integracion CLI
Ejecuta Claude Code, Codex, Gemini CLI u OpenCode directamente desde el panel de chat de Backdraft. Streaming en tiempo real, sincronizacion de archivos en vivo, una interfaz unificada.
importar y exportar
Asistente paso a paso con preservacion de layout. Pega una URL de Figma y observa como los disenos en capas se convierten en HTML y CSS semantico.
Rastreo completo del sitio, descarga de recursos y reescritura de URLs. Trae cualquier proyecto Webflow a Backdraft con un clic.
Clone, push, pull, branch y mensajes de commit generados por IA. Integracion Git completa sin salir del editor.
Despliegue en dos clics con configuracion de build y variables de entorno. Publica directamente desde tu editor.
responsive
Ve todo tu proyecto renderizado simultaneamente en viewports de escritorio, tablet y movil. Cuando el agente de IA edita un archivo, cada tile se reconstruye en tiempo real — para que detectes errores de layout antes de publicar.
recursos de diseno
Snippets curados para GSAP, Animate.css, AOS y CSS puro. Agrupados por categoria, copia con tags CDN.
Paquetes de ilustraciones SVG y plantillas de componentes UI. Arrastra mockups directamente al lienzo.
Busca en Unsplash directamente desde el editor. Arrastra y suelta imagenes de alta resolucion en tu proyecto.
Catalogo completo de Google Fonts con vista previa en vivo, filtros por categoria, inyeccion CSS con un clic.
Convierte cualquier imagen en arte Unicode autentico con 12 presets de caracteres distintos.
Extrae automaticamente colores, tipografia y tokens de espaciado del codigo o imagenes de mockup.
herramientas de desarrollo
Hasta 40 versiones por archivo. Navega, compara y restaura cualquier estado anterior con un solo clic.
Guarda hasta 80 snapshots de proyecto completo. Retrocede todo tu espacio de trabajo a cualquier punto en el tiempo.
500 niveles de deshacer impulsados por diffs CST a nivel de bytes. Nunca pierdas un cambio, ni siquiera al cambiar de archivo.
Vista completa del arbol DOM con busqueda, indicadores de posicion y auto-scroll a la seleccion. Arrastra para reordenar.
Alterna la vista previa del modo oscuro para proyectos Tailwind v4. Establece class="dark" en el elemento raiz.
Conjunto completo de atajos para usuarios avanzados. Frame (R), Text (P), Image (J), Annotation (N) y mas.