SiteTell Screenshot Maker

I spent the morning procrastinating working on my SaaS and ended up messing around with Claude Code. I ended up with a small tool that makes marketing screenshots and videos for my side project, SiteTell (https://www.getsitetell.com/). The Video above came from one prompt. I didn't open Figma, a screen recorder or a video editor just gave the tool a prompt and got the output around 90 seconds later. The idea came from a video about Moonjar (shout out to Chris Raroque). I wanted to see how far I could get with just Claude Code and a few scripts. How it works • Capture. A Node script uses Playwright to screenshot the page. It has a --hide option (site nav, cookie banners, chat widgets) and a --clip option that crops to the bounding box of chosen elements plus padding. The Playwright MCP is connected too, for pages that need clicking or logging in first. • Render. An HTML/CSS template takes a JSON spec (frame, background, caption, size) and Playwright exports it at 2x. Backgrounds are generated rather than stock photos: big blurred colour blobs with grain, or a paper texture from SVG noise. • Video. Scenes are plain HTML with CSS/Web Animations. The recorder pauses every animation, steps currentTime forward one frame at a time at 30fps, screenshots each frame, and ffmpeg-static joins them into MP4, WebM or GIF. Because nothing depends on how fast my machine is, the output is crisp with no dropped frames. Headless Chromium doesn't show a mouse cursor, so there's a fake one driven by waypoints. • The skill. This is where the judgement lives. SKILL.md tells Claude how to pick a style (whole page = macOS window on a generated background; a single feature = tight crop, flat background), what to cut (site nav, empty space), and to check its own output before handing it over. A separate style.md holds the design rules. - The biggest quality jump came from crop and scale, not effects. My first attempt showed the whole page with a bright background and looked really amateur, I think there's still a lot that can be worked on and iterated to make it look even better. - Every time something looked off, I added a rule to http://style.md instead of fixing that one image. After a morning of that, the defaults are genuinely good. - The skill's description matters more than you'd think. It's the only part Claude sees before deciding whether to load the skill. - For personal use you don't need your own MCP server. A skill plus a couple of Node scripts gets you most of the way. Stack: Claude Code (VS Code extension), Playwright and the Playwright MCP, Node, ffmpeg-static. I'm current just keeping it as a personal tool for now. But I think it has a lot of legs for something more professional depending on the use I get out of it. What are you usually using for launch material and screenshot capture?