Skill frontend-design

Ce face

Skill-ul generează interfețe frontend complete, gata de producție, cu un nivel ridicat de coerență estetică. În loc să producă layout-uri generice, alege o direcție clară (minimalism brutal, maximalism controlat, retro-futurism etc.) și o execută cu precizie. Fonturi neobișnuite, palete de culoare cu accent puternic, animații CSS deliberate și compoziții spațiale asimetrice fac parte din output-ul standard. Codul rezultat este funcțional (HTML/CSS/JS pur sau framework) și arată ca și cum ar fi fost lucrat de un designer cu experiență, nu de un model generic.

Când îmi folosește

Folosește-l când ceri un component, o pagină sau o aplicație web și vrei ca rezultatul să iasă din tiparul „AI slop”. Este util mai ales pentru interfețe cu identitate clară: dashboard-uri interne, landing pages de produs, tool-uri creative sau interfețe de administrare care trebuie să arate premium. Dacă specificațiile tale conțin cuvinte precum „distinctiv”, „refinat” sau „nu arăta ca ChatGPT”, skill-ul este alegerea corectă.

Cum îl invoc / declanșez

Skill-ul se activează automat când cererea ta implică construcția de UI. Pentru regulile exacte de declanșare și sintaxa de apel, verifică doctrina pentru detalii exacte.

Exemplu practic

Utilizator: „Construiește un dashboard de analytics pentru o agenție de design, cu estetică editorială, dark mode, tipografie puternică și animații subtile la încărcare.”

Skill-ul alege direcția „editorial/magazine”, selectează o pereche de fonturi (de exemplu o display serif cu o sans rafinată), definește variabile CSS pentru o paletă cu accent indigo intens, construiește layout-ul cu grid asimetric și adaugă o animație de intrare staggered pe carduri. Rezultatul este un fișier HTML unic sau un set de componente React complet funcționale.

Output / unde aterizează

Codul este returnat direct în conversație, de obicei ca un singur fișier HTML sau ca structură de componente. Poți copia-l imediat într-un proiect sau îl poți itera cu instrucțiuni suplimentare de rafinare. Nu se salvează automat pe disk; tu decizi unde îl plasezi.

Limite / gotchas

Skill-ul nu generează backend, baze de date sau logică de autentificare. Dacă specificațiile tale sunt vagi („fă-mi un site frumos”), va alege o direcție estetică; dacă vrei control deplin asupra stilului, oferă un punct de plecare clar. Animațiile complexe pot necesita ajustări manuale pentru performanță pe dispozitive mai vechi. Pentru detalii suplimentare vezi All guides.