figma-generate-design

Creates screen designs from text descriptions using your custom color palette.

Updated Apr 30, 2026

Search Tags:#automation #layout #figma #tokens #design-system #component-instances

Ready to run

npx skills add https://github.com/lalaABC/waprcn --skill figma-generate-design-lalaabc

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/lalaABC/waprcn/tree/main/resources/bundled/mcp_skills/figma/figma-generate-design
Command: npx skills add https://github.com/lalaABC/waprcn --skill figma-generate-design-lalaabc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translate application pages or descriptions into fully designed Figma screens by reusing a published design system and tokens.

Core Features & Use Cases

Reuse design system components, variables, and styles to assemble screens without rebuilding primitives.
Build or update an entire page, screen, or view in Figma from code or narrative input.
Use a step-by-step workflow to wrap content, import components by key, bind variables, and apply text and effect styles.

Quick Start

Describe the target screen or page details and let the skill assemble a complete Figma design using the design system.

Frequently Asked Questions about figma-generate-design

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

FAQPage Schema

How do I translate application pages into Figma designs using a design system?▼

To translate application pages into Figma designs, this skill reuses published design system components, variables, and styles to assemble complete screens from code or narrative input without rebuilding primitives.

Do I need a connected Figma MCP workflow to generate Figma screens from code?▼

Yes, generating Figma screens from code requires a connected Figma MCP workflow to import components, variables, and styles by key, and to create a page wrapper frame before composing sections.

Can I update an entire Figma page view from narrative specifications?▼

Yes, you can update an entire Figma page view from narrative specifications by applying this skill to leverage component instances, bind variables, and override text via component properties.

What is the process to apply design tokens when building Figma layouts?▼

Applying design tokens when building Figma layouts involves a step-by-step workflow to wrap content, import components by key, bind variables, and apply text and effect styles directly within Figma.

What are the limitations of automating Figma component instances via MCP?▼

Automating Figma component instances requires importing components by key and overriding text via component properties, limiting usage to existing design system assets rather than creating new primitives dynamically.