Push Code to Figma Without Redrawing the Design System

Where this fits

You've just refactored a checkout flow in code. The designer asks, "Can you push the updated page to Figma?" Copy-pasting low-fi boxes or redrawing by hand wastes time. This skill gives an agent a repeatable path: read the code or description, discover the design system, and assemble the view in Figma using existing components and tokens.

Why agents benefit

• It discovers components, variables, and styles from Code Connect files, existing Figma screens, and library search, so it doesn't invent a new visual language.
• It imports those design-system pieces and assembles sections incrementally, making generation traceable and less prone to one-shot layout errors.
• It uses design tokens instead of hardcoded values, so colors, spacing, and type remain consistent with the product.
• Trigger phrases such as "create a screen" and "update the Figma screen to match code" map directly to the skill, reducing prompt guessing.
• It is designed to be combined with figma-use, so the agent can navigate and write to Figma reliably.

Practical scenarios

Recreate an application page from a component tree

An agent receives a React route for a settings page and the instruction "build this in Figma." Instead of drawing shapes, it queries connected code files, matches sections to library components, and lays out the page using the same tokens.

Update an existing Figma screen after code changes

A designer changes a drawer's padding and button hierarchy in code. With "update the Figma screen to match code," the agent identifies only the affected sections, updates the frame in place, and leaves untouched areas alone.

Convert a modal or sidebar to Figma

"Convert this modal to Figma" can be ambiguous for a generic agent. This skill treats it as a composed multi-section view: it finds dialog and panel components, variables, and styles, then builds the header, body, footer, and overlay incrementally.

Add it to your agent workflow

Install it with:

npx skills add thedesignproject/agent-skills --skill figma-generate-design

Then ask something like: "Build this landing page in Figma from the code in /pages/home." The agent will first inspect Code Connect metadata and existing screens, then assemble the page section-by-section with tokens. Use it alongside figma-use for all Figma writes.

For a detailed breakdown, see the skill page on OpenAgentSkill: https://www.openagentskill.com/skills/thedesignproject-figma-generate-design. That page also helps you compare it with related Figma skills before you commit.

Compare before adopting

Before adding it, compare on a few signals:

• Quality and freshness: Does the repo show recent activity? Are issues answered? A design-system skill decays if the library changes faster than the skill.
• Alternatives: How much work is a plain "write to Figma" prompt? If your team already exports screens another way, the skill must add more consistency than manual effort.
• Workflow fit: Does your team use Code Connect and Figma variables? The skill shines when those exist; otherwise it may fall back to generic imports.
• Maintainability: Will generated screens be editable by designers? If components and tokens are used, yes; if shapes are flattened, it becomes a liability.

Why it is worth tracking

This skill has momentum for a focused project: 86 stars, an agent-skills repository, and a description centered on real developer-to-designer handoff pain. It is worth tracking because design-to-code workflows are moving from static exports to token-driven, component-aware generation. Evaluate it when your team consistently needs full pages, modals, or sidebars mirrored in Figma and wants agents to reuse design-system assets rather than hardcode pixels.