image-gen/workflow

22 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Always pass output parameter to save files immediately

Because apimart is async and URLs expire in 24 hours, always pass the output= parameter to gen_clean or other generation functions so the file is saved immediately to disk. Do not rely on storing URLs for later retrieval.

Per-game prompt library convention

Store per-game prompt libraries in a file named AI_ART_PROMPTS.md at the project root. This centralizes all prompts used for a game's AI art generation.

Slot art batch workflow priority order

For a typical slot art batch, generate assets in this priority order to balance quality and cost: logo (high) → mascot poses (high) → premium symbols (medium) → mid/low symbols (medium/low) → backgrounds (generate() raw without chroma-key, medium) → UI/tile/splash. Use gen_clean by default with subject description only; the cyan clause auto-appends and cutout auto-runs. Verify every output and preserve the response image_url and task_id in commit messages.

measure_cutout.py example output structure

Example output from measure_cutout.py: ```json { "size": { "w": 800, "h": 200 }, "holes": [ { "id": "hole_0", "x": 142, "y": 38, "w": 420, "h": 18, "area": 7560 }, { "id": "hole_1", "x": 142, "y": 76, "w": 420, "h": 18, "area": 7560 } ], "css": { "hole_0": "position:absolute;left:17.75%;top:19.0%;width:52.5%;height:9.0%", "hole_1": "position:absolute;left:17.75%;top:38.0%;width:52.5%;height:9.0%" } } ```

slice_9.py command for 9-slice frame generation

The slice_9.py script is at ~/.claude/skills/slot-hud-pipeline/scripts/slice_9.py. Command: python3 ~/.claude/skills/slot-hud-pipeline/scripts/slice_9.py --input frame.png --output-dir frame_sliced/ --inset 32. Emits: tl.png tr.png bl.png br.png t.png b.png l.png r.png center.png (top-left/right, bottom-left/right corners + top/bottom/left/right rails + stretchable center). Use these via CSS border-image or Pixi nine-slice plane.

build_hud.py scaffolds Svelte component from measured boxes

The build_hud.py script is at ~/.claude/skills/slot-hud-pipeline/scripts/build_hud.py. Command: python3 ~/.claude/skills/slot-hud-pipeline/scripts/build_hud.py --frame frame.png --boxes frame_boxes.json --output PlayerHud.svelte --props "name,level,hp,maxHp,mp,maxMp". Takes a folder of sliced PNGs + measurement JSON and emits a Svelte component skeleton with holes mapped to props.

HUD prompt must include chroma, hole, subject, and style clauses

When requesting GenAI generation of a HUD part on chroma background, the prompt MUST include four clauses: (1) Chroma backdrop clause — isolated on flat PURE solid #FF00FF magenta background, completely uniform single-color magenta backdrop, NO scenery; (2) Hole clause — explicitly where empty CSS regions go, e.g., "horizontal slot in the middle that is EMPTY and uniformly magenta — this is where the live HP bar will sit"; (3) Subject clause — what the frame depicts; (4) Style clause — slot-art keywords like Pragmatic Play, hand-painted cartoon, thick bold outlines, etc.

Example HUD generation prompt with all clauses

Example prompt for a balance pill panel: "Premium Pragmatic Play casino slot art, isolated on flat PURE solid #FF00FF magenta background (no scenery whatsoever, completely uniform magenta backdrop). Subject: a long horizontal sandstone tablet panel with carved gold trim, Egyptian hieroglyph ornaments along the upper and lower edges, two ornate gold rivet ends. The CENTER of the panel is EMPTY (uniformly magenta) — this is where the live balance number will sit. Thick bold dark outlines, hand-painted cartoon style, warm rim-lighting."

Canonical HUD layer stack z-order

The Forge spec canonical z-order for HUD compounds is: z=0 glow-overlay (optional bloom); z=1 bar-fill (live CSS bar); z=2 frame (PNG frame ART); z=3 text-layer (live text/icons); z=4 state-overlay (hover/disabled/focus); z=5 vfx-hooks (Plume/GSAP particle slots).

slot-hud-pipeline 6-step formula

