Figma Designer

Takes a Figma URL or screenshot and generates implementation specs by connecting to the Figma MCP server. It extracts design tokens (colors, typography, spacing), maps out component hierarchies with their props and variants, and documents interaction states and responsive behavior. Outputs either a full 4-file PRD or focused design spec documents with pixel measurements, CSS values, and component definitions ready for development. The token extraction is thorough, covering everything from shadow values to letter spacing, which saves the usual back-and-forth with designers. Most useful when you're starting implementation and need exact specs rather than eyeballing designs.

skills.sh installs: 729
GitHub stars: 66
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add charon-fan/agent-playbook --skill figma-designer --agent claude-code

Installs into .claude/skills of the current project.

Files

Figma Designer

"Transform Figma designs into implementation-ready specifications with pixel-perfect accuracy"

Overview

This skill analyzes Figma designs through the available Figma integration and produces design evidence. prd-planner owns product requirements and technical PRD methodology; this skill supplies visual facts and unresolved design gaps.

Prerequisites

Figma MCP Server

Ensure the host exposes a Figma MCP server or plugin before using this skill. Tool names vary by host and plugin version, so inspect the available Figma tools in the current session instead of assuming fixed names. The required capability set is: