Prompt To Design

prompt-to-design

Turn a free-form prompt + an aspect ratio into a finished PNG, built entirely from code. The house style is the level of the four pieces in reference/: posters, typographic covers, mesh/gradient atmospheres, geometric compositions, soft product abstractions. Frictionless like an image generator, but bounded to designed graphics.

What it is (and is not)

Everything is drawn with math and type — no image model. That means:

• Great at: posters & album art, quote / story / reel / carousel covers, wallpapers, gradient & mesh backgrounds, neon / synthwave, Bauhaus / Swiss geometric art, minimalist logos-as-shapes, patterns, soft "product" orbs, anything typographic. Crisp text, perfect alignment, editable, no AI artifacts.
• Cannot do: photorealism, a specific real person's face, detailed representational illustration (a recognizable animal, a fantasy castle), brand logos, or copyrighted characters.

Accept any prompt and always output a designed PNG. Silently route the prompt to the rendering approach that fits (see Style routing). Only if a prompt truly demands a photo (e.g. "photorealistic portrait of my friend") say so in one sentence and deliver the strongest stylized/typographic interpretation anyway — never refuse, never return a blob that ignores the prompt.

Inputs

1. Prompt — free text. Extract: subject/scene, mood, any color cues, and any literal words to render (quotes, titles, handles), plus implied style.
2. Aspect ratio — a preset or WxH. If unspecified, default 1:1.

The pipeline (follow in order)

1. Read the prompt. Identify subject, mood, palette hints, literal text, ratio.
2. Route to a style (one of: typographic, geometric, gradient-atmospheric, soft-minimal, poster-scene) — see below. When ambiguous, pick the one that best serves the words + mood.
3. Choose a palette (3–6 colors, deliberate). See Palette.
4. Plan the composition in your head first: the ONE focal element, the hierarchy, where the negative space lives. Balance mass with space.
5. Assign fonts by role (display / grotesque / geometric / serif / serif_book / mono / pixel / techno). See Typography.
6. Write a Python script that imports the engine and composes the piece (pattern below). Prefer the library primitives; drop to numpy only for custom effects.
7. Render to a PNG in the outputs directory.
8. VERIFY (mandatory gate — see Verify). Fix issues, re-render.
9. Present the PNG. (Do not show the user the internal design reasoning or any .md notes — PNG only.)

Optionally, thinking through a one-paragraph "design philosophy" for the piece before coding measurably improves results — do it as internal reasoning, never as a user-facing file.

Environment & how to run

Requires Python with Pillow and numpy (install with pip install pillow numpy --break-system-packages if missing). Fonts are bundled in fonts/ — no system fonts needed.

Write a script that puts this skill's lib/ on the path, composes, and saves:

import sys
sys.path.insert(0, "SKILL_DIR/lib")     # the lib/ folder next to this SKILL.md
from render import Design, NEON, NEON_CYAN, CREAM, INK, CHARCOAL, lerp_stops

d = Design("9:16")                       # preset, "WxH", or (w, h)
# ... compose with d.<method>(...) ...
d.save("/mnt/user-data/outputs/design.png", grain=6, saturation=1.1)

Replace SKILL_DIR with the absolute path to this skill. Then run with python3 your_script.py and present the saved PNG.

Engine quick reference (render.Design)

Coordinates are fractions: x in [0,1] across width, y in [0,1] down height. Sizes / radii / widths / font sizes are in final pixels; the engine supersamples internally and downsamples for crisp edges.

Construct: Design(size="1:1", supersample=None, background=(255,255,255))

Backgrounds (set the whole canvas):

• fill(color)
• linear_gradient(stops, angle=90) — stops=[(pos,(r,g,b)),...]; 90=top→bottom, 0=left→right
• radial_gradient(stops, center=(0.5,0.5), radius=0.9)
• mesh_gradient(points) — points=[(fx,fy,(r,g,b),sigma_frac),...] smooth blended color fields
• overlay_glow(center,color,radius,strength=0.4,mode="screen"|"add"|"blend") — soft glow onto current canvas
• vignette(strength=0.4, center=(0.5,0.5), radius=0.75, power=1.6)

Shapes (optional glow={"color":(r,g,b)} for neon):

• disk(cx,cy,r,color,glow=) · ellipse(cx,cy,rx,ry,color) · ring(cx,cy,r,width,color)
• pie(cx,cy,r,a0,a1,color) — filled arc/sector; angles: 0=east, CW; top half=180→360, bottom=0→180
• arc(cx,cy,r,a0,a1,width,color) — open stroke arc
• rect(x0,y0,x1,y1,color,radius=0) — radius>0 for rounded/pills
• line(x0,y0,x1,y1,width,color) · polygon([(x,y),...],color)
• intersection(shapeA, shapeB, color) — knockout the overlap; shapes are ("disk",cx,cy,r), ("pie",cx,cy,r,a0,a1), ("rect",x0,y0,x1,y1)

Soft orb: gradient_sphere(cx,cy,r, colors, light=(-0.34,-0.34), shadow=True, specular=0.16, rim=0.05, glow=None) — colors = 2–3 stops blended diagonally.

Type:

• write(x,y,text, role=, weight="regular"|"bold", italic=False, size=, color=, gradient=None, align="left"|"center"|"right", tracking=0, glow=None, shadow=None, stroke=0, stroke_color=None, return_width=False) — one line; y is the baseline. Pass gradient=[(pos,(r,g,b)),...] for chrome/metal fills; glow={"color":...} for neon; shadow=True or a dict for legibility on busy backgrounds.
• text_block(x,y,text, ..., max_frac=0.84, line_height=1.16) — auto-wraps & stacks.
• fit_size(text, target_frac, role=, weight=) → largest size that fits that width.
• wrap(text, max_frac, ...) → list of lines. measure(text, ...) → (w,h) in final px.

Custom numpy: coords()→(xx,yy) · get_rgb() · set_rgb(arr) · composite_rgba(arr).

Finish: save(path, grain=0, chroma=0, scanlines=0, saturation=1.0, contrast=1.0, brightness=1.0) — post effects are applied after downsample (correct place for grain). Typical: light designs grain=2; rich/dark designs grain=5–6, chroma=2; add scanlines=0.03 only for CRT/retro looks.

Style routing

• typographic — prompt centers on words/a quote/a title, or asks for a "quote card", "cover", "poster with text". Huge fitted type is the hero over a gradient or mesh. Emphasize one word (color or serif italic). (ref: quote_card.py)
• geometric — "Bauhaus", "Swiss", "geometric", "shapes", "minimal poster", abstract mark. Flat color fields, circles/arcs/lines on a grid, knockouts, generous whitespace. (ref: geometric_bauhaus.py)
• gradient-atmospheric — "gradient", "mesh", "aurora", "synthwave", "vaporwave", "neon", "dreamy", "abstract background", wallpaper. Mesh/linear fields + glow + grain; add shapes/type as needed. (ref: synthwave_poster.py)
• soft-minimal — "soft", "Apple", "clean", "pastel", "premium", "carousel slide", "product". Light airy ground, a soft gradient_sphere or rounded card, refined type, lots of space. (ref: soft_carousel.py)
• poster-scene — a simple scene ("sunset over mountains", "ocean horizon", "desert dunes"). Render as flat/geometric layers: gradient sky, a pie/disk sun, polygon mountains, layered bands — a stylized designed landscape, not a photo. Combine gradient + shapes.

Most prompts blend two (e.g. a synthwave poster is gradient-atmospheric + typographic). Compose accordingly.