All tutorials
Tab 5 of 6 · Generate

AI-generate layered control art from your own API key

The Generate tab calls OpenAI, Gemini, Claude, or any OpenAI-compatible custom endpoint to produce a layered SVG knob, fader, slider, meter, button, or toggle, then hands it straight to the Create tab as a layered import. Reach for it when you don't have source art yet and want a working filmstrip in one pass, or when you want a whole matching set of controls in one consistent style.

Provider & API key

Choose which AI service generates the art and supply the credential for it. Your key never leaves this section unencrypted.

  • Provider — a dropdown of Claude, OpenAI, Gemini, and Custom. Defaults to your last-used provider, or Claude if none is set. Switching providers reloads that provider's stored key, suggested models, and remembered model.
  • API key — a masked text field (watermark paste your key (sk-… / AIza… )). Stored encrypted on this PC with Windows DPAPI and sent only to the provider you picked.
  • Show key — a checkbox that reveals the key as plain text. Unchecked (masked) by default.
  • Save key — encrypts and stores the current key for the selected provider. Enabled only once you've typed a key.
  • Clear key — deletes the stored key for the selected provider and blanks the field.
  • Endpoint base URL — appears only when Provider is Custom. Any OpenAI-compatible chat-completions endpoint, e.g. https://openrouter.ai/api/v1 or http://localhost:11434/v1.
  • Model — an editable autocomplete field, not a locked dropdown: type any model id or pick a per-provider suggestion. Defaults to your remembered model for that provider, or its default if none is remembered.

What to make

Pick the control type to generate. This drives which layers the AI is asked to produce.

  • Control type — RotaryKnob, VerticalFader, HorizontalSlider, Meter, Button, or Toggle. Defaults to Rotary Knob. Knobs, buttons, toggles, and meters produce layered SVGs (knob = body + pointer; button/toggle/meter = off + on); faders and sliders produce a single cap/handle shape.
  • Horizontal meter (fills left → right) — only shown when Control type is Meter. Unchecked by default, meaning a tall meter that fills bottom to top; check it for a wide meter that fills left to right.

Seeds

Reusable named presets of the whole style / colour / effects setup below, so you don't have to re-enter a look every session. Apply one to prefill everything, tweak, or save your current settings as a new seed.

  • Seed picker — ships with five built-ins: Vital / Serum modern, Vintage hardware, Minimal flat, Skeuomorphic metal, and Neon glow, followed by any seeds you've saved.
  • Apply — copies the seed's style, notes, avoid list, both colours, canvas size, and all four effect toggles onto your current settings in one shot.
  • Name field — a text box (watermark name to save current as…) for naming a new seed.
  • Save — saves the current style/colour/effects settings as a user seed under that name, overwriting any existing user seed with the same name (case-insensitive). Built-in seeds are never overwritten.
  • Delete — removes the selected saved seed. Built-in seeds can't be deleted.
  • Style — Modern (default), Minimal, Skeuomorphic, Vintage, or Flat.

Colours

Sets the body and accent colours fed into the generation prompt. Click a swatch to open a colour picker, or type a hex value directly.

  • Body colour — empty by default, which means "let the model choose."
  • Accent colour — defaults to #E8440A, matching the StripKit ember accent.

Effects

Style qualities folded directly into the AI prompt. All four are unchecked by default.

  • Drop shadow — unchecked by default.
  • Outer glow — unchecked by default.
  • Bevel / 3D — unchecked by default.
  • Metallic sheen — unchecked by default.

Extra direction, avoid list & canvas size

Free-text prompt shaping plus the output canvas size.

  • Extra direction (optional) — a multi-line free-text field (watermark e.g. amber LED ring, knurled edge, brushed aluminium face), empty by default.
  • Describe a reference image… — opens an image picker, sends the file to your provider's vision endpoint, and appends the resulting style description onto Extra direction. Enabled only when a key is entered and nothing else is generating.
  • Avoid (optional) — things the model should not include (watermark e.g. no text, no numbers, no photo-realism), empty by default; folded into every generation, single or set.
  • Canvas size (px) — 256, 512 (default), 768, or 1024. Sets the square SVG viewBox edge length.

