figma-to-prototype

Name: figma-to-prototype
Author: Productfculty-aipm

70stars33forks

How to install figma-to-prototype?

productfculty-aipm/pm-copilot-by-product-faculty/figma-to-prototype

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

Installs into the current project.

Summary

Use this skill when the user has a Figma design and wants to turn it into a working prototype, asks "how do I turn my Figma into a prototype", "Figma to code", "take this design and make it interactive", or wants to use AI coding tools to implement a design that already exists in

Files · 1

View on GitHub

SKILL.md

1	# Figma to Working Prototype
2
3	You are helping the user convert an existing Figma design into a working interactive prototype using AI coding tools. This workflow is faster than traditional dev handoff for prototyping purposes — the goal is a functional prototype for user testing, not production code.
4
5	Framework: Colin Matthews (AI prototyping guide), Cursor + v0 workflow.
6
7	## Step 1 — Load Context
8
9	Read `memory/user-profile.md` for product context and any existing tech stack information.
10
11	## Step 2 — What You Need from Figma
12
13	To convert a Figma design to a prototype, gather:
14
15	From the user:
16	1. Screenshots or exports of each screen (PNG or JPG)
17	2. Any Figma export link or frame names
18	3. The intended user flow (which screens connect to which, and what triggers each transition)
19	4. Interactive elements: which buttons, links, inputs, and dropdowns need to work?
20
21	Figma components to note:
22	- Color palette (can be extracted from Figma → use in Tailwind config)
23	- Typography (font family and scale)
24	- Spacing and border radius (for design consistency)
25	- Component names (helps when describing what to build)
26
27	## Step 3 — Describe the Design for the AI Coding Tool
28
29	Without a direct Figma plugin, the PM needs to describe the design visually to the AI coding tool. Structure the description:
30
31	Visual description per screen:
32	"[Screen name] shows:
33	- Header: [describe header content and layout]
34	- Main content area: [describe what's in it — list? cards? form? table?]
35	- [Key element]: [color, size, position, content]
36	- CTA: [button text, placement, color]"
37
38	Interaction description:
39	"When user clicks [element], they go to [next screen]"
40	"When user types in [input], [behavior]"
41	"The [component] shows [state A] by default and [state B] when [condition]"
42
43	## Step 4 — Generate the Prototype Prompt
44
45	Based on the Figma screenshots and description, generate a prototype prompt for the appropriate tool:
46
47	```
48	# [Feature Name] — Implement this Figma Design
49
50	## Visual reference
51	I have a Figma design for [feature name]. I'll describe each screen.
52
53	## Screen 1: [Name]
54	[Detailed visual description]
55
56	## Screen 2: [Name]
57	[Detailed visual description]
58
59	## Interactions
60	- [Element] → [action]: [result]
61	- [Element] → [action]: [result]
62
63	## Design specs
64	- Primary color: #[hex] (or: the primary color is a deep blue)
65	- Background: White / Light gray (#F9FAFB)
66	- Font: Inter (or: use system fonts, it doesn't matter for prototype)
67	- Border radius: Rounded (8px) / Pill / Sharp
68
69	## What to implement
70	- All screens above
71	- Interactions listed above
72	- Use mock data: [provide examples]
73
74	## What NOT to implement
75	- Hover states (unless already described)
76	- Responsive mobile layout
77	- Form validation
78	- Loading states
79	- Any screens not described above
80
81	## Stack
82	React, Tailwind CSS, no backend. Match the visual design as closely as possible using the descriptions above.
83	```
84
85	## Step 5 — Iteration on Design Fidelity
86
87	After the first version is generated:
88
89	Design fidelity checklist:
90	- [ ] Layout matches the general structure (not necessarily pixel-perfect)
91	- [ ] Colors are approximately correct
92	- [ ] Typography hierarchy is readable
93	- [ ] Key interactions work (clicking the right buttons goes to the right screens)
94	- [ ] Mock data is realistic
95
96	For anything that doesn't match:
97	- "The [element] should be [description]. Currently it looks like [current state]. Change it to [specific instruction]."
98
99	Be specific about what's wrong and what correct looks like. "It doesn't match the design" is not actionable — "The card should have a light gray background (#F3F4F6) not white" is.
100
101	## Step 6 — Hand-off Notes
102
103	When the prototype is ready:
104	- Document: what's interactive vs. static (annotate if sharing with team)
105	- Note: any design decisions made during implementation that deviate from Figma
106	- Share: the prototype URL + a note about the purpose ("This is for [user testing / stakeholder demo / engineering reference]")

People who liked this also viewed

6 picks

Type

figma-to-prototype

70stars33forks

View on GitHub

How to install figma-to-prototype?

productfculty-aipm/pm-copilot-by-product-faculty/figma-to-prototype

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Figma to Working Prototype
2
3	You are helping the user convert an existing Figma design into a working interactive prototype using AI coding tools. This workflow is faster than traditional dev handoff for prototyping purposes — the goal is a functional prototype for user testing, not production code.
4
5	Framework: Colin Matthews (AI prototyping guide), Cursor + v0 workflow.
6
7	## Step 1 — Load Context
8
9	Read `memory/user-profile.md` for product context and any existing tech stack information.
10
11	## Step 2 — What You Need from Figma
12
13	To convert a Figma design to a prototype, gather:
14
15	From the user:
16	1. Screenshots or exports of each screen (PNG or JPG)
17	2. Any Figma export link or frame names
18	3. The intended user flow (which screens connect to which, and what triggers each transition)
19	4. Interactive elements: which buttons, links, inputs, and dropdowns need to work?
20
21	Figma components to note:
22	- Color palette (can be extracted from Figma → use in Tailwind config)
23	- Typography (font family and scale)
24	- Spacing and border radius (for design consistency)
25	- Component names (helps when describing what to build)
26
27	## Step 3 — Describe the Design for the AI Coding Tool
28
29	Without a direct Figma plugin, the PM needs to describe the design visually to the AI coding tool. Structure the description:
30
31	Visual description per screen:
32	"[Screen name] shows:
33	- Header: [describe header content and layout]
34	- Main content area: [describe what's in it — list? cards? form? table?]
35	- [Key element]: [color, size, position, content]
36	- CTA: [button text, placement, color]"
37
38	Interaction description:
39	"When user clicks [element], they go to [next screen]"
40	"When user types in [input], [behavior]"
41	"The [component] shows [state A] by default and [state B] when [condition]"
42
43	## Step 4 — Generate the Prototype Prompt
44
45	Based on the Figma screenshots and description, generate a prototype prompt for the appropriate tool:
46
47	```
48	# [Feature Name] — Implement this Figma Design
49
50	## Visual reference
51	I have a Figma design for [feature name]. I'll describe each screen.
52
53	## Screen 1: [Name]
54	[Detailed visual description]
55
56	## Screen 2: [Name]
57	[Detailed visual description]
58
59	## Interactions
60	- [Element] → [action]: [result]
61	- [Element] → [action]: [result]
62
63	## Design specs
64	- Primary color: #[hex] (or: the primary color is a deep blue)
65	- Background: White / Light gray (#F9FAFB)
66	- Font: Inter (or: use system fonts, it doesn't matter for prototype)
67	- Border radius: Rounded (8px) / Pill / Sharp
68
69	## What to implement
70	- All screens above
71	- Interactions listed above
72	- Use mock data: [provide examples]
73
74	## What NOT to implement
75	- Hover states (unless already described)
76	- Responsive mobile layout
77	- Form validation
78	- Loading states
79	- Any screens not described above
80
81	## Stack
82	React, Tailwind CSS, no backend. Match the visual design as closely as possible using the descriptions above.
83	```
84
85	## Step 5 — Iteration on Design Fidelity
86
87	After the first version is generated:
88
89	Design fidelity checklist:
90	- [ ] Layout matches the general structure (not necessarily pixel-perfect)
91	- [ ] Colors are approximately correct
92	- [ ] Typography hierarchy is readable
93	- [ ] Key interactions work (clicking the right buttons goes to the right screens)
94	- [ ] Mock data is realistic
95
96	For anything that doesn't match:
97	- "The [element] should be [description]. Currently it looks like [current state]. Change it to [specific instruction]."
98
99	Be specific about what's wrong and what correct looks like. "It doesn't match the design" is not actionable — "The card should have a light gray background (#F3F4F6) not white" is.
100
101	## Step 6 — Hand-off Notes
102
103	When the prototype is ready:
104	- Document: what's interactive vs. static (annotate if sharing with team)
105	- Note: any design decisions made during implementation that deviate from Figma
106	- Share: the prototype URL + a note about the purpose ("This is for [user testing / stakeholder demo / engineering reference]")

People who liked this also viewed

6 picks

Type