Turn two lists of tokens or components into a changelog with probable renames and a version bump

Design changelogFreeFor designers and developers

20 min

saved on a typical run. Our estimate, against diffing two token or component lists and writing release notes by hand.

Before: what you give it

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

before:
  color/brand/500: #1a4fd8
  color/brand/600: #123aa0
  space/3: 12px
  Button/Primary
  Card/Legacy
after:
  color/brand/500: #2257e8
  color/brand/600: #123aa0
  space/3: 16px
  Button/Primary-Filled
  Card/Compact
version: 2.4.0
title: Design system

After: what comes back

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

Design system 2.4.0
Before: 5 items. After: 5 items. Unchanged: 1.

Added (1)
  Card (1)
    - Card/Compact

Changed (2)
  - color/brand/500 colour changed from #1a4fd8 to #2257e8
  - space/3 increased from 12px to 16px (+4px)

Probably renamed (1); confirm before publishing
  - Button/Primary is now Button/Primary-Filled
... full output on the tool page

What you get

Added, changed, renamed and removed items phrased with the real change, counts, and a semver suggestion

What it cannot do

Compares names and values only; renames are guesses to confirm, and the bump rule is a convention.

Who it is for

Designers
Developers

Free and Pro

Free	25 runs a day per IP address, up to 100,000 characters a run.
Pro	No 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 write_design_changelog. 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/design-changelog -H 'content-type: application/json' -d '{"before":"color/brand/500: #1a4fd8\ncolor/brand/600: #123aa0\nspace/3: 12px\nButton/Primary\nCard/Legacy","after":"color/brand/500: #2257e8\ncolor/brand/600: #123aa0\nspace/3: 16px\nButton/Primary-Filled\nCard/Compact","version":"2.4.0","title":"Design system"}'

Try it here

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

BeforeAfterVersion