AI Designer Checklist — auto-critică după fiecare mutație
Acest conținut nu este încă disponibil în limba selectată.
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ă: …”).
| Marcaj | Sens |
|---|---|
[ENFORCED] | Repair/validare rescriu sau blochează. |
[CHECKED] | Blochează page-complete până e rezolvat. |
[ASK] | Judecată de designer / prompt; fără poartă mecanică. |
Întrebări globale
Section titled “Întrebări globale”[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?[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.[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?[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.[CHECKED]→RULE.ONE_PAGE_ONE_JOB— Pagina răspunde la UN singur job (ex. gestiune utilizatori) sau amestecă preocupări din sidenav diferite?[CHECKED]→RULE.HEADER_MATCHES_NAV— Titlul page-header corespunde itemului activ din sidenav?[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?[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.[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?[ENFORCED]→RULE.NO_OVERLAP— Se suprapun dreptunghiuri pe canvas?[ENFORCED]→RULE.MAX_GAP— Există un gol vertical orfan > 6 celule între două blocuri consecutive din stivă?[ENFORCED]→RULE.ROW_GAP— Gap-ul vertical dintre blocuri e exact 2 celule (16px)?[ENFORCED]→RULE.CHROME_FIRST— Leading chrome (topbar|site-nav|brand-bar) e prezent și primul pe pagină?[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).[ENFORCED]→RULE.FOOTER_LAST— site-footer / bottom-menu sunt ultimele blocuri din stivă?[CHECKED]→RULE.DEAD_ROW— Fiecare rând de conținut însumează 12 coloane (12 / 8+4 / 6+6 / 4+4+4)?[ENFORCED]→RULE.PAIR_SAME_ROW— Perechile 8+4 / 6+6 stau pe același row și au aceeași înălțime?[ENFORCED]→RULE.NO_GIANT_FRAME— Cadrul vreunui bloc e mult mai înalt decât conținutul (interior gol > ~12 celule peste natural)?[ENFORCED]→RULE.NATURAL_HEIGHT— rowSpan ≥ înălțimea naturală a conținutului (nimic tăiat / buton lipsă)?[ENFORCED]→RULE.NO_INNER_SCROLL— Niciun bloc nu are scrollbar interior pe artboard (overflow vertical în componentă)?[ENFORCED]→RULE.IN_BOUNDS— Toate dreptunghiurile stau în artboard și nu intră în rail-ul sidenav?[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.[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?[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)?[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.[ENFORCED]→RULE.GLYPH_ICONS— Iconurile sunt glife monochrome din catalog (nu nume lucide/home/bell)?[ENFORCED]→RULE.NO_DEBUG_TEXT— Copy-ul e fără hash-uri, TODO, „ULTIMUL BLOC”, lorem?[ASK]→RULE.PLAUSIBLE_CONTENT— Textele sună ca produs real în limba proiectului (ro când lang=ro)?[CHECKED]→RULE.NO_INVENTED_FIELDS— Datele folosesc exact cheile din catalog.fields pentru kind?[ENFORCED]→RULE.ONE_PAGE_AT_A_TIME— Lucrezi pe o singură pagină / un singur canvas până e verificată?[CHECKED]→RULE.OBSERVE_THEN_ACT— Ai citit post_apply_observation și ai corectat needs-correction înainte de a adăuga altceva?[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?
Per BlockKind
Section titled “Per BlockKind”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.
Rețete de schelet
Section titled “Rețete de schelet”- 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.
Model mental corect (split IA)
Section titled “Model mental corect (split IA)”| Sidenav activ | page-header | Conținut |
|---|---|---|
| Utilizatori | Utilizatori | tabel utilizatori full-width |
| Configurare | Configurare | formular retenție / setări |
| Profil | Profil | user-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).