Run 1Sketch to render compare“Turn a sketch of a chair into "a studio render in oak" and compare them. About us: Product design tool Formcast; a sketch and a render. Everything I have is in this folder. If something is missing, use a plausible placeholder and tell me what you assumed.”

Runs in: Claude Code
Codex
Cursor
Gemini CLI
GitHub Copilot
OpenCode
Install guides: Claude Code Codex Cursor Gemini CLI GitHub Copilot OpenCode How to install a skill
Generates with: Your agent's model
Tested with: Claude Code 2.1.322Claude Sonnet 5.51 real run, 10 Nov
Needs: Node 22+Chromeffmpeg
Licence: Recaply licence

Sketch to Render Compare

A pencil draws a sketch, a prompt paints it into a finished render in soft dabs, and a handle sweeps to compare them.

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

Makes a short launch-film scene as an MP4 clip: a pencil draws a sketch, a prompt paints it into a finished render in soft dabs, and a handle sweeps to compare them. It shows the person's own product, words, screenshots or pictures in real type and smooth motion (about 7 s), works alone as a social clip or as one scene in a longer launch film, at 16:9, 9:16, 1:1 or 4:5. Renders locally with Chrome and ffmpeg; no video model, no key and no cost. Use when a design, architecture or image tool turns rough sketches into finished pictures, or when someone asks for a "sketch to render compare" animation, motion graphic or product clip.

By RecaplyUpdated 11 Nov

Similar skills

All 735 skills

Dot to Logo Reveal

Dot that folds into your logo, as MP4

Prompt Builds a Button

Typed ask that builds a button

Hands-off Mode Switch

Switch from ask-first to full auto

Ad Scan and Remake

Ads scanned, ranked and remade

What you get

An MP4 scene of about 7 s at 16:9, 9:16, 1:1 or 4:5
Your product's words, screenshots and logo in real type
Works alone or as one scene in a longer film

Good fit

When a design, architecture or image tool turns rough sketches into finished pictures

Not for

A whole launch film in one go (use a launch film)
Filmed footage or people on camera

About this skill

You say

Turn a sketch of a chair into "a studio render in oak" and compare them. About us: Product design tool Formcast; a sketch and a render. Everything I have is in this folder. If something is missing, use a plausible placeholder and tell me what you assumed.

It said back

I made the clip, but the folder had no chair sketch or oak render, so the chair is a stand-in I drew myself.

Video: sketch-to-render-compare/chair-sketch-to-render.mp4. It is 1920×1080 (16:9), 6.35 s, 30 fps, in the studio look. It has no sound, since there was no music file.

What it did in run 1

