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.