Alanamultiskillagent
Back to skills

figma

design

Connects Claude to the Figma MCP server so it can fetch design context, screenshots, variables, and assets from Figma nodes. Translates Figma designs into production-ready code following the project's

openaiopenai
|View all openai skills →

Setup & Installation

npx skills add https://github.com/openai/figma --skill figma
or paste the link and ask your coding assistant to install it
https://github.com/openai/figma
View on GitHub

What This Skill Does

Connects Claude to the Figma MCP server so it can fetch design context, screenshots, variables, and assets from Figma nodes. Translates Figma designs into production-ready code following the project's existing conventions and component library. Instead of manually inspecting Figma values and transcribing them into code, the skill fetches structured design data and visual references directly, reducing measurement errors and back-and-forth between design and implementation.

When to use it

  • Working with figma functionality
  • Implementing figma features
  • Debugging figma related issues

Similar Skills

accessibility

Audits and improves web accessibility against WCAG 2.2 guidelines, covering the POUR principles (Perceivable, Operable, Understandable, Robust). Includes code patterns for ARIA usage, keyboard navigat

algorithmic-art

Generates algorithmic and generative art using p5.js. Takes a user prompt, creates a computational philosophy for it, then produces a self-contained interactive HTML artifact with seeded randomness, p

brand-guidelines

Applies Anthropic's official brand colors and typography to documents and presentations. Maps headings to Poppins, body text to Lora, and non-text shapes to the orange, blue, and green accent palette.

canvas-design

Generates original visual art and design artifacts as .png or .pdf files. Works in two stages: first defining an aesthetic philosophy (a named movement with visual principles), then expressing that ph