Prototyping with Reva

Vibe-code product ideas in Claude Code with Reva primitives, on-brand by default

Before your first prototype

Nothing to install — the prototyping skills ship with the repo. See Setup for optional power tools.

What this is

A workflow for spinning up vibe-coded product prototypes inside the Reva monorepo. Anyone can use it to explore product ideas without writing code; developers can use it to mock up production candidates with house-quality design from the start. Every prototype is a real Vite app using the Reva design system.

Quickstart — golden path

  1. Open Claude Code at the repo root (reva-apps).
  2. Say what you want to build: "Start a new prototype called expense-tracker. I want to see a list of monthly expenses with totals."
  3. Claude will ask you a few questions to align on what success looks like.
  4. Claude spawns the prototype, starts the dev server, and shows you the preview button.
  5. Iterate by talking — "Group expenses by category", "Add a chart at the top", "Make this work on mobile". Claude rebuilds with Reva primitives.

That's it. No commands to memorize. No git operations to learn.

Under the hood — architecture overview

A prototype is a workspace package at prototypes/<name>/ consuming @reva/ui via workspace:*. It's a standard Vite + React 19 SPA with React Router. The reva-new-prototype skill calls scripts/new-prototype.ts, which:

  1. Validates the prototype name (kebab-case, not taken).
  2. Pre-flights git state (clean tree, on main unless --force-branch).
  3. Creates a prototype/<name> branch off main.
  4. Copies prototypes/_template/ → prototypes/<name>/.
  5. Allocates a port (base 5200, +1 per existing prototype) and writes it into package.json dev script.
  6. Registers the prototype in .claude/launch.json so Claude Code preview auto-discovers it.
  7. Adds a root package.json dev:prototype-<name> convenience script.
  8. Runs bun install.

The Reva-built reva-design-system-adherence skill auto-fires across the whole monorepo (not just prototypes) so every UI generation is on-brand by default.

Sharing prototypes today: branch checkout + bun install + bun run dev:prototype-<name>. Sharing tomorrow: see Sharing prototypes.

Setup

Optional power tools and verifying the prototyping skills

On this page

What this isQuickstart — golden pathUnder the hood — architecture overviewRead next