CLI 集成
你常用的 CLI 智能体，就在可视化编辑器里。
直接在 Backdraft 的聊天面板中运行 Claude Code、Codex、Gemini CLI 或 OpenCode。实时流式输出、实时文件同步、统一界面。
实时流式输出
实时文件同步
统一界面
画布编辑器
在空间画布上选择元素、拖拽调整布局、可视化编辑属性。每次修改都会写入你的实际源文件——HTML、CSS、React、Tailwind。
ai-powered
AI 智能体读取你的项目、搜索文件、执行精确编辑，并截图验证结果。它以开发者的方式工作，而非简单的文本预测。
视觉验证
在任意视口截图以验证视觉输出。
编辑 + 生成模式
修改现有文件或从零生成多文件项目。
设计系统提取
自动提取颜色、排版和间距到可复用的设计系统中。
标注系统
将备注固定到元素上，AI 按顺序逐一处理。
安全防护
路径穿越防护、SSRF 拦截、速率限制和循环检测。
CLI 集成
直接在 Backdraft 的聊天面板中运行 Claude Code、Codex、Gemini CLI 或 OpenCode。实时流式输出、实时文件同步、统一界面。
导入与导出
多步骤向导，保留布局。粘贴 Figma URL，看分层设计转换为语义化的 HTML 和 CSS。
全站爬取、资源下载和 URL 重写。一键将任何 Webflow 项目导入 Backdraft。
克隆、推送、拉取、分支和 AI 生成的提交信息。无需离开编辑器的完整 Git 集成。
两次点击部署，支持构建配置和环境变量。直接从编辑器交付。
响应式
同时渲染整个项目在桌面、平板和移动端视口下的效果。当 AI 智能体编辑文件时，每个磁贴都会实时重建——在交付前就能发现布局问题。
设计资源
精选 GSAP、Animate.css、AOS 和纯 CSS 代码片段。按分类分组，一键复制含 CDN 标签。
SVG 插图包和 UI 组件模板。直接将素材拖放到画布上。
在编辑器中直接搜索 Unsplash。拖放高清图片到你的项目中。
完整的 Google Fonts 目录，实时预览、分类筛选、一键注入 CSS。
将任何图片转换为真实的 Unicode 艺术，提供 12 种不同的字符预设。
从代码或设计稿图片中自动提取颜色、排版和间距令牌。
开发者工具
每个文件最多 40 个版本。一键浏览、对比和恢复任意历史状态。
保存最多 80 个全项目快照。将整个工作区回滚到任意时间点。
500 级撤销，基于字节级 CST 差异。即使切换文件也不会丢失任何更改。
完整的 DOM 树视图，支持搜索、位置标记和自动滚动到选中元素。拖拽重新排序。
为 Tailwind v4 项目切换深色模式预览。在根元素上设置 class="dark"。
完整的快捷键集，适合高效用户。Frame (R)、Text (P)、Image (J)、标注 (N) 等。