superherono

Generate Button Variants — Design skill for Claude Code

Design community

Generate button variants and sizes from the project's design system.

How to install Generate Button Variants

Installs to ~/.claude/skills/superherono-silince-gutenberg-builder-generate-button-variants/SKILL.md

Terminal

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

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

What Generate Button Variants does

description: Generate button variants and sizes from the project's design system

Command: generate-button-variants

Rebuilds the button variants (color: `primary`/`secondary`/… — the set is defined by the design file) and the size axis (`small`/`medium`/`large`) from the project's design system and syncs them across **4 surfaces** of the button block: `style.scss` (map), `block.json` (enum), `edit.js` (SelectControl + conditional overrides), `save.js`.

**Full contract:** [guides/butt

Alternatives in Design

Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
Od Contribute — Open a first-contribution PR (or bug issue) on nexu-io/open-design — works for non-coders too 91.8k ★
Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★