
Claude skill that turns any two places into a pixel-art fly-through of the road
A Claude Code skill that turns any two places into a pixel-art fly-through of the real road. Ask Claude for "a pixel
以下正文同步自 Hacker News 最新,版权归原站所有,已转换为易读排版。
A Claude Code skill that turns any two places into a pixel-art fly-through of the real road. Ask Claude for "a pixel path from Bath to Bristol" and it:
Bath, England: real streets from OpenStreetMap, art generated with the moderate kit.
A first-person, pixel-art view of any real road, built from the real map. Useful wherever you want a real place or route on screen:
A folder with an index.html. Open it through any static web server and you are moving down the real road:
Before anything slow happens, the first step prints an estimate for your route, and the skill asks you to choose. Only the art costs money: $0.18 a picture at RetroDiffusion's rd_pro__default (October 2026). Cost depends on the number of regions (distinct looks along the route), not on distance.
The levels are nested, so moving up a level only pays for the new pictures. The exact quote is free and comes after the bake. Allow about 25% on top for re-rolls: in testing, 10% (Bath) to 34% (Manhattan) of pictures came back cut off or on a background. The cleanup dropped them, and the self-check re-rolled them within the budget.
Bath to Bristol at moderate (two regions, Georgian Bath, then Victorian Keynsham and Bristol, 32 pictures, $5.76):
Kyoto Station to Kinkaku-ji, Japan, at sparse (one region, four pictures, $0.72):
Both runs passed the full self-check, including the sweep: 627 and 345 moving frames, with no sky through or between buildings. The estimate printed after routing matched the exact quote in every test run.
/plugin marketplace add jonwheatley/pixel-path /plugin install pixel-path@pixel-path
By hand. Copy this folder into your skills folder, so that the skill is at ~/.claude/skills/pixel-path/SKILL.md. For a single project, use .claude/skills/pixel-path/ inside it.
Then ask Claude: "make me a pixel path from Paris to Versailles".
Node 18 or newer. No npm packages are needed to build a route.
A RetroDiffusion account with credit, for real art: https://www.retrodiffusion.ai?ref=YBQJM823. This is an affiliate link (the author of this skill gets a referral).
Create an API key and set it in your own terminal with export RETRODIFFUSION_API_KEY=....
On a Mac you can store it in the Keychain instead: security add-generic-password -s pixel-path -a retrodiffusion -w.
Never paste the key into a chat. The skill never asks for it and never prints it.
Without an account, placeholders cost nothing.
For the self-check's screenshots: Node 20 or newer with Playwright and Chromium (npm i -D playwright && npx playwright install chromium). Without them, the layout and art checks still run.
Network access while baking to Nominatim, OSRM, Overpass, AWS Terrain Tiles and Wikidata. Baking takes about 20 to 60 seconds per 10 km.
How it checks itself
The skill doesn't call a route done when the code runs. It calls it done when the pictures pass:
Every building is a solid. Each building is laid along its real line and always gets a shaded end wall, so it never reads as a flat card. A neighbour that joins it paints over the part it covers.
Cleanup. Each picture is cleaned and its backdrop flood-filled away. Holes in facades are filled, including a roof-to-ground gap between two houses drawn in one picture. Pictures that still carry a background, painted sky, a cut-off edge or a sliver are dropped. A contact sheet of every picture is written for Claude to look at.
Layout check. The whole route is laid out exactly as the page will draw it, checking for gaps in street walls and for a building with the same picture as its neighbour.
The sweep. Every 75 m of built-up road, the camera moves and looks straight ahead and 30° to each side. The sky is painted magenta and every building is drawn into a mask, and it counts:
The 20 worst frames are written side by side with the problem marked.
Review. Claude is told to look at the worst frames and the samples and keep fixing until the sweep is clean.
The page shows a credits line that must stay visible wherever a fly-through is shown.
正文由 探How 从来源站点 RSS 同步,内容未经改写;遇到排版缺失或需要图片、视频时请以原文为准。