skills.rest
lalaABC
lalaABCCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/lalaABC/waprcn --skill figma-generate-design-lalaabc
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
nesihaver-ILnesihaver-IL

figma

Transform Figma designs into React components and design tokens.

Community
Intermediate
DojoGenesisDojoGenesis
2

figma-to-code

Convert Figma designs into HTML, Svelte, React, or Vue components.

Community
Advanced
codesour-designcodesour-design

gravity-apply-tokens

Apply Gravity design system tokens to Figma screens.

Community
Advanced
codesour-designcodesour-design

source-command-gravity-tokens

Apply Gravity design system tokens to Figma screens via component linking and variable binding.

Community
Intermediate