prototype-ready-spec

Name: prototype-ready-spec
Author: Productfculty-aipm

70stars33forks

How to install prototype-ready-spec?

productfculty-aipm/pm-copilot-by-product-faculty/prototype-ready-spec

$npx -y skills add Productfculty-aipm/PM-Copilot-by-Product-Faculty --skill prototype-ready-spec

Installs into the current project.

Summary

Use this skill when the user asks to "create a prototype spec", "write a prompt for v0", "write a vibe-coding prompt", "turn this PRD into a prototype prompt", "create a Bolt prompt", "help me prototype this", "write a spec for Lovable", or wants to convert a PRD or feature descr

Files · 1

View on GitHub

SKILL.md

1	# Prototype-Ready Spec
2
3	You are converting a product spec into a prototype-ready prompt — a self-contained, precise instruction set that can be dropped directly into v0, Bolt, Lovable, or Cursor to generate a working prototype. The goal is to enable a PM to go from PRD to interactive prototype in under 10 minutes.
4
5	Framework: Colin Matthews (PRD → prototype in 10 minutes), Aparna Chennapragada (NLX as the new UX — prototyping is now mandatory for PMs).
6
7	Key principle from Matthews: "A PM can turn a PRD into a working prototype in under 10 minutes. The spec just needs to be self-contained, scoped to the happy path, and clear about what to exclude." — Lenny's Newsletter (2025)
8
9	## Step 1 — Load Context
10
11	Read `memory/user-profile.md` for the product context (name, stage, target user). Read the PRD or feature description provided.
12
13	## Step 2 — Select the Right Tool
14
15	Guide the user to the right prototyping tool based on what they need:
16
17	\| Need \| Best tool \|
18	\|---\|---\|
19	\| Quick interactive mockup, no backend \| v0 (Vercel) — best for React UI components \|
20	\| Full app with simple backend \| Bolt — best for complete application scaffolds \|
21	\| Consumer product, beautiful UI \| Lovable — best for polished consumer UX \|
22	\| Complex logic, local iteration \| Cursor — best for local development with AI assist \|
23	\| Conversational / AI feature demo \| Claude Artifacts — best for chat-based interactions \|
24
25	Ask: "What kind of prototype do you need — a UI flow to show stakeholders, or a working feature to test with users?"
26
27	## Step 3 — Scope to Happy Path Only
28
29	A prototype-ready spec covers ONLY the happy path — the sequence of steps where everything works and the user achieves their goal without errors.
30
31	Explicitly exclude from the prototype:
32	- Error states and validation
33	- Empty states
34	- Authentication and authorization flows
35	- Admin views
36	- Settings and configuration
37	- Edge cases
38	- Mobile responsiveness (unless that's the prototype's primary purpose)
39
40	## Step 4 — Write the Prototype Prompt
41
42	Generate a self-contained prototype prompt in this structure:
43
44	```
45	# Prototype: [Feature Name]
46
47	## Goal
48	Build a [happy path only] interactive prototype of [feature name].
49
50	## User
51	[Primary user] — [one sentence: who they are and what they're trying to accomplish in this prototype]
52
53	## Core interaction
54	[One sentence: the single most important thing the user does in this prototype]
55
56	## Screens to build
57
58	### Screen 1: [Name]
59	- Purpose: [What this screen achieves]
60	- Key elements: [List the UI elements — buttons, inputs, cards, etc.]
61	- User action: [What the user does on this screen]
62	- Transition: [What happens when they take that action]
63
64	### Screen 2: [Name]
65	- Purpose: [...]
66	- Key elements: [...]
67	- User action: [...]
68	- Transition: [...]
69
70	### Screen 3: [Name — usually the success/outcome state]
71	- Purpose: [What success looks like]
72	- Key elements: [...]
73
74	## Mock data
75	Use this data in the prototype: [Provide 3–5 realistic example records/items the prototype should display]
76
77	## Do NOT build
78	- Auth flows (start logged in)
79	- Error states or validation
80	- Empty states
81	- Settings or configuration screens
82	- [Other specific exclusions based on the PRD's out-of-scope section]
83
84	## Stack
85	[React / Next.js / Tailwind CSS — adjust based on tool selected]
86	No backend required. Use hardcoded mock data.
87	Focus on interaction flow, not visual polish.
88
89	## Definition of done
90	The prototype is complete when a user can [describe the happy path end-to-end in one sentence] without any blockers.
91	```
92
93	## Step 5 — NLX Design Notes (for AI/conversational features)
94
95	If the feature is AI-powered or conversational, add NLX (Natural Language Experience) design notes:
96
97	Based on Aparna Chennapragada: "NLX is the new UX — the grammar, structure, and affordances of a natural language conversation are as designable as a visual UI."
98
99	- Conversation grammar: What's the opening message? What are the expected user inputs? What are the response patterns?
100	- Invisible UI elements: What does the AI reveal or hide based on context?
101	- Natural language affordances: What language cues tell users what they can do next?
102	- Fallback behavior: What does the prototype do when the user says something unexpected?
103
104	## Step 6 — Output
105
106	Provide:
107	- Tool recommendation with rationale
108	- Complete prototype prompt (ready to paste into the tool)
109	- NLX design notes (if applicable)
110	- Instructions for sharing or testing the prototype
111
112	Offer to save the prompt to `outputs/prototyp

Productfculty-aipmPublisher · 69 listings

Preview

Productfculty-aipm/PM-Copilot-by-Product-Faculty

# Prototype-Ready Spec

You are converting a product spec into a prototype-ready prompt — a self-contained, precise instruction set that can be dropped directly into v0, Bolt, Lovable,

Framework: Colin Matthews (PRD → prototype in 10 minutes), Aparna Chennapragada (NLX as the new UX — prototyping is now mandatory for PMs).

Key principle from Matthews: "A PM can turn a PRD into a working prototype in under 10 minutes. The spec just needs to be self-contained, scoped to the happy pa

RepoProductfculty-aipm/PM-Copilot-by-Product-Faculty

License—

TypeSkills

CategoryPlanning

UpdatedApr 2026

Repo stars70

First seenJul 22, 2026

People who liked this also viewed

6 picks

Type

prototype-ready-spec

70stars33forks

View on GitHub

How to install prototype-ready-spec?

productfculty-aipm/pm-copilot-by-product-faculty/prototype-ready-spec

$npx -y skills add Productfculty-aipm/PM-Copilot-by-Product-Faculty --skill prototype-ready-spec

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Prototype-Ready Spec
2
3	You are converting a product spec into a prototype-ready prompt — a self-contained, precise instruction set that can be dropped directly into v0, Bolt, Lovable, or Cursor to generate a working prototype. The goal is to enable a PM to go from PRD to interactive prototype in under 10 minutes.
4
5	Framework: Colin Matthews (PRD → prototype in 10 minutes), Aparna Chennapragada (NLX as the new UX — prototyping is now mandatory for PMs).
6
7	Key principle from Matthews: "A PM can turn a PRD into a working prototype in under 10 minutes. The spec just needs to be self-contained, scoped to the happy path, and clear about what to exclude." — Lenny's Newsletter (2025)
8
9	## Step 1 — Load Context
10
11	Read `memory/user-profile.md` for the product context (name, stage, target user). Read the PRD or feature description provided.
12
13	## Step 2 — Select the Right Tool
14
15	Guide the user to the right prototyping tool based on what they need:
16
17	\| Need \| Best tool \|
18	\|---\|---\|
19	\| Quick interactive mockup, no backend \| v0 (Vercel) — best for React UI components \|
20	\| Full app with simple backend \| Bolt — best for complete application scaffolds \|
21	\| Consumer product, beautiful UI \| Lovable — best for polished consumer UX \|
22	\| Complex logic, local iteration \| Cursor — best for local development with AI assist \|
23	\| Conversational / AI feature demo \| Claude Artifacts — best for chat-based interactions \|
24
25	Ask: "What kind of prototype do you need — a UI flow to show stakeholders, or a working feature to test with users?"
26
27	## Step 3 — Scope to Happy Path Only
28
29	A prototype-ready spec covers ONLY the happy path — the sequence of steps where everything works and the user achieves their goal without errors.
30
31	Explicitly exclude from the prototype:
32	- Error states and validation
33	- Empty states
34	- Authentication and authorization flows
35	- Admin views
36	- Settings and configuration
37	- Edge cases
38	- Mobile responsiveness (unless that's the prototype's primary purpose)
39
40	## Step 4 — Write the Prototype Prompt
41
42	Generate a self-contained prototype prompt in this structure:
43
44	```
45	# Prototype: [Feature Name]
46
47	## Goal
48	Build a [happy path only] interactive prototype of [feature name].
49
50	## User
51	[Primary user] — [one sentence: who they are and what they're trying to accomplish in this prototype]
52
53	## Core interaction
54	[One sentence: the single most important thing the user does in this prototype]
55
56	## Screens to build
57
58	### Screen 1: [Name]
59	- Purpose: [What this screen achieves]
60	- Key elements: [List the UI elements — buttons, inputs, cards, etc.]
61	- User action: [What the user does on this screen]
62	- Transition: [What happens when they take that action]
63
64	### Screen 2: [Name]
65	- Purpose: [...]
66	- Key elements: [...]
67	- User action: [...]
68	- Transition: [...]
69
70	### Screen 3: [Name — usually the success/outcome state]
71	- Purpose: [What success looks like]
72	- Key elements: [...]
73
74	## Mock data
75	Use this data in the prototype: [Provide 3–5 realistic example records/items the prototype should display]
76
77	## Do NOT build
78	- Auth flows (start logged in)
79	- Error states or validation
80	- Empty states
81	- Settings or configuration screens
82	- [Other specific exclusions based on the PRD's out-of-scope section]
83
84	## Stack
85	[React / Next.js / Tailwind CSS — adjust based on tool selected]
86	No backend required. Use hardcoded mock data.
87	Focus on interaction flow, not visual polish.
88
89	## Definition of done
90	The prototype is complete when a user can [describe the happy path end-to-end in one sentence] without any blockers.
91	```
92
93	## Step 5 — NLX Design Notes (for AI/conversational features)
94
95	If the feature is AI-powered or conversational, add NLX (Natural Language Experience) design notes:
96
97	Based on Aparna Chennapragada: "NLX is the new UX — the grammar, structure, and affordances of a natural language conversation are as designable as a visual UI."
98
99	- Conversation grammar: What's the opening message? What are the expected user inputs? What are the response patterns?
100	- Invisible UI elements: What does the AI reveal or hide based on context?
101	- Natural language affordances: What language cues tell users what they can do next?
102	- Fallback behavior: What does the prototype do when the user says something unexpected?
103
104	## Step 6 — Output
105
106	Provide:
107	- Tool recommendation with rationale
108	- Complete prototype prompt (ready to paste into the tool)
109	- NLX design notes (if applicable)
110	- Instructions for sharing or testing the prototype
111
112	Offer to save the prompt to `outputs/prototyp

Productfculty-aipmPublisher · 69 listings

Preview

Productfculty-aipm/PM-Copilot-by-Product-Faculty

# Prototype-Ready Spec

You are converting a product spec into a prototype-ready prompt — a self-contained, precise instruction set that can be dropped directly into v0, Bolt, Lovable,

Framework: Colin Matthews (PRD → prototype in 10 minutes), Aparna Chennapragada (NLX as the new UX — prototyping is now mandatory for PMs).

Key principle from Matthews: "A PM can turn a PRD into a working prototype in under 10 minutes. The spec just needs to be self-contained, scoped to the happy pa

RepoProductfculty-aipm/PM-Copilot-by-Product-Faculty

License—

TypeSkills

CategoryPlanning

UpdatedApr 2026

Repo stars70

First seenJul 22, 2026

People who liked this also viewed

6 picks

Type