Designers
ToolsDocsProAll the Possibles

All 141 tools / Design systems and tokens

List the components hiding in a stylesheet and the variants that disagree on radius, padding or size

Component inventoryFreeFor designers and developers

15/day

free runs a day, no sign-in.

Before: what you give it

The example input, as typed in. You paste text, CSS, markup or notes.

:root {
  --ink: #1a1a1a;
  --paper: #fafaf7;
  --accent: #e4572e;
  --accent-hover: var(--accent);
  --space-2: 8px;
  --radius: 6px;
  --font-body: "Source Serif 4", Georgia, serif;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}
@media (prefers-color-scheme: dark) { :root { --ink: #f2f2ee; --paper: #141414; } }
body { font: 400 17px/1.55 var(--font-body); color: var(--ink); background: var(--paper); }
h1 { font-size: 48px; line-height: 1.05; margin: 0 0 24px; }
h2 { font-size: 30px; margin: 32px 0 12px; }
small { font-size: 13px; }
...

After: what comes back

The first lines of a real run on that input. Nothing here is edited by hand.

# Component inventory

3 component families found (no markup supplied, so instances were not counted).

## Findings

- medium: button: 2 base class names for the same role: .btn, .button.
- medium: button: corner radius differs inside button: 6px (.btn); 4px (.button / secondary).
- medium: button: padding differs inside button: 10px 18px (.btn); 9px 16px (.button / secondary).

## Families

| Component | Role | Variants | Rules | Base properties |
|---|---|---|---|---|
... full output on the tool page

What you get

Component families with base properties and variants, and inconsistencies across the same role

What it cannot do

Groups components by class-name roles such as button or card; names that do not match are missed.

Who it is for

  • Designers
  • Developers

Free and Pro

Free15 runs a day per IP address, up to 100,000 characters a run.
ProNo daily limit, 300 requests a minute, up to 200,000 characters a run.

What each plan includes

Use it from your assistant

The tool is called inventory_components. Connect the server once, then ask for it by name or just describe the job. Install steps for each app.

claude mcp add --transport http designers https://designers.allthepossibles.com/mcp
curl -X POST https://designers.allthepossibles.com/api/component-inventory -H 'content-type: application/json' -d '{"css":":root {\n  --ink: #1a1a1a;\n  --paper: #fafaf7;\n  --accent: #e4572e;\n  --accent-hover: var(--accent);\n  --space-2: 8px;\n  --radius: 6px;\n  --font-body: \"Source Serif 4\", Georgia, serif;\n  --ease: cubic-bezier(0.2, 0, 0, 1);\n}\n@media (prefers-color-scheme: dark) { :root { --ink: #f2f2ee; --paper: #141414; } }\nbody { font: 400 17px/1.55 var(--font-body); color: var(--ink); background: var(--paper); }\nh1 { font-size: 48px; line-height: 1.05; margin: 0 0 24px; }\nh2 { font-size: 30px; margin: 32px 0 12px; }\nsmall { font-size: 13px; }\n.btn { padding: 10px 18px; border-radius: var(--radius); background: var(--accent); color: #fff; border: 0; outline: none; transition: background 180ms var(--ease); }\n.btn:hover { background: #c9441f; }\n.button-secondary { padding: 9px 16px; border-radius: 4px; border: 1px solid #1a1a1a; background: transparent; }\n.card { padding: 20px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.12); margin-bottom: 15px; }\na { color: var(--accent); }\na:hover { text-decoration: underline; }\n@media (min-width: 768px) { .card { padding: 28px; } }"}'

Try it here

The form starts with the same example input, so you can run it first and then swap in your own.

More in design systems and tokens

All design systems and tokens tools