Design System Consistency
Run 30 design consistency test cases across 3 parallel agents covering visual tokens, component patterns, and cross-page uniformity. Extracts computed styles from matched elements across multiple pages and compares for variance.
Setup
URL="${ARGUMENTS:-http://localhost:3000}"
TIMESTAMP=$(date +%Y%m%d-%H%M%S)
OUTDIR="test-results/test-consistency/$TIMESTAMP"
mkdir -p "$OUTDIR/screenshots" "$OUTDIR/snapshots" "$OUTDIR/traces"
Page Discovery
Before testing, discover pages to compare:
playwright-cli -s=cons-discover open "$URL"
playwright-cli -s=cons-discover run-code "async page => {
const links = await page.locator('a[href]').all();
const hrefs = await Promise.all(links.map(l => l.getAttribute('href')));
const origin = new URL(page.url()).origin;
const internal = [...new Set(hrefs.filter(h => h && (h.startsWith('/') || h.startsWith(origin))).map(h => h.startsWith('/') ? origin + h : h))];
return internal.slice(0, 10); // Test up to 10 pages
}"
playwright-cli -s=cons-discover close
Store discovered page URLs for agents to iterate over.
Parallel Execution — 3 Subagents
Agent 1: Visual (-s=cons-visual)
Tests colors, typography, and spacing consistency.
playwright-cli -s=cons-visual open "$URL"
playwright-cli -s=cons-visual tracing-start
Test Cases:
For each test, run-code extracts computed styles across multiple pages and checks for consistency.
| TC |
Test |
How to Check |
| TC-DC1 |
Color palette — max N unique colors (flag >15) |
run-code to collect all computed color, background-color, border-color values from all elements. Count unique colors |
| TC-DC2 |
Brand colors consistent across pages |
Visit each discovered page, collect primary colors (h1, CTA, nav background), verify same hex values |
| TC-DC3 |
Font families — max 3 unique |
run-code to collect all computed font-family values, count unique families |
| TC-DC4 |
Font size scale — consistent scale |
run-code to collect all font-size values, check if they follow a consistent scale (e.g., 12/14/16/20/24/32) |
| TC-DC5 |
Font weights consistent |
run-code to collect font-weight values, check for unnecessary variety (not random 400/500/600) |
| TC-DC6 |
Line heights — consistent ratio |
run-code to compute lineHeight/fontSize ratio for text elements, verify consistent ratios |
| TC-DC7 |
Spacing scale — consistent |
run-code to collect margin and padding values, check if they follow a scale (4/8/16/24/32/48px) |
| TC-DC8 |
Border radius consistent |
run-code to collect border-radius values from similar components (buttons, cards, inputs), verify consistency |
| TC-DC9 |
Shadow styles consistent |
run-code to collect box-shadow values, verify consistent shadow patterns |
| TC-DC10 |
Icon sizing consistent |
run-code to find SVG/icon elements, measure dimensions, verify consistent sizes |
playwright-cli -s=cons-visual tracing-stop
playwright-cli -s=cons-visual close
Agent 2: Components (-s=cons-components)
Tests component pattern consistency.
playwright-cli -s=cons-components open "$URL"
playwright-cli -s=cons-components tracing-start
Test Cases:
| TC |
Test |
How to Check |
| TC-DC11 |
Buttons — same style for same type across pages |
Visit multiple pages, collect button styles (background, color, padding, border-radius) by type (primary, secondary), compare |
| TC-DC12 |
Input fields — same height, padding, border |
Collect input styles across pages, verify consistent dimensions and borders |
| TC-DC13 |
Cards — consistent padding, shadow, radius |
Find card-like containers, compare styling across instances |
| TC-DC14 |
Navigation — same structure/style on all pages |
Visit each page, compare nav element structure and styling |
| TC-DC15 |
Footer — identical across pages |
Visit each page, compare footer structure and content |
| TC-DC16 |
Headings — same style for same level |
Compare h1, h2, h3 styles across pages — same level should have same styling |
| TC-DC17 |
Links — same color/underline treatment |
Collect link styles, verify consistent color and text-decoration |
| TC-DC18 |
Alerts/badges — consistent colors for severity |
Find alert/badge components, verify error=red, warning=yellow, success=green consistently |
| TC-DC19 |
Avatar/image — consistent sizing and shape |
Find avatar/profile image components, verify consistent dimensions and border-radius |
| TC-DC20 |
Table styling — consistent headers, rows, borders |
If tables exist: compare table styling across instances |
playwright-cli -s=cons-components tracing-stop
playwright-cli -s=cons-components close
Agent 3: Pages (-s=cons-pages)
Tests cross-page layout consistency.
playwright-cli -s=cons-pages open "$URL"
playwright-cli -s=cons-pages tracing-start
Test Cases:
| TC |
Test |
How to Check |
| TC-DC21 |
Page layout — consistent content width |
Visit each page, measure main content container width, verify consistent |
| TC-DC22 |
Header height — same on all pages |
Visit each page, measure header height, verify consistent |
| TC-DC23 |
Sidebar width — consistent if present |
If sidebar exists: measure width across pages |
| TC-DC24 |
Content padding — same on all pages |
Measure main content padding across pages |
| TC-DC25 |
Background colors — consistent page backgrounds |
Compare body/main background-color across pages |
| TC-DC26 |
Loading patterns — same spinner/skeleton |
If loading states exist: compare loading indicator styling across features |
| TC-DC27 |
Error patterns — same error style everywhere |
If error states visible: compare error message styling |
| TC-DC28 |
Empty state patterns — consistent across features |
If empty states exist: compare empty state UI patterns |
| TC-DC29 |
Animation patterns — same easing/duration |
Compare transition-duration and transition-timing-function across similar components |
| TC-DC30 |
Responsive breakpoints — same across pages |
run-code to check CSS media queries across loaded stylesheets, verify same breakpoint values |
playwright-cli -s=cons-pages tracing-stop
playwright-cli -s=cons-pages close
Report Generation
After all 3 agents complete, merge results into $OUTDIR/report.md.
Include a consistency scorecard:
| Category |
Score |
Variance Issues |
| Visual Tokens |
X/10 |
23 unique colors (target ≤15) |
| Components |
X/10 |
Button styles vary across 3 pages |
| Cross-Page |
X/10 |
Header height differs on /about |
| Overall |
X/30 |
... |
For each inconsistency, include:
- Where: Which pages/elements are inconsistent
- Values found: List of varying values (e.g., font-sizes: 14px, 15px, 16px)
- Suggested fix: Standardize to which value and why
Group results:
- Visual Tokens (TC-DC1 through TC-DC10)
- Component Patterns (TC-DC11 through TC-DC20)
- Cross-Page Uniformity (TC-DC21 through TC-DC30)
Cleanup
playwright-cli -s=cons-discover close 2>/dev/null
playwright-cli -s=cons-visual close 2>/dev/null
playwright-cli -s=cons-components close 2>/dev/null
playwright-cli -s=cons-pages close 2>/dev/null
1---2name: test-consistency-23description: Audit design system consistency across pages. Use when user wants to check visual consistency, design tokens, component reuse, color palette, typography, spacing, or cross-page uniformity.4---56# Design System Consistency78Run 30 design consistency test cases across 3 parallel agents covering visual tokens, component patterns, and cross-page uniformity. Extracts computed styles from matched elements across multiple pages and compares for variance.910## Setup1112```bash13URL="${ARGUMENTS:-http://localhost:3000}"14TIMESTAMP=$(date +%Y%m%d-%H%M%S)15OUTDIR="test-results/test-consistency/$TIMESTAMP"16mkdir -p "$OUTDIR/screenshots" "$OUTDIR/snapshots" "$OUTDIR/traces"17```1819## Page Discovery2021Before testing, discover pages to compare:2223```bash24playwright-cli -s=cons-discover open "$URL"25playwright-cli -s=cons-discover run-code "async page => {26 const links = await page.locator('a[href]').all();27 const hrefs = await Promise.all(links.map(l => l.getAttribute('href')));28 const origin = new URL(page.url()).origin;29 const internal = [...new Set(hrefs.filter(h => h && (h.startsWith('/') || h.startsWith(origin))).map(h => h.startsWith('/') ? origin + h : h))];30 return internal.slice(0, 10); // Test up to 10 pages31}"32playwright-cli -s=cons-discover close33```3435Store discovered page URLs for agents to iterate over.3637## Parallel Execution — 3 Subagents3839### Agent 1: Visual (`-s=cons-visual`)4041Tests colors, typography, and spacing consistency.4243```bash44playwright-cli -s=cons-visual open "$URL"45playwright-cli -s=cons-visual tracing-start46```4748**Test Cases:**4950For each test, `run-code` extracts computed styles across multiple pages and checks for consistency.5152| TC | Test | How to Check |53|----|------|-------------|54| TC-DC1 | Color palette — max N unique colors (flag >15) | `run-code` to collect all computed `color`, `background-color`, `border-color` values from all elements. Count unique colors |55| TC-DC2 | Brand colors consistent across pages | Visit each discovered page, collect primary colors (h1, CTA, nav background), verify same hex values |56| TC-DC3 | Font families — max 3 unique | `run-code` to collect all computed `font-family` values, count unique families |57| TC-DC4 | Font size scale — consistent scale | `run-code` to collect all font-size values, check if they follow a consistent scale (e.g., 12/14/16/20/24/32) |58| TC-DC5 | Font weights consistent | `run-code` to collect font-weight values, check for unnecessary variety (not random 400/500/600) |59| TC-DC6 | Line heights — consistent ratio | `run-code` to compute lineHeight/fontSize ratio for text elements, verify consistent ratios |60| TC-DC7 | Spacing scale — consistent | `run-code` to collect margin and padding values, check if they follow a scale (4/8/16/24/32/48px) |61| TC-DC8 | Border radius consistent | `run-code` to collect border-radius values from similar components (buttons, cards, inputs), verify consistency |62| TC-DC9 | Shadow styles consistent | `run-code` to collect box-shadow values, verify consistent shadow patterns |63| TC-DC10 | Icon sizing consistent | `run-code` to find SVG/icon elements, measure dimensions, verify consistent sizes |6465```bash66playwright-cli -s=cons-visual tracing-stop67playwright-cli -s=cons-visual close68```6970### Agent 2: Components (`-s=cons-components`)7172Tests component pattern consistency.7374```bash75playwright-cli -s=cons-components open "$URL"76playwright-cli -s=cons-components tracing-start77```7879**Test Cases:**8081| TC | Test | How to Check |82|----|------|-------------|83| TC-DC11 | Buttons — same style for same type across pages | Visit multiple pages, collect button styles (background, color, padding, border-radius) by type (primary, secondary), compare |84| TC-DC12 | Input fields — same height, padding, border | Collect input styles across pages, verify consistent dimensions and borders |85| TC-DC13 | Cards — consistent padding, shadow, radius | Find card-like containers, compare styling across instances |86| TC-DC14 | Navigation — same structure/style on all pages | Visit each page, compare nav element structure and styling |87| TC-DC15 | Footer — identical across pages | Visit each page, compare footer structure and content |88| TC-DC16 | Headings — same style for same level | Compare h1, h2, h3 styles across pages — same level should have same styling |89| TC-DC17 | Links — same color/underline treatment | Collect link styles, verify consistent color and text-decoration |90| TC-DC18 | Alerts/badges — consistent colors for severity | Find alert/badge components, verify error=red, warning=yellow, success=green consistently |91| TC-DC19 | Avatar/image — consistent sizing and shape | Find avatar/profile image components, verify consistent dimensions and border-radius |92| TC-DC20 | Table styling — consistent headers, rows, borders | If tables exist: compare table styling across instances |9394```bash95playwright-cli -s=cons-components tracing-stop96playwright-cli -s=cons-components close97```9899### Agent 3: Pages (`-s=cons-pages`)100101Tests cross-page layout consistency.102103```bash104playwright-cli -s=cons-pages open "$URL"105playwright-cli -s=cons-pages tracing-start106```107108**Test Cases:**109110| TC | Test | How to Check |111|----|------|-------------|112| TC-DC21 | Page layout — consistent content width | Visit each page, measure main content container width, verify consistent |113| TC-DC22 | Header height — same on all pages | Visit each page, measure header height, verify consistent |114| TC-DC23 | Sidebar width — consistent if present | If sidebar exists: measure width across pages |115| TC-DC24 | Content padding — same on all pages | Measure main content padding across pages |116| TC-DC25 | Background colors — consistent page backgrounds | Compare body/main background-color across pages |117| TC-DC26 | Loading patterns — same spinner/skeleton | If loading states exist: compare loading indicator styling across features |118| TC-DC27 | Error patterns — same error style everywhere | If error states visible: compare error message styling |119| TC-DC28 | Empty state patterns — consistent across features | If empty states exist: compare empty state UI patterns |120| TC-DC29 | Animation patterns — same easing/duration | Compare transition-duration and transition-timing-function across similar components |121| TC-DC30 | Responsive breakpoints — same across pages | `run-code` to check CSS media queries across loaded stylesheets, verify same breakpoint values |122123```bash124playwright-cli -s=cons-pages tracing-stop125playwright-cli -s=cons-pages close126```127128## Report Generation129130After all 3 agents complete, merge results into `$OUTDIR/report.md`.131132Include a consistency scorecard:133134| Category | Score | Variance Issues |135|----------|-------|----------------|136| Visual Tokens | X/10 | 23 unique colors (target ≤15) |137| Components | X/10 | Button styles vary across 3 pages |138| Cross-Page | X/10 | Header height differs on /about |139| **Overall** | **X/30** | ... |140141For each inconsistency, include:142- **Where**: Which pages/elements are inconsistent143- **Values found**: List of varying values (e.g., font-sizes: 14px, 15px, 16px)144- **Suggested fix**: Standardize to which value and why145146Group results:1471. Visual Tokens (TC-DC1 through TC-DC10)1482. Component Patterns (TC-DC11 through TC-DC20)1493. Cross-Page Uniformity (TC-DC21 through TC-DC30)150151## Cleanup152153```bash154playwright-cli -s=cons-discover close 2>/dev/null155playwright-cli -s=cons-visual close 2>/dev/null156playwright-cli -s=cons-components close 2>/dev/null157playwright-cli -s=cons-pages close 2>/dev/null158```
az9713