Figma Generate Library
Skill ActiveBuild 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 ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.
To automate the creation of professional-grade Figma design systems that accurately reflect a codebase, ensuring consistency and efficiency in design-to-development workflows.
Features
- Builds Figma design systems from codebase tokens and components
- Automates variable collection, token creation, and style definition
- Manages component variants, properties, and layout via Figma API
- Ensures idempotency and state persistence for long workflows
- Provides detailed documentation and error recovery protocols
Use Cases
- When a user wants to create Figma variables/tokens from code.
- When a user wants to build component libraries in Figma that match their codebase.
- When a user needs to set up theming (light/dark modes) for a Figma design system.
- When a user wants to document design foundations and reconcile gaps between code and Figma.
Non-Goals
- Directly calling the Figma Plugin API without workflow orchestration
- Building components without prior discovery and user approval
- Creating design tokens without mapping them to code syntax
- Overwriting user-created nodes without explicit intent or cleanup protocols
Trust
- warning:Issues AttentionThere are 30 open issues and 6 closed issues in the last 90 days, indicating a slow closure rate and potentially slow maintainer response.
Installation
npx skills add openai/skillsRuns the Vercel skills CLI (skills.sh) via npx — needs Node.js locally and at least one installed skills-compatible agent (Claude Code, Cursor, Codex, …). Assumes the repo follows the agentskills.io format.
Quality Score
Similar Extensions
Figma Generate Library
100Build 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 ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.
Design System
98Build or audit a design system including component library, design tokens, naming conventions, contribution model, and documentation. Use this skill whenever the user wants to build a design system, audit an existing system, define design tokens at the system level, structure a component library, or set up design system governance. Triggers on design system, component library, design tokens, atomic design, atoms, molecules, organisms, design system documentation, Storybook, Figma library, system governance, design contribution model. Also triggers when teams are inconsistent across products and a system is the answer.
Figma Create Design System Rules
95Generates 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 MCP server connection.
Project Session Manager
100Worktree-first dev environment manager for issues, PRs, and features with optional tmux sessions
Public Google Drive
100Create public Google Docs or Google Sheet files without requiring OAuth. Use this skill to create and edit Google Docs and Sheets, no Google sign-in required. Documents are viewable at shareable links. Registration is automatic on first use.
Oh My Claudecode
100Process-first advisor routing for Claude, Codex, or Gemini via `omc ask`, with artifact capture and no raw CLI assembly