skills.rest
PMDevSolutions
PMDevSolutionsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

figma-intake

Extract Figma file structure, design tokens, and component inventories into build-spec.json.

7|1|Updated Mar 11, 2026
Search Tags:#react#figma#pipeline#design-to-code#app-development#component-discovery#build-spec
One-click install
npx skills add https://github.com/PMDevSolutions/Aurelius --skill figma-intake
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-intake
Source: https://github.com/PMDevSolutions/Aurelius/tree/main/.claude/skills/figma-intake
Command: npx skills add https://github.com/PMDevSolutions/Aurelius --skill figma-intake

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the tedious manual work of reverse-engineering Figma design files to plan React app builds, saving hours of guesswork and redundant question-asking for developers and product teams.

Core Features & Use Cases

  • Auto-Discovery: Automatically extracts Figma file structure, design tokens, component counts, and local project context (framework, existing components, UI libraries) without any user input.
  • Targeted Questioning: Asks only 3-5 essential, context-aware questions to fill gaps in information, avoiding unnecessary back-and-forth.
  • Machine-Readable Output: Produces a standardized build-spec.json that downstream pipeline phases use to auto-generate tested, production-ready React apps.
  • Use Case: If you have a Figma design for a new web app, this Skill automatically maps all pages and components, checks for existing matching code in your project, and produces a complete build plan in minutes instead of hours.

Quick Start

Provide a Figma file URL to the figma-intake Skill to automatically generate a complete build specification for your React app.

Frequently Asked Questions about figma-intake

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

FAQPage Schema
How do I generate a build spec from a Figma file for a React app?▼

To generate a build spec from a Figma file, provide the Figma URL to automatically extract project context, component inventories, and design tokens into a machine-readable build-spec.json for React app development.

What is design-to-code automation for React component discovery?▼

Design-to-code automation is the process of extracting Figma file structure and design tokens to map pages and components, eliminating manual reverse-engineering for React app builds.

How do I extract design tokens and component inventories from Figma without manual reverse-engineering?▼

You extract design tokens and component inventories by using auto-discovery on a Figma URL, which automatically maps the file structure and local project context to produce a standardized build plan.

Can I use Figma designs to scaffold new projects or integrate into existing React codebases?▼

Yes, you can use Figma designs for both new project scaffolding and integration into existing React codebases, as the process checks for pre-built components and matches existing code automatically.

Do I need to answer a lot of questions to map Figma pages to React components?▼

No, you do not need to answer extensive questions; the process asks only 3-5 targeted, context-aware questions to fill information gaps before outputting the final build plan.

What is the best way to automate test-driven development and token extraction from Figma designs?▼

The best way to automate token extraction and test-driven development is producing a standardized build-spec.json that downstream pipeline phases consume to auto-generate tested, production-ready React apps.

Related Skills

Explore More Software Engineering Skills→
allofmengallofmeng
12

implement-design

Translate Figma designs into UI code using design tokens and MCP context.

Community
Advanced
PMDevSolutionsPMDevSolutions
7

canva-intake

Extract design structure and content from Canva URLs into build-spec.json.

Official
Advanced
alex-tgkalex-tgk

senior-frontend

Automate component generation, bundle analysis, and scaffolding for React projects.

Community
Intermediate
iressiress
1

figma-to-ids

Translates Figma designs into React/TypeScript code with IDS components and tokens.

Official
Intermediate