Protoshot — Instant UI Component Preview

Lets AI coding agents see rendered UI right after writing it

Problem

When using AI coding agents to build UI, developers need to see component rendering frequently, but spinning up puppeteer or agent-browser just for screenshots is heavy and slow. One developer built Protoshot—scanning CSS files and components so users can preview by writing just a bit of JSX—showing this workflow gap is real.

Solution

A lightweight local tool that scans project CSS and component files and generates an instant preview interface where users write minimal JSX to see rendered UI—no browser agent orchestration needed. It integrates with AI coding agents to auto-refresh the preview after the agent generates UI.

Users

Front-end developers and designers using AI coding agents like Cursor or Claude Code

MVP

Scan project CSS and component files; provide a local preview page supporting instant JSX rendering; auto-refresh and hot reload; integrate with common AI coding agent output directories; optional screenshot export

Revenue

Free basic version, paid unlock for team collaboration and screenshot history; one-time purchase or monthly subscription; distribute as a plugin in the AI coding tool ecosystem

Why now

AI coding agents are becoming a mainstream workflow, yet the UI preview step is still broken; an indie developer can quickly build a lightweight tool and integrate into existing agent ecosystems