codex

Figma

Figma workflows for design implementation, Code Connect mappings, and design system rule generation.

2 on GitHubby OpenAIv0.1.0MITupdated 7 months agoDesign

Plugin figma in NagyVikt/codex-plugins. Commands read from the repo's manifest — 1 month ago.

What it installs

Skills (7)

  • figma-code-connect-components

    Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code impl

  • figma-create-design-system-rules

    Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma

  • figma-create-new-file

    Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_figma. Handles plan resolution via whoami if needed. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteb

  • 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-generate-library

    Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT

  • figma-implement-design

    Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma ca

  • figma-use

    **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requ

Slash commands (4)

  • /figma:connect-figma-components
  • /figma:create-design-system-rules
  • /figma:implement-from-figma
  • /figma:review-design-parity

Subagents (4)

  • design-parity-review-agent
  • design-system-rules-agent
  • figma-code-connect-agent
  • figma-implementation-agent
View source on GitHub figma.com

More from NagyVikt/codex-plugins

All 38 plugins →

Vercel

codex

Comprehensive Vercel ecosystem plugin with Codex-compatible skills and MCP.

47 skills · 6 commands · 3 agents · 1 MCP server

2

Superpowers

codex

Superpowers workflow skills for structured planning, debugging, testing, review, and execution in Codex.

14 skills

2

Hugging Face

codex

Inspect models, datasets, Spaces, and research

11 skills · 1 MCP server · app connector

2

Cloudflare

codex

Cloudflare platform plugin with curated skills for Workers, Wrangler, and Agents SDK plus the official Cloudflare API MCP server.

9 skills · 2 commands · 1 MCP server

2

Medusa

codex

Build and extend Medusa applications across backend modules, workflows, admin dashboard customizations, and storefront integrations.

9 skills · 2 commands · 1 MCP server

2

Google Drive

codex

Use Google Drive as the single entrypoint for Drive, Docs, Sheets, and Slides work.

10 skills · app connector

2

Similar plugins

example-skills

claude

Collection of example skills demonstrating various capabilities including skill creation, MCP building, visual design, algorithmic art, internal communications, web testing, artifact building, Slack GIFs, and theme styling

19 skills

anthropics/skills 193,780

pr-review-toolkit

claude

Comprehensive PR review agents specializing in comments, tests, error handling, type design, code quality, and code simplification

1 command · 6 agents

anthropics/claude-code 155,476

ui-ux-pro-max

claude

Professional UI/UX design intelligence for AI coding assistants. Includes searchable databases of styles, colors, typography, charts, and UX guidelines for React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, JavaFX, and Three.js.

7 skills

nextlevelbuilder/ui-ux-pro-max-skill 148,759

Taste Skill

claudecodex

tasteskill 2.5.1: professional company websites at the figma.com and x.ai level, with one section per screen, real photographs, real product UI, effects kept for tech and gaming pages, and a real-browser checker and finish gate.

1 skill

Leonxlnx/taste-skill 114,391

impeccable

claude

Design fluency for frontend development. 1 skill with 24 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.

1 skill · 4 agents · hooks

pbakaus/impeccable 109,099

storybook

claudecodex

Build, preview, and test UI components with Storybook.

7 skills

storybookjs/storybook 91,552

Maintain Figma?

This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.

claude & codex plugins38 plugins