30-second example rendered by this skill from examples/sitewright · 1280×720
What you get
- A 30 s MP4 at 1080p or 4K from one short brief and four screenshots
- Pencil wireframes worked out from each screenshot: panels, pictures, buttons, avatars and lines of text
- A handwritten before line and a typeset after line with an underline in your brand colour
- Two margin notes with arrows that point at the picture, button or spot you name
- Three feature beats that each go from a taped paper sketch to the real screen, with a caption
- An end card where the pencil traces your logo and writes your name before the colour inks in
- An original 100 BPM soundtrack with marimba, plucked strings and soft drums, free to use
- Two made-up example films to start from: a site builder and an idea board
- Open-source licenses for every part it builds on
Good fit
- Site builders, design tools and no-code or AI app builders whose whole pitch is "you sketch it, it ships" get a film that shows exactly that.
- Teams with only a few screenshots can still launch with motion, because the sketch of every screen is worked out from the screenshot itself.
- Agencies can make one film per client by swapping four screenshots, a logo, a colour and a few lines in the brief.
Not for
- Vertical or square social cuts (16:9 only)
- Showing clicks or typing inside the app (it shows still screens)
- Dark, photo-heavy screens (light screens with clear panels sketch best)
About this skill
A 30-second launch film that tells "from idea to shipped". It opens on textured paper, where a pencil writes your first line by hand and draws your main screen as a wireframe, with notes and arrows in the margin. Then the real interface wipes in box by box over the sketch and the paper falls away to your hero line in bold type. Three features each go from a taped pencil sketch to the real screen, and on the end card the pencil traces your logo before the colour inks it in. The wireframes are worked out from your own screenshots, and an original 100 BPM soundtrack puts a pencil scratch, whoosh or chime on every beat.
Example request
Make a sketch-to-ship launch film for our site builder: "Sketched on Monday," then "live by Friday.", three features from our screenshots, and an end card with sitewright.example.
How it works
Your agent
- 1
Ask three things
What is being launched, and what is the before and after?
- 2
Read the product and take four screenshots
It prints the page's title, description, headings, calls to action, colours and fonts, and saves
site.json(andlogo.svgwhen the header has an inline SVG logo; check it really is the logo). - 3
Write the brief
To sketch a screen from your own boxes instead of reading it, add
"boxes"toscreenor to a feature: a list of[x, y, w, h, kind]with x, y, w, h as fractions of the screenshot andkindone ofbox,text,picture,button,dot,rule. - 4
Make the film
It copies the template into
my-film/, writessoundtrack.wav(an original 100 BPM track with marimba, plucked strings, bass, soft drums and every sound effect on the cue sheet;--key Dor--key Gchanges its key,--no-musicskips it), applies the brief and rendersmy-film/renders/<name>-1080p.mp4. - 5
Check before you hand it over
Look at the sheet.
- 1
You get
What you need
- Node.js 22 or newer and FFmpeg (with
ffprobe) on the PATH. - Chrome, Chromium or Edge, only if you take the screenshots with
capture.mjs. SetCHROME_PATHif it isn't in the usual place. - HyperFrames runs through
npx, pinned to the version this template was tested with:npx --yes hyperframes@0.8.192. The first render downloads a headless Chrome of its own. Ifrendersays Chrome is missing, runnpx --yes hyperframes@0.8.192 browser ensureonce. - Network access to
fonts.googleapis.com(Caveat, Inter Tight, Inter) andcdn.jsdelivr.net(GSAP). See Troubleshooting if either is blocked.
Last checked Nov 2, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
A sketch is a mess of tiny shapes.
The screen is too busy for the reader (photos, dense tables, heavy textures). Give that screen
boxes, or use a calmer screenshot of the same feature.A sketch is almost empty.
The screen has very low contrast (pale grey on white). Use a screenshot with clearer panels, or give it
boxes.The render stops with "Chrome is missing".
Run
npx --yes hyperframes@0.8.192 browser ensureonce, then render again.
What’s in the download
- SKILL.md11.3 KB
- examples/
- examples/inkling/1.34 KBfinished briefs with their screens and logos · 2 files
- examples/sitewright/1.36 KB2 files
- scripts/
- scripts/apply-brief.mjs7.76 KBchecks the brief, copies the mark and screens, works out readable accent colours and writes
storyboard.js - scripts/capture.mjs23.9 KBreads a site (title, headings, colours, logo) and takes screenshots with your Chrome
- scripts/chrome.mjs3.63 KB
- scripts/color.mjs1.40 KB
- scripts/make-film.mjs3.73 KBone command from brief to MP4 (template, music, brief, render)
- scripts/music.mjs11.8 KBwrites the original 100 BPM soundtrack with the pencil, whoosh, tape and ink sounds on the cue sheet
- template/
- template/cues.json876 Bthe beat sheet the picture and the music share
- template/film.css9.61 KBpaper, pencil, windows and type
- template/film.js35.5 KBthe five scenes on one GSAP timeline: pencil, sketch, reveal, captions, end card
- template/hyperframes.json298 B
- template/index.html3.91 KB
- template/layout.js16.5 KBreads a screenshot's layout and returns the boxes the pencil draws
- template/package.json198 B
- template/storyboard.js117 B
- NOTICE.md930 B
- TESTED.json740 B
21 files · 135 KB · installs to ~/.claude/skills/sketch-to-ship-film for Claude Code and ~/.agents/skills/sketch-to-ship-film for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- MP4 · 30 s · 1080p or 4K · with music
- Needs
- Node.js 22+, FFmpeg and Chrome
- Series
- Launch & Demo Films · 5 skills
- Updated
- Nov 2, 2026
- Checked
- Nov 2, 2026: its own commands ran and passed. That is a working check, not a security audit.
Written for
See all 31 agents that read skill folders.
Install guides
For your agent
Generates with
Installed it? Tell others how it went. Reviews come from people who installed this skill.
Write a reviewFAQ
Do I have to draw the sketches?
No. layout.js reads each screenshot when the film builds: it finds panels, cards, buttons, pictures and lines of text and turns each into a pencil shape. The same screenshot always gives the same sketch. For a busy screen you can list its boxes in the brief instead.
What do I need to give it?
Four 16:10 screenshots (one main screen and one per feature), a square logo, your brand colour and a brief with a handwritten line of up to 28 characters, a typeset line of up to 34, three features and an end line. The brief checker lists every line that is too long.
Where does the music come from?
music.mjs writes it from the same cue sheet as the picture: a 100 BPM track with marimba, plucked strings, bass and soft drums, with a pencil scratch while the pencil draws, a whoosh on each reveal, a tape crackle and a chime when the logo inks in. It is generated by code in the package, so you may use it anywhere, or you can pass your own track.
Which agents is Sketch to Ship Film written for?
Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.
Do I own what I make with it?
Yes. Everything your agent makes with this skill is yours, including for client and commercial work.
What if it doesn’t work for me?
Email support@lookbk.dev within 7 days of buying and we’ll fix it or refund you.
Credits and licensesBuilt on heygen-com/hyperframes
What Lookbk adds on top of heygen-com/hyperframes (Apache-2.0): Lookbk made this package from scratch: the layout reader, pencil, paper, reveals, end card, music generator and both example apps were written for it on HyperFrames.
Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.