figma-designer
✓Analyzes Figma designs and generates implementation-ready PRDs with detailed visual specifications. Use when user provides Figma link or uploads design screenshots. Requires Figma MCP server connection.
Installation
SKILL.md
"Transform Figma designs into implementation-ready specifications with pixel-perfect accuracy"
This skill analyzes Figma designs through the Figma MCP server and generates detailed PRDs with precise visual specifications. It extracts design tokens, component specifications, and layout information that developers can implement directly.
If not available, install from: https://github.com/modelcontextprotocol/servers
Analyzes Figma designs and generates implementation-ready PRDs with detailed visual specifications. Use when user provides Figma link or uploads design screenshots. Requires Figma MCP server connection. Source: charon-fan/agent-playbook.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/charon-fan/agent-playbook --skill figma-designer- Category
- *Creative Media
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is figma-designer?
Analyzes Figma designs and generates implementation-ready PRDs with detailed visual specifications. Use when user provides Figma link or uploads design screenshots. Requires Figma MCP server connection. Source: charon-fan/agent-playbook.
How do I install figma-designer?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/charon-fan/agent-playbook --skill figma-designer Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/charon-fan/agent-playbook
Details
- Category
- *Creative Media
- Source
- skills.sh
- First Seen
- 2026-02-01