Ton premier prompt dev en 5 min

1.1Le tuto du jeu commence ici

Tu connais ce moment dans un jeu vidéo où tu arrives dans une nouvelle zone, et le jeu te montre les commandes de base ? "Appuie sur X pour sauter, Y pour attaquer." C'est exactement ce qu'on fait ici.

Un prompt, c'est ta manette. L'IA, c'est le personnage à l'écran. Si tu appuies au hasard sur les boutons, il se passe des trucs... mais rien de très utile. Par contre, si tu apprends les combos de base, tu avances 10 fois plus vite.

1.2Ton premier prompt (le "mauvais")

On commence par ce que font 90% des gens quand ils découvrent l'IA :

Fais-moi un bouton en React

Ce prompt va marcher. L'IA va te pondre un bouton. Mais quel bouton ? Avec quel style ? Quel comportement au clic ? Quelle taille ? Quel texte ? Accessible ou pas ?

L'IA va deviner tout ça. Et comme dans un jeu où tu laisses l'IA choisir ton équipement, tu vas te retrouver avec une épée en bois quand tu avais besoin d'un arc.

1.3Ton premier prompt (le "bon")

Maintenant, le même besoin, mais avec un peu plus d'intention :

Crée un composant React "Button" en TypeScript.

Props attendues :
- variant : "primary" | "secondary" | "ghost"
- size : "sm" | "md" | "lg"  
- children : le texte du bouton
- onClick : callback optionnel
- disabled : booléen optionnel

Style : Tailwind CSS, coins arrondis, transition au hover.
Accessibilité : role="button", aria-disabled si disabled.
Pas de dépendances externes.

Tu vois la différence ? Le deuxième prompt ne demande pas plus de connaissances. Il demande juste de réfléchir 30 secondes à ce qu'on veut avant de parler.

1.4Le résultat concret

Voici le genre de code que tu obtiens avec le prompt guidé :

interface ButtonProps {
  variant?: "primary" | "secondary" | "ghost";
  size?: "sm" | "md" | "lg";
  children: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
}

const sizes = {
  sm: "px-3 py-1.5 text-sm",
  md: "px-4 py-2 text-base",
  lg: "px-6 py-3 text-lg",
};

const variants = {
  primary: "bg-blue-600 text-white hover:bg-blue-700",
  secondary: "bg-slate-200 text-slate-800 hover:bg-slate-300",
  ghost: "bg-transparent text-slate-600 hover:bg-slate-100",
};

export function Button({
  variant = "primary",
  size = "md",
  children,
  onClick,
  disabled = false,
}: ButtonProps) {
  return (
    <button
      role="button"
      aria-disabled={disabled}
      onClick={disabled ? undefined : onClick}
      className={`rounded-lg font-medium transition-colors
        ${sizes[size]} ${variants[variant]}
        ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`}
    >
      {children}
    </button>
  );
}

1.5Power-up débloqué : l'intention

Tu viens de débloquer ta première compétence : l'intention. Avant de parler à une IA, pose-toi ces 3 questions :