From pm-copilot
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 Figma.
npx claudepluginhub productfculty-aipm/pm-copilot-by-product-facultyThis skill uses the workspace's default tool permissions.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
Executes pre-written implementation plans: critically reviews, follows bite-sized steps exactly, runs verifications, tracks progress with checkpoints, uses git worktrees, stops on blockers.
Guides idea refinement into designs: explores context, asks questions one-by-one, proposes approaches, presents sections for approval, writes/review specs before coding.
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.
Framework: Colin Matthews (AI prototyping guide), Cursor + v0 workflow.
Read memory/user-profile.md for product context and any existing tech stack information.
To convert a Figma design to a prototype, gather:
From the user:
Figma components to note:
Without a direct Figma plugin, the PM needs to describe the design visually to the AI coding tool. Structure the description:
Visual description per screen: "[Screen name] shows:
Interaction description: "When user clicks [element], they go to [next screen]" "When user types in [input], [behavior]" "The [component] shows [state A] by default and [state B] when [condition]"
Based on the Figma screenshots and description, generate a prototype prompt for the appropriate tool:
# [Feature Name] — Implement this Figma Design
## Visual reference
I have a Figma design for [feature name]. I'll describe each screen.
## Screen 1: [Name]
[Detailed visual description]
## Screen 2: [Name]
[Detailed visual description]
## Interactions
- [Element] → [action]: [result]
- [Element] → [action]: [result]
## Design specs
- Primary color: #[hex] (or: the primary color is a deep blue)
- Background: White / Light gray (#F9FAFB)
- Font: Inter (or: use system fonts, it doesn't matter for prototype)
- Border radius: Rounded (8px) / Pill / Sharp
## What to implement
- All screens above
- Interactions listed above
- Use mock data: [provide examples]
## What NOT to implement
- Hover states (unless already described)
- Responsive mobile layout
- Form validation
- Loading states
- Any screens not described above
## Stack
React, Tailwind CSS, no backend. Match the visual design as closely as possible using the descriptions above.
After the first version is generated:
Design fidelity checklist:
For anything that doesn't match:
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.
When the prototype is ready: