Make a prototype
Capture your app's screens, turn them into a clickable site, and have Claude add the new feature.
Video A concept film0:46
A prototype is the starting point for a concept film. This takes you from a brief to a clickable prototype with the new feature in it.
Before you start
- Your app is connected and running. See Connect your app.
- Claude Code is set up. See Use Showreel Studio from Claude Code.
In the app
- Open Prototypes and press New prototype.
- Fill in the dialog:
- Name: lower-case letters, numbers and dashes, such as
team-review. - Title: the feature's name.
- Start from: your app's screens, or a new product in a kit's look.
- Brief: what the feature does, for whom, and what they see, in two or three sentences.
- Screens of the app it starts from: for each screen, an id, a title and a path. Use the text of the link or tab that reaches the screen as the title, because the prototype uses titles to make the app's navigation work.
- Name: lower-case letters, numbers and dashes, such as
- Press Create the prototype. Its page opens.
- Press the capture button, such as Capture 3 screens, to save each screen. Each gets a score: faithful at 0.98 or above, check below it. Look at any marked check before you build on it.
- Press Make the site to turn the captures into one clickable site. Open the prototype shows it.
- Under Add the feature, with Claude, press Copy and paste the prompt into Claude Code in your project's folder.
- When Claude has finished, press Take stills of every screen to check the work.
The prototype also shows live and clickable on its page.
In the terminal
showreel prototype new team-review --title "Team review" --brief "Reviewers leave comments pinned to a moment in the film." --screens "overview|Overview|goto:https://app.example.com/, wait:main h1"showreel prototype capture team-reviewshowreel prototype scaffold team-reviewThen ask Claude Code to "Use the showreel-prototype skill to add this feature to prototypes/team-review", and check the result:
showreel prototype shots team-reviewAdd --profile to capture for an app you sign in to. Use --kit <kit> with new to start from a kit instead of an app.