Nelle parole della skill
Una skill frontend anti-slop per landing page, portfolio e redesign. L'agente legge il brief, deduce una direzione di design, quindi imposta tre regolatori (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) che condizionano ogni decisione su layout, movimento e densità. Mappa i brief su design system reali quando ne esiste uno (Fluent, Carbon, GOV.UK, Polaris) ed etichetta onestamente le direzioni puramente estetiche.
Le regole rigide riguardano l'adattamento dell'hero al viewport, la moderazione dell'eyebrow, un solo accento e un solo tema per pagina, i tell tipici dell'IA vietati, e specifiche librerie di icone, font e animazioni. I redesign iniziano con un audit. Si conclude con un Pre-Flight Check meccanico, in cui ogni casella deve essere spuntata prima che il codice venga rilasciato.
Che cosa produce
- Una Design Read in una riga dichiarata prima di qualsiasi codice: tipo di pagina, pubblico, linguaggio del vibe e il design system o la famiglia estetica verso cui si tende.
- Codice frontend su Tailwind v4 per impostazione predefinita, con ricorso a v3 solo quando il progetto esistente lo richiede.
- Commenti nel codice che indicano chiaramente quali parti sono ispirazione presa in prestito e quali sono materiale ufficiale.
- Slot placeholder chiaramente etichettati quando non esiste alcuna fonte immagine, più un elenco finale delle immagini reali ancora necessarie.
Come funziona
- 01Leggere il Brief Prima di Tutto
L'agente deduce ciò che l'utente vuole realmente a partire dal tipo di pagina, dalle parole chiave del vibe, dai riferimenti, dal pubblico, dagli asset di marca esistenti e dai vincoli impliciti, invece di ricorrere a un'estetica predefinita.
- 02Impostare i Tre Regolatori
Il valore base è 8 / 6 / 4, sovrascritto conversazionalmente dalla design read. Esistono preset per ogni caso d'uso, dal servizio pubblico (3 / 2 / 5) alla landing di agenzia (9 / 8 / 3).
- 03Scegliere una Base con Onestà
Se il brief richiama Microsoft, IBM, GitHub, Shopify, Atlassian o il settore pubblico, installare e utilizzare il pacchetto ufficiale invece di ricrearne il CSS a mano.
- 04Applicare lo Stack Predefinito
React o Next.js con Server Components, Tailwind v4 e Motion importato da motion/react, con l'animazione isolata in componenti client leaf.
- 05Eseguire il Pre-Flight Check
Prima di produrre qualsiasi codice, ogni casella della matrice della Sezione 14 deve essere spuntata; una sola casella non spuntata significa che il lavoro non è completo.