Skip to content
cccskills
FreePublished on GitHubEnglish overview

figma-generate-library

Builds or updates a Figma design system library from an existing codebase. Helps keep reusable design components aligned with the components already shipped in a product, giving design teams a reference that reflects the implementation.

OriginalShow the original 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.

nexu-io/open-design
Works withFigma
AI rating60/ 100See how to install

Good for

  • Creating a Figma library from an existing codebase
  • Updating a design library to match shipped components
  • Aligning design references with implementation

Overview

What it does

figma-generate-library creates or updates a Figma design system library using a codebase as its starting point. A design system library brings together shared interface components and similar reusable elements. This skill helps align the components implemented in a product with the Figma content used as a reference for design work.

When it helps

Use it when components already exist in code and you want them reflected in a Figma library. It also helps when product updates mean an existing design library needs reviewing. The codebase provides the starting point for organizing the reference material used on the design side.

Example requests

  • “Use figma-generate-library to create a Figma library from this codebase.”
  • “Update the Figma design system library to match the components already implemented.”

Notes

This distribution is a catalog entry that helps OpenDesign discover the skill during planning. To run the complete workflow, including its supporting materials and scripts, install the upstream figma/skills bundle in your active agent’s skills directory. Check the upstream README for the exact installation location.

This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.

Objective evaluation

AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.

Clear instructionsIs it clear when to use it and what it does?
AGoodThe purpose of creating or updating a Figma library from code and the trigger phrases are explicit.
Concrete stepsAre steps, inputs, outputs, and examples spelled out?
CCheck firstIt provides upstream bundle installation guidance but no library creation procedure or output specification.
SafetyAre sending data, deleting files, and running commands disclosed?
BPartly lackingUpdating Figma is part of the stated purpose, but the change scope and confirmation procedure are not documented.
Easy setupDoes it need few tools or API keys, and are they documented?
BPartly lackingThe upstream bundle is required, while exact installation paths are deferred to an external README.

The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 20, 2026. Treat it as a guide and read the original before installing.

Disagree? Request a re-evaluation

Tell us which point is wrong and why. No login needed. We will check it against the SKILL.md, redo the evaluation, and show the result here.

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

Files included (1)

  • SKILL.md1.2 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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

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:

# 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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

8-bit-orbit-video-template

FreeSummaryAI rating 90

Create a three-scene video composition in a retro pixel style using a Hyperframes HTML template. Customize titles, labels, and colors while preserving scene transitions, short scene durations, and repeatable animation timing.

  • Create a retro pixel presentation video
  • Customize a three-scene video template
  • Preview scene transitions and motion in HTML
nexu-io/open-design103.1KUpdated Oct 21, 2026

ad-creative

FreeSummaryAI rating 80

Create and revise headlines, descriptions, and main text for paid social and search ads. Use it to develop ad copy options and refine wording through repeated rounds of revision.

  • Drafting headlines for paid social ads
  • Creating descriptions for search ads
  • Revising the main text of an ad
nexu-io/open-design103.1KUpdated Oct 21, 2026

after-hours-editorial-template

FreeSummaryAI rating 80

Create a three-page editorial motion sequence with dark backgrounds, serif typography, staged text reveals, and chapter transitions. The result is a single HTML file suited to fashion-inspired storytelling and short visual presentations.

  • Creating a fashion-inspired motion presentation
  • Presenting a short story across three pages
  • Applying existing brand rules to a dark editorial sequence
nexu-io/open-design103.1KUpdated Oct 21, 2026

agent-browser

FreeSummaryAI rating 100

Inspect and test web pages through a browser automation command-line tool. Navigate, click, enter text, capture screenshots, and extract page details, with a focus on checking local OpenDesign previews and reviewing web app quality.

  • Checking local OpenDesign previews
  • Testing clicks and text entry in web apps
  • Capturing page or element screenshots
nexu-io/open-design103.1KUpdated Oct 21, 2026

ai-music-album

FreeSummaryAI rating 80

Plan an AI music album from its concept through lyric drafts, track order, and export. Intended for independent album experiments and brand soundtracks, with the full production workflow provided through a separately installed upstream bundle.

  • Planning an experimental independent album
  • Drafting lyrics around an album concept
  • Deciding the running order of tracks
nexu-io/open-design103.1KUpdated Oct 21, 2026

algorithmic-art

FreeSummaryAI rating 80

Create generative art, or images made with programmed rules, using p5.js. Fixed random seeds make each rendering reproducible, supporting procedural posters, still images that suggest motion, and studies of artistic frame composition.

  • Posters generated with programmed rules
  • Still images that suggest motion
  • Studies of artistic frame composition
nexu-io/open-design103.1KUpdated Oct 21, 2026

See all skills by nexu-io

Report a problem with this skill