Workflow : Construire une Fonctionnalité avec Claude Code

La meilleure façon de comprendre Claude Code est de le voir en action. Dans cet article, je vais vous guider à travers un scénario réel : la construction d'un composant Job Card pour une application Next.js utilisant Tailwind CSS.

L'objectif

Nous avons besoin d'une carte d'affichage pour un site d'offres d'emploi. Elle nécessite :

1. Intitulé du poste
2. Nom de l'entreprise & Logo
3. Lieu & Type (Télétravail/Hybride)
4. Bouton "Postuler"
5. Design responsive

Le prompt

Au lieu de créer le fichier manuellement, d'importer React et de taper le JSX, j'ouvre simplement mon terminal et je tape :

bashCopy
claude "Crée un composant 'JobCard' dans 'components/jobs/JobCard.tsx'.
Il doit accepter des props pour title, company, location, type, et logoUrl.
Utilise un design carte moderne et propre avec un fond blanc et une ombre subtile.
Il doit être responsive. Utilise Tailwind CSS.
Assure-toi que le bouton 'Postuler' utilise notre style de bouton secondaire."

L'exécution

Voici exactement ce que fait Claude Code :

1. Recherche : Il cherche d'abord tailwind.config.js pour voir mes couleurs. Il cherche aussi des composants existants pour voir s'il y a un style de "bouton secondaire" qu'il peut réutiliser.
2. Planifier : Il me dit : "Je vais créer le fichier components/jobs/JobCard.tsx. Je vais le structurer en utilisant une mise en page flexbox qui s'empile sur mobile et s'étend sur bureau."
3. Agir : Il écrit le code.

tsxCopy
// Généré par Claude Code (Simplifié)
export const JobCard = ({ title, company, location, type, logoUrl }) => {
  return (
    <div className="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow p-6 border border-gray-100">
      <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
        <div className="flex items-center gap-4">
          <img
            src={logoUrl}
            alt={company}
            className="w-12 h-12 rounded-lg object-cover"
          />
          <div>
            <h3 className="font-semibold text-lg text-gray-900">{title}</h3>
            <p className="text-sm text-gray-500">
              {company} • {location}
            </p>
          </div>
        </div>
        <div className="flex items-center gap-3 w-full md:w-auto">
          <span className="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-xs font-medium">
            {type}
          </span>
          <button className="w-full md:w-auto px-4 py-2 bg-gray-900 text-white rounded-lg text-sm font-medium">
            Postuler
          </button>
        </div>
      </div>
    </div>
  );
};

Itération

J'ai regardé le résultat et je me suis rendu compte que j'avais oublié quelque chose.

Moi : "Ajoute une icône de signet dans le coin supérieur droit."

Claude : "Compris. Je vais importer BookmarkIcon de lucide-react (que je vois installé) et le positionner en absolu en haut à droite."

Il édite le fichier instantanément.

Le résultat

En environ 3 minutes, j'ai un composant entièrement responsive et stylisé.

• Temps Gagné : ~15 minutes de frappe et d'ajustements CSS.
• Charge Cognitive : Proche de zéro. Je me suis concentré sur ce que je voulais, pas sur la syntaxe flex-row vs flex-col.

Conclusion

C'est la puissance des flux de travail agentiques. Vous devenez l'architecte de votre application. Vous décrivez les fonctionnalités, et Claude Code gère la pose des briques.

Commencez petit, faites confiance à l'outil, et regardez votre vélocité augmenter. Bon codage !