skills.rest
ChatAndBuild
ChatAndBuildOFFICIAL
Explore all skills by this author →
Website𝕏@chatandbuildGitHub

figma-generate-design

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

Related Skills

Explore More Software Engineering Skills→
figmafigma
1.9k

code-connect-components

Map Figma components to code implementations using Code Connect.

Official
Advanced
HeartcoolmanHeartcoolman
88

figma-generate-design

Automate Figma screen creation and updates using design system components and variables.

Community
Advanced
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
Sacred-GSacred-G
2

figma-generate-design

Build or update Figma screens using published design system tokens.

Community
Advanced