菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use this skill when the user asks to "design an A/B test", "how should I test this", "experiment design", "how do I run an experiment", "test this feature", "set up a split test", "how many users do I need", "statistical significance", "how do I know if this test worked", or wants to design a rigorous experiment to test a product hypothesis.
Use this skill when the user asks specifically about "how to monetize AI features", "should AI be a separate tier", "pricing for AI capabilities", "how to charge for AI", "AI add-on vs. bundle", "AI feature pricing strategy", or is adding AI capabilities to an existing product and wants to decide how to monetize them. This is a specialized version of pricing-review focused on AI feature economics.
Use this skill when the user asks about "altitude and horizon framework", "Shreyas Doshi altitude", "working at the right level", "am I too in the weeds", "I'm too tactical", "how do I work at the right altitude", "horizon thinking for PMs", or wants to evaluate whether they're operating at the right level of abstraction for their role and stage.
Use this skill when the user asks to "map assumptions", "identify assumptions", "what are we assuming", "assumption audit", "what could go wrong with this idea", "test our assumptions", "what do we need to validate", "identify our riskiest assumption", or when reviewing an idea or PRD and wants to surface hidden bets before building. Do NOT use this skill for general risk analysis — that is part of the pre-mortem skill.
Use this skill when the user asks about "attitudinal segmentation", "segmenting by attitude", "AI embracer vs skeptic", "how to segment our users beyond demographics", "psychographic segmentation", "behavioral segmentation", "how users feel about AI", or wants to go beyond demographic user segments to understand attitudinal and behavioral differences that affect product and marketing decisions.
Use this skill when the user asks to "tailor this for different audiences", "write this for an exec vs. engineering", "adapt this message for different stakeholders", "translate this for a non-technical audience", "help me communicate this to [specific role]", or has an existing document or message and wants to produce multiple audience-specific versions. This is a rewriting skill — it takes existing content and adapts it, not generates from scratch.
| name | figma-to-prototype |
| description | 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. |
| version | 2.0.0 |
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: