[c]codexplugin hubSubmit an asset
DirectorySkillsFigma Generate Design
Skill / OpenAI

Figma Generate Design Codex Skill

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma.

Docs reviewedChecked 2026-09-20Runtime not tested

What it adds

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 searchdesignsystem, imports them, and assembles screens incrementally section-by-section using design system tokens instead of hardcoded values.

design and ui

Get set up

  1. Start building the screen using this skill's workflow (usefigma + design system components)
  2. Run generatefigmadesign to capture a pixel-perfect screenshot of the running web app
$skill-installer figma-generate-design
Review before running
Read the installation source

Before you install

    Compatibility & limitations

    Documented for ChatGPT desktop app, Codex CLI, Codex IDE extension

    Cursor: Not confirmed for Cursor.

      This listing is based on source documentation. We have not installed or runtime-tested this asset.

      How it fits together

      Test Driven Development · SkillUse when implementing any feature or bugfix, before writing implementation code.Web Artifacts Builder · SkillSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS,...Figma Code Connect Components · SkillConnects Figma design components to code components using Code Connect mapping tools.Figma Create Design System Rules · SkillGenerates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set...Figma Context · MCP serverMCP server to provide Figma layout information to AI coding agents like Cursor.Adobe · PluginDesign, combine, and edit.

      Sources & provenance

      Reviewed 2026-09-20. Source revision: main (mutable; commit not pinned).