Skip to content
MéthodologieClaude Code

Ship to Show

Un framework en 7 phases pour transformer un prototype en case study portfolio

Victor Soussan
Victor Soussan·25 mars 2026·12 min

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. 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 prototypeSortie: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. 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 brutSortie:Projet exécutable sur localhost
  • Dépendances installées
  • Build sans erreur
  • Interface visible sur localhost
  • Navigation fonctionnelle

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 fonctionnelSortie: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. 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 filmableSortie: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. 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 screenshotsSortie: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. 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 assetsSortie: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. 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égrationSortie: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.

Voir le case study RiskOS

Code source et documentation

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

Voir sur GitHub
Victor Soussan

Victor Soussan

Lead Product Designer

Envie de collaborer sur un projet similaire ? Discutons.

LinkedIn Email