Figma Generate Design — Agent Skill by Figma

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, form, dashboard, list, table, card, header, message preview, or other composed product UI in Figma from code or a description—even when the user calls that composed UI a component. 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/figma/mcp-server-guide/tree/19be8d51c6a2f8ca949d33e5cd8e9662c5d243e8/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 GitHub38.4 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: 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.

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
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
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
Choreograph
Emil Kowalski· Community
A systematic approach to coordinating multi-element animations into intentional, cohesive motion.
Design and creativeClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository54.3k