Skills
.Work. You
Rest

figma-to-generateblocks

Community

Convert Figma designs into GenerateBlocks layouts

Design & Creative#figma#convert#wordpress#design-to-code#generateblocks#html-blocks#ui-to-blocks
Authorwpgaurav
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill translates Figma design specifications into GenerateBlocks V2 HTML blocks for WordPress, streamlining handoff from design to implementation.

Core Features & Use Cases

  • Design-to-block conversion: Transform Figma frames, typography, colors, and layouts into reusable GenerateBlocks components ready to paste into WordPress.
  • Output-driven workflow: Outputs one or more HTML files named after the design (e.g., my-design.html) to facilitate clean deployment.
  • Use Case: When a designer provides a Figma mockup or CSS output, convert it into GB blocks for a production page.

Quick Start

Start by importing a Figma design or URL and request a GenerateBlocks-ready HTML file for the design.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: figma-to-generateblocks
Download link: https://github.com/wpgaurav/generateblocks-skills/archive/main.zip#figma-to-generateblocks

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.