Ship to Show

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. 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 prototype

   Output:

   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. 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 prototype

   Output:

   Project running on localhost

   • Dependencies installed
   • Build with no errors
   • Interface visible on localhost
   • Navigation working

3. 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 prototype

   Output:

   Filmable prototype with 5+ user flows

   • 5 user flows identified
   • Secondary screens completed
   • Loading states added
   • Smooth transitions between views
   • Realistic data injected

4. 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 prototype

   Output:

   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. 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 screenshots

   Output:

   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. 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 assets

   Output:

   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. 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 pack

   Output:

   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.

Source code and documentation

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