Deft
Ask AI

Search

Search skills, authors and topics

Teddarific / skills

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-asset

Concepts

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

  1. Read the brief
  2. Three kinds of object
  3. Generate, then choose
  4. Mood and finish
  5. More mappings
  6. The moment
  7. 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:

MoodProportions and partsColour
Precise, technicalThin slabs, fine bevels (0.4–0.6), rulers and ticks, knurls, many small screwsGreys, one sharp accent
Friendly, consumerBig radii (r 4–8 on small parts), chunky buttons, rubber feet, fewer and bigger screwsWarm ground, a soft accent on the body
Craft, analogueWooden cheeks and trays, brass fittings, label plates with rule lines, hingesCream ground, a deep accent
Calm, focusedFew objects with air between, low heights, slow single motionLow-contrast ground, muted accent
Energetic, launchA diagonal composition, something lifted or mid-flight, stronger accentAccent on the moving thing

5. More mappings

BriefObject
Analytics dashboardA brass surveyor's instrument on a tripod over a contour-map table
CI/CD pipelineA small bottling line: conveyor, filler heads, capper, a crate at the end
Password managerA wall of safe-deposit boxes, one drawer slid out, its key in the lock
Note-taking appA writing desk with a pigeonhole hutch, a fountain pen and a stack of index cards
Video callsA vintage broadcast camera on a pedestal, tally light lit
RecipesA spice rack with labelled tins, one open, a brass scale beside it
SchedulingA railway station clock and departure board with flip flaps
Feature flagsA row of rocker switches on a brass panel, one lit
SearchA library card catalogue, one drawer pulled, a card standing up
BackupsA tape library robot: shelves of cartridges and a picker on a rail
AI assistantA tiny robot at a drafting table, or a typewriter whose keys type themselves
Fintech savingsA piggy bank as a precision instrument: coin slot, dial gauge, rivets

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.