Agent skill · design visual · openai
figma-generate-design
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.
Why this skill is useful
Adds specific workflows for generating Figma designs using a published design system, which the AI wouldn't reliably generate on its own.
What it needs
About 10k tokens when loaded. Last updated 2026-07-14. 24,594 stars on the source repository.
What this skill does
Build / Update Screens from Design System Use this skill to create or update full-page screens in Figma by reusing the published design system — components, variables, and styles — rather than drawing primitives with hardcoded values. The key insight: the Figma file likely has a published design system with components, color/spacing variables, and text/effect styles that correspond to the codebase's UI components and tokens. Find and use those instead of drawing boxes with hex colors. MANDATORY: You MUST also load figma-use before any usefigma call. That skill contains critical rules (color ranges, font loading, etc.) that apply to every script you write. Always pass skillNames: "figma-generate-design" when calling usefigma as part of this skill. This is a logging parameter — it does not affect execution. Skill Boundaries Use this skill when the deliverable is a Figma screen (new or updated) composed of design system component instances. If the user wants to generate code from a Figma design, switch to figma-implement-design. If the user wants to create new reusable components or variants, use figma-use directly. If the user wants to write Code Connect mappings, switch to figma-code-connect-components. Prerequisites Figma MCP server must be connected The target Figma file must have a published design system with components (or access to a team library) User should provide either: A Figma file URL / file key to work in Or context about which file to target (the agent can discover pages) Source code or description of the screen to build/update Parallel Workflow with generatefigmadesign (Web Apps Only) When building a screen from a web app that can be rendered in a browser, the best results come from running both approaches in parallel: 1. In parallel: Start building the screen using this skill's workflow (usefigma + design system components) Run generatefigmadesign to capture a pixel-perfect screenshot of the running web app 2. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills openai/figma-generate-design