v2026.4.12 — design intelligence runtime

give your agent eyes

49 design quality rules. zero LLM. deterministic scoring. design token extraction. taste profiles. plugs into any agent via MCP.

# install globally npm install -g @argus-design/cli@latest # guided setup argus onboard # score any page argus score https://your-app.com # extract design tokens argus tokens https://your-app.com --export css # connect to your agent argus mcp
49
scoring rules
6
categories
11
rule modules
<200ms
full analysis
0
llm calls

five layers, one loop

see. judge. extract. learn. connect. each layer works independently and composes into a full design intelligence stack.

inspector

walks the DOM. extracts positions, computed styles, a11y properties, color palettes, type scales, spacing values, structural patterns.

scorer

49 deterministic rules across 6 categories. every finding has a rule ID, measured value, expected range, and fix suggestion.

token extractor

reverse-engineers your design system from live CSS. discovers colors, spacing, type, radii, shadows, z-indices. exports as CSS vars or JSON.

memory

records approvals and rejections. builds a taste profile. exports as XML for any agent system prompt. your agent learns your style.

mcp server

8 tools. any MCP-compatible agent. cursor, claude code, copilot, windsurf. one config line.

what argus returns

two views into the same page. the score report shows what is wrong. the token extractor shows what design system is actually in use.

79
Design Score: 79/100 B 142 elements · 49 rules · 38ms
https://example.com
spacing
86
typography
82
color
68
hierarchy
85
a11y
65
consistency
88
  • contrast-compliance — 4 elements fail WCAG AA. increase text contrast to 4.5:1 minimum.
  • semantic-interactive — 3 clickable divs should be <button> or <a>. breaks keyboard nav.
  • spacing-scale — 9 values off the 8px grid. nearest: 18px→16px, 22px→24px, 14px→12px.
  • line-length — 2 text blocks exceed 90 chars/line. add max-width: 65ch.
  • touch-target-size — 3 buttons below 24px minimum. increase to 44×44px.
  • z-index-sanity — max z-index: 99999. use a structured scale (10, 20, 30, 40, 50).
  • transition-presence — 8 interactive elements without transitions. state changes feel abrupt.
  • heading-size-progression — heading sizes progress correctly through levels.
  • image-alt-text — all 6 images have alt attributes.

colors discovered

--color-text-primary#e5e5e5
--color-text-secondary#737373
--color-bg-page#0a0a0a
--color-bg-surface#171717
--color-accent#38bdf8

spacing scale

4px8px12px16px24px32px18px22px
6 on-grid · 2 off-grid → consolidate to 8px scale

typography scale

display48px / 800
h136px / 700
h224px / 600
body16px / 400
caption13px / 400

border radius

--radius-sm4px
--radius-md8px
--radius-lg12px
--radius-full9999px
:root { /* Colors */ --color-text-primary: #e5e5e5; --color-text-secondary: #737373; --color-bg-page: #0a0a0a; --color-bg-surface: #171717; --color-accent: #38bdf8; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; }
consolidate: 2 spacing values off 8px grid → 18px→16px, 22px→24px
consolidate: 8 text colors → recommend 4 (primary, secondary, muted, accent)
system score: 74/100 — good foundation, needs token consolidation

49 rules across 11 modules

spacing, typography, color, hierarchy, accessibility, consistency. plus layout quality, semantic HTML, whitespace density, interaction patterns, and media quality.

spacing 9

  • 8px grid adherence
  • sibling gap consistency
  • value variety
  • container padding
  • overflow detection
  • positioning audit
  • content density
  • section breathing
  • text edge padding

typography 6

  • scale ratio
  • size variety
  • weight usage
  • line height
  • family count
  • line length (chars/line)

color 5

  • palette size
  • WCAG contrast
  • near-duplicates
  • pure black avoidance
  • link distinguishability

hierarchy 6

  • heading progression
  • CTA dominance
  • visual weight
  • heading levels
  • input affordance
  • icon button proportions

accessibility 10

  • image alt text
  • touch targets
  • landmarks
  • document language
  • semantic interactive
  • semantic lists
  • semantic text
  • empty interactive
  • table structure
  • color-only info

consistency 13

  • border-radius
  • box-shadow
  • CSS variables
  • button sizing
  • z-index sanity
  • flex alignment
  • nesting depth
  • cursor affordance
  • transitions
  • transition timing
  • image dimensions
  • image aspect ratios
  • image containment

one config, every agent

8 MCP tools that work with any compatible agent. your coding agent gains design perception in one line.

MCP config

{
  "mcpServers": {
    "argus": {
      "command": "argus",
      "args": ["mcp"]
    }
  }
}

8 design tools

  • design.inspectanalyze visual structure
  • design.scorequality score 0–100
  • design.suggestactionable fixes
  • design.applyapply + verify
  • design.comparebefore/after diff
  • design.preferencestaste profile
  • design.auditfull WCAG audit
  • design.doctorhealth check