generate-figma — generate-figma install generate-figma, product-studio, community, generate-figma install, ide skills, generate-figma Figma Console MCP, generate-figma AI agent, generate-figma design automation, Claude Code, Cursor, Windsurf

v1.0.0
GitHub

About this Skill

Perfect for Design Automation Agents needing seamless Figma integration for dynamic design generation and updates. generate-figma is an operations system for teams that automates design processes in Figma using specialized AI agents and the Figma Console MCP.

Features

Uses Figma Console MCP to generate or update designs
Supports target file details, including file key, file URL, and parent node ID
Provides capture IDs or endpoints for capture flows
Resolves file keys for design generation or update
Integrates with Figma files, including https://www.figma.com/file/abc123/... URLs

# Core Topics

generate-figma install generate-figma Figma Console MCP generate-figma AI agent generate-figma design automation
ryanallen ryanallen
[1]
[0]
Updated: 3/6/2026

Agent Capability Analysis

The generate-figma skill by ryanallen is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance. Optimized for generate-figma install, generate-figma Figma Console MCP, generate-figma AI agent.

Ideal Agent Persona

Perfect for Design Automation Agents needing seamless Figma integration for dynamic design generation and updates.

Core Value

Empowers agents to generate or update designs directly within Figma using the Figma Console MCP, facilitating streamlined design processes and collaborations through the use of target file details, file keys, or Figma file URLs, and optional parent node IDs for structured design hierarchy.

↓ Capabilities Granted for generate-figma

Automating design updates in Figma based on input parameters
Generating new design components within existing Figma files
Capturing IDs or endpoints for handoff or reporting in design workflows

! Prerequisites & Limits

  • Requires Figma file details or access to Figma Console MCP
  • Dependent on Figma's API and MCP capabilities
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

generate-figma

Install generate-figma, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

Generate Figma

Use the Figma Console MCP with target file details to generate or update a design, or to get capture IDs or endpoints for capture flows.

Inputs

  • Figma file details (required) – Target file, file key, or Figma file URL (e.g. https://www.figma.com/file/abc123/...). Optional parent node ID if the design should go under a specific node.

Output

Design generation or update in Figma, or capture ID/endpoint to report or hand off.

Process

  1. Resolve – File key (and node id if given) from the user's Figma file URL or details.
  2. Call MCP – Figma Console MCP with those parameters.
  3. Report – Use the response (capture ID, endpoint) to report to the user or hand off to another flow.

Requirements

  • Figma Console MCP configured and authenticated.
  • Figma Desktop Bridge (for Prompt to Figma): run npm run setup:figma-bridge to extract to .claude/skills/generate-figma/scripts/figma-desktop-bridge. In Figma Desktop, Plugins → Development → Import plugin from manifest → select .claude/skills/generate-figma/scripts/figma-desktop-bridge/manifest.json. Keep the bridge running while using Prompt to Figma.

Reference

Figma Console MCP and setup are documented in the Install workflow (install-mcp-setup, install-figma-bridge).

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is generate-figma?

Perfect for Design Automation Agents needing seamless Figma integration for dynamic design generation and updates. generate-figma is an operations system for teams that automates design processes in Figma using specialized AI agents and the Figma Console MCP.

How do I install generate-figma?

Run the command: npx killer-skills add ryanallen/product-studio. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for generate-figma?

Key use cases include: Automating design updates in Figma based on input parameters, Generating new design components within existing Figma files, Capturing IDs or endpoints for handoff or reporting in design workflows.

Which IDEs are compatible with generate-figma?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for generate-figma?

Requires Figma file details or access to Figma Console MCP. Dependent on Figma's API and MCP capabilities.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add ryanallen/product-studio. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use generate-figma immediately in the current project.

Related Skills

Looking for an alternative to generate-figma or another community skill for your workflow? Explore these related open-source skills.

View All

widget-generator

Logo of f
f

f.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

flags is a Next.js feature management skill that enables developers to efficiently add or modify framework feature flags, streamlining React application development.

★ 138.4k
⑂ 0
Browser

zustand

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI

data-fetching

Logo of lobehub
lobehub

The ultimate space for work and life — to find, build, and collaborate with agent teammates that grow with you. We are taking agent harness to the next level — enabling multi-agent collaboration, effortless agent team design, and introducing agents as the unit of work interaction.

★ 72.8k
⑂ 0
AI