generate-prototype

Build standalone runnable prototypes from baseline clones with tunnel and canvas registration.

Updated Feb 24, 2026
One-click install
npx skills add https://github.com/orianna-ai/claude-plugin --skill generate-prototype
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-prototype
Source: https://github.com/orianna-ai/claude-plugin/tree/main/plugins/softlight/skills/generate-prototype
Command: npx skills add https://github.com/orianna-ai/claude-plugin --skill generate-prototype

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build a standalone prototype from a baseline app clone to test design ideas quickly, with its own running instance and tunnel, independent from the original app.

Core Features & Use Cases

  • End-to-end prototype creation: Copy baseline, apply design changes, and run as a separate app on its own port.
  • Isolated deployment & registration: Expose a prototype via tunnel and register it on the canvas for comparison and review.
  • Use Case: When you want to validate a design concept by shipping a runnable, isolated prototype that mirrors the baseline but with changes.

Quick Start

Provide the baseline_dir, optional <prototype_dir>, and a <spec>, then run the prototype workflow to build, launch, and register the prototype on the canvas.

Frequently Asked Questions about generate-prototype

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is the best way to compare design changes against a baseline app?▼

To create a standalone prototype, provide the baseline directory, an optional prototype directory, and a design spec. The workflow copies the baseline, applies changes, and runs the new isolated web app on its own port.

How does tunnel creation work for isolated prototype deployment?▼

Tunnel creation exposes the running isolated prototype externally via an automated end-to-end MCP-guided process. The workflow builds and serves the app, then creates the tunnel to provide an accessible URL for validation.

What is canvas registration used for when testing design prototypes?▼

Canvas registration is used to log and organize isolated prototypes for visual comparison and review. After the prototype is built and exposed via a tunnel, it is registered on the canvas to validate the design concept.

Do I need an existing baseline app to generate a runnable prototype?▼

Yes, you need an existing baseline app directory to generate a runnable prototype. The workflow clones the baseline directory and applies your provided design spec to produce an isolated instance with its own tunnel.

Can I validate a design spec without affecting my original web app?▼

Yes, you can validate a design spec without affecting your original web app. The workflow creates an isolated clone of the baseline, running the modified prototype independently on a separate port with its own tunnel.

What is the best way to compare design changes against a baseline app?▼

The best way to compare design changes is generating an isolated prototype from the baseline and registering it on the canvas. This end-to-end MCP-guided process produces a runnable instance for direct visual comparison.