Asset Arsenal
AI icon extraction workbench
The problem
Pulling a matching icon set out of a single reference image — a brand sheet, a screenshot, a mockup — is slow manual work, and one-shot AI generation loses style consistency across the set: every icon comes back looking like it belongs to a different family.
The build
A six-step OpenAI pipeline: a vision model detects the icons, a collection image is generated as the visual style anchor, then each icon is regenerated as a clean, transparent standalone asset using that anchor as a reference image. It is a workbench, not a black box — every step is an independent, rerunnable breakpoint with full JSON visibility.
Stack & choices
- Next.js · TypeScriptApp Router frontend and the six pipeline API routes
- OpenAI APIVision analysis, prompt composition, and image generation via images.edit with reference images
- Tailwind CSSWorkbench UI with per-step sections
- ZodSchema validation across every pipeline payload
- IndexedDBLocal gallery of source images and generated icons
Process notes
- 1
The key insight: images.edit accepts a reference image, images.generate does not — so the collection image becomes the style anchor that steps 4 and 5 pass back to the model.
- 2
Each pipeline step shows its resolved prompt before running and feeds its output into the next, so any stage can be tuned and rerun in isolation.
- 3
All per-step prompts live in one file (lib/icon/prompts.ts) and model roles plus cost guardrails in another — tuning the pipeline never means hunting through routes.
- 4
The API key stays server-side only; the UI renders fine without one, failing loudly only on actual OpenAI calls.