Figma Generate Design — Agent Skill by OpenAI

From the author

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', 'convert this modal/dialog/drawer/panel to Figma'. This is the preferred workflow skill whenever the user wants to build or update a full page, modal, dialog, drawer, sidebar, panel, or any composed multi-section view in Figma from code or a description. Discovers design system components, variables, and styles from Code Connect files, existing screens, and library search, then imports them and assembles views incrementally section-by-section using design system tokens instead of hardcoded values.

— the description by Figma

Install

Get the skill from its source (we cannot redistribute it):
https://github.com/openai/plugins/tree/d420d13051bffe4543ed39e30fa46b87148e47dd/plugins/figma/skills/figma-generate-design

Documentation by Figma

The licence of this skill does not allow us to copy its documentation. Read it at the source

Files

SKILL.md(opens on GitHub)Not mirrored: opens on GitHub32.8 KiB
references/componentization.md(opens on GitHub)Not mirrored: opens on GitHub1.7 KiB
references/discover-product-font.md(opens on GitHub)Not mirrored: opens on GitHub4.6 KiB

Requirements and compatibility

Written for: OpenAI Codex, Claude Code

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Claude Code frontmatter, Needs an MCP server, Needs Node.js

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Frontend Design
AnthropicOfficial
A framework for creating distinctive, intentional UI designs that avoid common templated aesthetics.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository188.6k
Theme Factory
AnthropicOfficial
A toolkit for applying professional color and font themes to documents, presentations, and web artifacts.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository188.6k
Brand Guidelines
AnthropicOfficial
Applies Anthropic's official brand colors and typography to digital artifacts.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0GitHub stars of the source repository188.6k
Impeccable
Paul Bakaus· Community
A comprehensive design system and UI refinement tool for auditing, polishing, and evolving digital interfaces.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0Low riskHas scriptsGitHub stars of the source repository105.3k
Diagram Design
Cathryn Lavery· Community
Generate branded, editorial-style technical diagrams as self-contained HTML, SVG, or PNG files.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
MITLow riskHas scriptsGitHub stars of the source repository65.6k
UI UX Designer
Seth Hobson· Community
An expert UI/UX designer focused on systematic, accessible, and research-backed interface creation.
Design and creativeClaude Code
MITGitHub stars of the source repository42.3k