figma-generate-design

Generate full-page Figma screens from code or descriptions using a shared design system.

Updated Apr 28, 2026

Search Tags:#figma #tokens #design-system #ui-automation #screen-generation #component-instances #code-to-design

Ready to run

npx skills add https://github.com/89jobrien/warpx --skill figma-generate-design-89jobrien

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translate code-driven UI descriptions into polished Figma screens by leveraging a published design system, ensuring components, tokens, and styles stay in sync.

Core Features & Use Cases

Build or update full-page screens in Figma from code or descriptions using design-system components, variables, and styles.
Automatically discover and map components, color/spacing tokens, and text/effect styles to produce sectioned screens, with a focus on reusable assets and consistency.
Use Cases: When migrating a UI from code to high-fidelity designs, or when creating a new screen that mirrors a page's structure, ensure alignment with the design system throughout the process.

Quick Start

Provide the code or design description and run this skill to generate a complete Figma screen using the published 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 generate Figma screens from code using a design system?▼

Yes, you can translate code-driven UI descriptions into Figma by mapping application pages to a shared design system. This approach enforces a stepwise workflow to create sectioned frames and bind color, spacing, and text styles, ensuring assets remain in sync.

Does generating Figma screens from code require existing design tokens?▼

Generating Figma screens from code requires an existing published design system to function correctly. The skill searches for available components, color variables, and effect styles to apply them during the layout creation process, ensuring strict design consistency.

What is the workflow for translating an application view into a Figma layout?▼

The workflow for translating an application view into a Figma layout involves loading the design system, searching for components, creating a wrapper frame, and building inner sections. It applies text and style bindings, validates via screenshots, and returns node IDs for composition.

How do I keep Figma components and variables in sync when migrating UI from code?▼

To keep Figma components and variables in sync when migrating UI from code, the skill automatically discovers and maps design tokens from your shared library. It applies these bindings directly to the generated sectioned screens to maintain high-fidelity alignment.

Can I update existing full-page Figma screens using code descriptions?▼

You can update existing full-page Figma screens by providing new code descriptions to the skill. It re-evaluates the input, searches the design system for required components, modifies the wrapper frame sections, and re-applies the correct text and effect styles.