対応テクノロジー & インテグレーション
React
Tailwind CSS
TypeScript
Figma
Webflow
GitHub
Netlify
Claude Code
Codex
Gemini CLI
コードベースをインポートして、空間キャンバス上でビジュアル編集。すべての変更は実際のソースコードに書き戻されます。同じツールでデプロイまで完結。
HTML/CSS · React/Tailwind · Figma インポート · Webflow インポート · ロックインなし
対応テクノロジー & インテグレーション
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 へは2クリックでデプロイ。開発サーバーの起動も可能。すべて Backdraft から離れずに完結します。
コア体験
一方向のコード生成ではありません。Backdraft はソースファイルとビジュアルキャンバスの間にライブな双方向リンクを維持します。ルーティング、ステート、API コール、ビジネスロジックには一切手を加えません。
ai-powered
Backdraft のエージェントはコードを生成するだけではありません。ファイルを読み取り、複数ファイルを横断して編集し、Web からアセットを検索し、スクリーンショットを撮影して結果を検証します。
ビジュアル検証
xs〜2xl のブレークポイントでスクリーンショットを撮影し、リファレンスモックアップと比較します。
13以上のツール
ファイル読み取り、コード編集、Web 検索、画像検索、フォント検索、アニメーションキットなど。
お好みのモデルで
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 を組み上げます。
overwatch
プロジェクト全体をデスクトップ、タブレット、モバイルのビューポートで同時にレンダリング。AI エージェントがファイルを編集すると、対応するタイルがリアルタイムに再構築されます。
デザインツール
レイアウト、タイポグラフィ、カラー、ボーダー、シャドウ、フィルター、flex、grid、transform。すべてビジュアル操作で、すべてソースに反映。
Google Fonts の全カタログ。ライブプレビュー、カテゴリーフィルター、ワンクリック CSS 注入。
GSAP、Animate.css、AOS、純粋な CSS。カテゴリー別に閲覧し、コードと CDN タグをコピー。
Unsplash 内蔵。テキストから画像、画像から画像の AI 画像生成にも対応。
解決済みの React コンポーネントを閲覧。props とソースプレビューを確認し、ドラッグでインスタンス化。
コードやモックアップ画像からカラー、タイポグラフィ、スペーシングトークンを自動抽出。
ワークフロー
既存のコードを取り込むか、ゼロから開始。キャンバス上でビジュアル変更を加え、ツールを切り替えることなく本番環境にデプロイ。
あらゆるものをインポート
HTML/CSS や React/Tailwind プロジェクトを開くだけ。Figma や Webflow から直接インポートも可能。ロックインなし。
Figma
Webflow
デプロイ
AI 生成メッセージで GitHub にコミット。Netlify へは2クリックでデプロイ。開発サーバーの起動も可能。
GitHub
Netlify
開発サーバー
既存のプロジェクトをインポートするか、ゼロから始めましょう。Backdraft は今あるコードでそのまま動作します。
macOS デスクトップアプリ + Web モード。Windows & Linux は近日公開。