Skip to content
Devtools

Design Token Linter

Flag hard-coded colours and spacing that should use design tokens.

Beginner10h1 person16/20 fit
TL;DR

Build Design Token Linter for frontend teams in ~10h with 1 person. Stack: Node.js + PostCSS.

Why it wins: Practical design system tooling.

Build flow

01 · Problem
UIs drift from the design system through one-off values.
02 · Solution
Scan CSS and components for raw values, suggest the nearest token and offer autofixes.
03 · Build
  1. 1Load tokens
  2. 2Scan styles
  3. 3Match values
  4. 4Fix
04 · Demo
Show a hard-coded colour replaced with a token.

MVP checklist

  • Raw value scan
  • Nearest token
  • Autofix
  • CI check

Tech stack

TechRole
Node.jsBackend runtime
PostCSSTooling

Related ideas

More Devtools

  • Devtools

    Visual Regression Bot

    Screenshot key pages on each PR and highlight visual changes

    Intermediate16h1–2
    PlaywrightGitHub ActionsNode.js
    17/20

  • Devtools

    Dependency Health Checker

    See which dependencies are abandoned, vulnerable or heavy

    Beginner10h1
    Node.jsnpm registry APINext.js
    17/20

  • Devtools

    Env Variable Drift Checker

    Catch missing or mismatched environment variables before deploys fail

    Beginner8h1
    Node.jsTree-sitter
    17/20