AlignMyDesign
Documentation v1.0.0

Documentation

AlignMyDesign is your comprehensive tool for maintaining visual consistency. Detect drift, generate tokens, and automate your design system.

The Problem: Drift

Codebases rot. Hex values multiply. Spacing scales break. Design drift isn't just ugly—it's technical debt that slows you down.

The Solution: Align

We scan every line of code, cluster similar values using perceptual algorithms, and give you the tools/tokens to fix it instantly.

Installation

Global Installation (Recommended for CLI)
npm install -g alignmydesign
Project Dependency
npm install --save-dev alignmydesign

Note: You can also run commands directly with npx alignmydesign without installing.

Quick Start

01

Scan Your Codebase

Inventory every color, font, and spacing value in your project.

alignmydesign scan
02

See the Report

Get a breakdown of your design health and drift score.

alignmydesign report
03

Generate Tokens

Output a clean set of CSS/JSON/TS tokens based on your actual usage.

alignmydesign init

Core Concepts

Clustering Engine

We don't just count values. We use CIE Delta-E to group similar colors (e.g. Slate 500 and Gray 500) and normalize spacing to your nearest grid unit.

Design Tokens

Drift happens when values are hardcoded. We replace magic values with semantic tokens like colors.primary.

CLI Reference

start

Starts visual dashboard

--port

Visual Dashboard

The CLI is powerful, but seeing is believing. Launch the local dashboard to visualize your design system's health, interact with dependency graphs, and spot outliers.

Run in terminal
alignmydesign start
Open active port
localhost:5656

Drift Score

Your Drift Score (0-100) is a weighted calculation of how consistent your codebase is. A lower score means a healthier, more consistent design implementation.

  • 0-20Excellent
  • 21-40Good
  • 41-60Fair
  • 61-80Poor
  • 81+Critical

Scoring Weights

Color Variance25%
Font Inconsistency25%
Off-Scale Spacing20%
Low Reuse Rate15%
Cluster Similarity15%