Figma Design System Builder
warpdotdev/warp
Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.
Convert Figma designs to GenerateBlocks V2 format for WordPress
Install Figma To Generateblocks
$ npx skills add wpgaurav/generateblocks-skills --skill figma-to-generateblocks -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install wpgaurav/generateblocks-skills figma-to-generateblocks --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/wpgaurav/generateblocks-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/figma-to-generateblocks .claude/skills/figma-to-generateblocks && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "figma-to-generateblocks" agent skill from https://github.com/wpgaurav/generateblocks-skills/tree/main/skills/figma-to-generateblocks into .claude/skills/figma-to-generateblocks/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-generateblocks", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/wpgaurav/generateblocks-skills/tree/main/skills/figma-to-generateblocksType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add wpgaurav/generateblocks-skills --skill figma-to-generateblocks -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install wpgaurav/generateblocks-skills figma-to-generateblocks --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wpgaurav/generateblocks-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/figma-to-generateblocks .agents/skills/figma-to-generateblocks && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "figma-to-generateblocks" agent skill from https://github.com/wpgaurav/generateblocks-skills/tree/main/skills/figma-to-generateblocks into .agents/skills/figma-to-generateblocks/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-generateblocks", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add wpgaurav/generateblocks-skills --skill figma-to-generateblocks -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install wpgaurav/generateblocks-skills figma-to-generateblocks --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wpgaurav/generateblocks-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/figma-to-generateblocks .cursor/skills/figma-to-generateblocks && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "figma-to-generateblocks" agent skill from https://github.com/wpgaurav/generateblocks-skills/tree/main/skills/figma-to-generateblocks into .cursor/skills/figma-to-generateblocks/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-generateblocks", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/wpgaurav/generateblocks-skills.git --path skills/figma-to-generateblocks--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add wpgaurav/generateblocks-skills --skill figma-to-generateblocks -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install wpgaurav/generateblocks-skills figma-to-generateblocks --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wpgaurav/generateblocks-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/figma-to-generateblocks .gemini/skills/figma-to-generateblocks && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "figma-to-generateblocks" agent skill from https://github.com/wpgaurav/generateblocks-skills/tree/main/skills/figma-to-generateblocks into .gemini/skills/figma-to-generateblocks/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-generateblocks", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install wpgaurav/generateblocks-skills figma-to-generateblocksInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add wpgaurav/generateblocks-skills --skill figma-to-generateblocks -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/wpgaurav/generateblocks-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/figma-to-generateblocks .github/skills/figma-to-generateblocks && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "figma-to-generateblocks" agent skill from https://github.com/wpgaurav/generateblocks-skills/tree/main/skills/figma-to-generateblocks into .github/skills/figma-to-generateblocks/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-generateblocks", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add wpgaurav/generateblocks-skills --skill figma-to-generateblocks -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install wpgaurav/generateblocks-skills figma-to-generateblocks --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wpgaurav/generateblocks-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/figma-to-generateblocks .opencode/skills/figma-to-generateblocks && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "figma-to-generateblocks" agent skill from https://github.com/wpgaurav/generateblocks-skills/tree/main/skills/figma-to-generateblocks into .opencode/skills/figma-to-generateblocks/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-to-generateblocks", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
figma-to-generateblocks- GitHub stars
- 136
- Token cost
- ~850 tokens
- SKILL.md length
- 373 words
- Files
- 3 (incl. references)
- Skills in repo
- 4
- Repo updated
- First seen
- Licence
- None found
At a glance
Convert Figma designs to GenerateBlocks V2 format for WordPress
- Works in 4 steps: Inspect the relevant frames, assets,… → Map Auto Layout to intrinsic flex/grid… → Preserve typography and source states.… → …
- Frontend & Design work in your project
- SKILL.md covers Shared contract, Conversion workflow and Delivery
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Figma To Generateblocks is an agent skill from wpgaurav/generateblocks-skills. Convert Figma designs to GenerateBlocks V2 format for WordPress
Its SKILL.md is about 850 tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `CLAUDE.md` and `references/design-mapping.md`).
It sits in Frontend & Design. It works with Figma and WordPress. The repository describes itself as: GenerateBlocks Skills to create better layouts with AI tools.
When your agent uses it
- Frontend & Design work in your project
Example prompts
- “/figma-to-generateblocks”
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- Inspect the relevant frames, assets, variants, and available measurements.
- Map Auto Layout to intrinsic flex/grid structure, retaining semantic headings
- Preserve typography and source states. Frame widths are not automatically
- Generate {design-name}.html, compare against the design, and run the shared
What it can do on your machine
Read from SKILL.md and the folder at commit b57b6c2. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Figma To Generateblocks loads about 850 tokens when it runs, and up to ~1.8k if it reads all its reference files. Until then it costs about 22 tokens; SKILL.md has 373 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
Without a licence we can't republish the file, so here is its outline and opening line. It has 373 words (~850 tokens).
“Convert a supplied Figma design, exported CSS, or screenshot into editable native blocks. Distinguish measured source properties from inferred behavior.”
- name
- figma-to-generateblocks
- metadata.version
- 1.0.0
- metadata.author
- Gaurav Tiwari
- metadata.updated
- 2026-09-18
- metadata.trigger
- Figma to GenerateBlocks, convert Figma, Figma design to WordPress, Figma to GB, implement Figma design, Figma screenshot, design to blocks
- metadata.tags
- wordpress, generateblocks, figma, conversion, design
- metadata.compatibility
- Stable V2 guidance plus free 2.5.0-beta.1 / Pro 2.8.0-beta.1 design-system routing
Files
SKILL.md and 2 other files (references) in skills/figma-to-generateblocks of wpgaurav/generateblocks-skills.
- SKILL.md
- CLAUDE.md
- references/design-mapping.md
Open the folder on GitHubat commit b57b6c2
Compare with similar skills
Figma To Generateblocks next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Figma To Generateblocks this skillwpgaurav/generateblocks-skills | 136 | — | ~850 | Automated safety check: Pass | None | |
| Figma Design System Builderwarpdotdev/warp | 65k | 2 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Figma use_figma Plugin API Ruleswarpdotdev/warp | 65k | 4 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Figma Design to Codewarpdotdev/warp | 65k | 4 repos | ~2.9k | Automated safety check: Pass | AGPL-3.0 | |
| Figma Design System Rules Generatorwarpdotdev/warp | 65k | 3 repos | ~4.6k | Automated safety check: Pass | AGPL-3.0 | |
| Figma Code Connect Componentswarpdotdev/warp | 65k | 2 repos | ~4.2k | Automated safety check: Pass | AGPL-3.0 |
Similar skills
Figma use_figma Plugin API Rules
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
Figma Design to Code
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
Figma Design System Rules Generator
warpdotdev/warp
Creates project-specific design system rules from your codebase so coding agents implement Figma designs with your components, naming and tokens.
Figma Code Connect Components
warpdotdev/warp
Maps published Figma components to their code implementations with Code Connect, using the Figma MCP suggestion and mapping tools.
Cc Design
ZeroZ-lab/cc-design
High-fidelity HTML design and prototype creation. An agent skill from ZeroZ-lab/cc-design.
More from wpgaurav/generateblocks-skills
Generateblocks Layouts
wpgaurav/generateblocks-skills
Build and audit WordPress layouts with GenerateBlocks V2, including CSS Mode, responsive at-rules, dynamic data, Pro components, and recovery-safe block serialization.
Elementor To Generateblocks
wpgaurav/generateblocks-skills
Convert Elementor layouts to clean GenerateBlocks V2 format, eliminating DIVception
HTML To Generateblocks
wpgaurav/generateblocks-skills
Convert HTML/CSS layouts to GenerateBlocks V2 format with inline styles
Related
Categories
Questions about Figma To Generateblocks
What does Figma To Generateblocks do?
Convert Figma designs to GenerateBlocks V2 format for WordPress. Figma To Generateblocks is an agent skill from wpgaurav/generateblocks-skills.
When should I use Figma To Generateblocks?
Figma To Generateblocks fits situations like: frontend & Design work in your project.
How do I install Figma To Generateblocks in Claude Code?
Run `npx skills add wpgaurav/generateblocks-skills --skill figma-to-generateblocks -a claude-code`. Or copy the skill folder (skills/figma-to-generateblocks in wpgaurav/generateblocks-skills) into .claude/skills/figma-to-generateblocks in your project. Claude Code loads it when a task matches its description.
How do I install Figma To Generateblocks in Codex?
Run `npx skills add wpgaurav/generateblocks-skills --skill figma-to-generateblocks -a codex`. Or copy the skill folder (skills/figma-to-generateblocks in wpgaurav/generateblocks-skills) into .agents/skills/figma-to-generateblocks in your project. Codex loads it when a task matches its description.
Can I use Figma To Generateblocks in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add wpgaurav/generateblocks-skills --skill figma-to-generateblocks -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/figma-to-generateblocks, .gemini/skills/figma-to-generateblocks, .github/skills/figma-to-generateblocks and .opencode/skills/figma-to-generateblocks in your project.
What does Figma To Generateblocks need to run?
SKILL.md names no scripts, command-line tools or credentials: Figma To Generateblocks is instructions for the agent only.
Does Figma To Generateblocks access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Figma To Generateblocks safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Figma To Generateblocks use?
No licence was found for Figma To Generateblocks or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Figma To Generateblocks use?
About 850 tokens (SKILL.md is roughly 3.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 955 tokens, read only when the agent opens those files.
What are the alternatives to Figma To Generateblocks?
Skills that share tags, products or a category with Figma To Generateblocks: Figma Design System Builder (warpdotdev/warp, 65k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars), Figma Design to Code (warpdotdev/warp, 65k stars) and Figma Design System Rules Generator (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Figma To Generateblocks?
wpgaurav (a GitHub user) maintains it in wpgaurav/generateblocks-skills, which has 136 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on October 6, 2026.
Source: wpgaurav/generateblocks-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.