Mode rapide : un prototype

0 Avant de commencer 10 minutes

Objectif : avoir un dossier vide, ouvert dans VS Code, avec le panneau Claude Code prêt et Pulse installé avec sa pile Next.js.

Ce tutoriel utilise VS Code avec l'extension Claude Code : vous discutez avec Claude dans un panneau, et vous voyez à côté les fichiers que Pulse écrit pour vous.

1. Vérifiez que tout est installé avec la page Prérequis : Claude Code, Git, Node.js (22.19 ou plus), VS Code et son extension Claude Code, les plugins pulse et pulse-next, et un compte GitHub.
2. Créez un dossier vide, par exemple carnet-reservations, là où vous rangez vos documents.
3. Ouvrez VS Code. Dans le menu File (Fichier), choisissez Open Folder… (Ouvrir le dossier…), puis sélectionnez le dossier carnet-reservations. Les menus de VS Code sont en anglais au départ : c'est normal.
4. Si VS Code demande « Do you trust the authors of the files in this folder? » (faites-vous confiance aux auteurs de ces fichiers ?), répondez Yes, I trust the authors : c'est votre propre dossier.
5. Ouvrez le panneau Claude Code : cliquez sur ✻ Claude Code, en bas à droite de la fenêtre. Vous pouvez aussi cliquer sur l'icône en forme d'étincelle, dans la barre de gauche, puis démarrer une nouvelle conversation.
6. Cliquez dans la zone de saisie du panneau : c'est là que vous taperez toutes les commandes /pulse:… de ce tutoriel.

1 Créer le projet 5 minutes

Objectif : préparer le dossier (règles du projet, mémoire, historique des versions) et choisir de démarrer vite avec /pulse:nouveau.

/pulse:init carnet-reservations

Pulse vous demande une phrase de description, votre niveau et la quantité d'explications voulue. Répondez « Jamais programmé » si c'est votre cas : Pulse prendra alors lui-même les réglages techniques conseillés, sans vous poser de questions de développeur. Il propose ensuite de protéger vos clés et de créer la copie en ligne du projet sur GitHub.

Les nouveaux fichiers apparaissent dans l'explorateur de VS Code, à gauche. S'il est caché, cliquez sur l'icône des deux feuilles en haut de la barre de gauche, ou appuyez sur Ctrl + Maj + E (Cmd + Maj + E sur Mac).

2 Décrire l'idée en une conversation 20 minutes

Objectif : transformer votre idée en documents clairs (brief, PRD, user stories) grâce à quatre blocs de questions et un seul écran de validation.

Vous avez choisi de démarrer vite : la conversation continue d'elle-même, sans rien taper. La commande ci-dessous sert seulement à le relancer, par exemple après une pause. Le détail est sur la page /pulse:nouveau.

/pulse:nouveau "un carnet de réservations pour mon salon de coiffure"

Les quatre blocs

Pour chaque bloc, Pulse pose ses questions, puis reformule en deux lignes (« ✔ Compris : … ») pour que vous confirmiez. Voici des réponses possibles pour le salon :

L'écran de validation

Pulse déduit ensuite lui-même la première version, les user stories et ce qu'il faudra techniquement. Il vous montre tout sur un seul écran :

Votre projet en un coup d'œil

Pour qui      : les clients du salon, et la coiffeuse
Le problème   : les rendez-vous pris au téléphone pendant les coupes
Première version : US-001 Prendre rendez-vous · US-002 Voir les rendez-vous du jour
Ensuite       : US-003 Annuler un rendez-vous · US-004 Recevoir un rappel par e-mail
Il faudra     : données partagées · connexion (espace de la coiffeuse) · formulaire public protégé contre les robots
Proposé par Pulse : un message de confirmation après la réservation

→ Valider (Recommandé) / Modifier quelque chose

Lisez-le calmement. « Modifier quelque chose » permet de corriger avec vos mots, puis Pulse remontre l'écran. Quand il vous convient, choisissez « Valider » : Pulse écrit les documents.

Pour lire un document, ouvrez-le dans l'explorateur de VS Code, par exemple docs/brief.md, puis appuyez sur Ctrl + Maj + V (Cmd + Maj + V sur Mac) : l'aperçu le présente mis en forme, avec ses titres et ses listes.

3 Choisir les outils 25 minutes

Objectif : choisir la pile technique de l'appli, préparer le projet de départ et, si vous le voulez, le mettre en ligne dès aujourd'hui.

Toujours dans la même conversation, Pulse remplit lui-même ce qu'il sait déjà de vos besoins, pose les questions qui restent, puis compare 2 ou 3 options. Avec le plugin pulse-next installé, la pile Next.js de Pulse en fait partie : c'est l'option recommandée pour une appli web avec des données partagées, car son code de départ est déjà vérifié. Le détail est sur la page /pulse:tech.

Ce que vous faites à la main

Pulse vous guide pas à pas, un écran à la fois. Trois choses relèvent de vous :

