diip3sh

Exploded — Design skill for Claude Code

Design community

Take a real UI component apart.

How to install Exploded

This entry records only its repository, not the path inside it, so there is no exact command to give. Open diip3sh/exploded and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Exploded does

Take a real UI component apart. A Claude Code skill + runtime that explodes a live component into paint layers, states and tokens. Nothing is redrawn, no number is typed.

Alternatives in Design

Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
Extract — Design System & Product Reverse-Engineering - Extract tokens, components, architecture, and PRDs from codebase 2.8k ★
Nothing Design Skill — A Claude Code skill for generating UI in the Nothing design language 1.4k ★

README

Exploded

**Take a real UI component apart.** A skill for Claude Code, plus the runtime it uses.

Name a component and Claude renders it, then pulls it apart in isometric into its paint layers: elevation, surface, stroke, inner surfaces, content and focus ring. You can switch its states and read every measurement and design token right off the layers.

[![Exploded: a primary button pulled apart into six paint layers, with its focus ring lit](assets/poster.jpg)](assets/demo.mp4)

**[Live demo](https://diip3sh.github.io/exploded/)** · **[Gallery](https://diip3sh.github.io/exploded/examples/gallery/)** · **[Watch the video](assets/demo.mp4)**

The rule

**Nothing is redrawn, and no number is typed.**

Every layer is the live component, cloned with the browser's own computed styles. Any paint that belongs to another layer is made transparent.
Every number comes from getComputedStyle, layout boxes and text ranges.
Every token name comes from the CSS rule the author actually wrote.

So the spec sheet can't drift from what ships.

What you get

Layers, found automatically. Elevation, Surface, Stroke, inner surfaces (chips, thumbs, avatars), Content and Focus ring. Light paint (like white text) gets a backing in the colour of the surface it really sits on.
Every state. Hover, focus, pressed, disabled, invalid, on/off, or your own. :hover/:focus/:active are forced by rewriting CSS rules, so no pointer is needed. The stack combines every state, so the focus ring layer waits, dashed and empty, at rest.
Redlines. Padding, radius, gap, type and shadow are printed on the layer you hover. Labels stay a fixed size on screen and never cover the glyphs they measure.
Tokens. Press T and every value becomes the token the author wrote: --radius-md, --spacing × 2.5. Hard-coded values stay raw, so drift is obvious.
The live component sits beside it. Hover or press the real component and the figure follows.
An audit. It checks