Découper un projet comme un pro

Du brief flou au plan d'exécution IA-compatible.

5.1Le piège du "Fais-moi tout d'un coup"

Pourquoi ça échoue

"Crée-moi une plateforme de cours en ligne avec authentification, paiement Stripe, tableau de bord admin, progression des utilisateurs, gamification et mode sombre."

• Fenêtre de contexte saturée : l'IA ne peut pas garder en tête tous les détails
• Choix incohérents : l'IA fait des choix arbitraires qui se contredisent
• Code monolithique : impossible à tester, debugger ou faire évoluer
• Aucun checkpoint : si quelque chose ne va pas, tu recommences de zéro

5.2La méthode de découpage en 4 niveaux

Niveau 1 : Épics

Les grandes fonctionnalités. 3-7 par projet.

Ex : "Authentification", "Système de cours", "Paiement", "Dashboard"

Niveau 2 : User Stories

Ce que l'utilisateur peut faire. 3-5 par épic.

Ex : "En tant qu'utilisateur, je peux m'inscrire avec mon email et un mot de passe."

Niveau 3 : Tâches techniques

Les étapes concrètes de développement. 2-5 par user story.

Ex : "Créer le schéma User (id, email, passwordHash, createdAt)". "Créer la route POST /api/auth/register".

Niveau 4 : Prompts IA

Chaque tâche technique = 1 prompt. Contexte + demande + constraints.

Ex : "Crée le composant RegisterForm.tsx avec React Hook Form + Zod. Voici le schéma User : [schema]. Valide email format + mot de passe 8+ chars."

5.3Exemple complet : découpage d'un projet

Prenons un exemple concret : "Créer un blog avec Next.js".

Bashbash

# ÉPIC 1 : Setup & Architecture
├── Tâche 1.1 : Initialiser le projet Next.js 15 + TypeScript + Tailwind
├── Tâche 1.2 : Créer la structure de dossiers (app/, components/, lib/)
├── Tâche 1.3 : Configurer le layout racine (header, footer, metadata)
└── Tâche 1.4 : Créer le design system de base (Button, Card, Input)

# ÉPIC 2 : Système d'articles
├── Tâche 2.1 : Définir le type Article (title, slug, content, date, tags)
├── Tâche 2.2 : Créer les fichiers MDX pour les articles
├── Tâche 2.3 : Créer la page /blog (liste des articles avec pagination)
├── Tâche 2.4 : Créer la page /blog/[slug] (article individuel)
└── Tâche 2.5 : Ajouter le composant de partage social

# ÉPIC 3 : Navigation & SEO
├── Tâche 3.1 : Header avec navigation responsive
├── Tâche 3.2 : Système de tags avec filtrage
├── Tâche 3.3 : Metadata dynamique par article
├── Tâche 3.4 : Sitemap.xml automatique
└── Tâche 3.5 : Open Graph images

# ÉPIC 4 : Déploiement
├── Tâche 4.1 : Configuration Vercel / Cloudflare Pages
├── Tâche 4.2 : Variables d'environnement
└── Tâche 4.3 : CI/CD avec GitHub Actions

5.4L'ordre d'exécution compte

Les bonnes dépendances

1erSetup & configLa fondation. Sans ça, rien ne tourne.

2èmeTypes & interfacesLe contrat de données. Tout le code en dépend.

3èmeData layerRécupérer les données. Pas d'UI sans données.

4èmeComposants UIMaintenant que les données existent, on les affiche.

5èmePages & routingAssembler les composants dans des pages.

6èmeStyle & polishAnimations, responsive, edge cases.

7èmeTests & deployVerrouiller et envoyer en production.

5.5Le template de kickoff projet

À copier pour chaque nouveau projet

🎯 Objectif du projet

Décrit en 1-2 phrases. Pour qui ? Pourquoi ?

Stack technique

Frameworks, langages, versions, services tiers

Épics (3-7)

Les grandes briques fonctionnelles

📝 User Stories par épic

"En tant que [qui], je peux [quoi] pour [pourquoi]"

⚙️ Tâches techniques par story

Actions concrètes, ordonnées par dépendance

🚫 Hors périmètre

Ce qu'on ne fait PAS (aussi important que ce qu'on fait)