figma-generate-designPurpose, usage and source

What this Skill does

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. This is the preferred workflow skill whenever the user wants to build or update a full page, screen, or view in Figma from code or a description. Discovers design system components, variables, and styles via search_design_system, imports them, and assembles screens incrementally section-by-section using design system tokens instead of hardcoded values.

How the upstream workflow works

const frame = figma.currentPage.findOne(n => n.name === "Existing Screen");
const uniqueSets = new Map();
frame.findAll(n => n.type === "INSTANCE").forEach(inst => {
  const mc = inst.mainComponent;
  const cs = mc?.parent?.type === "COMPONENT_SET" ? mc.parent : null;
  const key = cs ? cs.key : mc?.key;
  const name = cs ? cs.name : mc?.name;
  if (key && !uniqueSets.has(key)) {
    uniqueSets.set(key, { name, key, isSet: !!cs, sampleVariant: mc.name });
  }
});
return [...uniqueSets.values()];

Requirements and setup

Limits and quality checks

No separate limits passage was selected from this file. This does not mean the Skill is safe for every input or environment. Review the complete source and validate your own result.

Start with a safe trial

1. Check the supported host and the repository installation instructions. Keep the Skill directory and its referenced scripts, assets and documentation together; SKILL.md alone may omit dependencies.
2. Give the agent your real input, desired output and acceptance criteria. Invocation syntax and available tools depend on the host; this site does not assume a universal install command.
3. Try the source workflow in a disposable project or on a copy. Review operations that change files, remote services or billable resources before allowing them.
4. Validate the output against the source quality checks and your own requirements. A successful trigger or a high repository Star count does not establish a correct result.

Skill format and directory specification ↗

Read further in the source

• Build / Update Screens from Design System
• Skill Boundaries
• Prerequisites
• Parallel Workflow with generate_figma_design (Web Apps Only)
• Required Workflow
• Step 1: Understand the Screen
• Step 2: Discover Design System — Components, Variables, and Styles
• 2a: Discover components
• 2b: Discover variables (colors, spacing, radii)
• 2c: Discover styles (text styles, effect styles)
• Step 3: Create the Page Wrapper Frame First
• Step 4: Build Each Section Inside the Wrapper
• Override instance text with setProperties()
• Read source code defaults carefully
• What to build manually vs. import from design system
• Step 5: Validate the Full Screen
• Step 6: Updating an Existing Screen
• Reference Docs
• Error Recovery
• Best Practices

Related Skills

• chatgpt-appsopenai/skills
• figmaopenai/skills
• figma-code-connect-componentsopenai/skills
• figma-create-design-system-rulesopenai/skills

Translation and scope

This reading guide selects passages from the pinned upstream SKILL.md. Translation is assisted. It is not a complete manual or a claim of tested compatibility. Read the original and its referenced files before use.

This introduction refers to the pinned version below; current repository activity and collection time are shown separately.

Pinned source

Read the original ↗

Source retrieved

2026-10-29T09:32:23Z

Source commit

49f948faa9258a0c61caceaf225e179651397431

Source SHA-256

45d2b97103bdeb31cb2744fca2c79bcefb659c88faca626bea30ec2f9342dcc9