Pont Visuel-vers-Code

Le Pont Visuel-vers-Code est la fonctionnalité phare de Hatcher - la technologie révolutionnaire qui vous permet de sélectionner des éléments directement dans votre application en direct et de les transformer en code précis et contextuel.

Comment Ça Marche

1. Sélection Visuelle Directe

Au lieu de décrire ce que vous voulez changer, sélectionnez-le simplement :

• Cliquez sur n'importe quel élément de votre application
• Glissez pour créer des régions de sélection
• Sélection multiple avec Cmd/Ctrl maintenu
• Utilisez les outils d'inspection pour une sélection précise

2. Capture de Contexte Intelligente

Hatcher capture automatiquement :

• Structure du Composant : Hiérarchie DOM et composants Vue/React
• États Actuels : Props, état et valeurs de données
• Règles de Style : CSS appliqués et classes
• Contexte du Projet : Modèles de votre base de code existante

3. Génération de Code Consciente du Contexte

L'IA génère du code qui :

• Suit vos conventions de nommage existantes
• Utilise vos bibliothèques et modèles préférés
• Maintient la cohérence avec votre architecture
• Respecte les règles de vos Playbooks

Capacités Principales

Modification de Composants

// Avant : Sélectionner un bouton visuellement
// Après : Code généré automatiquement
<button
  className="btn btn-primary hover:bg-blue-700 transition-colors"
  onClick={handleSubmit}
  disabled={isLoading}
>
  {isLoading ? 'Envoi...' : 'Envoyer'}
</button>

Manipulation de Layout

• Redimensionner les éléments en tirant les bords
• Repositionner les éléments par glisser-déposer
• Ajuster l'espacement et l'alignement visuellement
• Modifier les breakpoints responsives en temps réel

Gestion d'État

• Connecter les éléments aux sources de données
• Configurer les gestionnaires d'événements
• Établir la validation de formulaires
• Implémenter la logique conditionnelle

Application de Styles

• Modifier couleurs, polices et espacement
• Appliquer animations et transitions
• Implémenter thèmes et variantes
• Maintenir la cohérence du système de design

Workflow Typique

Étape 1 : Préparer l'Environnement

# S'assurer que votre application fonctionne
npm run dev

Étape 2 : Activer le Mode Visuel

1. Ouvrir Hatcher
2. Se connecter à votre application locale
3. Activer l'overlay de sélection visuelle

Étape 3 : Faire une Sélection

1. Naviguer vers la page à modifier
2. Cliquer sur l'élément cible
3. Voir les informations de contexte capturées

Étape 4 : Décrire les Changements

"Rendez ce bouton plus grand et changez la couleur au survol en vert"

Étape 5 : Réviser le Code Généré

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

Étape 6 : Appliquer ou Affiner

• Appliquer : Le changement est appliqué immédiatement
• Affiner : Fournir des commentaires supplémentaires pour l'amélioration
• Rejeter : Abandonner et essayer une approche différente

Techniques Avancées

Sélection Multi-Éléments

// Sélectionner plusieurs boutons
// L'IA comprend les modèles et applique des changements cohérents
const buttons = document.querySelectorAll('.action-button')
// Génère du code affectant tous les éléments similaires

Sélection Basée sur le Contexte

• Sélection de Composant : Sélectionner des composants Vue/React entiers
• Sélection d'État : Inclure les données et logique associées
• Sélection de Style : Capturer les règles CSS et variables

Intégration avec Playbooks

// Les Playbooks guident la génération de code
{
  "component_patterns": {
    "button": {
      "base_classes": ["btn", "transition-colors"],
      "variants": {
        "primary": "bg-blue-500 hover:bg-blue-700",
        "secondary": "bg-gray-500 hover:bg-gray-700"
      }
    }
  }
}

Cas d'Usage Courants

Développement d'UI Rapide

• Créer de nouveaux composants en sélectionnant des éléments similaires
• Ajuster les layouts responsifs visuellement
• Implémenter des variantes de composants
• Affiner les détails d'interaction

Refactorisation Assistée

• Mettre à jour les modèles obsolètes dans toute l'application
• Migrer vers de nouveaux systèmes de design
• Consolider les composants dupliqués
• Améliorer l'accessibilité systématiquement

Prototypage et Expérimentation

• Tester rapidement les idées de design
• Implémenter instantanément les retours utilisateurs
• Explorer les variations de composants
• Valider les concepts avant l'implémentation complète

Meilleures Pratiques

Préparation Efficace

1. Gardez votre application à jour en mode développement
2. Structurez vos composants clairement pour une meilleure détection
3. Utilisez des noms cohérents dans les classes et IDs
4. Documentez les modèles complexes dans les Playbooks

Sélection Précise

1. Soyez spécifique dans vos sélections
2. Utilisez l'inspecteur pour les éléments imbriqués
3. Considérez le contexte du composant parent
4. Vérifiez l'état avant de faire des changements

Optimisation des Résultats

1. Fournissez des retours itératifs pour améliorer la précision
2. Utilisez les Playbooks pour capturer les modèles réussis
3. Gardez les sélections simples pour de meilleurs résultats
4. Validez les changements avant d'appliquer en production

---

Le Pont Visuel-vers-Code représente un changement fondamental dans la façon dont nous interagissons avec notre code - convertissant l'intention visuelle directement en implémentation précise, tout en maintenant toujours le contrôle total du développeur.