skills.rest
zhaono1
zhaono1COMMUNITY
Explore all skills by this author →
GitHub

figma-designer

Analyze Figma designs and generate a four-file PRD set in docs/.

69|11|Updated Jan 10, 2026
Search Tags:#design#specification#figma#mcp#handoff#tokens#prd
One-click install
npx skills add https://github.com/zhaono1/agent-playbook --skill figma-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-designer
Source: https://github.com/zhaono1/agent-playbook/tree/main/skills/figma-designer
Command: npx skills add https://github.com/zhaono1/agent-playbook --skill figma-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Quickly translate Figma designs into implementation-ready PRDs and precise visual specifications, reducing back-and-forth between design and engineering.

Core Features & Use Cases

  • Analyze Figma designs via the Figma MCP server to extract tokens, component hierarchy, and layout details.
  • Generate a complete four-file PRD set (notes, task plan, prd, tech) in docs/ for seamless handoff.
  • Adapt outputs for React, React Native, and SwiftUI front-end implementations.

Quick Start

Provide a Figma URL or upload a design screenshot and say analyze this design to generate PRDs.

Frequently Asked Questions about figma-designer

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

FAQPage Schema
How do I generate a PRD from a Figma design for engineering handoff?▼

Yes, Figma MCP server connection is required to analyze Figma designs and extract detailed visual specifications, design tokens, and component hierarchy for the generated PRD files.

Can I generate implementation-ready specs for React Native and SwiftUI from Figma?▼

Yes, you can generate implementation-ready specs for React Native and SwiftUI, as the PRD outputs adapt visual specifications and component details specifically for React, React Native, and SwiftUI front-end implementations.

What files are included in the PRD set generated from Figma designs?▼

The PRD set generated from Figma designs includes four markdown files in the docs/ directory: {feature}-notes.md, {feature}-task-plan.md, {feature}-prd.md, and {feature}-tech.md for seamless engineering handoff.

Does Figma design to PRD conversion work with uploaded screenshots?▼

Yes, Figma design to PRD conversion works with uploaded screenshots, allowing the system to analyze the provided design image and extract layout information and component specs without needing a direct Figma URL.

What's the best way to extract design tokens and component hierarchy from Figma?▼

The best way to extract design tokens and component hierarchy from Figma is by using a Figma MCP server connection to analyze the design URL, which systematically captures visual specifications for engineering handoff.

Related Skills

Explore More Design & Creative Skills→
lidge-junlidge-jun
5

figma-implement-design

Translate Figma designs into React and Tailwind code components.

Community
Advanced
thehivegroup-aithehivegroup-ai

react-tailwind-conventions

Standardize Tailwind CSS conventions for React UI components.

Official
Intermediate
xxyjxxyj

msx:plan

Generate technical implementation plans from specifications with Figma integration and compliance checks.

Community
Advanced
terzigoluterzigolu
37

figma-generate-design

Translate code-based UI layouts into Figma screens using design-system tokens.

Community
Intermediate