Make crafted, highly detailed isometric SVG assets for landing pages, product sites, launch posts, social cards and decks â a hero object, a set of spot illustrations, a feature-tile scene â drawn as real, well-made physical things with many small precise solid parts, four-tone shading, correct painter's order and calm CSS-only ambient motion, mostly monochrome with brand accents. Use this when someone wants a nice-looking illustration, hero image, product visual, spot illustration, icon set, isometric artwork, "Linear-style" or "premium" drawing, or a visual for a section of a site, where the goal is a striking, on-brand picture rather than a diagram that explains how something works. Ships a standalone .svg that works as <img>, inline or in design tools, plus a preview page; can add WebGL shaders or the 3D mode when asked. For interactive figures that explain a technical concept with a live readout, use the anatomy skill instead.
Real-world examples not captured yet
This skill shows a gallery of live HTML demos (CDN libraries welcome — GSAP, Three.js, etc.) rendered inline via srcdoc.
Skill markdown
# Anatomy Asset A fork of Anatomy for assets instead of explainers. The drawing is the same: a real object you could build, made of many small, precise, solid parts, shaded in four tones, painted back to front, every line ending on something. What changes is the job. An Anatomy figure has to *explain*; an asset has to *look right on the page*: carry the brand, hold a composition, leave room for a headline, and reward a second look. So the rules split in two: - **Craft is fixed.** Solids, not wireframes. The kit shades. Small precise detail, never noise. Every line ends on something. No part passes through another. Painter's order is true. Curved surfaces shade smoothly. Every creation is highly detailed at 1× and still rewarding at 4×. These come from Anatomy unchanged, with the same checks. - **Style follows the user.** Subject, mood, colour, composition, how literal or playful the object is, whether there's text: these are the user's calls. Where the user asks for something Anatomy forbids (two accents, a word on a sign, a floating part, a pastel ground), do it, and do it with the same craft. Thirteen examples ship with this fork, and eight from Anatomy are kept as references for craft. Open the closest one before you start. - `examples/synth-hero/` is the asset reference: a compact synthesiser as a 1200 × 640 landing-page hero, art in the right 56%, headline space on the left. Two knobs in the brand colour, black keys in a dark neutral, one knob cap lifted off its shaft as a product-shot moment, LEDs that blink and a fader that drifts in CSS only. About 95 solids and 880 paths, 240 KB. `node build.mjs` (dark) and `node build.mjs --light` write `synth-hero.svg` and a preview page. - `examples/writing-desk/` is a hero in a craft mood: an oak desk with a pigeonhole hutch, brass, wood, leather and ebony as material ramps, and the green pen floating over its socket. About 157 solids. It shows rule lines passed as a card's `inner`, so their caps don't notch its outline. - `examples/espresso-tile/` is a 640 × 480 feature tile with a playful subject built strictly: a red espresso machine and a small robot barista with jointed arms. About 113 solids. It has vertical-face helpers and a custom "mostly on" blink through `assetSvg`'s `css`. - `examples/feature-spots/` is a set of three 320 × 320 spots (stopwatch, safe-deposit box, battery lantern) from one script: one camera, one scale, one part vocabulary, weight 0.5, each under 70 KB thanks to a path-minifying post-pass. - `examples/bottling-line/` is a 1600 × 560 banner: a bottling line run diagonally at azimuth 62°, bottles as a glass-grey material ramp, violet caps, and one bottle sliding a pitch along the belt. About 190 solids, under 400 KB. - `examples/aero-*` and `examples/energy-*` are two complete brand sets, each a hero, a banner, a feature tile and three spots for one landing page: Aether (electric aviation, dark, ice blue) and Halden (clean energy, light, green). They show one brand carried across placements, aircraft built on the lathe with the audit, light composite material ramps that keep a hull bright on a dark page, tilted solar panels with `G.prismOf`, and diorama ground slabs. - From Anatomy, for craft: `dial-indicator/` (smallest, about 300 lines), `test-rig/` (the quality bar for the drawing), `desk-computer/` (screens drawn on faces), `arcade-cabinet/` (cutaways and camera placement), `raptor-engine/` (round parts, pipes, harnesses and the audit), `spot-plate/` (shapes that morph), `ripple-tank/` (WebGL water and light), `turning-dial/` (the 3D mode). Read them for how parts are built, not for how they are framed: their card, readout and legend belong to explainers. ## The one idea that matters **The object carries the message.** Don't draw a logo on a slab, a stack of floating cards, or a screenshot in an isometric frame. Find a real, beautifully made thing that *is* the product's promise, and build it so well people want to look at it. | Brief | Object | |---|---| | A music-making app, "make sound in seconds" | A compact synth with brand-coloured knobs, one cap lifted off its shaft | | An email tool that sorts your inbox | A brass-and-oak letter sorting cabinet, pigeonholes filling, one envelope mid-flight | | A database that never loses data | A bank-vault door ajar, its bolt work and dial visible, a soft light inside | | A payments API | A cash register crossed with a telegraph key, receipt tape curling out | | A calm focus timer | A kitchen timer, a candle and a tea tin on a small walnut tray | | A dev platform's "ship faster" | A model rocket on a launch rail on a workbench, toolbox open beside it | The object can be literal (the product as a machine), a metaphor (what the product feels like), or a small scene (a diorama around the object). It can be playful or impossible — a lighthouse on a teacup, a server rack that is also a bookshelf — as long as every part is built as if it were real. Exaggerate proportions, but never the …