saas-demo-maker

Présentation

Cette compétence capture des captures d'écran de n'importe quelle application Web ou locale et génère une vidéo de démonstration SaaS soignée et silencieuse (MP4). Elle est calquée sur le pipeline Castify éprouvé dans ~/SaaS/castify/generate_castify_demo.py et le généralise pour tout projet Aperone.

Lorsqu'elle est invoquée, vous DEVEZ produire un MP4 d'ici la fin de la session. Ne vous arrêtez pas à « voici un plan » — exécutez-le.

Quand l'utiliser

Déclenchez-la si l'un des éléments suivants correspond (correspondance partielle ou reformulation incluse).

Déclencheurs en japonais

デモ動画 / デモMP4 / デモ動画を作って / デモ動画を生成して
プロモ動画 / 紹介動画 / サービス紹介動画
スクショ撮って動画にして / スクリーンショットを動画にして
動画を作って（contexte SaaS ou application）
既存のスクショから動画を作って
画面録画（informer que la capture d'écran sera utilisée comme alternative, puis exécuter）

Déclencheurs en anglais

demo video / demo MP4 / product demo
promotional video / promo video / intro video
screenshot to video / capture and render
make a video from screenshots

Commande directe `/saas-demo-maker`

Cas ambigus (peuvent être déclenchés)

Contient « vidéo », « MP4 » ou « capture d'écran » dans le contexte d'une application, d'un SaaS ou d'un outil.
Fait référence à une application locale ou à une URL publique.
Demande de créer une vidéo à partir d'images existantes.

Entrées

Analyser à partir du message de l'utilisateur :

Entrée	Valeur par défaut	Remarques
`url`	—	URL complète ou `http://localhost:3000`
`product_name`	déduit du projet	Utilisé dans le badge et la configuration
`brand_color`	`#7c3aed`	Remplace la constante VIOLET
`screens`	5	Nombre de captures d'écran
`output_path`	`output/saas_demo.mp4`	Relatif à la racine du projet
`mode`	`full`	`full` / `capture` / `render`
`locale`	`ja` si message en japonais, sinon `en`	Affecte le texte des étapes
`steps`	préréglage de templates.md	Le texte fourni par l'utilisateur prévaut
`assets_dir`	`output/screenshots`	Images source pour le mode rendu

Modes

Mode complet (full)

Capture des captures d'écran à partir d'une URL en direct ou d'une application locale, puis rendu de la vidéo.

Exemples de déclenchement :

/saas-demo-maker Crée une vidéo de démo pour une fiche service à partir de https://castify.aperone.com. 5 écrans, moins de 20 secondes, couleur de marque #7c3aed, sortie output/castify_demo.mp4
/saas-demo-maker Capture les écrans de http://localhost:3000 : page d'accueil, connexion, tableau de bord, saisie, résultat, puis crée un MP4 de démo SaaS pour boucle sans son.

Mode capture (capture)

Capture d'écran uniquement — pas de rendu vidéo.

Exemples de déclenchement :

/saas-demo-maker Prends seulement les captures d'écran. Page d'accueil, connexion, tableau de bord, saisie, résultat : 5 images.

Mode rendu (render)

Rendu vidéo à partir de captures d'écran existantes — aucune étape de capture.

Exemples de déclenchement :

/saas-demo-maker Crée une vidéo à partir des 5 captures d'écran existantes dans assets. Nom du produit : Aperone Academy, couleur de marque #7c3aed.
/saas-demo-maker Crée une vidéo à partir des 5 captures dans assets. Nom du produit : Castify, sortie output/castify_demo.mp4.

Workflow

Étape 0 — Pré-vol

Lire demo_config.json s'il existe dans le projet actuel.
Vérifier les captures d'écran existantes dans output/screenshots/ ou assets/.
Détecter le mode à partir du message de l'utilisateur (par défaut : full).
Vérifier que le répertoire output/ existe ou le créer.

