figma-generate-design

Name: figma-generate-design
Availability: InStock
Author: Guhan

Build and update Figma screens using design system components and API endpoints.

Updated May 11, 2026

Search Tags:#design system #UI development #Figma #Automation #screen design

Ready to run

npx skills add https://github.com/guhans6/agent-workbench --skill figma-generate-design-guhans6

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/guhans6/agent-workbench/tree/main/shared/skills/figma-generate-design
Command: npx skills add https://github.com/guhans6/agent-workbench --skill figma-generate-design-guhans6

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and assets (resource) and references (resource) components.

What problem does it solve?

This Skill solves the problem of building or updating screens in Figma from scratch, reducing manual drawing and ensuring consistency with design systems.

Core Features & Use Cases

Design System Components: Utilizes Figma's design system components, variables, and styles to assemble screens automatically.
Workflow Integration: Integrates with figma-use and supports various workflows, such as code to Figma or description-based screen building.
Validation & Update: Offers validation for individual sections and allows for updating existing screens incrementally.

Quick Start

Use the figma-generate-design skill to create a Figma screen by specifying a web app page, providing source code or description of the screen, and ensuring the Figma MCP server is connected.

Frequently Asked Questions about figma-generate-design

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

FAQPage Schema

How do I automate building Figma screens from a design system?▼

To generate Figma screens from source code, specify the web app page, provide the source code or description, and ensure the Figma MCP server is connected. The skill uses API endpoints like createFrame to assemble the UI components directly in Figma.

Can I incrementally update existing Figma screens using design system components?▼

Yes, you can incrementally update existing Figma screens using design system components. The skill offers validation for individual sections and allows for updating existing screen structures incrementally rather than rebuilding from scratch.

Does the Figma screen generation process support code to design workflows?▼

Yes, the Figma screen generation process supports code to design workflows. It integrates with figma-use workflows, allowing you to build screens directly from source code or text descriptions into structured Figma frames.

Do I need the Figma MCP server connected to build screens from source code?▼

Yes, you need the Figma MCP server connected to build screens from source code. Ensuring this server connection is a required prerequisite for the skill to manipulate the Figma file structure and execute API operations.

What are the limitations of automating Figma screen design with design system variables?▼

Automating Figma screen design with design system variables requires strict adherence to existing design system components and styles. It is limited to manipulating file structures via specific API endpoints like setBoundVariableForPaint and does not support freehand drawing.