Skip to main content
affpapa.org
RU EN
skill CX Codex

figma-generate-library · nexu-io — Claude Code skill: how to install

Builds or updates a Figma design system library directly from your codebase. It keeps design files in sync with shipped components.

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

What figma-generate-library does

This skill builds or updates a design system library in Figma using the project codebase. The entry in OpenDesign exposes the skill to the AI agent during task planning. It originates from the Figma MCP server guide.

Running the complete workflow with original assets, scripts, and references requires installing the upstream bundle from https://github.com/figma/skills. Without that repository, the agent only holds catalogue metadata. It will lack the actual automation scripts.

You can trigger the workflow by referencing figma-generate-library directly or asking the agent to sync Figma with code.

What it helps with

  • generate a Figma design system library from codebase components
  • keep Figma library components in sync with shipped code
  • update existing Figma design assets after UI code changes
  • let the agent discover design system workflows during planning

Example prompts for the agent

  • Run figma-generate-library to sync design system components from the codebase
  • Update our figma library with the latest changes from the UI components
  • Build a design system library in Figma from this codebase

How to install figma-generate-library

1Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill figma-generate-library -a claude-code

2Manually: put the files in place

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

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

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about figma-generate-library

How to install figma-generate-library in Claude Code?

Run npx skills add nexu-io/open-design --skill figma-generate-library -a claude-code. The skill file will be installed to ~/.claude/skills/figma-generate-library/SKILL.md.

What does figma-generate-library do?

It instructs the agent to create or update design system libraries in Figma directly from source code. This keeps Figma files aligned with shipped components.

What is required to run the full workflow?

Install the upstream bundle from https://github.com/figma/skills into your agent skills directory. That repository contains the scripts, assets, and references needed for execution.

Source text

SKILL.md · Apache-2.0 
---
name: figma-generate-library
description: |
  Build or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components.
triggers:
  - "figma library"
  - "design system library"
  - "figma from codebase"
  - "sync figma"
od:
  mode: design-system
  category: figma
  upstream: "https://github.com/figma/skills"
---

# figma-generate-library

> Curated from Figma's MCP server guide.

## What it does

Build or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components.

## Source

- Upstream: https://github.com/figma/skills
- Category: `figma`

## How to use

This catalogue entry advertises the skill in OpenDesign so the agent
discovers it during planning. To run the full upstream workflow with
its original assets, scripts, and references, install the upstream
bundle into your active agent's skills directory:

```bash
# Inspect the upstream README for exact paths
open https://github.com/figma/skills
```

Then ask the agent to invoke this skill by name (`figma-generate-library`) or with
one of the trigger phrases listed in this skill's frontmatter.

© nexu-io · Apache-2.0 · nexu-io/open-design

Similar skills

Everything for Design →

figma-generate-library by other authors comes first.

figma-generate-library official openai A skill to sync your Figma design system with your codebase. Build or update variables, components, themes, and documentation in the right order—phases matter, and skipping steps breaks the system. CX Codex +1 2,700installs figma-generate-library official Figma Skill to build a professional design system in Figma from your codebase. Creates variables, components with variants, typography styles and theming in the correct order — from tokens to finished components. CX Codex GP ChatGPT 32installs figma-generate-design official openai Turns an app page or multi-section layout into a Figma screen built from your published design system, not hand-drawn boxes. CX Codex +1 2,900installs figma-create-design-system-rules official openai Generates project-specific design system guidelines for AI coding agents handling Figma-to-code tasks. It inspects existing components and writes rules directly into your repository. CX Codex +1 2,900installs figma-build awdr74100 Builds or updates a design in a connected Figma file from code or a description, reusing its components, variables, and styles. Useful for moving UI work onto the canvas. CX Codex +1 1,300installs qt-figma-component-generation qt-ai-skills Reads Figma components over MCP and writes QML controls for Qt Quick Controls 2. It runs at the component generation step of a design-system workflow. CX Codex +1 435installs figma heygen-com Imports assets, brand tokens and components from Figma into a HyperFrames project, then turns storyboard frames into motion. Useful when a design has to move, not sit still. CX Codex +1 334,000installs pp-figma Giuliano Giacaglia Extracts compact Figma frame payloads for AI codegen, audits comments, and detects stale components. Ideal for design token diffs and design system CI checks. CX Codex +1 726installs

From the same set124

The whole set →
stitch-loop A skill that runs an iterative feedback cycle between design and code: critique the layout → fix the code → verify fidelity. Use it when you need to tighten UI against a design brief across multiple passes. CX Codex +1 2,700installs gif-sticker-maker Converts user photos into animated GIF stickers styled after Funko Pop and Pop Mart figurines via the MiniMax API. Useful for creating custom avatar packs. CX Codex +1 2,700installs fal-video-edit Use fal-video-edit to remix a video’s style, upscale it, remove its background, or add audio with fal.ai-hosted video models. CX Codex +1 2,700installs venice-audio-speech This skill integrates Venice.ai TTS models with voice selection and output formats. Use it to narrate documents, create voiceovers, or give your agent a voice. CX Codex +1 2,700installs sora This skill creates, remixes, and manages short clips through OpenAI’s Sora API. Use it for cinematic shots, b-roll, and concept iteration. CX Codex +1 2,700installs fal-restore Skill to restore image quality: removes blur and noise, fixes faces, restores old documents via fal.ai API. CX Codex +1 2,700installs fal-tryon Virtual try-on for fitting clothes onto person images via fal.ai models. Helps ecommerce stores generate lookbooks and test styling. CX Codex +1 2,700installs venice-image-edit This skill edits images, upscales them, and removes backgrounds through the Venice.ai API. Use it when an agent needs image-processing actions. CX Codex +1 2,700installs

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