Skip to content

AI Designer Checklist — auto-critică după fiecare mutație

Sursa: tools/ai-designer-checklist.mjs. Injectat în promptul de sistem alături de ai-design-rules.md.

După fiecare post_apply_observation și înainte de a încheia o pagină, agentul răspunde la întrebările de mai jos. Eșecurile geometrice apar ca designerQuestions[] cu instrucțiuni de corecție („Întrebare designer eșuată: …”).

MarcajSens
[ENFORCED]Repair/validare rescriu sau blochează.
[CHECKED]Blochează page-complete până e rezolvat.
[ASK]Judecată de designer / prompt; fără poartă mecanică.
  1. [ENFORCED] → RULE.FOOTER_TIGHT — De ce plutește footerul la jumătate de pagină? site-footer stă imediat după ultimul bloc de conținut (gap = gutter 2 celule), fără gol orfan deasupra?
  2. [ASK] → RULE.FOOTER_TIGHT — Spațiul gol de sub footer pe artboard-ul 1080px e OK doar dacă footerul ESTE ultimul bloc și NU există gap deasupra lui. Bug-ul e gap-ul de DEASUPRA, nu board-ul liber de dedesubt.
  3. [ENFORCED] → RULE.NO_INNER_SCROLL — De ce agentul nu a navigat prin componenta de autentificare? Auth-gate e suficient de înalt pentru tab-ul cu cele mai multe câmpuri (signup), fără bară de scroll în componentă și fără buton lipit de marginea de jos a cardului?
  4. [CHECKED] → RULE.AUTH_NO_REDUNDANT_HEADER — De ce agentul pe pagina de autentificare a adăugat page-header? Dacă auth-gate e deja eroul din centru (logo + titlu + descriere), un page-header full-width care repetă „Autentificare…” e redundant și greșit.
  5. [CHECKED] → RULE.ONE_PAGE_ONE_JOB — Pagina răspunde la UN singur job (ex. gestiune utilizatori) sau amestecă preocupări din sidenav diferite?
  6. [CHECKED] → RULE.HEADER_MATCHES_NAV — Titlul page-header corespunde itemului activ din sidenav?
  7. [CHECKED] → RULE.NO_CROSS_CONCERN_STACK — Blocurile de pe pagină aparțin aceluiași flux? Dacă nu → pagini separate. Formularele constrained sunt pe pagina lor (settings), nu agățate sub un tabel din altă secțiune?
  8. [ENFORCED] → RULE.CONTENT_WIDTH_CONSISTENCY — Benzile solo full-role partajează aceeași muchie stângă/dreaptă? Un formular centrat „insulă” sub un tabel full-width e defect — OK pe settings-only. Carduri compacte (wallet/card) singure pe rând rămân span 4 centrate (RULE.COMPACT_CARD_WIDTH), nu full-bleed.
  9. [ENFORCED] → RULE.COMPACT_CARD_WIDTH — Cardurile compacte (wallet-card, card, toggle-card, progress, deadline, donut) sunt span 4 centrate când stau singure pe rând — nu întinse pe toată aria de conținut?
  10. [ENFORCED] → RULE.NO_OVERLAP — Se suprapun dreptunghiuri pe canvas?
  11. [ENFORCED] → RULE.MAX_GAP — Există un gol vertical orfan > 6 celule între două blocuri consecutive din stivă?
  12. [ENFORCED] → RULE.ROW_GAP — Gap-ul vertical dintre blocuri e exact 2 celule (16px)?
  13. [ENFORCED] → RULE.CHROME_FIRST — Leading chrome (topbar|site-nav|brand-bar) e prezent și primul pe pagină?
  14. [CHECKED] → RULE.TITLE_SECOND — Există un singur bloc-titlu potrivit tipului de pagină? App → page-header; landing → hero|page-header; auth → auth-gate (FĂRĂ page-header/hero).
  15. [ENFORCED] → RULE.FOOTER_LAST — site-footer / bottom-menu sunt ultimele blocuri din stivă?
  16. [CHECKED] → RULE.DEAD_ROW — Fiecare rând de conținut însumează 12 coloane (12 / 8+4 / 6+6 / 4+4+4)?
  17. [ENFORCED] → RULE.PAIR_SAME_ROW — Perechile 8+4 / 6+6 stau pe același row și au aceeași înălțime?
  18. [ENFORCED] → RULE.NO_GIANT_FRAME — Cadrul vreunui bloc e mult mai înalt decât conținutul (interior gol > ~12 celule peste natural)?
  19. [ENFORCED] → RULE.NATURAL_HEIGHT — rowSpan ≥ înălțimea naturală a conținutului (nimic tăiat / buton lipsă)?
  20. [ENFORCED] → RULE.NO_INNER_SCROLL — Niciun bloc nu are scrollbar interior pe artboard (overflow vertical în componentă)?
  21. [ENFORCED] → RULE.IN_BOUNDS — Toate dreptunghiurile stau în artboard și nu intră în rail-ul sidenav?
  22. [CHECKED] → RULE.ADAPTIVE_VIEWPORTS — Ai lucrat desktop + tablet + phone ÎMPREUNĂ (concurrent)? layouts.tablet ȘI layouts.phone există pentru același id pe lângă layout-ul desktop — aceeași pagină, nu doar Desktop.
  23. [CHECKED] → RULE.MULTI_VIEWPORT_CONCURRENT — Înainte de a trece la alt component/pagină, variantele tablet și phone sunt valide (fără overlap/clip) împreună cu desktop?
  24. [CHECKED] → RULE.NARROW_STACK — Pe phone conținutul e o singură coloană full-width? Pe tablet cel mult 2 panouri pe rând (fără 3-up de pe desktop)?
  25. [ENFORCED] → RULE.TWELVE_COLUMNS — Formularele / auth-gate pe pagina lor (auth sau settings-only) sunt span 6 centrate? Nu agăța un form constrained sub un tabel full-width de pe altă secțiune.
  26. [ENFORCED] → RULE.GLYPH_ICONS — Iconurile sunt glife monochrome din catalog (nu nume lucide/home/bell)?
  27. [ENFORCED] → RULE.NO_DEBUG_TEXT — Copy-ul e fără hash-uri, TODO, „ULTIMUL BLOC”, lorem?
  28. [ASK] → RULE.PLAUSIBLE_CONTENT — Textele sună ca produs real în limba proiectului (ro când lang=ro)?
  29. [CHECKED] → RULE.NO_INVENTED_FIELDS — Datele folosesc exact cheile din catalog.fields pentru kind?
  30. [ENFORCED] → RULE.ONE_PAGE_AT_A_TIME — Lucrezi pe o singură pagină / un singur canvas până e verificată?
  31. [CHECKED] → RULE.OBSERVE_THEN_ACT — Ai citit post_apply_observation și ai corectat needs-correction înainte de a adăuga altceva?
  32. [CHECKED] → RULE.FINAL_PAGE_AUDIT — Înainte de success: ordine chrome→titlu→content→footer; overlaps=0; dead rows=0; orphan gaps=0; clip-risk=0; checklist fără eșecuri?

