figma-generate-design

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

Create and update Figma screens using design system components and variables.

1|12|Updated Feb 23, 2026

Search Tags:#design automation #UI design #Figma #component reuse #screen creation

Ready to run

npx skills add https://github.com/ChatAndBuild/chatchat-skills --skill figma-generate-design-chatandbuild

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/ChatAndBuild/chatchat-skills/tree/main/skills/figma-generate-design
Command: npx skills add https://github.com/ChatAndBuild/chatchat-skills --skill figma-generate-design-chatandbuild

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires figma, use_figma, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the process of building or updating screens in Figma, eliminating the need for manual design and layout creation.

Core Features & Use Cases

Design System Integration: Utilizes design system components, variables, and styles to ensure consistency and speed in design creation.
Automated Screen Building: Builds full-page screens from code or descriptions using design system tokens instead of hardcoded values.
Parallel Workflows: Supports parallel workflows with generate_figma_design for pixel-perfect layouts in web apps.
Component Map: Discovers design system components and variables to assist in the creation of screens.
Updating Existing Screens: Enables updates to existing Figma screens with changes to component variants or text content.

Quick Start

Build or update a Figma screen using the existing design system by calling the figma-generate-design skill and providing the necessary design system components and variables.

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 Figma screen creation using a design system?▼

Automate Figma screen creation by using design system components, variables, and styles to build full-page layouts from code or descriptions. This process requires a published design system and access to the Figma MCP server to replace manual design work.

Can I update existing Figma screens with new component variants automatically?▼

Yes, you can update existing Figma screens automatically by applying changes to component variants or modifying text content. The workflow integrates directly with your design system tokens to maintain visual consistency across updated layouts.

Do I need a published design system to automate UI design in Figma?▼

Yes, a published design system is required to automate UI design in Figma. The automation relies on discovering existing design system components and variables to ensure layouts use design tokens instead of hardcoded values.

What is the best way to generate pixel-perfect layouts for web apps in Figma?▼

Generate pixel-perfect layouts in Figma by using parallel workflows with the generate_figma_design process. This approach builds web app screens from code or descriptions while strictly applying design system variables and styles.

Does Figma MCP server support code-based workflows for screen building?▼

Yes, the Figma MCP server supports both code-based and description-based workflows for screen building. It automates the creation of full-page screens by mapping code structures to design system components and variables.