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.