Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot official · OpenAI

figma-generate-design · openai — Claude Code skill: build Figma screens

Turns an app page or multi-section layout into a Figma screen built from your published design system, not hand-drawn boxes.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add openai/skills --skill figma-generate-design -a claude-code
Open on GitHub

What figma-generate-design does

The skill takes a page, view or multi-section layout and rebuilds it in Figma. It starts by reading the source: it maps the page structure, picks out the major sections such as header, hero, pricing grid, FAQ accordion and footer, then lists the UI components each section needs.

From there it looks for components, variables and styles in the design system. When the target file already has screens on the same system, the skill inspects those instances first and builds an exact component map; library search is the fallback when no such screens exist. Sections get assembled one at a time, on design system tokens instead of hardcoded hex values and pixel numbers.

You need a connected Figma MCP server and a file with a published design system, or access to a team library. Before any use_figma call the skill requires loading figma-use as well — that one carries the rules on color ranges and font loading, and skipping it breaks the script. Going the other direction, from a Figma design to code, is a different skill: figma-implement-design.

What it helps with

  • push an existing app page into Figma without redrawing it by hand
  • assemble a landing page from design system components
  • update a Figma screen so it matches the current code
  • find the right components, variables and text styles in the library
  • create a new screen from a description without inventing colors or spacing

Example prompts for the agent

  • Take the page in `src/pages/pricing.tsx` and build it in Figma using design system components
  • Update the Checkout screen in Figma to match the current code
  • Build a landing page in Figma: hero, pricing grid, FAQ accordion, footer

How to install figma-generate-design

1Skills CLI (Vercel)

npx skills add openai/skills --skill figma-generate-design -a claude-code

2Manually: put the files in place

~/.claude/skills/figma-generate-design/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/figma-generate-design/

From the same set20

The whole set →
pdf official openai A skill for reading, creating and reviewing PDFs where layout matters. Useful when the agent builds a document and needs to see how it renders. Claude Code CX Codex Cursor +1 13,400installs gh-fix-ci official openai Finds failing GitHub Actions checks on a pull request, inspects logs, and drafts a fix plan. The skill modifies code only after explicit approval. Claude Code CX Codex Cursor +1 11,400installs openai-docs official openai The skill finds current OpenAI guidance for API work, Codex, model selection, migrations, and prompt updates, using official documentation. Claude Code CX Codex Cursor +1 6,100installs imagegen official openai This skill creates and edits raster images such as illustrations, textures, sprites, and mockups. Use it when the output should be a bitmap asset. Claude Code CX Codex Cursor +1 5,700installs jupyter-notebook official openai Scaffolds reproducible Jupyter notebooks for experiments and tutorials using bundled templates and a helper script. It prevents manual raw JSON editing errors. Claude Code CX Codex Cursor +1 5,600installs skill-creator official openai Official guide for drafting and updating agent skills. It structures procedures, bundled scripts, and documentation while keeping token overhead low. Claude Code CX Codex Cursor +1 4,900installs gh-address-comments official openai This skill finds the open pull request for the current branch, lists review comments, and applies the fixes you select through gh. Claude Code CX Codex Cursor +1 4,800installs cloudflare-deploy official openai This skill helps choose Cloudflare services and prepare application or infrastructure deployments through Workers, Pages, and related products. Claude Code CX Codex Cursor +1 4,300installs

Other versions of figma-generate-design

figma-generate-design official Figma 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. CX Codex GP ChatGPT 33installs

Similar

image-manipulation-image-magick official github Use ImageMagick to resize images, convert formats and inspect metadata. The skill is suited to thumbnails and batch image processing. GitHub Copilot 9,723installs motion-design LottieFiles This skill guides UI animation choices, from timing and easing to choreography. Use it when planning micro-interactions, loading states, or page transitions. Claude Code CX Codex Cursor +1 19,700installs extract-design-system arvindrk This skill extracts design primitives from a public website and generates starter tokens.json and tokens.css files for your project. Claude Code CX Codex Cursor +1 130,600installs shadcn-vue unovue Teaches coding agents shadcn-vue architecture, proper CLI runners, FieldGroup form composition, and strict Tailwind semantic token rules. Claude Code CX Codex Cursor +1 5,700installs mobile-android-design Seth Hobson This skill guides native Android UI work with Material Design 3 and Jetpack Compose. Use it for screens, navigation, adaptive layouts, and accessibility checks. Claude Code CX Codex Cursor 24,847installs power-bi-report-design-consultation official github This skill guides Power BI report planning, from chart choices to page layout and accessibility. Use it when a report needs to support specific decisions for a defined audience. GitHub Copilot 9,390installs 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

Questions about figma-generate-design

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

Run npx skills add openai/skills --skill figma-generate-design -a claude-code. The skill lands in ~/.claude/skills/figma-generate-design/SKILL.md.

What does figma-generate-design do?

It creates or updates a full Figma screen from code or a description. Components, variables and styles come from the published design system, and sections are assembled one at a time.

What do I need before using it?

A connected Figma MCP server and a file with a published design system, or access to a team library. You also need the source code or a description of the screen to build.

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