MERIDIAN maps your project's design DNA. Paste any codebase and it runs 80+ signals across eight axes: typography, color, layout, motion, accessibility, token adoption, hierarchy, and personality. The result is a fingerprint — a radar chart that shows exactly what your design is made of and where it falls short.
Every design skill on the market tells the AI generic rules. MERIDIAN does the opposite. It reads your codebase first, learns what you've already decided, then enforces your aesthetic. The /m-scan command builds a profile. Every subsequent command respects what you've built.
Paste some code. See your DNA.
80+ signals across 8 axes. Client-side only. The radar chart is your design genome — share it like a Spotify Wrapped for code. Click any axis to expand its findings.
80+ signals across eight axes
Typography (15%)
Font choice against a 14-font banlist. Type scale ratio consistency. Hierarchy depth. Line-height declarations. Letter-spacing on headings. Font weight variety (2-4 ideal). Font loading strategy (font-display: swap). Fluid typography via clamp().
Color (15%)
Palette size (3-12 intentional colors). WCAG contrast patterns. Purple gradient detection. Pure black text. Color harmony — hue group analysis. CSS variable adoption. Dark mode. Modern color spaces (oklch, lab). color-mix() usage.
Layout (15%)
Grid/flexbox adoption. 4px spacing alignment. Max-width. Responsive breakpoints. Gap property. Nesting depth. Nested cards. Container queries. Subgrid. Logical properties. Named grid areas. Aspect ratio.
Motion (8%)
Starts at 50 (neutral). Earns: transitions, custom cubic-bezier, keyframes, transforms, will-change, View Transitions API, scroll-driven animations. Loses: motion without prefers-reduced-motion, layout property animation.
Accessibility (12%)
:focus-visible. Semantic landmarks. ARIA. Touch targets (44x44px). Skip links. prefers-reduced-motion. prefers-contrast. Heading hierarchy. outline: none without replacement is -20.
Tokens (15%)
CSS custom property adoption rate. @property declarations. @layer organization. Naming convention consistency. Root-level definitions. Token group comments. The maintainability axis.
Hierarchy (10%)
Heading level count. Weight differentiation. Size contrast ratio. Overline/eyebrow presence. Caption/small text layers. Secondary and muted text colors. The deeper the hierarchy, the richer the architecture.
Personality (10%)
The anti-slop axis. Rewards: backdrop-filter, clip-path, mix-blend-mode, conic-gradient, scroll-snap, :has(), CSS nesting, container queries, @layer, masks, filters, custom cursors. Penalizes: banned fonts, cliche patterns, !important abuse.
Getting started
First command:
/m-scanReads your codebase. Writes .meridian.json. Every command after this respects your established aesthetic.
62 commands, 5 tiers
Tier 1 — FoundationFoundation
/m-scanRead codebase, build design profile/m-scoreFull 8-axis DNA score/m-auditComprehensive quality report/m-tokensGenerate complete token set/m-type-scaleMathematical type scale/m-paletteFull 50-950 shade palette/m-spacingSpacing scale from base unit/m-shadowsBrand-tinted elevation system/m-radiiBorder radius scale/m-motion-tokensDuration + easing tokens/m-breakpointsResponsive breakpoint tokens/m-z-indexZ-index layer systemComposition
/m-gridSnap spacing to base grid/m-rhythmVertical baseline rhythm/m-densityWhitespace balance audit/m-responsiveBreakpoint quality check/m-layout-auditMap all layout patterns/m-layout-fixAuto-fix off-grid spacing/m-alignCross-section alignment/m-hierarchyVisual depth audit/m-flowReading order check/m-measureLine length (45-75 chars)/m-nestingNesting depth (max 4)Expression
/m-type-pairFont pairing recommendations/m-type-auditFull typography audit/m-type-fixAuto-fix scale issues/m-type-setComplete type system/m-color-auditFind off-system colors/m-color-fixReplace with tokens/m-contrastWCAG contrast matrix/m-darkGenerate dark mode/m-harmonizeAdd complementary accent/m-semanticSemantic color tokens/m-animatePurposeful motion/m-scroll-fxScroll-triggered reveals/m-overdriveWebGL, spring physics/m-transitionTiming function tuningPolish
/m-a11yFull accessibility audit/m-a11y-fixAuto-fix a11y issues/m-focusFocus ring system/m-touch44x44px touch targets/m-ariaARIA attribute audit/m-reduced-motionprefers-reduced-motion/m-screen-readerScreen reader traversal/m-hardenError states, i18n, edges/m-polishFinal quality pass/m-bolderAmplify safe designs/m-quieterSoften aggressive designs/m-distillStrip to essence/m-delightMemorable momentsDNA
/m-profileView design profile/m-driftDetect drift from baseline/m-enforceAuto-fix drift violations/m-compareCompare DNA across versions/m-trendTrack DNA over time/m-certifyPass/fail for CI/CD/m-reportShareable DNA card/m-normalizeFull token normalization/m-export-cssCSS custom properties/m-export-twTailwind config/m-export-scssSCSS variables + mixins/m-export-jsonW3C Design Tokens JSONScoring
| Axis | Weight | Signals |
|---|---|---|
| Typography | 15% | 12 signals |
| Color | 15% | 11 signals |
| Layout | 15% | 14 signals |
| Motion | 8% | 9 signals |
| Accessibility | 12% | 10 signals |
| Tokens | 15% | 8 signals |
| Hierarchy | 10% | 8 signals |
| Personality | 10% | 16 signals |
| Score | Grade | |
|---|---|---|
| 90-100 | Distinctive | Considered, intentional, unique |
| 75-89 | Considered | Good decisions, minor gaps |
| 55-74 | Generic | Functional but forgettable |
| 35-54 | AI Slop | Default patterns, no intention |
| 0-34 | Undesigned | No evidence of design thinking |
Just a scan
MERIDIAN has 62 commands, 80+ signals, 5 tiers, DNA hashing, drift detection, a shareable card generator, and CI/CD certification. But if you just want to see what your design is made of, /m-scan shows you in one line.
Experimental — built out of curiosity, shared for educational purposes. Not professional design advice. DNA scores are heuristic approximations. Not affiliated with any AI tool vendor. DYOR. Apache 2.0.
Built by dragoon0x · GitHub