Ship to Show

Le problème

Les designers et développeurs construisent des prototypes mais les documentent rarement dans leur portfolio. Le travail de production d'un case study (rédaction, vidéos, déploiement, intégration) prend plusieurs jours et mobilise des compétences variées : motion design, rédaction, devops. La plupart des prototypes restent dans un dossier local sans jamais être publiés.

Ship to Show structure ce travail en 7 phases exécutables par un agent IA. Chaque phase a un prompt structuré, une checklist de sortie et un livrable concret. Le processus complet prend environ 2h30.

Les 7 phases

1. 1. CADRER

   15 min

   Identifier le secteur, les utilisateurs cibles, le problème adressé et le point de vue de design. Cette phase pose les fondations narratives du case study en extrayant les décisions structurantes du prototype.

   Entrée:

   Fichier de code ou prototype

   Sortie:

   Case study v1, CLAUDE.md

   • Secteur et contexte identifiés
   • Utilisateurs cibles décrits
   • Problème formulé en une phrase
   • Point de vue design explicité
   • Fichier case-study v1 généré
   • CLAUDE.md du projet créé

2. 2. STRUCTURER

   10 min

   Rendre le prototype exécutable en local. Installer les dépendances, corriger les erreurs de build, vérifier que l'interface tourne dans un navigateur. Aucun enrichissement à ce stade, seulement la stabilité.

   Entrée:

   Prototype brut

   Sortie:

   Projet exécutable sur localhost

   • Dépendances installées
   • Build sans erreur
   • Interface visible sur localhost
   • Navigation fonctionnelle

3. 3. ENRICHIR

   30-45 min

   Ajouter les parcours manquants pour produire au moins 5 vidéos. Compléter les écrans secondaires, les états de chargement, les transitions entre vues. Le prototype doit raconter une histoire cohérente quand on le filme.

   Entrée:

   Prototype fonctionnel

   Sortie:

   Prototype filmable avec 5+ parcours

   • 5 parcours utilisateur identifiés
   • Écrans secondaires complétés
   • États de chargement ajoutés
   • Transitions entre vues fluides
   • Données réalistes injectées

4. 4. FILMER

   30 min

   Produire les vidéos via Puppeteer et FFmpeg. Chaque vidéo capture un parcours utilisateur complet avec des timings calibrés. Les screenshots servent de visuels d'appui pour le case study.

   Entrée:

   Prototype filmable

   Sortie:

   5 à 8 vidéos MP4 + screenshots

   • Scripts Puppeteer écrits pour chaque parcours
   • Vidéos MP4 générées (1080p minimum)
   • Timings vérifiés (pas de frames vides)
   • Screenshots des écrans clés exportés
   • Fichiers nommés et organisés

5. 5. RACONTER

   20 min

   Rédiger le case study avec une structure narrative : contexte, problème, approche, résultat. Le texte est bilingue (FR/EN) et calibré pour un portfolio professionnel. Chaque section est associée à une vidéo ou un screenshot.

   Entrée:

   Vidéos et screenshots

   Sortie:

   Case study FR/EN complet

   • Structure narrative définie (contexte, problème, approche, résultat)
   • Texte FR rédigé
   • Texte EN rédigé
   • Vidéos et screenshots associés à chaque section
   • Relecture tonale (pas de jargon, pas de superlatifs)

6. 6. EMPAQUETER

   15 min

   Créer le dépôt GitHub, déployer sur Vercel, et produire un fichier d'intégration autoportant. Ce fichier contient tout ce dont le site portfolio a besoin pour afficher le projet : données, chemins des assets, métadonnées SEO.

   Entrée:

   Case study et assets

   Sortie:

   Pack complet (GitHub, Vercel, fichier d'intégration)

   • Dépôt GitHub créé et poussé
   • Déploiement Vercel fonctionnel
   • Fichier d'intégration généré
   • Assets uploadés (vidéos, images)
   • URL de démo vérifiée

7. 7. PUBLIER

   variable

   Intégrer le case study dans le site portfolio. Créer la page projet, connecter les données, vérifier le rendu sur mobile et desktop. Le projet devient visible et partageable.

   Entrée:

   Pack d'intégration

   Sortie:

   Page projet publiée sur le portfolio

   • Page projet créée dans le portfolio
   • Données connectées depuis le fichier d'intégration
   • Vidéos et images chargées correctement
   • Rendu vérifié sur mobile et desktop
   • SEO : titre, description, Open Graph
   • Page accessible via l'URL publique

Installation comme skill Claude Code

Une commande pour installer le skill. Ensuite, taper /ship-to-show dans n'importe quel projet pour lancer le framework.

mkdir -p ~/.claude/skills/ship-to-show && curl -o ~/.claude/skills/ship-to-show/SKILL.md https://raw.githubusercontent.com/marcus-clay/ship-to-show/main/SKILL.md

Puis invoquer avec /ship-to-show

Exemple : RiskOS

Le framework a été conçu et testé sur RiskOS, un prototype de détection de fraude augmentée par IA agentique. Le case study complet a été produit en une session de 2h30, du prototype brut à la page publiée.

Code source et documentation

Le skill complet, les prompts de chaque phase et la documentation sont disponibles sur GitHub.