skills.rest
idontcarl
idontcarlCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-generate-design

Translate UI specifications into Figma screens using design system components.

Updated Mar 28, 2026
Search Tags:#automation#figma#tokens#ui-design#design-system#screen
One-click install
npx skills add https://github.com/idontcarl/landing-page --skill figma-generate-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/idontcarl/landing-page/tree/main/skills/openai-skills/skills/.curated/figma-generate-design
Command: npx skills add https://github.com/idontcarl/landing-page --skill figma-generate-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translates application UI specifications into actionable Figma screen designs by reusing published design system tokens, components, and styles to ensure visual parity with code without manual pixel-pushing.

Core Features & Use Cases

  • Reuses published design system components, variables, and text/effect styles to assemble screens rather than drawing primitives.
  • Integrates with the figma-use skill and requires loading figma-use before any use_figma call; Always pass skillNames: "figma-generate-design" when invoking use_figma for logging.
  • Step-by-step workflow: understand the screen, discover design system assets, create a wrapper frame, build sections inside it, validate with screenshots, and update as needed.
  • Typical use: generating a new landing page in Figma from code or a detailed description, ensuring alignment with design system tokens.

Quick Start

Initialize by loading the figma-use skill, then invoke use_figma with the figma-generate-design workflow to create or update a Figma screen from code or a description.

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 design system tokens?▼

Generate Figma screens from code by loading the figma-use skill, then invoking use_figma to assemble full-page layouts using published design system components, variables, and styles rather than drawing primitives manually.

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

Yes, you can update existing Figma screens by passing the figma-generate-design skill name to use_figma, which reuses your published design system tokens and components to ensure visual parity without manual pixel-pushing.

Do I need the figma-use skill to create Figma UI designs from specifications?▼

Yes, loading the figma-use skill is required before any use_figma call to enable the workflow that translates application UI specifications into actionable Figma screen designs using design system assets.

What is the step-by-step workflow to build a Figma landing page from a description?▼

The workflow involves understanding the screen, discovering design system assets, creating a wrapper frame, building sections inside it, validating with screenshots, and updating the layout as needed to ensure alignment with design tokens.

Does this approach support hand-drawn Figma layouts or only design system components?▼

This approach specifically applies to creating or updating full-page screens using design system components, variables, and styles rather than hand-drawn layouts, ensuring strict consistency with your codebase.

Why should I use design system tokens for Figma screen generation instead of manual drawing?▼

Using design system tokens for Figma screen generation ensures visual parity with code by reusing published components and styles, eliminating manual pixel-pushing and maintaining strict design system consistency.

Related Skills

Explore More Design & Creative Skills→
NagyViktNagyVikt
2

figma-generate-design

Generate and synchronize Figma screens from source code UI structures.

Community
Advanced
89jobrien89jobrien

figma-generate-design

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

Community
Advanced
johnlindquistjohnlindquist
24

figma

Extract design tokens, components, and styles from Figma files.

Community
Intermediate
tankpkgtankpkg
1

@tank/figma-to-code

Translate Figma designs into CSS and component structures.

Official
Advanced