Étape 1 — Générer la configuration

Écrire demo_config.json à la racine du projet :

Utiliser les valeurs analysées du message utilisateur.
Choisir le texte des étapes à partir du préréglage templates.md correspondant à product_name, ou un modèle générique pour le nombre d'écrans, ou le texte fourni par l'utilisateur.
Écrire le fichier maintenant, avant toute génération de script.

Étape 2 — Écrire les scripts (mode complet ou capture)

Écrire capture_screenshots.py à la racine du projet. Écrire generate_saas_demo.py à la racine du projet. Écrire README_demo_video.md à la racine du projet (uniquement la première fois ; ignorer si existe).

Pour le mode rendu, ignorer capture_screenshots.py.

Étape 3 — Installer les dépendances (si manquantes)

Vérifier et installer si nécessaire (voir reference.md pour les commandes) :

ffmpeg — which ffmpeg || brew install ffmpeg
pillow — python3 -c "import PIL" || python3 -m pip install pillow
Pour la capture TypeScript : vérifier que node_modules/playwright existe

Étape 4 — Capturer (mode complet ou capture)

Exécuter le script de capture :

python3 capture_screenshots.py

Ou si le projet possède déjà un script de capture TypeScript Playwright (par exemple, scripts/demo-screenshots.ts), le privilégier :

npx tsx scripts/demo-screenshots.ts

Vérifier que output/screenshots/ contient au moins 2 fichiers PNG après la capture. Si la capture échoue, lire l'erreur, corriger capture_screenshots.py, et réessayer.

Étape 5 — Rendre (mode complet ou rendu)

Exécuter :

python3 generate_saas_demo.py

Surveiller les erreurs. Si le script plante, lire la trace, corriger le script et réexécuter. Ne pas demander à l'utilisateur — se réparer automatiquement jusqu'à 3 tentatives.

Étape 6 — Vérification qualité

Exécuter ffprobe pour vérifier :

ffprobe -v error -select_streams v:0 \
  -show_entries stream=width,height,duration,codec_name,pix_fmt \
  -of default output/saas_demo.mp4

Vérifier les 10 éléments de la liste de contrôle qualité dans reference.md. Si un élément échoue, corriger et refaire le rendu.

Étape 7 — Rapport

Produire la réponse finale (voir « Format de la réponse finale » ci-dessous).

Spécifications de capture d'écran

Résolution

1280 × 720 (fenêtre Chromium)

Navigateur

Playwright Chromium, sans tête.

Stratégie d'attente

await page.goto(url, wait_until="networkidle")
await page.wait_for_timeout(800)  # temps de stabilisation supplémentaire

