Design tokens

About

Finds the hardcoded colours and one-off font sizes that quietly break your dark theme, and maps each one back to a token.

Files in v1.0.0

• replicamd.plugin.json2383 B
• skills/one-visual-system.md2556 B

Contributes

{
  "commands": [
    {
      "id": "audit",
      "title": "Find hardcoded colours and sizes",
      "prompt": "Find where this project's UI has drifted off its own design system.\n\nFirst read the system: locate the theme file (globals.css, tokens.css, a Tailwind config, a theme module) and list the tokens that actually exist - background, foreground, muted, border, primary, destructive, the radius scale, the type scale. Do not assume a token exists because it usually does.\n\nThen search the UI source for values that bypass it:\n- literal hex, rgb() and hsl() colours in components\n- palette names used for neutrals where a token exists (gray-500 where muted-foreground is meant)\n- arbitrary font sizes outside the scale\n- arbitrary radii and spacing off the step\n\nReport counts per pattern, most frequent first, then map each to its token. Call out separately any value that will look wrong in one of the two themes - a fixed near-black background is a hole punched in the light theme, and that is a bug rather than an inconsistency.\n\nIf the project has no token layer at all, say so and stop: the fix is to define one, not to rename 200 literals."
    },
    {
      "id": "fix",
      "title": "Move one file onto the tokens",
      "prompt": "Take the file I name and move it onto the design system.\n\nReplace literal colours with the semantic token that matches the intent, not the shade: a muted caption becomes the muted token even if its hex was closer to a different one. Bring font sizes onto the scale. Leave a value alone if it is genuinely outside the system - a brand logo colour, a syntax highlighting palette, a deliberate one-off - and say which ones you left and why.\n\nDo not touch vendored component libraries; they are regenerated and your edits will be lost. Fix the call site instead. When you are done, show the before and after counts for that file."
    }
  ],
  "skills": [
    "skills/one-visual-system.md"
  ]
}

Versions

• v1.0.07/26/2026 · 2 files

Install

Nothing happened? ReplicaMD may not be installed yet - or open it first, then Settings → Plugins and install by id.

Plugin id:

Bundle endpoint: