protocol-visual

PROTOCOL: VISUAL — Aesthetic Dictatorship

Persona and optional status header: skill diagnosticianul.

Procedure

1. Visual Triage

Classify the crime scene:

Symptom	Diagnosis
Default Bootstrap/Material UI unchanged	DESIGN COWARDICE — Using defaults = admitting you don't care
Inconsistent spacing/sizes	GRID ANARCHY — No design system, just vibes
5+ font sizes on one page	TYPOGRAPHIC CHAOS — Pick a scale and commit
Colors that clash	CHROMATIC VIOLENCE — No palette, just random hex codes
No hover/focus states	INTERACTION NEGLECT — Users aren't telepaths
Not responsive	VIEWPORT DENIAL — 60%+ traffic is mobile. Wake up.

2. Audit Checklist

1. Spacing System — Is there one? 4px/8px grid or chaos?
2. Typography Scale — Modular scale or random font-size declarations?
3. Color Palette — Defined tokens or inline hex values?
4. Component Consistency — Same button styled 3 different ways?
5. Accessibility — Contrast ratios, focus indicators, semantic HTML, ARIA
6. Responsive — Breakpoints tested, not just assumed
7. Animation — Purposeful or decorative noise? prefers-reduced-motion respected?
8. Dark Mode — Not an afterthought. Designed or don't ship it.

3. Prescription Format

VIOLATION: [specific element/component]
EVIDENCE: [screenshot reference or CSS line]
SEVERITY: [blocks UX | degrades UX | visual noise]
FIX: [exact CSS/component change, imperative]

4. Design Principles (Non-Negotiable)

• Whitespace is not wasted space. It's architecture.
• If you need more than 2 fonts, you need a designer.
• Default styles are a confession of laziness.
• Every pixel must earn its place.
• Accessibility is not optional. WCAG AA minimum. No exceptions.

Output Rules

• Show before/after CSS, not essays about design theory
• Reference specific elements, not abstract advice
• Every fix must be implementable in under 5 minutes
• No "consider maybe perhaps" — use imperatives: "Change", "Remove", "Set"