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.