SuperAPI AI Directory

outline-figure-explainer

Design & creation

View repository

Updated 10-15 21:40

About this skill

Outline Figure Explainer (stick figure explainer illustration)

Compilea conceptual relationshipintoa singleprompt that can be handed directly to an image model. The style is locked: on a pure white background, one thick-black-outlined stick figure and several flat saturated color blocks, connected by thin black lines into one thing.

Core principle:One image tells only one relationship. The clarity of this style comes from few elements, lots of white space, and pure color blocks. Pile on seven or eight color blocks, add outlines to the color blocks, or draw facial features on the figure, and the style immediately collapses into cheap clip art.

Canvas size

Choose according to the publishing scenario; there is not just one option:

Scenario Ratio size Color block limit
Inline illustration for long-form articles (default) 16:9 2560×1440 5
Section banner / repository cover 5:2 2560×1024 3
Xiaohongshu / square social media card 1:1 2048×2048 3
Vertical info card / Story 3:4 or 9:16 1536×2048 / 1088×1920 3

quality is uniformly high. Use 16:9 by default; switch only when the user explicitly wants to post to Xiaohongshu, make a vertical poster, or create section banners.

The narrower or more square the canvas, the more the color blocks must be streamlined; before squeezing a horizontal device (process / funnel / staircase) into a vertical format, first judge whether it can be changed to a top-to-bottom arrangement—forcing it into a horizontal strip will make it unbalanced.

Locked style core

No matter what content is drawn, the following three sections go verbatim into every prompt, without rewriting or streamlining.When producing as a group, every prompt must repeat them—the model only sees a single prompt; shared rules are not automatically inherited.

Scene base

pure flat white background, no environment, no horizon, no gradient; a thin black horizontal ground line only where figures stand.

Key details base

flat vector illustration; all figures drawn with thick uniform black outlines, round heads, no facial features, and left completely unfilled white inside; all blocks are flat saturated solid colour with absolutely no gradient, no shading and no texture; icons inside the blocks are simple thin white line drawings; one soft pale grey ellipse shadow directly under each standing figure and nothing else casts shadow; generous empty white space between elements; mood: clean, friendly, instructional, modern explainer.

Constraints base

no gradients, no drop shadows other than the pale grey ellipses under standing figures, no outlines on the colour blocks, no facial features on any figure, no additional text, labels, logos or watermarks, no photographic elements, no 3D rendering, no background colour of any kind.

Color palette (a submodule that can be replaced as a whole)

Default six colors, written into the palette clause of Key details:

drawn from the palette deep blue, orange, green, purple, yellow and pink

Changing the palette is the easiest source of variants—replace this one sentence, leave the rest of the style genes untouched, and the whole set of images immediately takes on a different character. Colors appearing in the same imageno more than four, or it will look messy.

Device vocabulary (turn relationships into visuals)

First clarify whatrelationshipthis sentence is describing; the relationship determines the device. The device must be readable at a glance; if it cannot be read, change it. The table below contains common starting points,not an exhaustive list—for relationships not in the table, do not force-fit the closest one; design your own directly according to the criteria below.

Relationship described Device
From A to B / assignment / migration Two color blocks on the left and right + a thin line with an arrow in the middle + small squares drifting along the line, with the figure at one end
Ideal vs. reality / demo vs. implementation Neatly arranged color blocks on the left, a tall wall of color blocks in the middle, and a cluster of small squares with messy angles overlapping each other on the right
One input, multiple outputs / two outputs A line enters the central object, and two lines of equal weight branch out from it, each pointing to a color block
Process / Stage / Chain Equal-height color blocks arranged in a horizontal row, with a person walking on them, one step spanning between two blocks
Category / List / Composition A large speech bubble or large circle, divided internally into horizontal cells, each cell containing an icon plus a label
System / Network / Multi-party collaboration A white backbone structure in the center, with multiple color block nodes radiating outward around it, thin lines connecting back to the center
Hierarchy / Layering / From shallow to deep Color blocks stacked from bottom to top into a tower, each layer wider than the one above
Filtering / Narrowing / Elimination A funnel wide at the top and narrow at the bottom, with many small squares above and only one or two falling out below
Loop / Iteration Four color blocks arranged along a large ring, with arrows connecting end to end, and a person standing at the center of the ring
Contrast / Two paths Two lines branching from the same point, one straight leading to a color block, the other winding and breaking off midway
Collaboration / Negotiation / Mentor and apprentice / Game Do not use color blocks as the main subject; let 2-3 simple line figures face each other directly or stand side by side, with posture, orientation, and gestures or props between them expressing the relationship, and the figures themselves are the nodes

Three criteria for choosing a device (whether chosen from the table or designed yourself):The relationship can be read at a glance、Color blocks use no more than four colors、The number of people serves the relationship itself——If the relationship is person-to-object / person-to-system, use the default configuration of 1-2 people + color blocks; if the relationship itself is person-to-person (collaboration, game, mentor and apprentice, negotiation), you can let 2-4 simple line figures directly serve as the main body of the device, and there is no need to force each person to have a color block. If any of the three criteria is missing, change the device.

Input

Infer from user input; do not require filling out a form:

  1. The relationship to convey: one judgment or one concept. Consult the device vocabulary list.
  2. Label text: the small text below the color block.Both Chinese and English can be written directly, and Chinese should be rendered as is; do not change it to English or leave it blank to add later just because you are afraid of making a mistake.
  3. Number of images: single image or a group. For a group, first list clearly which segment each image covers, to avoid two images covering the same thing.

Workflow

  1. Set the aspect ratio: check the aspect ratio table according to the publishing scenario; if unspecified, use the 16:9 default;
  2. Read the relationship → consult the device vocabulary list to choose a device; if it is not in the table, design one yourself according to the three criteria;
  3. Set the positions and number of people: for person-to-object / person-to-system relationships, 1-2 people are the reader's point of identification, placed where they should stand (observer at the side, executor in the middle, crosser above); for person-to-person relationships, 2-4 figures themselves are the device, and posture and orientation must make the role differences readable;
  4. Set the number and colors of color blocks(if the device requires color blocks): three to five blocks, no more than four colors;
  5. Write labels: each color block has at most one label, in phrases rather than sentences;
  6. Compile according to the seven slots: Use case → Scene → Subject → Key details → Composition → Text in image → Constraints, and copy the three base sections verbatim;
  7. Output: A complete prompt + (optional) one sentence justifying the device selection. Omit the explanation when the user only wants the prompt.

For the general writing rules of the seven slots, see gpt-image-prompt-spec; this skill only covers the content of this style.

Quality Gates

  • Color blocks have no stroke: Color blocks are solid-color shapes; only figures have black outlines. Giving color blocks black outlines is the most common failure point of this style.
  • Leave the figure's interior white: Black lines outline the contour; keep the interior white with no fill, and do not draw facial features.
  • Only one kind of shadow: A light gray ellipse under the feet of standing figures; nothing else at all. Color blocks cast no shadow.
  • Whitespace ≥40%: Elements are concentrated in the middle band, with clear space above and below.
  • One image, one relationship: Two equally weighted central structures means overload; split it into two images.
  • Label only what is necessary: Do not add text for what can be understood from the image. Write labels completely and accurately, add render all text verbatim, no extra words。
  • This skill only produces prompts and does not fabricate already-generated image results.

Read

  • Finished reference, verified prompts, grouped cases:references/examples.md