Skip to main content
affpapa.org
RU EN
skill CX Codex GP ChatGPT official · OpenAI

figma-generate-design · openai — Codex skill: what it does, how to install

Builds or updates composed Figma screens using design system components and styles. Use it to turn application pages or dialogs from code into Figma views.

Install into Codex · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add openai/plugins --skill figma-generate-design -a codex
Open on GitHub

What figma-generate-design does

The skill helps build a page, modal, sidebar, or another multi-section view in Figma. It looks for components, variables, and styles in Code Connect files, existing screens, and libraries, then assembles the view section by section with design system tokens instead of hardcoded values.

Load figma-use before calling use_figma. You also need a connected Figma MCP server, a target file with a published design system or team library access, and its fileKey. For web app sources that contain images, the instructions require running generate_figma_design in parallel so the images can be brought into Figma.

Install it when you need to build a composed Figma view from code or a description. This skill is not for creating new reusable components or variants.

What it helps with

  • turn an application page from code into a Figma view
  • assemble a modal from design system components
  • update a Figma screen to match the current UI

Example prompts for the agent

  • Build this page in Figma using our design system components.
  • Update the Figma screen to match the code.
  • Turn this application dialog into a Figma view.

How to install figma-generate-design

1Skills CLI (Vercel)

npx skills add openai/plugins --skill figma-generate-design -a codex

2Manually: put the files in place

.agents/skills/figma-generate-design/SKILL.md

For all projects use ~/.agents/skills/

From the same set201

The whole set →
supabase official supabase Guides the agent through database configuration and strict RLS policies in Supabase. CX Codex GP ChatGPT 8installs remotion-render official Remotion Exports videos and static stills from Remotion projects using CLI commands. CX Codex GP ChatGPT 3installs figma-create-new-file official Figma Creates blank Figma, FigJam, or Slides files inside draft folders. It resolves planKey and editor types before invoking Figma MCP tools. CX Codex GP ChatGPT 6installs swiftui-performance-audit official OpenAI Pinpoints SwiftUI runtime issues like frame drops, unresponsive taps, and excessive view body computations. Works code-first and guides Instruments profiling. CX Codex GP ChatGPT 109installs swiftui-liquid-glass official OpenAI This skill helps build and review SwiftUI Liquid Glass interfaces for iOS 26+. Use it when adopting the API or checking fallbacks, interaction, and design fit. CX Codex GP ChatGPT 121installs swiftui-ui-patterns official OpenAI This skill helps build and refactor SwiftUI interfaces, from navigation and state to layouts and controls. Use it for new screens or changes to an existing project. CX Codex GP ChatGPT 114installs swiftui-view-refactor official OpenAI Refactors SwiftUI view files into clean, testable structures with dedicated subview types and proper Observation ownership. CX Codex GP ChatGPT 113installs ios-memgraph-leaks official OpenAI Captures and inspects iOS leaks from a simulator process or .memgraph. Useful for tracing retained objects and checking a fix with before-and-after evidence. CX Codex GP ChatGPT 1,054installs

Other versions of figma-generate-design

figma-generate-design official openai Turns an app page or multi-section layout into a Figma screen built from your published design system, not hand-drawn boxes. Claude Code CX Codex Cursor +1 2,900installs

Similar

frontend-design-review microsoft This skill reviews and creates frontend interfaces with checks for design quality, accessibility, and design-system use. Use it for UI reviews, PRs, and responsive layouts. Claude Code GitHub Copilot 237installs markdown-html-orchestrator Alireza Rezvani Routes long Markdown documents, code reviews, and slide decks to the right converter, which writes a standalone HTML file. Use it when a document needs a browser-ready format. Claude Code 46installs design-system Alireza Rezvani Captures brand identity via a 10-question wizard and validates WCAG 2.2 AA contrast. It derives 12 CSS tokens in HSL for markdown-html converters. Claude Code 33installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. Claude Code 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. Claude Code 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. Claude Code 979,543installs

Questions about figma-generate-design

How do I install figma-generate-design in Codex?

Run npx skills add openai/plugins --skill figma-generate-design -a codex. The skill is installed at .agents/skills/figma-generate-design/SKILL.md.

What does figma-generate-design do?

It builds or updates composed Figma views by finding design system components, variables, and styles and using them during assembly.

What does figma-generate-design need to run?

You need a connected Figma MCP server, a target file with a published design system or library access, and its fileKey. Load figma-use before calling use_figma.

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor