anatomy-asset
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.
Install
npx skills add https://github.com/Teddarific/skills --skill anatomy-assetConcepts
How to get from a brief to an object worth drawing. An Anatomy figure maps a concept one-to-one onto a mechanism; an asset maps a promise or a feeling onto a thing. The mapping can be looser, but the thing must still be real enough to build.
Contents
- Read the brief
- Three kinds of object
- Generate, then choose
- Mood and finish
- More mappings
- The moment
- When the user already knows what they want
1. Read the brief
Before ideas, write down five things, from the request or as sensible defaults you state:
- What it's for. Product, page and section: "the hero of a synth app's landing page", "the empty state of an inbox".
- The one thing it says. A promise ("make sound in seconds"), a feeling ("calm, focused"), or a fact ("works offline").
- Who looks at it. Developers expect instruments and machines; a consumer app may want warmth, home objects and soft materials.
- Where it sits. The page colour, the placement, the size it's shown at, the neighbours (a headline on the left, three spots in a row).
- The brand. Colours, and adjectives if the user gave any. A logo is rarely needed and never drawn as a flat stamp.
2. Three kinds of object
- Literal. The product as a beautifully made machine: a synth for a synth app, a camera for a photo tool. Strongest when the product is a thing or obviously could be.
- Metaphor. A real object whose working or character is the promise: a vault door for "never loses data", a sorting cabinet for "inbox triage", a kitchen timer for focus. Strongest for software, where the literal thing is a screen.
- Scene. A small diorama around one object: a workbench with a rocket on its launch rail and an open toolbox; a walnut tray with a timer, a candle and a tea tin. Strongest for heroes that need breadth, and for sets (each spot is one object from the same world).
Impossible combinations are allowed when they're built as if real: a lighthouse on a teacup, a server rack that is also a bookshelf, a mailbox with a tiny conveyor. The joke works only if every hinge and screw is right.
3. Generate, then choose
Write three to five one-line concepts that differ in kind, not just in object (one literal, one metaphor, one scene, one playful). For each, name the moment (section 6). Then pick with these tests:
- Glance test. Would someone name it in one second at the size it's shown?
- Promise test. Does the thing's working or character say the one thing, without a caption?
- Detail test. Does it have 50+ real parts? A smooth egg or a single cube fails.
- Page test. Does its silhouette fit the placement? A hero right wants something wider than tall or a low diagonal; a tall object (a lighthouse, a rocket) wants a hero centre or a narrow column.
- Brand test. Does its material and era match the mood? Machined aluminium for precision; oak, brass and felt for craft; rounded ABS plastic for friendly consumer tools.
Say which you'd pick and why, then build that one unless the user chooses another.
4. Mood and finish
Finish comes from proportions, part vocabulary and colour, not from texture:
5. More mappings
6. The moment
An asset is one frame, so give it one moment the eye goes to: a knob cap lifted off its shaft, an envelope mid-flight into its pigeonhole, a drawer pulled out with its contents showing, a tally light on, a coin in the slot. Exactly one, carried by the accent or the lit tone, and placed at the composition's strong point (section 3 of composition.md). Ambient motion, if any, plays on this moment.
7. When the user already knows what they want
If the user names the object, the colours or the layout, that's the brief: skip the concept round and build it. If what they ask for is abstract ("floating cubes with our logo"), build it, but offer a real-object version alongside in one line, because that is where this style is strongest. Never refuse a style choice: lenient on taste, strict on craft.