figma-generate-design

Assemble full-page Figma screens by reusing published design system components.

Updated Apr 17, 2026

Search Tags:#automation #layout #components #figma #design-system #variables #text-styles

Ready to run

npx skills add https://github.com/Lutimi/claude2figma --skill figma-generate-design-lutimi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/Lutimi/claude2figma/tree/main/.cursor/skills/figma-generate-design
Command: npx skills add https://github.com/Lutimi/claude2figma --skill figma-generate-design-lutimi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables efficient creation and updating of Figma screens by reusing a published design system — components, variables, and text styles — rather than drawing from scratch, preventing drift and speeding up delivery.

Core Features & Use Cases

Reuse design system components, variables, and styles to assemble coherent screens.
Update existing screens by swapping components and binding tokens without re-creating layouts.
Support a stepwise workflow: wrap content in a page wrapper frame, then add sections inside.

Quick Start

Create or update a full-page Figma screen by reusing the published design system components, variables, and styles, assembling sections inside a dedicated wrapper.

Frequently Asked Questions about figma-generate-design

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

FAQPage Schema

How do I assemble Figma screens from a design system instead of drawing from scratch?▼

You can assemble full-page Figma screens by reusing published design system components, variables, and text styles, orchestrating wrapper and section construction to prevent layout drift.

Can I update existing Figma pages by swapping components and binding variables?▼

Yes, you can update existing Figma screens by swapping components and binding design system variables without re-creating the underlying layouts.

Do I need a connected Figma MCP environment and a published design system to automate page assembly?▼

Yes, prerequisites include a connected Figma MCP environment and access to a published design system to discover components, variables, and text styles for screen assembly.

What is the stepwise workflow for building full-page Figma screens using design system tokens?▼

The stepwise workflow involves creating a page wrapper frame, adding sections inside that wrapper, and validating the applied design system components, variables, and text styles.

Does this approach work for discovering components and text styles across multiple Figma libraries?▼

Yes, the process discovers components, variables, and text styles across published Figma libraries to ensure coherent screen assembly and token binding.

What are the limitations of reusing design system tokens for Figma layout automation?▼

This approach relies entirely on existing published design system components and variables, meaning it cannot generate screens if the required libraries or Figma MCP environment are missing.