Skip to content
MethodologyClaude Code

Ship to Show

A 7-phase framework to turn a prototype into a portfolio case study

Victor Soussan
Victor Soussan·March 25, 2026·12 min

The problem

Designers and developers build prototypes but rarely document them in their portfolio. Producing a case study (writing, videos, deployment, integration) takes several days and requires varied skills: motion design, writing, devops. Most prototypes stay in a local folder and never get published.

Ship to Show structures this work into 7 phases executable by an AI agent. Each phase has a structured prompt, an exit checklist, and a concrete deliverable. The full process takes about 2h30.

The 7 phases

1. FRAME

15 min

Identify the sector, target users, the problem addressed, and the design point of view. This phase lays the narrative foundations of the case study by extracting the structural decisions from the prototype.

Input:Code file or prototypeOutput:Case study v1, CLAUDE.md
  • Sector and context identified
  • Target users described
  • Problem stated in one sentence
  • Design point of view made explicit
  • Case study v1 file generated
  • Project CLAUDE.md created

2. STRUCTURE

10 min

Get the prototype running locally. Install dependencies, fix build errors, verify the interface renders in a browser. No enrichment at this stage, only stability.

Input:Raw prototypeOutput:Project running on localhost
  • Dependencies installed
  • Build with no errors
  • Interface visible on localhost
  • Navigation working

3. ENRICH

30-45 min

Add the missing user flows to produce at least 5 videos. Complete secondary screens, loading states, transitions between views. The prototype must tell a coherent story when filmed.

Input:Working prototypeOutput:Filmable prototype with 5+ user flows
  • 5 user flows identified
  • Secondary screens completed
  • Loading states added
  • Smooth transitions between views
  • Realistic data injected

4. FILM

30 min

Produce videos via Puppeteer and FFmpeg. Each video captures a complete user flow with calibrated timings. Screenshots serve as supporting visuals for the case study.

Input:Filmable prototypeOutput:5 to 8 MP4 videos + screenshots
  • Puppeteer scripts written for each flow
  • MP4 videos generated (1080p minimum)
  • Timings verified (no empty frames)
  • Key screen screenshots exported
  • Files named and organized

5. NARRATE

20 min

Write the case study with a narrative structure: context, problem, approach, result. The text is bilingual (FR/EN) and calibrated for a professional portfolio. Each section is paired with a video or screenshot.

Input:Videos and screenshotsOutput:Complete FR/EN case study
  • Narrative structure defined (context, problem, approach, result)
  • FR text written
  • EN text written
  • Videos and screenshots paired with each section
  • Tone review (no jargon, no superlatives)

6. PACKAGE

15 min

Create the GitHub repository, deploy on Vercel, and produce a self-contained integration file. This file contains everything the portfolio site needs to display the project: data, asset paths, SEO metadata.

Input:Case study and assetsOutput:Complete pack (GitHub, Vercel, integration file)
  • GitHub repository created and pushed
  • Vercel deployment working
  • Integration file generated
  • Assets uploaded (videos, images)
  • Demo URL verified

7. PUBLISH

variable

Integrate the case study into the portfolio site. Create the project page, connect the data, verify rendering on mobile and desktop. The project becomes visible and shareable.

Input:Integration packOutput:Project page published on portfolio
  • Project page created in portfolio
  • Data connected from integration file
  • Videos and images loading correctly
  • Rendering verified on mobile and desktop
  • SEO: title, description, Open Graph
  • Page accessible via public URL

Install as a Claude Code skill

One command to install the skill. Then type /ship-to-show in any project to launch the 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

Then invoke with /ship-to-show

Example: RiskOS

The framework was designed and tested on RiskOS, an AI-augmented fraud detection prototype. The complete case study was produced in a single 2h30 session, from raw prototype to published page.

View the RiskOS case study

Source code and documentation

The full skill, phase prompts, and documentation are available on GitHub.

View on GitHub
Victor Soussan

Victor Soussan

Lead Product Designer

Interested in working on a similar project? Let's talk.

LinkedIn Email