Real Prototypes - Claude Code Plugin

Capture any web platform's visual design and generate pixel-perfect Next.js prototypes.

Installation

Option 1: Install from the Claude Code marketplace

# Add this repo as a marketplace
/plugin marketplace add kaidhar/real-prototypes-plugin

# Install the plugin from that marketplace
/plugin install real-prototypes@kaidhar-plugins

Option 2: Install from npm

# Install into your project
npm install --save-dev real-prototypes-plugin

# Run Claude Code with the installed plugin
claude --plugin-dir ./node_modules/real-prototypes-plugin

Option 3: Local Plugin Directory

# Clone this repo and run Claude Code against it directly
claude --plugin-dir /path/to/real-prototypes-plugin

Option 4: Pack the Plugin Manually

# Create a tarball you can move or publish elsewhere
npm pack

This package is self-contained. It includes the plugin manifest, marketplace metadata, slash commands, and embedded skills under skills/.

Commands

Once installed as a plugin, the following slash commands are available:

| Command | Description | |---------|-------------| | /real-prototypes:quickstart | Full pipeline: capture, extract, scaffold, serve | | /real-prototypes:capture | Capture a platform's visual design | | /real-prototypes:serve | Start dev server for a prototype | | /real-prototypes:validate | Run validation gates | | /real-prototypes:plan | Generate an implementation plan | | /real-prototypes:list | List all projects | | /real-prototypes:help | Show available commands |

Quick Start

Install the plugin through the marketplace or start Claude Code with the plugin directory, then tell Claude what you want:

"I want to prototype a chatbot for salesforce.com"

Claude will automatically:

1. Capture the platform's design
2. Extract colors, fonts, and components
3. Generate a Next.js prototype
4. Start a dev server
5. Open it in your browser

Configuration

Add platform credentials to your project's CLAUDE.md:

## Platform Credentials

PLATFORM_URL=https://your-platform.com
[email protected]
PLATFORM_PASSWORD=your-password

What's Included

Skills (Auto-invoked)

• real-prototypes - Core skill for platform capture and prototype generation
• agent-browser - Browser automation via Vercel's agent-browser

Slash Commands (User-invoked)

Seven commands for common operations (see table above)

Tech Stack

Generated prototypes use:

• Next.js 14+ (App Router)
• Tailwind CSS
• shadcn/ui components
• TypeScript

Requirements

• Claude Code 1.0.33+
• Node.js 18+
• agent-browser available globally for browser automation

Publishing

# Verify the package contents
npm pack --dry-run

# Authenticate once per machine
npm login

# Publish the current version
npm publish --access public

Increase the version in package.json before each new release.

Marketplace Metadata

This repo includes .claude-plugin/marketplace.json so Claude Code can use the GitHub repository as a plugin marketplace source.

License

Apache-2.0