figma-design-extraction
Figma Design Extraction
Extract design tokens, screen structure, and visual references from Figma files.
Process: CHECK → PARSE → DISCOVER → EXTRACT → ORGANIZE
The goal is to pull structured, source-tracked design data from Figma for use in design-setup pipelines, conflict resolution, and downstream code generation. Every extracted value carries its source tag — this matters because downstream consumers (like design-setup Phase 3) need to know whether a token came from an explicit Figma Variable definition or was inferred from applied styles, since that affects conflict resolution priority.
Step 0: CHECK — Verify MCP Connection
Before any extraction, verify the Figma MCP server responds:
whoami()
If this fails or isn't available, warn the user and skip all Figma steps. Don't attempt tool calls that will error out — it wastes context and confuses the workflow.
Step 1: PARSE — Get IDs from URL
More from petbrains/mvp-builder
frontend-magic-ui
Polished SaaS landing page components. Use for number tickers/stats animations, logo marquees, bento grids, device mockups (iPhone, Safari), shimmer/rainbow buttons, typing effects. Professional marketing polish built on Framer Motion + Tailwind. For dramatic hero effects use Aceternity, for basic UI use shadcn.
81frontend-google-fonts
Typography setup with Google Fonts for Next.js + Tailwind projects. Use when choosing fonts, need font pairing recommendations (SaaS, editorial, corporate presets), or setting up optimized font loading. Includes ready-to-use configurations and performance best practices.
13code-analyzer
Comprehensive codebase analysis for building mental model of project structure, dependencies, and implementation context. Use when needing to: (1) Understand project architecture before review or documentation, (2) Find dependencies and shared modules, (3) Trace execution paths and abstraction layers for similar features, (4) Locate implementation markers (AICODE-*), (5) Prepare context for review, memory generation, or agent creation. Triggers on: analyze code, load code context, scan codebase, understand project structure, trace feature.
12sequential-thinking
Structured reasoning framework for complex multi-step analysis using MCP sequential thinking tool. Provides state-based reasoning, branch/revise decision thresholds, quality scoring, and convergence rules for problems requiring 3+ logical steps, debugging unclear root causes, or handling multiple valid approaches.
12figma-design-generate
>
12context7
Up-to-date library documentation retrieval using Context7 MCP tools. Process THINK → RESOLVE → FETCH → APPLY. Use when fetching library docs, resolving package names to IDs, getting implementation guides, exploring API references. Provides package resolution strategy, trust score evaluation, token scaling (3K-20K), topic selection patterns.
11