figma — Skills — getagentictools

What it does

Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.

Replace Tailwind utility classes with the project's preferred utilities/design-system tokens when applicable.

Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality.

Use the project's color system, typography scale, and spacing tokens consistently.

Respect existing routing, state management, and data-fetch patterns already adopted in the repo.

Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design-system tokens and adjust spacing or sizes minimally to match visuals.

Validate the final UI against the Figma screenshot for both look and behavior.

figma

Source

Repository: https://github.com/openai/skills

figma FAQ

What does the figma skill do?

Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting. Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style. Replace Tailwind utility classes with the project's preferred utilities/design-system tokens when applicable.

How do I install figma?

Run: npx -y skills add https://github.com/openai/skills --skill figma --agent claude-code — the source lives at github.com/openai/skills.

Maintain figma?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[figma on getagentictools](https://getagentictools.com/skills/openai-skills-figma?ref=badge)

npx agentictools info skills/openai-skills-figma

The second line is the CLI lookup for this page — handy in READMEs and docs.