Video
Dot to Logo Reveal
Dot that folds into your logo, as MP4
- Runs in
- Claude Code
- Codex
- Cursor
Gemini CLI
GitHub Copilot
OpenCode
- Generates with
- Your agent's model
- Tested with
- Claude Code 2.1.322Claude Opus 5.51 real run, 9 Nov
- Needs
- Node 22+Chromeffmpeg
- Licence
- Recaply licence
Prompt Builds a Button
A prompt asks for a button; it builds itself on the page and the pointer clicks it.
1 view
$9.99once, yours to keep
Every premium skill and prompt, one plan$19.99 a month. Cancel any time.
What you get when you buy
Payments are non-refundable. See our Terms of service.
Yours. Download it, then add it to your agent.
A request types into a prompt bar, a button draws itself on a page (outline, then colour and label) and the pointer clicks it. A 4 to 10 second clip in 16:9, 9:16, 1:1 or 4:5, as an MP4 on its own or as one scene of a longer launch film. Renders locally with Chrome and ffmpeg: no video model, no key and no cost. Use when an AI site, app or UI builder shows generating interface.
By RecaplyUpdated 11 Nov
Similar skills
All 735 skills
Video
Video
Hands-off Mode Switch
Switch from ask-first to full auto
Video
Ad Scan and Remake
Ads scanned, ranked and remade
Video
Wall of Screens
Screens switching on with pictures
Who Prompt Builds a Button is for
What you get
- An MP4 scene at 16:9, 9:16, 1:1 or 4:5
- A request types into a prompt bar, a button draws itself on a page (outline, then colour and label) and the pointer clicks it
- Works alone or as one scene in a longer film
Good fit
- When an AI site, app or UI builder shows generating interface
Not for
- A whole launch film in one go (use a launch film)
- Filmed footage or people on camera
About this skill
You say
Prompt "Add a buy button under the photo" builds "Buy now", toast "Added to cart".
It said back
I made the clip. It's at launch-scene/prompt-to-button.mp4: 1920×1080 (16:9), 5.6 seconds, 30 fps, about 0.8 MB. It cost nothing.
What happens: "Add a buy button under the photo" types into the prompt bar. A "Buy now" button then draws itself on the page: first the outline, then the colour and label. The pointer clicks it and an "Added to cart" toast appears. I checked a still from the end of the clip and every word is readable, with nothing cut off or overlapping.
Show more
What it did in run 1
- prompt-to-button-scene
- S=.claude/skills/prompt-to-button-scene; node $S/scripts/check.mjs; ls -a; node $S/scripts/film.mjs --scenes | head -40
- node .claude/skills/prompt-to-button-scene/scripts/check.mjs; ls -a; node .claude/skills/prompt-to-button-scene/scripts/film.mjs --scenes | head -40
- cat logo.svg
- mkdir launch-scene && cp logo.svg launch-scene/ && cat > launch-scene/film.json <<'EOF' { "look": "swiss", "size": "16:9", "logo": "logo.svg", "accent": "#2E8B57", "out": "prompt-to-button.mp4", "scenes": [ { "scene": "prompt-button", "ask": "Add a buy button under the photo", "button": "Buy now", "after": "Added to cart" } ] } EOF node .claude/skills/prompt-to-button-scene/scripts/film.mjs launch-scene/film.json --check
- ./launch-scene/film.json
- cp logo.svg launch-scene/ && node .claude/skills/prompt-to-button-scene/scripts/film.mjs launch-scene/film.json --check
- ./launch-scene/film-check.png
- cd launch-scene && sed 's/"swiss"/"riso"/; s/film-check/x/' film.json > riso.json && node ../.claude/skills/prompt-to-button-scene/scripts/film.mjs riso.json --check
- ./launch-scene/riso.json
- node .claude/skills/prompt-to-button-scene/scripts/film.mjs launch-scene/riso.json --check; ls launch-scene
- ./launch-scene/film-check.png
- ./launch-scene/film.json
- rm launch-scene/riso.json && node .claude/skills/prompt-to-button-scene/scripts/film.mjs launch-scene/film.json && ffprobe -v error -show_entries format=duration,size:stream=width,height -of default=nw=1 launch-scene/prompt-to-button.mp4
- Done
Questions
Is Prompt Builds a Button free?
No. Prompt Builds a Button costs $9.99 once and stays in your Recaply account, or it comes with the Recaply plan ($19.99 a month), which opens every premium skill and prompt.
Which agents can use Prompt Builds a Button?
Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode.
What do I get when I buy Prompt Builds a Button?
A ZIP of the whole skill folder (70 KB): the SKILL.md your agent follows and its 12 other files, the references, templates and scripts it uses. You download it from this page whenever you need it, and install it in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode. The Recaply plan opens it too, with every other premium skill and prompt.
How do I install Prompt Builds a Button?
Buy it, then download the ZIP from this page. For Claude Code, unzip it into .claude/skills/ in your project. For Codex, Cursor and Gemini CLI, unzip it and run npx skills add ./prompt-to-button-scene with your agent's flag.
What do I get from Prompt Builds a Button?
An MP4 scene at 16:9, 9:16, 1:1 or 4:5. A request types into a prompt bar, a button draws itself on a page (outline, then colour and label) and the pointer clicks it. Works alone or as one scene in a longer film.
What does Prompt Builds a Button need?
Node 22+, Chrome and ffmpeg, and no API key. Each use costs nothing beyond your agent.
How big is Prompt Builds a Button?
13 files, about 50,349 tokens in all. The SKILL.md is about 1,661 tokens, and your agent reads it only when the job fits.
What does a run cost?
Our 1 runs took 56 s to 56 s and $0.30 to $0.30 of API use each, in Claude Code with claude-opus-5-5. On a Claude plan, a run counts toward your usage instead.
Do I have to name Prompt Builds a Button to use it?
Type /prompt-to-button-scene first to make sure it loads. Without it, Claude Code may judge a small job simple enough to do without the skill.