The slot-hud-pipeline uses a 6-step formula: (1) CONCEPT — design the composition unified (frame + bar + sockets + chat); (2) REGEN PARTS — generate every piece on flat chroma background (magenta #FF00FF); (3) CUT ALPHA — Pillow strips chroma + despills edge + alpha-boost → clean RGBA; (4) MEASURE — Pillow scans cutout holes, returns exact px boxes for CSS; (5) SLICE — auto 9-slice frames (4 corners + 4 rails + 4 caps); (6) BUILD — Svelte/React component: glow layer + CSS bar + PNG frame + live text.

measure_cutout.py finds transparent regions and outputs CSS

The measure_cutout.py script scans an RGBA PNG, finds transparent rectangular regions where artists left holes for live CSS, and returns JSON. Command: python3 ~/.claude/skills/slot-hud-pipeline/scripts/measure_cutout.py --input frame.png --min-area 200 > frame_boxes.json. Output includes size (w, h), holes array with id, x, y, w, h, area, and css object with ready-to-paste CSS strings like "position:absolute;left:17.75%;top:19.0%;width:52.5%;height:9.0%".

When to use slot-hud-pipeline vs plain image-gen

Use slot-hud-pipeline when building a NEW HUD/frame/banner where art has empty regions that need live CSS content, updating an existing HUD where regenerated painted asset makes CSS positions drift, migrating Photoshop-cut HUD into programmatic regeneration flow, or building a new game with HUD art editable via regeneration. Skip and use plain image-gen skill if you only need standalone subject icons (symbols, mascots, logos) or asset is purely decorative (background scene) with no live state and no CSS hole to measure.

Anti-pattern: eyeballing CSS positions instead of measuring

Do not eyeball CSS positions instead of running measure_cutout.py — positions drift every regeneration. Use the automatic measurement tool to get exact pixel coordinates.

Anti-pattern: AI generation without isolation and chroma clauses

Do not ask the AI for "an icon" without isolation/chroma clauses. This results in painted-bg output which is useless for layering. Always specify flat magenta chroma background and empty regions.

Anti-pattern: baking text into PNG frame

Do not bake text into the PNG frame (e.g., "BALANCE $1,000"). Text must be live for internationalization and jurisdiction compliance. Keep frame artwork separate from live text layers.

Anti-pattern: generating one composite HUD instead of separate parts

Do not generate one BIG composite of the whole HUD instead of separate parts. Compositing all elements into one PNG locks them together and prevents repositioning individual pieces.

HUD reusable component types

The pipeline produces reusable HUD components for player HUDs, mob/target frames, chat panels, action bars, cooldown slots, controller/keyboard labels, resizable windows, opacity/font settings, and future VFX overlays.

React/Svelte component layer stack

HUD components consist of a stacked layer order: (1) glass/background layer, (2) live CSS bar or panel, (3) PNG frame art, (4) live text/icons, (5) state overlays, (6) hover/ready/focus/VFX hooks. This creates a painterly look while maintaining real UI behaviour.

Gen AI HUD pipeline stages

The pipeline consists of six stages: (1) concept/mockup with player HUD elements like HP/MP bars and sockets; (2) regenerate parts on a flat chroma background (magenta or green); (3) cut alpha using Pillow to remove background, despill edges, validate alpha; (4) slice using 9-slice technique for corners, rails, and center caps; (5) layer with z-stack including glow overlay, icons, live text, and PNG frame; (6) build as React/Svelte components with state props.

HUD layer division: art vs behaviour

Divide HUD layers by function: the frame is art (PNG), the fill bar is CSS, the text is live, the sockets are dynamic, the tabs are buttons, the scroll area is HTML, and animations are CSS/SVG/Plume VFX. Everything lines up because Pillow measurement provides exact pixel coordinates.

9-slice cutting for border-image and NineSlicePlane

Use slice_9.py to cut on alpha boundaries for CSS border-image and Pixi NineSlicePlane. This technique handles corners separately from rails (edges) and caps (center), enabling scalable frames.

GenAI-to-shippable HUD formula

GenAI provides visual density, Pillow performs transparent cuts and exact measurements, CSS/SVG handle motion and live fills, React/Svelte manage stateful components. This pipeline bridges from pretty AI concept to shippable game HUD.

Give your agent this brain