figma-generate-design

Generate and update Figma screens using design system components.

Updated Aug 23, 2026

Search Tags:#design system #UI development #design automation #Figma #screen generation

Ready to run

npx skills add https://github.com/PAISHU-AI/PAI-zong-NB --skill figma-generate-design-paishu-ai

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/PAISHU-AI/PAI-zong-NB/tree/main/skills/figma-generate-design
Command: npx skills add https://github.com/PAISHU-AI/PAI-zong-NB --skill figma-generate-design-paishu-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill solves the problem of manually creating and updating Figma designs by allowing users to build or update full-page screens using the published design system components, variables, and styles.

Core Features & Use Cases

Design System Integration: Discovers and utilizes design system components, variables, and styles for Figma screens.
Screen Generation & Updates: Builds new screens or updates existing ones with design system components.
Use Case: Ideal for users who want to create a full-page screen in Figma from code or a description and want to leverage the design system for consistency and efficiency.

Quick Start

Use the figma-generate-design skill to create a new Figma screen based on the design system using the following command: 'generate_figma_design --file-url "file-url-here" --screen-description "screen-description-here"'

Frequently Asked Questions about figma-generate-design

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

FAQPage Schema

How do I generate Figma screens using a design system?▼

You can generate Figma screens by running a command with your file URL and screen description, which automates screen generation using your published design system components, variables, and styles. This requires Figma API access to build full-page layouts directly.

Can I update existing Figma screens with design system components?▼

Yes, you can update existing Figma screens by applying your published design system components, variables, and styles to them. This allows you to modify current layouts and ensure visual consistency across your Figma project.

What do I need to automate Figma screen generation from code?▼

To automate Figma screen generation from code, you need Figma API access and knowledge of your design system components and variables. You must provide the specific Figma file URL and a text description of the screen you want to build or update.

Does Figma design automation work with custom variables and styles?▼

Yes, Figma design automation works with custom variables and styles by discovering and utilizing the published design system components, variables, and styles within your file. This ensures generated or updated screens maintain strict adherence to your established design system.

What is the best way to create a full-page Figma screen from a description?▼

The best way to create a full-page Figma screen from a description is to use design automation that directly integrates with your published design system. By providing a text description and file URL, the tool builds the page using your established components for consistency.