Possessed: paste any UI component, a ghost designer haunts it (open-weight Gemma 4)

Description and use

Developers can quickly transform a single UI component into a themed spooky variant using open Gemma 4. The system validates size, generates styles, shows a preview, and lets users refine via chat.

Problem

Developers need a quick way to transform a single UI component into a spooky-themed variant without rewriting code or incurring high costs.

Outcome

Achieves consistent spooky theming of single components with 92% validation success, average 40 s latency, and cost-effective token usage (~1,100 in, 600–800 out).

Workflow

• Paste component code into web interface
• Size gate validates component (≤200 lines, ≤8,000 chars)
• Gemma 4 generates themed code via prompt
• Streaming parser streams output
• Validation retries once if needed
• Sandboxed preview renders before/after in iframe
• User can chat with Vesper to refine style
• Optional contrast fix button if WCAG AA fails

Evidence

Paste code -> size gate -> Gemma 4 -> streaming parser -> validation (retry once) -> sandboxed preview

Source

One component only, at most 200 lines and 8,000 characters. Whole pages and non-UI input are refused in character before any model call, so they cost no tokens.

Source

Gemma 4 (open weights) is the engine for every possession

Source

23 of 25 (92%) passed validation without a retry

Source

Average latency per possession 21.8 s (full eval); 16 to 56 s, average 40 s

Source