skills.rest
mayzhangmin
mayzhangminCOMMUNITY
Explore all skills by this author →
GitHub

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

Related Skills

Explore More Design & Creative Skills→
tuantiensiutuantiensiu
1

figma

Fetch Figma layouts, styles, components, and tokens via Framelink MCP.

Community
Intermediate
nesihaver-ILnesihaver-IL

figma

Transform Figma designs into React components and design tokens.

Community
Intermediate
89jobrien89jobrien

figma-generate-design

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

Community
Advanced
bRRRITSCOLDbRRRITSCOLD
2

react-component-library

Generate a React component library from design tokens and Figma designs.

Community
Advanced