CLI 統合
お気に入りの CLI エージェントを、ビジュアルエディター内で。
Claude Code、Codex、Gemini CLI、OpenCode を Backdraft のチャットパネルから直接実行。リアルタイムストリーミング、ライブファイル同期、統一インターフェース。
リアルタイムストリーミング
ライブファイル同期
統一 UI
キャンバスエディター
空間キャンバス上で要素を選択し、ドラッグでレイアウトを調整し、プロパティをビジュアルに編集。すべての変更は実際のソースファイル（HTML、CSS、React、Tailwind）に書き戻されます。
ai-powered
AI エージェントはプロジェクトを読み取り、ファイルを検索し、範囲を限定した編集を実行し、スクリーンショットで作業結果を検証します。テキスト予測ではなく、開発者として動作します。
ビジュアル検証
任意のビューポートでスクリーンショットを撮影し、ビジュアル出力を検証します。
編集 + 生成モード
既存ファイルの修正やマルチファイルプロジェクトのゼロからの生成が可能。
デザインシステム抽出
カラー、タイポグラフィ、スペーシングを再利用可能なデザインシステムとして自動抽出。
アノテーションシステム
要素にメモをピン留めすると、AI が順番に対応します。
セキュリティガードレール
パストラバーサル保護、SSRF ブロック、レート制限、ループ検出。
CLI 統合
Claude Code、Codex、Gemini CLI、OpenCode を Backdraft のチャットパネルから直接実行。リアルタイムストリーミング、ライブファイル同期、統一インターフェース。
インポート & エクスポート
レイアウト保持機能付きのマルチステップウィザード。Figma URL を貼り付けるだけで、レイヤード構造のデザインがセマンティックな HTML と CSS に変換されます。
サイト全体のクロール、アセットダウンロード、URL 書き換え。あらゆる Webflow プロジェクトをワンクリックで Backdraft に取り込めます。
clone、push、pull、ブランチ操作、AI 生成コミットメッセージ。エディターを離れることなく完全な Git 統合。
ビルド設定と環境変数付きの2クリックデプロイ。エディターから直接公開。
レスポンシブ
プロジェクト全体をデスクトップ、タブレット、モバイルのビューポートで同時にレンダリング。AI エージェントがファイルを編集すると、すべてのタイルがリアルタイムに再構築されるため、レイアウトの崩れを公開前にキャッチできます。
デザインリソース
GSAP、Animate.css、AOS、純粋な CSS の厳選スニペット。カテゴリー別に整理され、CDN タグ付きでコピー可能。
SVG イラストパックと UI コンポーネントテンプレート。モックアップをキャンバスに直接ドロップ。
エディターから直接 Unsplash を検索。高解像度画像をプロジェクトにドラッグ＆ドロップ。
ライブプレビュー、カテゴリーフィルター、ワンクリック CSS 注入付きの Google Fonts 全カタログ。
12種類のキャラクタープリセットで、あらゆる画像を本格的な Unicode アートに変換。
コードやモックアップ画像からカラー、タイポグラフィ、スペーシングトークンを自動抽出。
開発者ツール
ファイルごとに最大40バージョン。閲覧、比較、ワンクリックで以前の状態に復元。
最大80のプロジェクト全体スナップショットを保存。ワークスペース全体を任意の時点にロールバック。
バイトレベルの CST 差分による500段階の元に戻す。ファイル切り替え時も変更を失いません。
検索、位置バッジ、選択時の自動スクロール付きの完全な DOM ツリービュー。ドラッグで並べ替え。
Tailwind v4 プロジェクトのダークモードプレビューを切り替え。ルート要素に class="dark" を設定。
パワーユーザー向けの完全なショートカットセット。フレーム (R)、テキスト (P)、画像 (J)、アノテーション (N) など。