Stylasso esporta un tema Tailwind CSS v4 da una pagina aperta
Testo scritto con l’intelligenza artificiale a partire da una fonte citata, senza revisione umana prima della pubblicazione.
Una procedura manuale per estrarre colori, font e scala tipografica diventa un'estensione che esporta un blocco @theme, variabili CSS, JSON e DESIGN.md direttamente dalla scheda del browser.
Un’estensione del browser, Stylasso, esporta da una pagina aperta un blocco @theme pronto per Tailwind CSS v4: ruoli colore, font realmente renderizzati, scala tipografica, variabili CSS, JSON e un DESIGN.md. L’autore spiega anche come fare gli stessi passaggi a mano, partendo da un sito che non usa Tailwind e non ha uno style guide1.
La procedura manuale inizia dai colori. Bisogna assegnare ruoli: primary per il riempimento dei pulsanti principali, background e surface per la pagina e i pannelli, text e muted per corpo e didascalie, border per divisori e contorni. Si ispeziona l’hero per trovare il primary, si controllano i contrasti nel color picker di DevTools. Dare nomi per ruolo permette poi di scrivere bg-primary e text-muted invece di spargere codici ovunque1.
Poi si verificano i font che il browser disegna davvero. La proprietà font-family è una lista di desideri. In DevTools, sezione Computed, si apre Rendered Fonts. Si controllano un titolo, il corpo, un pulsante e l’eventuale codice. Se un font è commerciale, si sceglie un sostituto gratuito, con Google Fonts che spesso offre alternative vicine1.
Si passa alla scala tipografica. Per ogni livello di heading e per le dimensioni del corpo, si annotano dimensione, peso, interlinea e letter spacing. Il tracking stretto dei titoli grandi dà molto del tono di un sito e si perde per primo se non lo si documenta1.
Con Tailwind v4 i valori del tema vivono in CSS, non in un file di config. L’ordine degli import conta: prima il @import del font, poi Tailwind, poi il blocco @theme. L’esempio mostra Manrope come sans di base e un primary #1d4ed8. Le variabili tipografiche includono line-height, letter-spacing e font-weight, agganciate alla dimensione. Un text-6xl da solo applica l’intero stile del titolo grande. Se si riusano i nomi di Tailwind, come text-6xl o radius-md, si sostituiscono i default. Per i colori, conviene mantenere nomi di ruolo per non sovrascrivere palette come blue-7001.
Fare questo a mano richiede 20-30 minuti per sito, dice l’autore. Stylasso esegue i passaggi 1-4 direttamente dalla scheda del browser. Deduce i ruoli dei colori osservando dove appaiono, per esempio il riempimento dei pulsanti e il logo per il primary, e il colore più usato nel testo per text. Legge i font renderizzati e la scala tipografica. Esporta un blocco @theme come nell’esempio, oltre a variabili CSS, JSON e un DESIGN.md pensato per strumenti di coding assistito. Poiché gira nel browser dell’utente, funziona su pagine dietro login e su localhost1.
L’autore dichiara il conflitto: ha creato lui l’estensione. Chiede feedback se l’algoritmo sbaglia il primary su un sito. Specifica che il pezzo è scritto con l’aiuto di un assistente AI e che passaggi ed esempio sono stati verificati contro lo strumento reale1.
In Chrome si può partire da CSS Overview per l’inventario dei colori, poi usare Rendered Fonts per evitare i falsi positivi dei font-family dichiarati1.
Fonti
Come è nato questo articolo Scritto da un sistema di intelligenza artificiale, con controlli automatici
Millebit non ha giornalisti che scrivono gli articoli: li scrive un motore editoriale basato su modelli di intelligenza artificiale, a partire dalle fonti elencate qui sopra. Prima di uscire, ogni testo passa questi controlli:
- Rilettura. Un passaggio toglie i tic della prosa generata da un modello, come i contrasti costruiti e le frasi che annunciano invece di informare, senza toccare fatti e fonti.
- Fedeltà alle fonti. Un passaggio dedicato toglie ogni affermazione che le fonti non sostengono. Valutazione su questo pezzo: 10/10.
- Anti-cliché. Un filtro scarta frasi fatte, enfasi e tic della prosa artificiale: superato.
- Giudizio editoriale. Un modello valuta il pezzo su sette criteri (apertura, chiarezza, economia, concretezza, voce, struttura, fedeltà) e sotto 7,8/10 non si pubblica. Questo articolo ha preso 8,3/10.
I controlli riducono gli errori ma non li eliminano: un modello può fraintendere una fonte. Per le decisioni importanti, risali alla fonte originale. Se trovi un errore, segnalacelo.
Per vedere Millebit nelle notizie principali di Google, aggiungilo alle tue fonti preferite. Oppure segui l’edizione di oggi, il feed RSS o La Sintesi.