Skip to content
Design
Command

/tokenize

Extract tokens from an existing design or stylesheet and organise them — naming, structure, and theme mapping.

BOOST
From plugin
designer-skills
2.9k33 skills33 commands
Install
> /plugin marketplace add Owl-Listener/designer-skills

How it fires

How this command gets triggered: by you, by Claude, or both.

  • Fires itselfClaude auto-loads it when your prompt matches the work.
  • You can call itInvoke it directly when you want it.
  • Slash command/tokenize

Context preview

What this command does when you run it.

Extract tokens from an existing design or stylesheet and organise them — naming, structure, and theme mapping.

Command definition

tokenize.md
description: Extract tokens from an existing design or stylesheet and organise them — naming, structure, and theme mapping.
argument-hint: "[CSS file, design file, or description of values to tokenize]"

/tokenize

Extract hard-coded values and organize into a structured token system.

Steps

1. **Extract** — Scan for all visual values. 2. **Deduplicate** — Group similar values using `design-token` skill. 3. **Categorize** — Organize by category. 4. **Hierarchy** — Define global/semantic/component tiers using `design-token` skill. 5. **Naming** — Apply conventions using `naming-convention` skill. 6. **Themes** — Map variants using `theming-system` skill. 7. **Document** — Generate reference using `documentation-template` skill.

Output

Token specification with inventory, hierarchy, theme mapping, and migration guide. Consider following up with `/audit-system`.

Ships withdesigner-skills

Design skills for the agent era, written so an AI agent can actually use them. 273 skills and 76 commands across 33 plugins, in five collections, for Claude Code and Gemini CLI. Not sure which skill you need?

Get the whole plugin

Other commands on designer-skills.