Cinque strumenti gratis per far disegnare siti a Claude

Taste, Impeccable, Playwright CLI, Awesome Design e img2threejs: cinque strumenti open source che danno a Claude regole di design e un browser per controllare il lavoro.

Perché conta

Per chi costruisce con l'AI senza essere uno sviluppatore, il vero ostacolo è che i siti escono tutti uguali: questi strumenti spostano il lavoro dal chiedere «fammi un sito» al dare a Claude un'idea di stile e un modo per controllare.

In pratica

Se hai già Claude Code, comincia con Taste e Playwright CLI: due comandi, una cartella di prova, e un sito di cui guardi il risultato prima e dopo.

Chi costruisce un sito con Claude Code di solito ottiene una pagina ordinata ma generica, uguale a mille altre. Riccardo Belli ha messo in fila cinque strumenti gratuiti e open source che servono a questo: dare a Claude regole di design e un browser vero con cui controllare quello che ha fatto. Si installano dal Terminale con un comando ciascuno e si usano chiedendo a Claude in italiano normale.

Cosa serve: Claude Code e Node.js (versione 18 o successiva), che è il programma che esegue questi comandi; per l'ultimo strumento anche Python 3.10 o successivo. Sono tutti gratuiti e con licenza libera. Si lavora da una cartella di progetto: gli strumenti aggiungono file di istruzioni che Claude legge da solo.

1. Taste: contro le pagine tutte uguali

Taste è un pacchetto di «skill», cioè file di istruzioni che Claude carica da solo quando disegna un'interfaccia. Lavora su layout, caratteri, spazi e animazioni e ha tre manopole da 1 a 10: quanto la pagina deve essere diversa dal solito, quanto movimento, quanta densità. Esiste anche una skill per sistemare un sito già fatto.

``` npx skills add https://github.com/Leonxlnx/taste-skill ```

La versione 2 è dichiarata sperimentale dagli autori.

2. Impeccable: il vocabolario di un designer

Impeccable dà a Claude 24 comandi con i nomi che userebbe un designer: sistemare i caratteri, la gerarchia, le animazioni, le rifiniture. In più ha un controllo che non usa l'intelligenza artificiale: decine di regole che riconoscono i segni tipici dei siti fatti dall'AI. Dopo l'installazione si lancia `/impeccable init`, che chiede pubblico, scopo e tono del sito.

``` npx impeccable install ```

Un esito pulito del controllo, dicono gli autori, è un indizio e non una prova di qualità.

3. Playwright CLI: un browser per Claude

È uno strumento di Microsoft che permette a Claude di aprire il sito, cliccare, compilare i campi e fare gli screenshot, così verifica da solo come appare, anche a larghezza da telefono. Il browser lavora nascosto, a meno di chiedere di vederlo.

``` npm install -g @playwright/cli@latest playwright-cli install --skills ```

Nasce per chi lavora con agenti di programmazione, ma serve a chi vuole che Claude controlli da sé il proprio lavoro.

4. Awesome Design: lo stile di un sito che ti piace

È una raccolta di 73 file di testo, uno per ogni sito noto, che descrivono colori, caratteri, componenti e cosa evitare. Se ti piace lo stile di Notion o Stripe, ne scarichi il file e dici a Claude di usarlo. Sono analisi fatte da terzi su siti pubblici, non i documenti ufficiali delle aziende, e possono contenere imprecisioni.

``` npx getdesign@latest add notion ```

Cambia l'ultima parola per scegliere un altro stile.

5. img2threejs: da una foto a un oggetto 3D

Ricostruisce in 3D, nel browser, un oggetto che parte da una foto, scrivendolo come codice: non servono file 3D da scaricare. Funziona meglio con oggetti rigidi. Da una sola foto i lati nascosti vengono dedotti, e il progetto lo dichiara apertamente: i personaggi escono stilizzati, non fedeli.

``` npx --yes img2threejs@latest install ```

Da dove cominciare? Belli suggerisce un ordine: scegliere uno stile con Awesome Design e installare Taste prima di costruire, usare Impeccable per i ritocchi, far controllare il risultato a Playwright su computer e telefono, e aggiungere img2threejs solo se la pagina ha un oggetto 3D. Per cominciare bastano Taste e Playwright. Quello che nessuno dei cinque garantisce è il gusto: restano strumenti, e il giudizio sul risultato resta tuo.