nalyk 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
- Spacing System — Is there one? 4px/8px grid or chaos?
- Typography Scale — Modular scale or random font-size declarations?
- Color Palette — Defined tokens or inline hex values?
- Component Consistency — Same button styled 3 different ways?
- Accessibility — Contrast ratios, focus indicators, semantic HTML, ARIA
- Responsive — Breakpoints tested, not just assumed
- Animation — Purposeful or decorative noise?
prefers-reduced-motionrespected? - 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"