skills.rest
alekspetrov
alekspetrovCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

product-design

Extract design tokens and generate implementation plans from Figma.

196|11|Updated Oct 10, 2025
Search Tags:#design#figma#mcp#tokens#drift
One-click install
npx skills add https://github.com/alekspetrov/navigator --skill product-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: product-design
Source: https://github.com/alekspetrov/navigator/tree/main/skills/product-design
Command: npx skills add https://github.com/alekspetrov/navigator --skill product-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reduces design handoff time from hours to minutes by connecting Figma MCP directly to the code base and generating plan-driven implementation tasks.

Core Features & Use Cases

  • Design analysis, drift detection, and implementation planning
  • Automated task creation and design-review reports
  • Generation of phased implementation plans and tokens

Quick Start

Say "Review this design" to trigger a full design-analysis workflow and create related tasks.

Frequently Asked Questions about product-design

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

FAQPage Schema
How do I automate design handoff from Figma to code?▼

Design handoff automation connects Figma directly to your codebase via MCP integration, extracting design tokens and component mappings to generate implementation plans. This reduces handoff time from hours to minutes by creating phased task documents and drift reports automatically.

Can I detect design drift between Figma and my codebase?▼

Yes, drift auditing compares your Figma designs against implemented code to identify misalignments. The Skill generates drift reports highlighting discrepancies in tokens, components, and styling so you can prioritize updates systematically.

What does design token extraction do?▼

Token extraction pulls design values—colors, typography, spacing, shadows—directly from Figma into structured format for your codebase. Generated tokens map Figma properties to code implementation, ensuring consistency across web and mobile.

Do I need a local MCP server to use this Skill?▼

Yes, the Skill requires a local MCP server to connect Figma directly to your environment. Python tooling processes the connection, enabling real-time design analysis and code mapping without manual export steps.

How do I create implementation tasks from Figma designs?▼

Say 'Review this design' to trigger a full design-analysis workflow. The Skill generates phased implementation plans and Navigator task documents that break down UI feature work into actionable steps for your team.

What codebase types does this support?▼

The Skill applies to modern web and mobile codebases. It maps Figma components to your existing code structure and generates implementation guidance compatible with contemporary development frameworks.

Related Skills

Explore More Design & Creative Skills→
RonnasaydRonnasayd
1

figma-design-system-to-tailwind

Convert Figma design systems into Tailwind CSS v4 configurations and component mappings.

Community
Advanced
chiroro-jrchiroro-jr
21

pencil-design

Convert Pencil .pen designs into React/Next.js and Tailwind v4 code.

Community
Advanced
strongeronstrongeron
18

sb-figma

Synchronize Figma design tokens and components with Storybook.

Community
Advanced
dylantarredylantarre
38

design-tokens-structure

Structures design tokens into a 3-layer system for theming and governance.

Community
Basic