Skills
.Work. You
Rest

figma-mapper

Community

Map tasks to frames and extract design specs.

Design & Creative#figma#mapping#task-breakdown#design-spec#frame-mapping#design-properties#frontend-code-generation
AuthorNikhil-Chopra-7
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Automates the alignment between a feature's task breakdown and a Figma design file, producing a precise mapping of frames to tasks and a complete design-spec alongside enriched task data.

Core Features & Use Cases

  • Automatically discovers dweb and mweb frames from a Figma design parent layer.
  • Maps tasks with Needs Design: yes to relevant frames and captures design contexts for code generation.
  • Extracts design properties (layout, typography, colors, spacing) and references design tokens for downstream styling.
  • Outputs two artifacts: an enriched task breakdown and a design-spec companion file for frontend code generation.
  • Triggers when a user provides a Figma URL together with a task breakdown, or when a Figma URL is pasted in a design-aware conversation.

Quick Start

Provide a Figma file URL and a task breakdown to generate mapping and a design-spec companion.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: figma-mapper
Download link: https://github.com/Nikhil-Chopra-7/claude-frontend-skills/archive/main.zip#figma-mapper

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.