prototype

Generate interactive prototypes and design specs from product requirements.

Updated Aug 23, 2026

Search Tags:#figma #prototyping #product development #ux design #v0.dev #lovable.dev

Ready to run

npx skills add https://github.com/TimothyNguyen04/pmos --skill prototype-timothynguyen04

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: prototype
Source: https://github.com/TimothyNguyen04/pmos/tree/main/PM-OS/.claude/skills/prototype
Command: npx skills add https://github.com/TimothyNguyen04/pmos --skill prototype-timothynguyen04

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps product managers and teams quickly visualize and validate product ideas by generating interactive prototypes from requirements, saving time and reducing the risk of building the wrong thing.

Core Features & Use Cases

Automated Prototype Generation: Creates prompts for various prototyping tools (v0.dev, Lovable.dev, Bolt.new) or generates direct artifacts (HTML/React).
Requirement Mapping: Ensures prototypes are traceable to PRD requirements and covers essential states (empty, loading, error, success).
Use Case: After drafting a PRD for a new user dashboard, use this Skill to generate a Lovable.dev prompt that creates a fully functional, multi-page prototype for stakeholder review before engineering begins.

Quick Start

Use the prototype skill to generate a v0.dev prompt for a new user profile page based on the latest PRD.

Frequently Asked Questions about prototype

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

FAQPage Schema

How do I generate interactive prototypes from product requirements?▼

To generate interactive prototypes from product requirements, this skill maps PRD requirements to visual representations and creates prompts for tools like v0.dev, Lovable.dev, and Bolt.new, or outputs direct HTML and React artifacts.

How do I create a v0.dev prompt from a PRD?▼

Creating a v0.dev prompt from a PRD involves mapping your product requirements to visual representations and essential user-facing states like empty, loading, error, and success, which the skill automates to facilitate rapid iteration.

Can I generate direct HTML or React prototypes instead of using Lovable.dev?▼

Yes, you can generate direct HTML or React prototypes instead of using Lovable.dev, as the skill supports direct artifact generation alongside creating prompts for various prototyping tools like Bolt.new and v0.dev.

Does prototyping from requirements cover error and loading states?▼

Prototyping from requirements covers error and loading states by mapping PRD requirements to visual representations and ensuring coverage of all essential user-facing states including empty, loading, error, and success.

What is the best way to validate product ideas before engineering begins?▼

The best way to validate product ideas before engineering begins is generating interactive prototypes and detailed design specifications from requirements, ensuring traceability to PRD requirements to reduce the risk of building the wrong thing.

Why should I map PRD requirements to visual representations for stakeholder review?▼

Mapping PRD requirements to visual representations for stakeholder review ensures prototypes are traceable to your requirements and facilitates rapid iteration and validation by covering all essential user-facing states before engineering begins.