figma-generate-design

Translate screenshots into pixel-accurate Figma screens using a published design library.

Updated Apr 19, 2026

Search Tags:#layout #figma #tokens #screenshot #design-system #rebuild #component-instances

Ready to run

npx skills add https://github.com/mayzhangmin/ucd-figma-skills-playground --skill figma-generate-design-mayzhangmin

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translate screenshots or layouts into pixel-accurate Figma screens by reusing a published design library, rather than building from primitives.

Core Features & Use Cases

Reconstruct full pages by starting from a screenshot and assembling sections with design-system components and tokens.
Preserve the visible wording from the source image while mapping sections to reusable library patterns, variables, and text styles.
Support multi-section rebuilds, automatic layout alignment, and token-based styling to ensure consistency with the design system.

Quick Start

Provide a screenshot and a linked design library, then ask me to rebuild the target screen in Figma 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 convert a screenshot into a Figma design using my existing design system?▼

To convert a screenshot into a Figma design, you provide the screenshot and a link to your published design library. The tool then maps sections to reusable components, variables, and text styles to rebuild the screen.

Can I reconstruct a full app page from an image using design tokens?▼

Yes, you can reconstruct full app pages from images using design tokens. The process handles multi-section rebuilds and automatic layout alignment to ensure pixel-accurate consistency with your design system.

Do I need a Figma MCP server to rebuild layouts from screenshots?▼

Yes, you need a connected Figma MCP server to rebuild layouts from screenshots. You also need a library link or published file exposing the target design system and integration with the figma-use workflow.

How does the screenshot to Figma translation handle text and component instances?▼

Screenshot to Figma translation preserves the visible wording from the source image while mapping sections to reusable library patterns. It discovers and applies component instances, variables, and text styles for styling.

What is the best way to ensure pixel-accurate Figma screens match a published design library?▼

The best way to ensure pixel-accurate Figma screens is to use token-based styling and system components for section-building. The workflow performs repaint passes to align the rebuilt layout with the published design library.