ui-prototyping demo

Switch variants,
instantly.

In-app React variant switching with URL persistence. Zero runtime deps. Works with or without the Vibeflow overlay.

$ npm install @vibeflow-tools/prototyping
PageVariantSwitcher — top-left fixed bar. Try default · wide · compact to change page width.
VariantDevToolbar — bottom-right FAB. Switch any component variant (Ctrl+Shift+V).
// demo 1
Hero Section
Three layout variants for a landing hero — default, compact, and bold. Switch via the inline dot, the overlay, or the toolbar below.

Ship faster with Vibeflow

Annotate elements, capture screenshots, and export structured prompts for LLM implementation.

Variants: default compact bold
Scope: Hero
URL param: ?vf[Hero]=compact
// demo 2
Task Cards
Three card style variants — minimal, elevated, and outlined. Each uses the same data with different visual treatments.
TASK

Implement auth flow

Add JWT-based authentication with refresh token rotation.

BUG

Fix sidebar collapse

Sidebar doesn't collapse on mobile viewports below 768px.

RESEARCH

Evaluate caching

Compare Redis vs Memcached for session storage at scale.

Variants: minimal elevated outlined
Scope: TaskCard
URL param: ?vf[TaskCard]=elevated
// demo 3
Navigation Bar
Three nav styles — dark, glassmorphism, and colored. Try switching to see the same nav in different themes.
Variants: dark glass colored
Scope: Nav
URL param: ?vf[Nav]=colored
Powered by Vibeflow GitHub · npm