ビジュアル-to-コードブリッジ

ビジュアル-to-コードブリッジはHatcherの象徴的機能です - ライブアプリケーション内の要素を直接選択し、それらを正確でコンテキスト固有のコードに変換する革命的技術です。

動作原理

1. 直接的なビジュアル選択

変更したいものを説明する代わりに、単純に選択します：

• アプリケーション内の任意の要素をクリック
• ドラッグして選択領域を作成
• Cmd/Ctrlを押しながら複数選択
• 正確な選択のためにインスペクターツールを使用

2. インテリジェントなコンテキスト捕捉

Hatcherは自動的に以下を捕捉します：

• コンポーネント構造: DOMヒエラルキーとVue/Reactコンポーネント
• 現在の状態: Props、state、データ値
• スタイルルール: 適用されたCSSとクラス
• プロジェクトコンテキスト: 既存コードベースのパターン

3. コンテキスト認識コード生成

AIは以下のようなコードを生成します：

• 既存の命名規則に従う
• 好みのライブラリとパターンを使用
• アーキテクチャとの一貫性を維持
• Playbooksのルールを尊重

主要機能

コンポーネント変更

// Before: ボタンを視覚的に選択
// After: 自動生成されたコード
<button
  className="btn btn-primary hover:bg-blue-700 transition-colors"
  onClick={handleSubmit}
  disabled={isLoading}
>
  {isLoading ? '送信中...' : '送信'}
</button>

レイアウト操作

• 端をドラッグして要素をリサイズ
• ドラッグ&ドロップで要素を再配置
• 間隔と配置を視覚的に調整
• レスポンシブブレークポイントをリアルタイムで変更

状態管理

• 要素をデータソースに接続
• イベントハンドラーを設定
• フォームバリデーションを確立
• 条件ロジックを実装

スタイル適用

• 色、フォント、間隔を変更
• アニメーションとトランジションを適用
• テーマとバリアントを実装
• デザインシステムの一貫性を維持

典型的なワークフロー

ステップ1: 環境準備

# アプリケーションが動作していることを確認
npm run dev

ステップ2: ビジュアルモードを有効化

1. Hatcherを開く
2. ローカルアプリケーションに接続
3. ビジュアル選択オーバーレイを有効化

ステップ3: 選択を行う

1. 変更したいページに移動
2. ターゲット要素をクリック
3. 捕捉されたコンテキスト情報を確認

ステップ4: 変更を説明

"このボタンを大きくして、ホバー時の色を緑に変更"

ステップ5: 生成されたコードをレビュー

<button
- className="btn btn-primary"
+ className="btn btn-primary btn-lg hover:bg-green-500"
  onClick={handleSubmit}

ステップ6: 適用または精緻化

• 適用: 変更が即座に適用される
• 精緻化: 改善のための追加フィードバックを提供
• 拒否: 破棄して別のアプローチを試す

高度なテクニック

マルチ要素選択

// 複数のボタンを選択
// AIはパターンを理解し、一貫した変更を適用
const buttons = document.querySelectorAll('.action-button')
// すべての類似要素に影響するコードを生成

コンテキストベース選択

• コンポーネント選択: Vue/Reactコンポーネント全体を選択
• 状態選択: 関連データとロジックを含む
• スタイル選択: CSSルールと変数を捕捉

ベストプラクティス

効果的な準備

1. アプリケーションを最新に保つ 開発モードで
2. コンポーネントを明確に構造化 より良い検出のため
3. 一貫した命名を使用 クラスとIDで
4. 複雑なパターンを文書化 Playbooksで

正確な選択

1. 選択で具体的になる
2. ネストした要素にはインスペクターを使用
3. 親コンポーネントのコンテキストを考慮
4. 変更前に状態を確認

---

ビジュアル-to-コードブリッジは、コードとの相互作用方法における根本的な変化を表します - ビジュアルな意図を直接正確な実装に変換し、常に開発者の完全な制御を維持します。