Generate / Cancel / Variations

The core single-control generation actions, plus a multi-take variations feature that generates several takes at once so you can pick a favourite.

  • Generate — builds the request from every prompt-shaping field above and calls the provider. Enabled only when a key is entered and no generation is already running.
  • Cancel — cancels the in-flight single generation. Enabled only while generating.
  • Generate variations — generates several takes of the currently selected control type, all sharing the same style/colour/effects/avoid settings, and shows them as a results grid.
  • Variation count — 2, 4 (default), 6, or 8 takes.

Prompt to be sent

A collapsed-by-default expander showing a live, read-only preview of the exact system and user prompt your current settings would send — useful for understanding or debugging what the AI is being asked for. It recomputes automatically whenever a prompt-shaping field changes.

Matching set

Generate a whole family of controls in one consistent style/colour/effects setup — a head start on a full skin.

  • Knob / Fader / Slider / Meter / Button / Toggle checkboxes — which control types to include. Knob, Fader, Meter, and Button are checked by default; Slider and Toggle are unchecked.
  • Generate set — generates one item per ticked type, all sharing the same settings. Enabled only when at least one checkbox is ticked and a key is entered.
  • Cancel — cancels the in-flight set or variations generation.

Right panel — preview and results

The right side of the tab shows either a single live preview or a matching-set results grid, depending on what you last ran.

  • Single-control preview — the at-rest composited preview of the most recently generated or refined control. Shown when there are no matching-set results.
  • Matching-set results grid — one tile per generated set member or variation, each with its own Use in Create, Save, and Regenerate buttons. Shown once a set or variations run has produced results.

Result actions

A persistent action bar under the preview handles handoff, saving, copying, and refining the current result.

  • Use in Create — sends the current result to the Create tab as a layered import, honouring the actual generated control type (knob → body+pointer, button/toggle → off/on layers, fader/slider → a flattened single source). Enabled only once you have a result.
  • Save SVG… — writes the generated SVG to disk, defaulting to a filename of {provider}-knob.
  • Copy SVG — copies the generated SVG text to the clipboard.
  • Refine field — a text box (watermark describe a change, e.g. thicker pointer, warmer accent) for describing a change, shown only once you have a result.
  • Refine — sends the current SVG plus your instruction back to the same provider and model, replacing the result with the revised version while keeping the same control type. Enabled only when the refine field is non-blank.
  • Save set… — writes every successful control in a matching set to a folder as SVGs, named {style}-{componenttype}.svg. Shown only when a set has results.
  • Model response (raw) — a collapsed expander with the model's raw text reply, for diagnosing extraction failures. Shown only when a raw response exists.
Tip: Switching Provider silently reloads a different stored key, suggested-models list, and remembered model — it won't warn you if you had an unsaved key typed in the box. Likewise, switching Provider resets Model back to that provider's remembered/default id, discarding any unsaved custom model you'd typed for the previous one. Save a key before you switch providers if you want to keep it.
Tip: Clicking Generate can trigger two network calls, not one. If the first take comes back structurally weak — a knob with no rotating pointer layer, or a button/toggle/meter with fewer than two state-frame layers — StripKit silently discards it and retries once automatically (status text reads "The first take was missing its moving part — regenerating once…"). There's no way to see or keep the rejected first attempt.
Tip: Applying a Seed overwrites style, notes, avoid list, both colours, canvas size, and all four effect checkboxes at once — there's no per-field opt-in, so it will clobber manual tweaks made just before you click Apply. Likewise, saving a seed under a name that already exists overwrites it silently (case-insensitive), with no confirmation prompt.
Tip: Body colour is left empty on purpose, meaning "let the model choose" — it isn't a placeholder you need to fill in. Accent colour is the only colour field with a real default (#E8440A).
Tip: "Horizontal meter" only appears, and only has any effect, when Control type is Meter — it's ignored for every other control type.
Tip: Generate variations reuses the same results grid, status line, and cancel logic as Generate set — the only visible difference is the tile labels ("Knob #1", "Knob #2"… instead of one tile per type). Regenerating a single tile inside either always starts a fresh generation rather than silently no-op'ing after a prior Cancel.