Tool
Variant Switcher: A Review Bar for Design Prototypes
The problem
Reviewing a prototype usually means a call, a design file, a document of user stories and a long thread of comments, all in different places. Reviewers compare version one and version two from memory, and a wording change gets lost somewhere between the comment and the code.
See it in use
System architecture & prompting
The bar is one script made of plain ES modules and Web Components: no build step, no framework, no dependencies. It is loaded once in the layout every page shares, and opens with a keyboard shortcut.
- Variants. The versions reviewers compare: V1 or V2 of a feature, light or dark, a flag on or off. The choice is kept in the address, so a shared link opens the same version.
- Flows, Architecture and Story. The key screens of each task in order, a sitemap and a diagram per user flow, and a short story of who does the task and why.
- Library. The prototype's components, each with a live preview.
- Comments and text changes. Click to drop a pin and comment, or click any text and type the new wording. A review list collects every change, to resolve, reject, or hand to Claude Code in one go.
Each empty section has a "Set up with Claude Code" button. It copies a prompt that fills the section in from the project's own code. The prompts start from nothing and ask before guessing, so no sample content leaks from one project into another.
Failure modes / edge cases
- Bundlers rewrite it. Vite or Next would fold the bar into the app's own build. It stays in the public folder and loads as its own module.
- Projects share a browser. Two prototypes on the same local port would share comments and settings. A short project id keeps each one apart.
- Comments stay in one browser. Until a small comments server is deployed, feedback is only visible on the machine it was written on.
- The bar covers the page. It pads the page by its own height and can sit at the top or the bottom.
The code lives in an internal repository at work, so there is no public demo to open: the recording at the top shows the bar on its own demo page.