URL locales candidates (essayer dans l'ordre)

http://localhost:3000
http://localhost:5173
http://localhost:8000
http://localhost:8080

Répertoire de sortie

output/screenshots/ relatif à la racine du projet.

Noms de fichiers standard

01-landing.png
02-login.png
03-dashboard.png
04-input.png
05-result.png
06-options.png   (si 6 écrans ou plus)
07-processing.png (si 7 écrans)

Démarrage de l'application locale

Lire package.json pour trouver le script de développement (dev, start, etc.).
Démarrer le serveur de développement en arrière-plan.
Attendre que l'URL candidate réponde (max 30 s).
Capturer les écrans.
Arrêter le serveur de développement.

Gestion de l'authentification

Si .env contient des identifiants de test et un indicateur de contournement de développement (par exemple, DEV_BYPASS_AUTH=true), le définir dans l'environnement avant le lancement.
Pour les écrans de connexion : remplir un email de démo (demo@<product>.io) sans soumettre — capturer l'état rempli comme écran de connexion.
Ne pas tenter de contournement réel de l'authentification ou de connexion par force brute.
Si une page redirige vers la connexion et que le contournement n'est pas disponible, utiliser l'écran de connexion comme l'un des écrans de démo (cela semble crédible).

Artefacts en mode développement

Bannière du mode développement Clerk, indicateur de développement Next.js, superpositions de débogage — NE PAS essayer de les supprimer dans le navigateur. Les masquer à l'étape de rendu avec une superposition dégradée ou un panneau sombre en bas de la carte.

Spécifications de rendu

Architecture

Générer toutes les images sous forme de fichiers PNG dans output/frames/, puis encoder avec ffmpeg. Ne PAS utiliser moviepy pour l'encodage — utiliser directement un sous-processus ffmpeg.

Dimensionnement des images

card = ImageOps.fit(image.convert("RGBA"), (card_w, card_h),
                    method=Image.Resampling.LANCZOS)

C'est la SEULE méthode de dimensionnement d'image autorisée. La capture d'écran doit être complètement statique à l'intérieur de chaque scène — pas de zoom, pas de panoramique, pas d'effet Ken Burns.

Effet Ken Burns — INTERDIT

N'appliquer aucun facteur d'échelle par image ou décalage de position à la capture d'écran. Le contenu des pixels de la capture ne doit pas changer entre l'image 0 et l'image 98 d'une scène. Seules les superpositions (légende, badge, barre de progression, lueur) peuvent être animées.

Animation de la légende (autorisée)

Le panneau de légende peut apparaître en fondu et se déplacer vers le haut de 8 px sur les 20 % premiers d'une scène (scene_t < 0.2). C'est la seule animation autorisée sur le calque d'image.

Timing

SCENE_SECONDS     = 3.3   # fixe — ne pas modifier
TRANSITION_SECS   = 0.4   # fixe — ne pas modifier
FPS               = 30
SCENE_FRAMES      = 99
TRANSITION_FRAMES = 12

Transition

Diapositive horizontale : l'image sortante quitte par la gauche, l'image entrante entre par la droite. Utiliser ease_in_out_cubic. Ajouter un voile d'atténuation étroit à la limite de coupure. Voir reference.md pour l'algorithme complet.

Commande ffmpeg

Utiliser la commande exacte de reference.md. Indicateurs clés : -c:v libx264 -pix_fmt yuv420p -movflags +faststart -an -crf 18

Règles de conception visuelle

Arrière-plan

#020617  (BG)  — remplissage derrière la carte

Disposition de la carte

card_box = (34, 22, LARGEUR-34, HAUTEUR-22)
radius   = 30

Ligne d'accentuation chromée en haut à card_box[1] + 48. Bordure de la carte : 1 px CARD_EDGE.

Superpositions (toutes obligatoires)

Barre de progression — segmentée, en haut de la carte, remplissage violet pour les étapes terminées
Panneau de légende — en bas à gauche, panneau sombre en verre, ÉTAPE N / nom / corps
Badge produit — en bas à droite, point de la couleur de marque + nom du produit
Lueur de focus — lueur violette autour de l'élément d'interface clé (voir reference.md pour l'inférence)
Vignette — bord arrondi sombre subtil sur l'image complète
Dégradé inférieur — masque les artefacts du mode développement dans la zone inférieure de la carte si nécessaire

Éléments de conception interdits

Texte blanc sur boîte noire unie (pas d'effet verre)
Lueur excessive / saturation excessive
Transformations 3D ou déformations de perspective
Toute distorsion de l'interface utilisateur de la capture d'écran
Modification ou remplacement du texte visible dans la capture d'écran

Règles de configuration

Écrire demo_config.json avant d'exécuter un script. Lors d'une réexécution en mode rendu, lire d'abord la configuration existante et fusionner les remplacements de l'utilisateur plutôt que de l'écraser.

Schéma :

{
  "product_name": "string",
  "brand_color": "#7c3aed",
  "output_path": "output/saas_demo.mp4",
  "screenshots": ["output/screenshots/01-landing.png"],
  "steps": [{ "step": 1, "name": "...", "body": "...", "focus": null }],
  "fps": 30,
  "resolution": [1280, 720],
  "mode": "full",
  "locale": "ja"
}

Exigences de mise en œuvre

Responsabilités de capture_screenshots.py :

Lancer Playwright Chromium en mode sans tête
Définir la fenêtre à 1280 × 720
Naviguer vers chaque URL cible, attendre networkidle + 800 ms de stabilisation
Enregistrer les PNG dans output/screenshots/ avec les noms de fichiers standard
Déplacer la souris hors écran avant chaque capture (page.mouse.move(1400, 800))
Afficher le succès/échec par capture
Code de sortie 0 en cas de succès, 1 en cas d'échec

generate_saas_demo.py doit contenir toutes les fonctions listées dans reference.md. Invariants clés :

SCENE_SECONDS = 3.3 — codé en dur, aucune modification de configuration
TRANSITION_SECONDS = 0.4 — codé en dur, aucune modification de configuration
fit_cover() appelle ImageOps.fit() — pas d'arithmétique de zoom
render_scene() ne modifie PAS l'échelle par image
encode_video() appelle le sous-processus ffmpeg avec l'option -an

Liste de contrôle qualité

Après la réussite de encode_video(), vérifier TOUS les points suivants avant de signaler la fin :

output/saas_demo.mp4 existe, taille > 100 Ko
Durée à ±2 s de (nombre_d_écrans × 3,3 s)
Largeur=1280, Hauteur=720 (confirmé par ffprobe)
Aucun flux audio
codec_name = h264
pix_fmt = yuv420p
Toutes les captures d'écran apparaissent dans le bon ordre
Aucune bannière de développement flagrante visible (masquée par superposition si nécessaire)
L'écran de résultat/sortie communique clairement la valeur du produit
Le texte de la légende est lisible sur toutes les scènes

Exécuter cette vérification :

ffprobe -v error -select_streams v:0 \
  -show_entries stream=width,height,duration,codec_name,pix_fmt \
  -of default output/saas_demo.mp4

Récupération après échec

Échec	Récupération
`ffmpeg` introuvable	`brew install ffmpeg`, puis réessayer
`PIL` introuvable	`python3 -m pip install pillow`, puis réessayer

Demander à votre IA préférée

Documentation

saas-demo-maker

Présentation

Quand l'utiliser

Déclencheurs en japonais

Déclencheurs en anglais

Commande directe /saas-demo-maker

Cas ambigus (peuvent être déclenchés)

Entrées

Modes

Mode complet (full)

Mode capture (capture)

Mode rendu (render)

Workflow

Étape 0 — Pré-vol

Étape 1 — Générer la configuration

Étape 2 — Écrire les scripts (mode complet ou capture)

Étape 3 — Installer les dépendances (si manquantes)

Étape 4 — Capturer (mode complet ou capture)

Étape 5 — Rendre (mode complet ou rendu)

Étape 6 — Vérification qualité

Étape 7 — Rapport

Spécifications de capture d'écran

Résolution

Navigateur

Stratégie d'attente

URL locales candidates (essayer dans l'ordre)

Répertoire de sortie

Noms de fichiers standard

Démarrage de l'application locale

Gestion de l'authentification

Artefacts en mode développement

Spécifications de rendu

Architecture

Dimensionnement des images

Effet Ken Burns — INTERDIT

Animation de la légende (autorisée)

Timing

Transition

Commande ffmpeg

Règles de conception visuelle

Arrière-plan

Disposition de la carte

Superpositions (toutes obligatoires)

Éléments de conception interdits

Règles de configuration

Exigences de mise en œuvre

Liste de contrôle qualité

Récupération après échec

Skills associés

steipete/bluebubbles

steipete/eightctl

steipete/blucli

steipete/bear-notes

steipete/camsnap

steipete/gifgrep

Commande directe `/saas-demo-maker`