Free skill for Claude Code
Sketch it.
Then make it real.
Give Claude any 3D model. It draws it as a designer’s marker sketch, line by line, then wipes to the real render. You get a video at any size, or a live version for your website.
Works with GLB GLTF OBJ FBX STL PLY USDZ 3MF DAE and three.js code.
Just ask for it.
No settings to learn. Say what you want in plain words and Claude picks the size, paper and framing, shows you stills first, then makes the video.
I built a desk lamp in three.js code. Turn it into one of those sketch-to-render videos, widescreen, and give me a see-through version I can drop over other footage.
Claude lamp.mp4 · lamp-seethrough.mov · stills · review sheet
Make a square red-paper sketch of my boombox for Instagram. Skip the colour, go straight from the sketch to the real thing.
Claude boombox.mp4 on red paper, 1080 × 1080
Now the alarm clock, vertical, for Stories.
Claude alarm-clock.mp4, 1080 × 1920
Or put it on your website, live.
Ask for the web version and you get a small folder and a few lines of code to paste. This one draws on as you scroll. Scroll back and it rewinds.
- Circles & boxRound parts get circles, the whole thing a construction box.
- OutlinesThe main outer lines go in.
- PencilA faint first pass over every edge.
- TracingDarker lines traced over the pencil.
- MarkerMarker fill and a hatched shadow.
- ColourThe object’s own colours, laid in like marker.
- RenderA wipe to the real 3D render.
Put the lamp on my product page so it sketches itself in as people scroll, and they can drag to spin it at the end.
Claude a folder for your site, and this:
<!-- put the sketch-to-3d folder on your site, then paste -->
<section data-sketch-track style="height: 300vh">
<div id="lamp" style="position: sticky; top: 0; height: 100vh"></div>
</section>
<script type="module">
import {mount} from '/sketch-to-3d/sketch-player.js';
mount(document.getElementById('lamp'), {play: 'pin', end: 'spin'});
</script>Also comes as a React / Next.js component. Other ways to play: on load, when it scrolls into view, on hover, on click, or on a loop. Each one gets its own tab on a preview page so you can pick.
Stop on the sketch. Spin it.
It doesn’t have to end on the render. Stop on the drawing and people can turn the sketch itself, because it’s live 3D, not a picture. Try another paper.
Install in a minute.
You need Claude Code, Node 18 or newer and ffmpeg (on a Mac: brew install ffmpeg). Paste these into a terminal, one at a time.
-
Download the skill into Claude’s skills folder.
git clone https://github.com/dannystuart/sketch-to-3d.git ~/.claude/skills/sketch-to-3d -
Install what it needs to draw and record. A one-time download of about 500 MB, so give it a minute or two.
cd ~/.claude/skills/sketch-to-3d && npm install && npx playwright install chromium -
Open Claude Code anywhere and ask for a sketch of your model.
Make a marker sketch video of chair.glb, square, for Instagram.
What you get.
- Video
- An MP4 at any size: vertical, square, widescreen, 4K. About seven seconds.
- See-through video
- The paper drops out, so you can lay the drawing over other footage in Premiere, Final Cut, DaVinci or Keynote.
- Stills
- One picture per stage, shown to you before the video is made, plus a review sheet of ten moments.
- Web folder
- The player, your model and a poster image. One folder to put on your site.
- Code to paste
- For plain HTML, Webflow, Framer, React or Next.js. A preview page lets you try every way of playing.
- Self-check
- It checks its own framing and that lines only ever build up, and tells you what it found.
Things you can ask for
- Four papers: white, pencil, red sheet, blueprint
- Closer, further, a different angle, a close-up on one part
- No colour stage, or stop on the sketch
- A longer hold on the final render
- Hide a stand, a floor or clear glass
Good to know
- Made objects work best. Raw 3D scans come out as scribble.
- Bending (rigged) parts and point clouds aren’t drawn.
- The small see-through file needs a Mac to make. The larger one works anywhere.