superherono

Create Design Tokens — Design skill for Claude Code

Design community

[DEPRECATED] Tokens now come from the theme's theme.json, the design-tokens.json file is not created.

How to install Create Design Tokens

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

Terminal

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

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

What Create Design Tokens does

description: "[DEPRECATED] Tokens now come from the theme's theme.json, the design-tokens.json file is not created"

Command: create-design-tokens — ⚠️ DEPRECATED

This command is **retired**. The plugin NO longer creates `design-tokens.json`.

Why

The single source of design tokens is **the theme's `theme.json`**. The plugin reads it directly (+ the `src/scss/variables.scss` bridge) and substitutes short aliases (`var(--primary)`, `var(--space-lg)`, `var(--radius-md)`…) per the co

Alternatives in Design

Theme Swap — Recolour an extracted site's design around a new brand primary 3.6k ★
Extract — Design System & Product Reverse-Engineering - Extract tokens, components, architecture, and PRDs from codebase 2.8k ★
Design Dna — Turn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visu 624 ★