ago 2026
Base di conoscenza UI/UX per agenti AI
Guida di design, playbook di sviluppo e registro di regole che gli agenti di coding leggono prima di ogni interfaccia
- IA
- Base di conoscenza
- Durata
- 1 mese
- Ruolo
- Progetto mio, scritto con Claude Code come coautore
Panoramica
Una base di conoscenza di design strutturata che Claude Code, o qualsiasi agente di coding, legge mentre costruisce siti web, dashboard e app. Contiene una guida di design in 21 capitoli basata sui video UI/UX di Kole Jain, un playbook di sviluppo con sei checkpoint, un registro delle regole stabilite e risorse di sviluppo verificate.
Strumenti
- Claude Code
- Markdown
- Next.js
- Tailwind CSS
- shadcn/ui
Perché le interfacce costruite dagli agenti sembrano generiche
Gli agenti AI di coding producono interfacce competenti ma generiche: un prompt vago ottiene la media statistica, il modello non vede mai il proprio render, e senza un design system i valori cambiano da una pagina all’altra. I consigli di design dei video sono sparsi, a volte contraddittori e a volte superati per una vera build con Next.js e Tailwind 4.
Cosa contiene
Il cuore è una guida in 21 capitoli distillata da circa 50 video UI/UX di Kole Jain, con valori concreti per tipografia, colore, layout, spaziature, componenti, dashboard, mobile, moduli, tabelle, checkout, animazione e anti-pattern. Accanto c’è una sintesi di 201 video sul perché i frontend costruiti dall’AI falliscono e su cosa li corregge, analizzati da 10 agenti Opus in parallelo. I cataloghi di risorse elencano circa 76 repository shadcn con le loro licenze e 18 API di foto e video con un prontuario sulle licenze.
Come lo usa un agente
Il playbook di sviluppo porta un progetto attraverso le fasi da 0 a 8 con sei gate: riferimenti approvati prima del codice, un file di design prima dello scaffolding, testi e asset reali, varianti dell’hero, controlli tramite screenshot su desktop e mobile, e un audit degli anti-pattern con build e lint. Un registro delle decisioni risolve 14 conflitti tra le fonti, come i tempi delle animazioni e Lucide come set di icone predefinito. Un file di instradamento indirizza ogni tipo di compito solo ai file che gli servono.