superherono

Create Block — Design skill for Claude Code

Design community

Create a new Gutenberg block from a Figma design or HTML markup.

How to install Create Block

Installs to ~/.claude/skills/superherono-silince-gutenberg-builder-create-block/SKILL.md

Terminal

mkdir -p ~/.claude/skills/superherono-silince-gutenberg-builder-create-block && curl -fsSL https://raw.githubusercontent.com/superherono/silince-gutenberg-builder/HEAD/commands/create-block.md -o ~/.claude/skills/superherono-silince-gutenberg-builder-create-block/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Create Block does

description: Create a new Gutenberg block from a Figma design or HTML markup

Command: create-block

Create a new Gutenberg block from a Figma design or HTML markup by orchestrating 4 agents.

📥 Parameters

source (required): Figma URL or path to an HTML file
Options:
- --name: block name
- --title: block title
- --category: category
- --skip-validation: skip validation
- --yes: automatically approve all file operations (create, read, edit) without a

Alternatives in Design

Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★
Huashu Design — Huashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 + 23.6k ★
Figma Implement Design — Translate Figma designs into production-ready code with pixel-perfect accuracy 14.6k ★