支持的技术与集成
React
Tailwind CSS
TypeScript
Figma
Webflow
GitHub
Netlify
Claude Code
Codex
Gemini CLI
支持的技术与集成
React
Tailwind CSS
TypeScript
Figma
Webflow
GitHub
Netlify
Claude Code
Codex
Gemini CLI
为什么选择 Backdraft
大多数工具要求你二选一：可视化编辑或真实代码。Backdraft 直接操作你的源文件——没有中间转换层，没有专有格式，没有锁定。
每一次可视化修改都会写入你的 HTML、CSS、React 和 Tailwind 代码。
你的项目始终是普通的文件夹。可以用 VS Code 打开、用 Git 提交、部署到任何地方。
在画布上编辑或在代码编辑器中修改——改动双向即时同步。
停止使用 Backdraft，你的代码还在原处。无需导出或迁移。
工作原理
打开任何 HTML/CSS 或 React/Tailwind 项目，或直接从 Figma 和 Webflow 导入。Backdraft 将你的代码解析到实时画布上，不修改任何一行代码。
在画布上拖拽、调整大小、修改样式——或切换到内置代码编辑器。改动双向即时同步。让 AI 智能体搭建页面、更换字体或重新设计区块。
使用 AI 生成的提交信息推送到 GitHub。两次点击部署到 Netlify。启动开发服务器。全部在 Backdraft 内完成。
核心体验
这不是单向代码生成。Backdraft 在源文件和可视画布之间维持实时双向连接。你的路由、状态、API 调用和业务逻辑不会被触碰。
AI 驱动
Backdraft 的智能体不仅生成代码——它读取你的文件、执行跨文件编辑、搜索网络资源，然后截图验证结果是否正确。
视觉验证
在 xs–2xl 断点截图，与你的参考设计稿对比。
13+ 工具
文件读取、代码编辑、网页搜索、图片搜索、字体发现、动画套件。
自带模型
使用 Ollama、LM Studio 或 OpenRouter。AI 同样无厂商锁定。
CLI 集成
首个原生集成 Claude Code、Codex、Gemini CLI 和 OpenCode 的可视化编辑器。在 Backdraft 的聊天面板中运行任何智能体——在画布上实时查看结果。
Claude Code
Anthropic
Codex
OpenAI
Gemini CLI
OpenCode
OpenRouter
标注系统
按 N 键，点击元素，输入指令，标记分类。积累任意数量的标注，然后一次性全部发送给智能体。
调整颜色、渐变、阴影和间距。将视觉调整直接固定到元素上，让智能体在所有断点上应用。
改写标题、优化文案、翻译文本。为任何元素添加编辑备注，AI 会原位改写内容并保留结构。
重构网格、重新排列区块、修改响应式行为。描述你想要的布局，智能体会改写底层的 flexbox 和 grid 代码。
添加滚动动画、悬停效果、点击处理器和过渡。标注交互需求，智能体会接通 JavaScript 和 CSS。
全局预览
同时渲染整个项目在桌面、平板和移动端视口下的效果。当 AI 智能体编辑文件时，对应的页面磁贴会实时重建。
设计工具
布局、排版、颜色、边框、阴影、滤镜、flex、grid、变换。全部可视化操作，全部写入源代码。
完整的 Google Fonts 目录。实时预览、分类筛选、一键注入 CSS。
GSAP、Animate.css、AOS 和纯 CSS。按分类浏览，复制代码和 CDN 标签。
内置 Unsplash。AI 图片生成，支持文生图和图生图。
浏览已解析的 React 组件。查看 props、源码预览。拖拽即可实例化。
从代码或设计稿图片中自动提取颜色、排版和间距令牌。
工作流
导入现有代码或从零开始。在画布上进行可视化修改。直接部署到生产环境，无需切换工具。
导入一切
打开任何 HTML/CSS 或 React/Tailwind 项目，或直接从 Figma 和 Webflow 导入——无锁定。
Figma
Webflow
交付与部署
使用 AI 生成的提交信息推送到 GitHub。两次点击部署到 Netlify。启动开发服务器。
GitHub
Netlify
开发服务器
导入现有项目或从零开始。Backdraft 与你已有的代码无缝协作。
macOS 桌面应用 + 网页模式。Windows 和 Linux 即将推出。