acerca de /draft
Backdraft convierte la energia rapida y creativa del vibe coding en resultados tangibles y controlables — patrones de diseno que puedes ver, refinar y reutilizar en entornos de produccion.
la tesis
La frontera entre "disenar" y "programar" es un accidente historico de las herramientas, no una ley fundamental. En algun momento, dividimos el oficio en dos — mockups por un lado, codigo fuente por el otro — y pasamos decadas construyendo puentes entre ambos.
Backdraft elimina el puente. Tu codigo es el archivo de diseno. Tu lienzo es el codigo base. Cada edicion visual se escribe directamente en el codigo fuente. Cada linea de codigo se renderiza en vivo en el lienzo.
Para disenadores que pasan al codigo
Ya piensas visualmente. Backdraft te permite seguir siendo visual mientras escribes codigo fuente real — sin exportar specs para que otro reconstruya.
Para programadores que pasan al diseno
Ya conoces el lenguaje. Backdraft te da un lienzo espacial para ver lo que tu codigo realmente produce — y refinarlo visualmente sin cambiar de contexto.
Para equipos que publican rapido
Importa mockups, extrae sistemas de diseno y mantiene la consistencia desde el codigo fuente — no desde un documento de entrega desconectado que ya esta desactualizado.
consistencia de diseno
Dale a Backdraft un mockup — una captura de pantalla, un frame de Figma, un guardado de Dribbble — y extrae colores, tipografia, espaciado y patrones en un sistema de diseno reutilizable. No un PDF. No una guia de estilo que nadie lee. Un conjunto de tokens vivo incrustado en tu CSS real.
Extrae de cualquier cosa
Capturas de pantalla, imagenes de mockup, exportaciones de Figma, URLs en vivo. La IA lee lo visual y produce tokens estructurados.
Variables CSS, no documentos
Colores, pilas de fuentes, escalas de espaciado se convierten en --primary, --heading-font — tokens que el agente y tu usan.
Consistencia por defecto
Cuando el agente de IA construye nuevas paginas, lee el sistema de diseno primero. Mismas fuentes, misma paleta, mismo espaciado — automaticamente.
historia de origen
Backdraft no empezo como una sola idea. Empezo como una docena.
Extractor de sistema de diseno
Una herramienta independiente que podia analizar una captura de pantalla o mockup y extraer tokens de diseno estructurados — colores, tipografia, escalas de espaciado. Ahora es una funcion central del agente de IA de Backdraft.
Sincronizacion bidireccional de codigo
Un proyecto de investigacion en parsing con preservacion de CST — editando propiedades visuales mientras se mantiene cada linea de logica, cada comentario, cada import intacto. El problema mas dificil que resolvimos, y la base de todo.
Agente de verificacion visual
Una arquitectura de agente de IA que no solo genera codigo — renderiza el resultado, toma una captura de pantalla, la compara con el mockup e itera. Nacido de la frustracion con la generacion de codigo a ciegas.
Convertidores de Figma y Webflow
Utilidades separadas para rastrear sitios Webflow y analizar layouts de Figma en codigo limpio y editable. Ahora integradas como flujos de importacion con un clic dentro de Backdraft.
Anos construyendo con IA
Cientos de proyectos construidos con codificacion asistida por IA — aprendiendo que funciona, que se rompe y que falta. La brecha siempre era la misma: puedes generar codigo rapido, pero no puedes controlarlo visualmente. Backdraft cierra esa brecha.
Local-first
Tus archivos se quedan en tu maquina. Sin dependencia de la nube. Sin retrasos de sincronizacion. El codigo esta ahi mismo.
Honestidad bidireccional
Lo que ves en el lienzo es lo que esta en el archivo. Sin capas ocultas. Sin abstracciones generadas. Verdad en ambas direcciones.
IA centrada en el humano
La IA es una mesa de dibujo, no un reemplazo. Ella propone, tu decides. Verifica visualmente, tu publicas cuando estes listo.
Sin dependencia de proveedor
Trae tu propio LLM. Exporta tu codigo cuando quieras. Tu proyecto es una carpeta en disco, no un formato propietario.
Deja de generar codigo desechable. Empieza a construir sistemas de diseno que perduren.