Pentru fiecare dintre cele 59 kind-uri, agentul întreabă dacă componenta arată healthy (mărime, padding, fără scroll interior, fără clip, câmpuri valide). Override-uri explicite există pentru auth-gate, site-footer, page-header, hero, charts, etc.; restul se generează din BLOCK_LAYOUT_INTENT.

  • Auth / login: brand-bar → auth-gate → site-footer? — fără page-header / hero.
  • App / dashboard: sidenav? → topbar → page-header → conținut → site-footer?.
  • Public / marketing: site-nav|brand-bar → hero|page-header → conținut → site-footer?.
  • Utilizatori: topbar → page-header „Utilizatori” + actions[{Creează}] → table (fără toolbarActionLabel) → site-footer?. Fără formular retenție/config pe aceeași pagină. (RULE.LIST_CTA_ON_PAGE_HEADER)
  • Configurare / retenție: topbar → page-header „Configurare” → form / toggle-card (centrat constrained OK pe pagina settings-only) → site-footer?.
  • Profil: topbar → page-header „Profil” → user-profile (span 6 centrat) → wallet-card (span 4 centrat) → site-footer?. Interzis: wallet/card full-bleed.
Sidenav activpage-headerConținut
UtilizatoriUtilizatoritabel utilizatori full-width
ConfigurareConfigurareformular retenție / setări
ProfilProfiluser-profile + wallet centrate (span 6 / 4)

Interzis: sidenav Utilizatori + H1 „Administrare” + tabel utilizatori + card retenție centrat sub tabel. Interzis: wallet-card / card solo întins pe toată lățimea contentului (RULE.COMPACT_CARD_WIDTH).