Alignement

PRD et alignement

Cette leçon explique l’étape PRD : saisir le brief, affiner le périmètre en langage clair, puis convenir de ce que signifie « terminé » avant d’accélérer le code. Le milieu peut être un WebM Playwright dans public/tutorials/recordings/ (voir la commande d’enregistrement). Remotion ajoute cartons et encarts en trois temps. Cinq MP3 par langue dans public/tutorials/voiceover/ (npm run voiceover:tutorial:prd-alignment ; mêmes variables ElevenLabs que la leçon parcours fondateur). La musique réutilise public/tutorials/music/founder-path-bg.mp3 (CC BY — voir README). Sans WebM, le lecteur utilise le storyboard image comme la composition founder-path.

Ce que vous verrez

Enregistrement optionnel : connexion, page PRD du builder avec un brief exemple, défilement, puis cette page tutoriel.
Remotion superpose trois temps : brief, affinage PRD, alignement avant code — alignés sur le parcours fondateur.
Exportez le MP4 avec les commandes de rendu pour une vidéo unique.

Lecteur interactif

Le WebM est muet ; la voix est dans des MP3 séparés. Réactivez le son et lancez la lecture. ElevenLabs : npm run voiceover:tutorial:prd-alignment. Secours macOS : npm run voiceover:tutorial:prd-alignment:system.

La durée suit le WebM s’il est présent ; sinon le storyboard plus court. Boucle activée.

Enregistrement écran (source)

Avec le dev sur le port 3000 (ou PLAYWRIGHT_BASE_URL), générez les WebM EN/FR et mettez à jour les frames :

npm run record:tutorial:prd-alignment

Aucun WebM : l’aperçu utilise le storyboard image (placeholders).

Commandes de rendu

npm run video:render:tutorial:prd-alignment:en

npm run video:render:tutorial:prd-alignment:fr

Voix off (ElevenLabs)

Même configuration que le parcours fondateur : ELEVENLABS_API_KEY ; ELEVENLABS_VOICE_ID optionnel. Cinq MP3 par langue : intro, trois tiers, outro.

npm run voiceover:tutorial:prd-alignment

MP3 silencieux : MOTIVD_TUTORIAL_VOICEOVER_SILENCE_ONLY=1 npm run voiceover:tutorial:prd-alignment

Rendu avec narration

npm run video:render:tutorial:prd-alignment:en:vo

npm run video:render:tutorial:prd-alignment:fr:vo

Fichiers rendus

Sorties : public/tutorials/prd-alignment-en.mp4 et prd-alignment-fr.mp4.

Pas encore de MP4 pour cette locale. Lancez la commande de rendu ci-dessus.

Assets de la leçon

docs/screenshots/landing-hero.pngMotivd-laptop-screenshot-ui-demo-device.pngImage-app-launch.pngbrand/motivd-chip.svgcursor-primary-color-bullet.svg

Guide utilisateur — détaille l’étape PRD et l’alignement avant le build.