1. Un compte Neon (la base de données) sur console.neon.tech, avec un projet en région Francfort et une deuxième base pour le travail (la branche dev). Pulse vous dit quelle adresse copier, et dans quelle ligne de votre fichier .env.
2. Un compte Vercel (l'hébergeur) sur vercel.com, relié à votre compte GitHub.
3. Coller les adresses de la base dans .env, vous-même : ouvrez le fichier .env dans l'explorateur de VS Code, collez chaque adresse sur la ligne indiquée par Pulse, puis enregistrez avec Ctrl + S (Cmd + S sur Mac) et fermez l'onglet. Ce fichier reste sur votre ordinateur.

Pulse propose ensuite de mettre en ligne la page de départ, presque vide. Acceptez : vous découvrez aujourd'hui les réglages de l'hébergeur, avec une page simple, plutôt qu'à la fin avec tout le projet en jeu.

4 Choisir l'apparence 10 minutes

Objectif : comparer deux apparences pour le carnet, dans votre navigateur, et en choisir une.

Pulse part de vos 3 mots (chaleureux, simple, soigné) et pose seulement ce qui manque : où et sur quel écran l'outil sera utilisé, l'intensité des couleurs, un logo éventuel. Il fait dessiner deux apparences différentes, puis ouvre une page qui les montre côte à côte. Le détail est sur la page /pulse:ui.

Pulse termine /pulse:nouveau par un résumé en quatre lignes : ce qui entre dans la première version, la pile retenue, l'apparence choisie et ce qui reste à faire de votre côté.

5 Réaliser la prise de rendez-vous 35 minutes

Objectif : faire construire l'écran de réservation, tâche par tâche, puis l'essayer vous-même.

Repartez d'abord d'une conversation neuve : elle sera plus légère, et Pulse retrouve tout dans les documents et la mémoire du projet. Dans le panneau Claude Code, tapez /clear. Si cette commande n'apparaît pas dans la liste qui s'affiche quand vous tapez /, ouvrez plutôt une nouvelle conversation : Ctrl + Maj + Échap (Cmd + Maj + Échap sur Mac) l'ouvre dans un nouvel onglet. Puis lancez la réalisation de la première user story :

/pulse:spirc -a US-001

/pulse:spirc enchaîne tout le travail d'une user story : il décrit précisément ce qu'elle doit faire (la spec), la découpe en petites tâches (le plan), puis fait réaliser et enregistrer chaque tâche par un assistant. /pulse:nouveau a réglé Pulse sur le rythme rapide : une fois toutes les tâches faites, deux autres assistants, qui n'ont pas écrit le code, relisent et essaient toute la user story en une seule fois. Avant d'écrire le plan, Pulse le fait aussi vérifier par un outil : chaque point de votre user story doit avoir sa tâche. L'option -a (autonome) enchaîne les tâches sans s'arrêter entre elles : vous testez tout en une fois, à la fin. Le détail est sur la page /pulse:spirc.

Même en autonome, les décisions restent les vôtres. Vous validez la spec et le plan avant que Pulse ne parte. Ensuite, une question sur le besoin ou une action à faire à la main met seulement sa tâche en pause : Pulse continue les autres, puis vous pose toutes ses questions ensemble, une seule fois.

Les numéros et titres des tâches ci-dessus sont un exemple : votre plan peut différer. Pendant la réalisation, Pulse peut vous demander une action à la main, par exemple accepter la création d'une clé secrète pour le formulaire. Claude Code vous demande alors l'autorisation : la clé est créée sans jamais s'afficher.

Ce que vous testez vous-même

• Réserver une coupe sur un créneau libre : un message confirme la réservation.
• Revenir à la liste des créneaux : celui que vous venez de prendre n'apparaît plus.
• Envoyer le formulaire sans nom, ou avec un e-mail mal écrit : un message clair explique quoi corriger.
• Recommencer sur votre téléphone, si possible : les boutons restent faciles à toucher.

6 Mettre en ligne 25 minutes

Objectif : publier le prototype sur internet et obtenir son adresse, à partager.

Chaque tâche a déjà été enregistrée pendant l'étape 5 : il n'y a rien à enregistrer à la main. Si Pulse signale des fichiers non enregistrés, lancez d'abord /pulse:commit. Puis :

/pulse:deploy

Pulse lance ses contrôles (tout est enregistré, aucune clé dans le code, tests et construction). Comme votre appli garde des données, il prépare ensuite une mise en ligne « pour de vrai » : un contrôle qualité automatique avant chaque publication, la base de données reliée à l'hébergeur, et les clés enregistrées chez l'hébergeur sans passer par la conversation. Le détail est sur la page /pulse:deploy.

Si vous n'avez pas mis en ligne la page de départ à l'étape 3, Pulse commence par vous guider chez Vercel pour y relier votre dépôt GitHub.

Ouvrez l'adresse sur votre téléphone, réservez un créneau, et envoyez le lien à la coiffeuse : c'est le moment de recueillir des avis.

7 Et maintenant ? 5 minutes

Objectif : savoir ce que le mode rapide a laissé de côté, et quand passer au mode complet.

Votre prototype fonctionne et il est en ligne. Pour aller vite, le mode rapide a sauté exprès plusieurs étapes :

• Les entretiens approfondis : l'idée, la première version et chaque user story ont été décrites en une seule conversation, au lieu d'un entretien chacune.
• Les maquettes d'écrans : plusieurs versions de chaque écran, à comparer avant de construire.
• Le test après chaque tâche : en autonome, vous avez tout testé en une fois, à la fin.
• Les autres user stories : l'annulation, le rappel par e-mail et la suite de la liste.
• La sécurité approfondie : l'audit complet de /pulse:security et le registre des clés de /pulse:secrets.
• Google et la vitesse : être trouvé avec /pulse:seo, mesurer la vitesse vécue par les visiteurs avec /pulse:perf.

Passez au mode complet quand le prototype a convaincu : la coiffeuse veut l'utiliser pour de bon, ou des clients vont y laisser leurs coordonnées. Le tutoriel « Du prototype à la production » reprend ce même projet là où vous en êtes, sans repartir de zéro, jusqu'à une version prête pour de vrais clients. Pour vivre chaque étape depuis le début, dans un dossier neuf, il y a aussi le tutoriel complet.

Passer du prototype à la production