skills.rest
qf-studio
qf-studioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

product-design

Automates Figma design review, token extraction, component mapping, and implementation planning via MCP integration.

232|12|Updated Oct 10, 2025
Search Tags:#automation#design system#figma#mcp#design tokens#component mapping#design handoff
One-click install
npx skills add https://github.com/qf-studio/navigator --skill product-design-qf-studio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: product-design
Source: https://github.com/qf-studio/navigator/tree/main/skills/product-design
Command: npx skills add https://github.com/qf-studio/navigator --skill product-design-qf-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires mcp, and includes scripts (resource) components.

What problem does it solve? Design handoff from Figma to code is slow and error-prone, requiring manual extraction of design tokens, component mapping, and drift detection. This Skill reduces the process from 6-10 hours to minutes by connecting directly to the Figma Desktop MCP server and generating structured implementation plans. ## Core Features & Use Cases - Design Token Extraction: Converts Figma variables into W3C DTCG format with diff summaries against existing design-tokens.json. - Component Mapping: Maps Figma components to codebase components using Code Connect data and fuzzy name matching with confidence scores. - Drift Detection & Planning: Audits design system alignment and generates phased Navigator task documents with acceptance criteria. - Use Case: Paste a Figma URL for a dashboard redesign and receive a design review report, token diff, component mappings, and a phased implementation task document ready for development. ## Quick Start Ask the assistant to review your Figma design by providing the file URL, for example: review this Figma design at your file link and generate an implementation plan.

Frequently Asked Questions about product-design

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

FAQPage Schema
How do I extract design tokens from Figma automatically?▼

Run the token_extractor.py script with Figma variables JSON and your existing design-tokens.json. It converts Figma variables to W3C DTCG format and outputs a diff showing new, modified, and unchanged tokens.

How do I map Figma components to React codebase components?▼

Use component_mapper.py with the Figma component analysis and project root path. It checks Figma Code Connect mappings first for 100% confidence matches, then falls back to fuzzy name matching with similarity scores.

Does Figma MCP integration require Figma Enterprise?▼

No, the local MCP server works with any Figma Desktop account v116.0.0 or later. Figma Enterprise is only needed for Code Connect, which provides automatic component-to-code mappings.

Why does the Figma MCP connection fail during setup?▼

Connection fails when Figma Desktop is not running or the local MCP server is disabled. Enable it in Figma Preferences under Enable local MCP Server, then verify port 3845 responds to requests.

What are the limitations of automated design review?▼

Large Figma screens can exceed MCP token limits, requiring metadata-first fetching of individual components. Without Figma Desktop running, only the manual workflow is available, which requires users to describe tokens and components themselves.

Related Skills

Explore More Design & Creative Skills→
mkatoguimkatogui
3

figma-handoff

Sync Figma tokens with design-tokens.json and validate DTCG structure.

Community
Advanced
CoRLab-TechCoRLab-Tech

pix

Implement UI components from Figma designs with pixel-perfect accuracy.

Official
Advanced
vesvietvesviet

setup-design-system

Configure design tokens, styling frameworks, and component primitives for frontend projects.

Community
Intermediate
dkyazzentwatwadkyazzentwatwa
32

product-design

Analyze Figma designs against UI kit inventory to identify token drift and component reuse.

Community
Advanced