Skills Design

Îl pune pe agent să creeze artă vizuală adevărată: pornește de la o filosofie estetică și o exprimă într-o piesă grafică exportată în PNG sau PDF.

Când s-o folosești

Când ai nevoie de un vizual static și finit — un poster, o copertă, o ilustrație — cu un punct de vedere estetic, nu un șablon.

Când s-o eviți

Nu construiește interfețe sau componente și nu copiază stilul unui artist sau al unui brand: generează doar PNG/PDF originale, nu fișiere de design editabile.

O comandă din skill-ul impeccable: reduce volumul unei interfețe prea agresive sau suprastimulante, fără să-i ia din forță.

Când s-o folosești

Când un ecran „țipă” — prea multe accente, culori și umbre care se bat între ele — și nu mai știi unde să te uiți primul.

Când s-o eviți

Dacă problema e prea mult conținut (câmpuri și opțiuni în plus), folosește distill; dacă vrei o evaluare, nu o modificare, folosește critique.

O comandă din skill-ul impeccable: elimină câmpuri, pași și opțiuni până rămâne doar esențialul pentru a finaliza acțiunea.

Când s-o folosești

Când un formular sau un panou a crescut prin acumulare și nimeni n-a scos vreodată nimic.

Când s-o eviți

Dacă interfața e deja esențializată, dar „țipă” vizual, problema e volumul, nu structura: folosește quieter.

O comandă din skill-ul impeccable: face o revizuire UX pe mai multe criterii, dă un scor și întoarce observațiile cu acțiunea de făcut.

Când s-o folosești

Înainte de o revizuire umană, ca să ajungi acolo cu problemele evidente deja găsite și ordonate după gravitate.

Când s-o eviți

Nu atinge codul: dacă vrei ca problemele să fie și corectate, treci la polish sau distill după critique.

O comandă din skill-ul impeccable: ultima trecere peste detalii — alinieri, raze, focus, cifre care nu „sar” — înainte să publici.

Când s-o folosești

Când design-ul e stabilit și funcționează, și mai rămâne doar tura finală de rafinare înainte să livrezi.

Când s-o eviți

Nu e o reproiectare: dacă structura de bază e greșită, repară mai întâi structura (distill) sau volumul (quieter), apoi rafinează.

<button
  class="h-8 text-[#9aa0aa]"
  onclick="salva()">
  Salva
</button>

Verifică codul interfeței față de Web Interface Guidelines de la Vercel și semnalează încălcările în format fișier:linie.

Când s-o folosești

Când vrei să știi dacă ce ai construit trece un control de conformitate și accesibilitate, înainte s-o descopere un utilizator.

Când s-o eviți

Nu redesenează și nu corectează: doar citește și semnalează. Pentru performanța reală în browser ai nevoie de altceva (Lighthouse, Core Web Vitals).

Nivelul de triaj al colecției UI de la ibelick: înțelege obiectivul și încarcă skill-ul cel mai mic și țintit, în loc de unul generic.

Când s-o folosești

La începutul unei lucrări de UI, când ai un obiectiv clar, dar nu știi de ce regulă anume ai nevoie.

Când s-o eviți

Pentru o sarcină non-UI răspunde „nu e nevoie de nicio skill”; iar dacă știi deja exact ce skill vrei, sari peste el și instaleaz-o direct.

Filosofia de design engineering a lui Emil Kowalski (autorul Sonner și Vaul): cum se adună polish-ul, componentele și motion-ul într-o UI care „se simte corect”.

Când s-o folosești

Când vrei să-i antrenezi agentului gustul pe detaliile invizibile și să obții componente care rezistă comparației cu cele mai bune.

Când s-o eviți

E amplă și filosofică: pentru regula seacă despre un detaliu (raze, aliniere, umbre) e mai directă make-interfaces-feel-better; pentru revizuit doar animații, review-animations.

Regulile concrete care fac o UI să pară îngrijită: rază concentrică, aliniere optică, umbre în loc de borduri, animații întrerupibile, cifre tabulare.

Când s-o folosești

Când interfața e corectă, dar „miroase a prototip”, și vrei o listă precisă de detalii de rezolvat.

Când s-o eviți

Dacă cauți de ce-ul și gustul din spatele alegerilor, nu lista de reguli, alege emil-design-eng.

152 de reguli UI/UX pe 12 categorii — animație, timing, ieșiri, audio, legi ale UX, tipografie — ordonate după impact, cu observații în format fișier:linie.

Când s-o folosești

Când vrei o revizuire amplă și argumentată pe reguli — inclusiv motion, audio și legi cognitive — nu doar accesibilitate.

Când s-o eviți

E un regulament de revizuire, nu un constructor: pentru conformitate design și a11y strict pe cod, web-design-guidelines e mai țintită.

Construiește sisteme de culoare în OKLCH: conversie din hex/rgb/hsl, scale și palete, contrast APCA/WCAG, gamut și temă în Tailwind v4.

Când s-o folosești

Când construiești scala de culori a unui design system și pașii par neregulați, sau un contrast nu trece și nu știi cât să-l ridici.

Când s-o eviți

Face doar culoare: pentru spațieri, tipografie sau layout ai nevoie de altă skill.

Se uită la un site public și îi extrage primitivele — culori, fonturi, spațieri, raze, umbre — generând fișiere de tokeni de pornire pentru proiectul tău.

Când s-o folosești

Când pornești de la o referință vizuală și vrei să-i traduci regulile în variabile, nu din ochi.

Când s-o eviți

E un punct de plecare, nu o copie: documentația însăși spune că nu e reproducere pixel-perfect, nu extrage o bibliotecă de componente, iar o singură pagină nu e un design system întreg.

Traduce pentru web modul Apple de a face mișcare fluidă: arcuri întreruptibile, tracking 1:1 al gestului, momentum, materiale translucide, reduced-motion.

Când s-o folosești

Când construiești interacțiuni ghidate de gest (drag, swipe, sheet) și vrei să pornească de la valoarea de pe ecran și să rămână „prinzibile” la jumătate.

Când s-o eviți

Pentru o tranziție simplă, non-gestuală, un arc e adesea exagerat, și nu e un instrument de grafică statică. Pentru revizuit animații deja scrise, review-animations.

Un glosar de căutare inversă: dintr-o descriere vagă a unei mișcări („chestia aia care sare când se deschide”) îți dă termenul exact.

Când s-o folosești

Când știi ce efect vrei, dar nu cum se numește, iar fără numele corect agentul îți dă altceva.

Când s-o eviți

Servește la denumit, nu la construit sau proiectat: ca să creezi mișcarea folosește apple-design, ca s-o revizuiești, review-animations.

Revizuiește codul de animație în raport cu o ștachetă de calitate ridicată (filosofia lui Emil Kowalski): aprobarea trebuie câștigată, implicit semnalează.

Când s-o folosești

După ce ai făcut ceva animat, când „aproape a ieșit” și vrei să știi ce nu merge: durate, curbe, origine, frame-uri pierdute.

Când s-o eviți

Face doar atât: respinge codul non-motion și nu scrie funcționalități. Ca să construiești mișcarea folosește apple-design, ca s-o denumești, animation-vocabulary.