# Visual Verification Rules

> Last Verified: 2026-02-17 | Owner: John

# Rule: Visual Verification — Razlike prvo, sličnosti nikad

## Kad se primjenjuje
Svaki put kad agent mijenja UI kod ili poredi vizualni output sa referencom.

## Pravilo

### 0. REFERENCA PRIJE KODA
Prije bilo kakve UI promjene — PRVO pročitaj source of truth dizajn:
- Drop: `mockups/figma-make-export/src/components/` (Make export)
- Ostali projekti: Figma export ili mockup direktorij iz CLAUDE.md
- Ako nema dizajn referenci — PITAJ prije nego kodiraš

**Zabranjeno:** Mijenjati UI kod pa TEK ONDA provjeriti dizajn. Redoslijed je: dizajn → kod → verifikacija.

### 1. RAZLIKE PRVO
Kad poredim dva vizualna elementa, PRVI korak je nabrojati sve razlike. Ne sličnosti.

Pitanje NIJE: "Šta se poklapa?"
Pitanje JESTE: "Šta se NE poklapa?"

### 2. EKSPLICITNA LISTA
Svaka razlika mora biti zapisana sa:
- **Element:** (npr. tagline, font, ikona, boja, spacing)
- **Referenca:** šta kaže dizajn (font, boja, stil)
- **Build:** šta imam ja
- **Severity:** critical / minor / acceptable

### 3. NULA RAZLIKA = SUMNJA
Ako ne mogu naći nijednu razliku — ne gledam dovoljno pažljivo.
Minimum provjera:
- Font family (serif vs sans-serif?)
- Font weight i size
- Boje (ne "zelena" nego hex value)
- Italic/normal
- Spacing i padding
- Ikone (detaljne vs placeholder?)
- Border radius
- Shadow

### 4. NIKAD "POKLAPA SE" BEZ LISTE RAZLIKA
Zabranjena rečenica: "Poklapa se sa dizajnom."
Dozvoljena rečenica: "Uporedio sam X elemenata. Našao Y razlika: [lista]. Ostalo se poklapa."

### 5. AKO JE UI/DESIGN TASK
Obavezno u evidence:
- Screenshot builda
- Screenshot/slika reference dizajna
- Tabela razlika (element | referenca | build | match?)
- Eksplicitna lista nepodudarnosti

## Zašto
Task #850/#853: Agent tri puta proglasio login "gotov" i "poklapa se". Font bio pogrešan, tagline stil pogrešan, ikone drugačije. Nijedan mehanički check (build, JSON, file existence) ovo ne hvata. Samo pažljivo GLEDANJE hvata vizualne razlike.