Stop Shipping
47 Shades of Gray
Your Codebase Has a
Design Problem
47 Shades of Gray
Your codebase has 47 different grays when you only need 5. Each 'slightly different' hex code increases bundle size and maintenance.
Random Spacing
13px, 17px, 23px. Off-scale values break visual rhythm. Components don't align because developers guess pixel values.
Scattered Fonts
No clear type scale. Font sizes are hardcoded everywhere, making global typography updates impossible.
Hardcoded Values
Design tokens are missing. One brand color change requires finding and replacing hundreds of hardcoded strings.
AlignMyDesign Fixes It
Automatically
Scan Codebase
One command to analyze all CSS, SCSS, TS, and JS files. Extracts every color, font, and spacing value.
Drift Score
Get an instant 0-100 health score for your design system. Track improvements over time.
Smart Clustering
Uses CIE Delta-E perceptual color distance to group similar colors humans can't distinguish.
Generate Tokens
Export clean design tokens to JSON, TypeScript, Tailwind, or React Native formats.
Visual Dashboard
Launch a localhost dashboard to visualize your palette and fix violations interactively.
AI Refactoring
Generates step-by-step refactoring plans for Claude and Cursor to fix drift automatically.
Visualize Your
Design Health
The local dashboard gives you a bird's-eye view of your entire codebase. Spot outliers in seconds and normalize your scales with interactive tools.
Get Started in 30 Seconds
No subscriptions. No API keys. Just a powerful CLI that runs locally on your machine.
$ npm install -g alignmydesign$ alignmydesign start$ npx alignmydesign startDocumentation
Explore our comprehensive guides, CLI references, and best practices for maintaining visual consistency across your applications.
Read Full Documentation