Problématique du « Vibe Coding » et Introduction au SDD

Le développement guidé par l'intuition (« Vibe Coding ») présente une faiblesse majeure : la plupart des projets s'enlisent rapidement. Imaginez avoir une excellente idée. Vous ouvrez votre éditeur et demandez à l'IA de coder « au feeling ». Les départs sont prometteurs, mais on se retrouve vite confronté à des besoins flous, une architecture désordonnée et des cycles interminables de réécriture. Cette approche improvisée manque de rigueur, tant pour les développeurs humains que pour les agents IA.

Une méthodologie plus robuste et systématique s'impose : le Développement Piloté par Spécification (Spec-Driven Development, SDD).

Fondements du SDD

Le principe central est de définir précisément le « quoi » avant de s'attaquer au « comment ». Considérez la construction d'une maison : on ne lance pas les travaux sans un plan d'architecte détaillé. Ce plan est la spécification (Spec).

Les avantages clés du SDD sont :

• Objectifs Clairifié : Le document de spécification établit un but sans ambiguïté pour le projet.
• Source Unique de Vérité : Il sert de contrat entre les parties prenantes (chef de produit, architecte) et l'IA (développeur), réduisant les écarts de compréhension.
• Réduction des Retouches : Une réflexion approfondie en amont permet d'identifier les cas limites et les problèmes potentiels, minimisant ainsi les corrections coûteuses en phase de codage.
• Efficacité Collaborative : Les agents IA comprennent mieux les tâches et peuvent exécuter plusieurs actions en parallèle, accélérant considérablement le processus.

Utilisation Pratique de Spec Kit

Spec Kit est un ensemble d'outils en ligne de commande open source, conçu pour incarner le SDD. Il guide l'utilisateur et l'IA à travers un flux de travail structuré.

Initialisation du Projet

Lancez la commande suivante pour préparer votre espace de travail :

uvx --from git+https://github.com/github/spec-kit.git specify init

Le processus vous demandera de choisir un assistant IA (comme Claude Code) et un type de shell compatible POSIX (comme zsh sur macOS).

L'initialisation génère une structure standardisée :

• scripts/ : Scripts Shell d'automatisation pour les branches et les modèles.
• templates/ : Modèles de documents pour garantir la cohérence structurelle des sorties de l'IA.
• memory/ : Contient le fichier constitution.md, définissant les principes fondamentaux du projet.

Démonstration avec une Application To-Do

Prenons l'exemple de la création d'une application de liste de tâches (To-Do) web.

Étape 1 : Idéation et Consolidation

Comencez par formaliser votre idée brute. Utilisez un modèle de langage généraliste comme ChatGPT pour structurer vos réflexions initiales en une liste de besoins cohérente. Cette liste deviendra la matière première pour Spec Kit.

Exemple de prompt pour ChatGPT :

Bonjour, aide-moi à formuler les besoins pour une application web de liste de tâches personnelle simple. Voici mes idées initiales, peut-être désordonnées :
- Fonctionnalité centrale : Ajouter une tâche (ex: "Apprendre Spec Kit").
- Afficher la liste des tâches.
- Marquer une tâche comme terminée (avec un style visuel distinctif).
- Supprimer une tâche.
- Interface utilisateur épurée, style moderne.
- Stockage local (localStorage) pour une MVP.
- Stack technique potentielle : React ou similaire.

Organise ces idées en un document de besoins préliminaire structuré avec des sections comme "Fonctionnalités", "UI/UX", "Considérations Techniques".

Conservez le document généré.

Étape 2 : Génération de la Spécification

Alimentez Spec Kit avec le document de besoins. Dans l'interface de votre agent IA (par exemple, l'invite de Claude Code), exécutez la commande /specify et collez intégralement le contenu du document obtenu à l'étape précédente.

L'agent IA analysera les besoins et exécutera le script create-new-feature.sh. Il peut vous poser des questions de clarification. Une fois satisfait, il génère un fichier spec.md très détaillé dans le dossier specs. Une nouvelle branche Git est automatiquement créée.

Note importante : Spec Kit ne gère pas actuellement l'encodage des caractères non ASCII. Assurez-vous que le document d'entrée et la sortie soient en anglais pour éviter les problèmes d'affichage.

Étape 3 : Planification Technique

Une fois la spécification validée, utilisez la commande /plan pour transformer les besoins fonctionnels en une architecture technique concrète. Fournissez votre choix de pile technologique en argument.

Exemple de sélection de pile :

- Langage: TypeScript
- Framework: Next.js 14 (App Router)
- Composants UI: shadcn/ui
- CSS: Tailwind CSS
- Persistance: localStorage
- Tests: Jest + React Testing Library

L'agent IA lit le spec.md et la pile fournie, puis exécute setup-plan.sh. Il génère plusieurs livrables :

• plan.md : Description détaillée de l'architecture du projet, de la décomposition en composants React, du flux de données et de l'interaction avec le stockage local.
• data-model.md : Définitions des structures de données et des schémas.
• research.md : Notes sur les arbitrages techniques et les choix de conception.

Étape 4 : Décomposition en Tâches Exécutables

Exécutez la commande /tasks sans paramètres. L'agent IA vérifie les prérequis (via check-task-prerequisites.sh), lit l'ensemble de la documentation (plan.md, spec.md, etc.) et décompose le plan en tâches atomiques.

Le fichier tasks.md généré contient :

• Des tâches regroupées par phases logiques.
• Des identifiants uniques (ex: T001).
• Des instructions précises pour chaque tâche.
• Une balise [P] pour les tâches indépendantes, exécutables en parallèle.

Exemple de ligne de tâche :

T001 [P] Initialiser le projet Next.js 14 avec TypeScript et configuration de Tailwind CSS

Étape 5 : Implémentation

Copiez une description de tâche de tasks.md et donnez-la comme instruction à votre agent IA. Pour les tâches marquées [P], vous pouvez lancer plusieurs sessions d'agent simultanément pour paralléliser le travail.