Sur le chantier, il y a les plans techniques — et puis il y a la plaquette commerciale. La plaquette, c'est ce que tu montres à ta banque, à ton associé, à ta famille qui te demande "mais c'est quoi exactement ton projet ?" Elle prend les mêmes informations que les plans, mais les raconte d'une façon que tout le monde peut comprendre. Aujourd'hui, tu prends les rênes et tu construis cette plaquette toi-même.
Dans cet atelier, tu transformes tes quatre documents de cadrage en une page HTML de présentation projet — un pitch deck interactif que tu peux montrer à n'importe qui.
Tu as un brief, un PRD, un UX Design, une architecture. Des fichiers Markdown que personne n'a envie de lire. Ton défi : demander à Claude de les transformer en une page HTML visuelle et attractive, compréhensible par quelqu'un qui n'a jamais entendu parler de ton projet.
La page doit contenir cinq éléments :
La vision du projet (issue du brief)
Les fonctionnalités clés en cards visuelles (issues du PRD)
Le parcours utilisateur en flow visuel (issu de l'UX)
L'architecture en schéma simplifié (issue de l'archi)
Un planning/timeline des grandes étapes
Ce que tu vas faire : rédiger le prompt, l'envoyer à Claude, ouvrir le résultat dans le navigateur, l'améliorer jusqu'à être fier de le montrer.
Lance ce premier prompt pour générer la page de base :
Crée une page HTML complète de présentation de mon projet. Lis @product-brief.md @prd.md @ux-design.md @architecture.md.
La page doit contenir : - Un hero avec le nom du projet, le problème résolu en grand titre, et la cible en sous-titre - Une section "Fonctionnalités clés" : les features V1 du PRD en cards visuelles avec icônes - Une section "Parcours utilisateur" : les étapes principales en flow horizontal avec numéros et flèches - Une section "Architecture" : les composants (Frontend, Supabase, Vercel) en blocs colorés avec leurs rôles - Une section "Planning" : les grandes phases (Cadrage, Construction, Livraison) en timeline
Style : moderne, dégradé de fond, police sans-serif, cartes avec légère ombre, palette de couleurs cohérente. La page doit être impressionnante à l'œil nu.
Quand Claude génère le fichier HTML, ouvre-le dans ton navigateur (clic droit sur le fichier dans Cursor > Reveal in Explorer, puis ouvre dans Chrome).
Regarde ce que tu obtiens. Qu'est-ce qui ne te plaît pas ? Le titre est vague ? Les couleurs ne correspondent pas à ton projet ? Un bloc manque d'informations ?
Itère. Pour chaque point à améliorer, envoie un message à Claude :
- "Change les couleurs pour quelque chose de plus professionnel — bordeaux et gris anthracite"
- "La section fonctionnalités n'a que 2 features, ajoute les autres du PRD"
- "Ajoute mon nom en bas de page comme créateur du projet"
- "Rends la section parcours utilisateur plus lisible — les étapes se chevauchent"
Répète jusqu'à ce que la page soit quelque chose que tu serais fier de montrer.