Impeccable: 24 comandi per far progettare meglio il frontend ai tuoi agenti AI

Un'interfaccia generata da un agente AI funziona, ma spesso si riconosce subito: gerarchie piatte, colori timidi, spaziature casuali, testi generici. Impeccable è il tentativo di dare all'agente un vero vocabolario di design: una skill, 24 comandi, un'iterazione live nel browser e un detector deterministico con 59 regole per scovare i difetti tipici del frontend prodotto dall'AI.

Come è fatto

• Una skill che trasmette all'agente un linguaggio di design.
• 24 comandi, tutti nella forma /impeccable <comando> <target>.
• Un detector da riga di comando che non usa l'AI: è deterministico, quindi ripetibile e utilizzabile anche in CI.
• Modalità live: varianti di un elemento generate e confrontate direttamente nel browser.

Installazione

La via consigliata è la CLI (serve Node.js):

npx impeccable install
npx impeccable update     # per aggiornare in seguito

Poi, dentro il tuo strumento AI, la configurazione iniziale:

/impeccable init

Il comando init ti pone alcune domande sul prodotto e scrive un file PRODUCT.md: a chi è rivolto, tono, obiettivi. Da lì in avanti ogni comando lavora con quel contesto.

Per automatizzare l'installazione si possono indicare gli strumenti e l'ambito:

npx impeccable install --providers=claude,cursor --scope=project

Altre modalità

• Plugin per Claude Code: /plugin marketplace add pbakaus/impeccable, poi l'installazione da /plugin.
• Git submodule: git submodule add https://github.com/pbakaus/impeccable .impeccable e poi npx impeccable link --source=.impeccable --providers=claude,cursor.
• VS Code (Copilot): code --install-extension renaissance-geek.impeccable.

Strumenti supportati, tra gli altri: Claude Code, Cursor, GitHub Copilot, Gemini CLI, Codex CLI, OpenCode, Kiro e Google Antigravity.

I 24 comandi, per gruppi

Esempi d'uso

/impeccable audit blog
/impeccable critique landing
/impeccable polish settings
/impeccable harden checkout
/impeccable pin audit

L'ultimo comando crea una scorciatoia: dopo pin audit puoi scrivere semplicemente /audit.

Un flusso tipico

1. /impeccable init: una volta sola per progetto.
2. /impeccable shape nuova-dashboard: pianifica prima di scrivere codice.
3. /impeccable craft nuova-dashboard: costruisce con iterazione visiva.
4. /impeccable critique e /impeccable audit: valuta cosa non funziona.
5. /impeccable polish: rifinitura prima del rilascio.

Il detector: controlli ripetibili

Le 59 regole del detector non passano da un modello: analizzano il codice, i file HTML o un indirizzo web e segnalano i pattern problematici.

npx impeccable detect src/
npx impeccable detect index.html
npx impeccable detect https://example.com
npx impeccable detect --json .
npx impeccable ignores add-file "src/legacy/**"

I codici di uscita permettono di usarlo in una pipeline: 0 nessun problema rilevante, 2 problemi trovati, 1 errore di scansione. Con --json l'output è leggibile da altri strumenti.

Da sapere

• Telemetria: le richieste al servizio di «roll» di impeccable.style sono sempre attive, ma la registrazione anonima si disattiva con npx impeccable telemetry off, oppure con le variabili DO_NOT_TRACK=1 o IMPECCABLE_NO_TELEMETRY=1.
• Licenza: Apache 2.0.
• Complementarità: Impeccable non sostituisce un design system del brand. Funziona meglio se PRODUCT.md e DESIGN.md descrivono davvero il tuo prodotto.

Per altri approcci allo stesso problema: Taste Skill e Awesome Design Skills.