Backdraft について
Backdraft はバイブコーディングの素早いクリエイティブなエネルギーを、手触りのある制御可能なアウトプットに変換します。見て、磨いて、本番環境で再利用できるデザインパターンです。
テーゼ
「デザイン」と「コーディング」の境界は、根本法則ではなくツールの歴史的偶然です。いつの間にかクラフトは二分されました。一方にモックアップ、他方にソースコード。そして数十年にわたってその橋渡しを構築してきました。
Backdraft はその橋を不要にします。コードこそがデザインファイル。キャンバスこそがコードベース。すべてのビジュアル編集はソースに直接書き込まれ、すべてのコードはキャンバス上にライブレンダリングされます。
コードに転向するデザイナーへ
ビジュアルで考えることは得意なはず。Backdraft なら、ビジュアルのまま実際のソースコードを書けます。誰かに再構築してもらうための仕様書をエクスポートする必要はありません。
デザインに転向するコーダーへ
言語はすでに知っているはず。Backdraft はコードが実際に何を生み出すかを見るための空間キャンバスを提供し、コンテキストスイッチなしでビジュアルに磨き上げられます。
素早くリリースするチームへ
モックアップをインポートし、デザインシステムを抽出し、ソースから一貫性を維持。すでに古くなった分離されたハンドオフドキュメントからではなく。
デザインの一貫性
Backdraft にモックアップを読み込ませましょう。スクリーンショット、Figma フレーム、Dribbble のブックマーク。カラー、タイポグラフィ、スペーシング、パターンを再利用可能なデザインシステムとして抽出します。PDF ではなく、誰も読まないスタイルガイドでもなく、実際の CSS に埋め込まれたライブなトークンセットです。
あらゆるものから抽出
スクリーンショット、モックアップ画像、Figma エクスポート、ライブ URL。AI がビジュアルを読み取り、構造化されたトークンを生成します。
ドキュメントではなく CSS 変数
カラー、フォントスタック、スペーシングスケールが --primary、--heading-font に。エージェントもあなたも使うトークンです。
デフォルトで一貫性
AI エージェントが新しいページを構築する際、まずデザインシステムを読み取ります。同じフォント、同じパレット、同じスペーシングが自動的に適用されます。
誕生の経緯
Backdraft はひとつのアイデアから始まったのではありません。十数個のアイデアから始まりました。
デザインシステム抽出ツール
スクリーンショットやモックアップを分析し、構造化されたデザイントークン（カラー、タイポグラフィ、スペーシングスケール）を抽出するスタンドアロンツール。現在は Backdraft の AI エージェントのコア機能です。
双方向コード同期
CST 保持パーシングの研究プロジェクト。すべてのロジック、コメント、インポートを手つかずのまま、ビジュアルプロパティを編集。私たちが解決した最も難しい問題であり、すべての基盤です。
ビジュアル検証エージェント
コードを生成するだけでなく、結果をレンダリングし、スクリーンショットを撮り、モックアップと比較して反復する AI エージェントアーキテクチャ。ブラインドなコード生成への不満から生まれました。
Figma & Webflow コンバーター
Webflow サイトのクロールと Figma レイアウトのクリーンで編集可能なコードへの変換を行う個別ユーティリティ。現在は Backdraft 内のワンクリックインポートフローとして統合されています。
AI との長年の構築経験
AI 支援コーディングで構築した何百ものプロジェクト。何が機能し、何が壊れ、何が不足しているかを学びました。ギャップは常に同じでした：コードは素早く生成できても、ビジュアルにコントロールできない。Backdraft はそのギャップを埋めます。
ローカルファースト
ファイルはお客様のマシン上に保持。クラウド依存なし。同期遅延なし。コードはすぐそこに。
双方向の誠実さ
キャンバスに見えるものがファイルの中身そのもの。隠れたレイヤーなし。生成された抽象化なし。双方向の真実。
人間中心の AI
AI は製図台であり、代替品ではありません。AI が提案し、あなたが決定。AI がビジュアルに検証し、あなたが準備できたらリリース。
ベンダーロックインなし
お好みの LLM を使用。コードはいつでもエクスポート可能。プロジェクトはディスク上のフォルダであり、独自フォーマットではありません。