Installation

$ npx skills add dragoon0x/meridian --skill meridian-design

Summary

Design DNA engine that learns your codebase before making recommendations.
Maps 8 design axes (typography, color, layout, motion, accessibility, tokens, hierarchy, personality), builds a project-aware profile in .meridian.json, and enforces your established aesthetic. 62 commands across 5 tiers.
Every command respects what you've already built.
Use on any frontend project to prevent AI slop while preserving design intent.

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared

Cursor Not declared

Codex Not declared

GitHub Copilot Not declared

Windsurf Not declared

Gemini CLI Not declared

Cline Not declared

OpenCode Not declared

Repository health

Stars 1

License LICENSE

Default branch main

Open issues 0

Status Archived

Package contents

Files included with this skill beyond the listing page.

skill md SKILL.md 4,719 B

docs SUMMARY.md 448 B

History

Apr 16, 2026 First seen on skills.sh

Sep 9, 2026 First recorded snapshot · 1 installs

SKILL.md

MERIDIAN — Design DNA Engine

MERIDIAN is project-aware. It reads your codebase first, builds a design profile, then works within your aesthetic. It doesn't impose generic rules — it discovers your rules and enforces them.

The Eight Axes

Every design decision maps to one of eight measurable axes:

1. Typography (15%)

Font choice quality (14-font banlist), type scale ratio consistency, hierarchy depth (distinct size count), line-height presence, letter-spacing intentionality, font weight variety (2-4 ideal).

2. Color (15%)

Palette coherence, WCAG contrast ratios (AA minimum), anti-pattern detection (purple gradients, pure black), dark mode support, palette size (3-12 intentional colors), CSS variable usage.

3. Layout (15%)

Grid/flexbox adoption, 4px spacing grid alignment, max-width constraints, responsive breakpoints, gap property, nesting depth (max 4), anti-patterns (nested cards).

4. Motion (8%)

Starts at 50. Earns: transitions (+15), custom cubic-bezier (+10), keyframes (+15), transforms (+10), prefers-reduced-motion (+10). Loses: motion without a11y fallback (-10), layout property animation (-10).

5. Accessibility (12%)

:focus-visible styles, semantic HTML landmarks, ARIA attributes, 44x44px touch targets, skip links, prefers-reduced-motion. Harshest penalty: outline:none without replacement (-20).

6. Tokens (15%)

CSS custom property adoption rate. var(--name) usage divided by total design values. Fully tokenized = 100. Zero variables = 0. Measures system maintainability.

7. Hierarchy (10%)

Visual depth — distinct size levels, weight differentiation, size ratio (largest/smallest), heading progression, subheading/caption/overline presence.

8. Personality (10%)

Anti-slop distance. How far from AI defaults? Banned fonts = 0. Unusual fonts = high. Purple gradient = 0. Intentional palette = high. Rewards: backdrop-filter, clip-path, mix-blend-mode, conic-gradient, scroll-snap, @supports, writing-mode.

The .meridian.json Profile

Running /m-scan creates .meridian.json:

{
  "dna": {
    "typography": 78, "color": 82, "layout": 90, "motion": 55,
    "accessibility": 68, "tokens": 84, "hierarchy": 72, "personality": 88
  },
  "fonts": ["Outfit", "DM Sans"],
  "palette": ["#e8590c", "#1a1a1a", "#fafafa"],
  "spacingBase": 4,
  "typeRatio": 1.25,
  "hash": "M-3F7A2D"
}

The hash is a 6-character fingerprint derived from the 8-axis scores. Same design decisions = same hash.

Five Tiers

Tier 1 — Foundation (12 commands)

Tokens, scales, grids. The structural base.

Tier 2 — Composition (11 commands)

Layout relationships. Spacing rhythm, alignment, hierarchy, flow.

Tier 3 — Expression (14 commands)

Typography, color, motion. What makes the design distinctive.

Tier 4 — Polish (13 commands)

Accessibility, performance, edge cases. Production readiness.

Tier 5 — DNA (12 commands)

Project-aware intelligence. Profile, drift detection, enforcement, export.

Font Banlist

Inter, Roboto, Arial, Helvetica, system-ui, -apple-system, Open Sans, Lato, Montserrat, Poppins, Nunito, Space Grotesk, Raleway, Source Sans Pro

Anti-Pattern Registry

Pattern	Axis	Deduction
Banned font	Typography, Personality	-25, -30
Purple gradient	Color, Personality	-30, -25
Nested cards	Layout, Personality	-20, -15
No CSS variables	Color, Tokens	-15, -100
outline:none	Accessibility	-20
No media queries	Layout	-15
Pure black text	Color	-5
Off-grid spacing	Layout	-3 each
Single font weight	Typography, Hierarchy	-10, -10

Execution Protocol

Scan — /m-scan reads the codebase, builds .meridian.json
Score — /m-score runs the 8-axis analysis
Fix — Tier-specific commands address issues
Verify — /m-drift checks for regression
Certify — /m-certify for CI/CD pass/fail

The AI must read .meridian.json before writing any CSS. If the profile shows the project uses Instrument Serif, the AI must not suggest replacing it. If spacing is on an 8px grid, the AI must maintain it. MERIDIAN works WITH the existing design, not against it.

meridian-design