sketch-to-render-compare
ls -la
./sketch-6.png
./photo-6.png
./logo.svg
which magick montage; ls .claude/skills/*/; python3 -c "print(1)"
./photo-1.png
./screen.png
mkdir -p sketch-to-render-compare && cd sketch-to-render-compare && cat > shapes.txt <<'EOF' EOF rm shapes.txt S='<rect x="410" y="470" width="360" height="30"/>' cat > sketch.svg <<'EOF' <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="900" viewBox="0 0 1200 900"><rect width="1200" height="900" fill="#fbfaf6"/> <g fill="none" stroke="#2b2b2b" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"> <polygon points="385,770 420,770 456,500 492,190 452,190 414,470"/> <polygon points="455,250 485,250 480,330 450,330"/> <rect x="410" y="470" width="360" height="30"/> <polygon points="728,500 764,500 756,770 730,770"/> <rect x="430" y="650" width="320" height="16"/> <path d="M300 790 H900" stroke-width="3" stroke-dasharray="4 10"/> </g></svg> EOF cat > render.svg <<'EOF' <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="900" viewBox="0 0 1200 900"> <defs> <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#f4f2ee"/><stop offset="0.82" stop-color="#e4e1db"/><stop offset="1" stop-color="#d6d2ca"/></linearGradient> <linearGradient id="oak" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#d9ac6d"/><stop offset="1" stop-color="#b5844a"/></linearGradient> <linearGradient id="oakd" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#a97a42"/><stop offset="1" stop-color="#c89859"/></linearGradient> <radialGradient id="sh"><stop offset="0" stop-color="#000" stop-opacity=".35"/><stop offset="1" stop-color="#000" stop-opacity="0"/></radialGradient> <filter id="b"><feGaussianBlur stdDeviation="2"/></filter> </defs> <rect width="1200" height="900" fill="url(#bg)"/> <ellipse cx="600" cy="780" rx="360" ry="34" fill="url(#sh)"/> <g stroke="#8a5f30" stroke-opacity=".28" stroke-width="2" fill="none"> <g fill="url(#oakd)" stroke="#8a5f30" stroke-opacity=".5" stroke-width="1.5"> <polygon points="385,770 420,770 456,500 492,190 452,190 414,470"/></g> <g fill="url(#oak)" stroke="#8a5f30" stroke-opacity=".5" stroke-width="1.5"> <polygon points="455,250 485,250 480,330 450,330"/> <polygon points="728,500 764,500 756,770 730,770"/> <rect x="430" y="650" width="320" height="16"/> <rect x="410" y="470" width="360" height="30"/></g> <path d="M415 478 H765 M415 486 C520 482 640 490 765 485 M420 493 H760" /> <path d="M740 520 V760 M750 520 V760 M440 656 H745 M460 205 L428 450 M472 220 L440 440 M395 760 L428 520"/> </g> <rect x="410" y="470" width="360" height="7" fill="#fff" opacity=".35"/> <rect x="410" y="494" width="360" height="6" fill="#5a3a18" opacity=".25"/> <ellipse cx="745" cy="772" rx="22" ry="4" fill="#000" opacity=".25" filter="url(#b)"/> <ellipse cx="402" cy="772" rx="26" ry="4" fill="#000" opacity=".25" filter="url(#b)"/> </svg> EOF for f in sketch render; do echo '<body style="margin:0">'"$(cat $f.svg)" > $f.html; done C="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"; ls "$C" && for f in sketch render; do "$C" --headless --screenshot=$PWD/chair-$f.png --window-size=1200,900 --hide-scrollbars file://$PWD/$f.html 2>&1 | tail -1; done; ls
cd sketch-to-render-compare 2>&1; pwd; ls
./sketch-to-render-compare/sketch.svg
./sketch-to-render-compare/render.svg
cd ./sketch-to-render-compare && cp ../logo.svg . && C="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"; for f in sketch render; do "$C" --headless --screenshot=$PWD/chair-$f.png --window-size=1200,900 --hide-scrollbars file://$PWD/$f.svg 2>&1 | tail -1; done; ls
cd ./sketch-to-render-compare && cp ../logo.svg . && ls /Applications | grep -i -E "chrome|edge|chromium"; which ffmpeg node
cp ./logo.svg ./sketch-to-render-compare/logo.svg
node .claude/skills/sketch-to-render-compare/scripts/check.mjs
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --screenshot=./sketch-to-render-compare/chair-sketch.png --window-size=1200,900 --hide-scrollbars file://./sketch-to-render-compare/sketch.svg
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --screenshot=./sketch-to-render-compare/chair-render.png --window-size=1200,900 --hide-scrollbars file://./sketch-to-render-compare/render.svg
./tools/shot.mjs
node tools/shot.mjs ./sketch-to-render-compare
./sketch-to-render-compare/chair-render.png
./sketch-to-render-compare/film.json
node .claude/skills/sketch-to-render-compare/scripts/film.mjs sketch-to-render-compare/film.json --check
./sketch-to-render-compare/film-check.png
node .claude/skills/sketch-to-render-compare/scripts/film.mjs sketch-to-render-compare/film.json
Done

10 Nov 2026 · Claude Code 2.1.322 with Claude Sonnet 5.5 · 1 min 32 s · $0.28 of API use

Questions

Is Sketch to Render Compare free?

No. Sketch to Render Compare 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 Sketch to Render Compare?

Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot and OpenCode.

What do I get when I buy Sketch to Render Compare?

A ZIP of the whole skill folder (54 KB): the SKILL.md your agent follows and its 11 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 Sketch to Render Compare?

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 ./sketch-to-render-compare with your agent's flag.

What do I get from Sketch to Render Compare?

An MP4 scene of about 7 s at 16:9, 9:16, 1:1 or 4:5. Your product's words, screenshots and logo in real type. Works alone or as one scene in a longer film.

What does Sketch to Render Compare need?

Node 22+, Chrome and ffmpeg, and no API key. Each use costs nothing beyond your agent.

How big is Sketch to Render Compare?

12 files, about 35,639 tokens in all. The SKILL.md is about 2,185 tokens, and your agent reads it only when the job fits.

What does a run cost?

Our 1 runs took 1 min 32 s to 1 min 32 s and $0.28 to $0.28 of API use each, in Claude Code with claude-sonnet-5-5. On a Claude plan, a run counts toward your usage instead.

Do I have to name Sketch to Render Compare to use it?

Type /sketch-to-render-compare first to make sure it loads. Without it, Claude Code may judge a small job simple enough to do without the skill.