Da default Vercel a manuale d'officina: redesign del portfolio in 8 wave
Il sito era caduto nel default Vercel-cream. La skill impeccable forza scelte di brand, register e gate sequenziali (teach, shape, craft) che salvano dall'AI slop. Otto commit per arrivare a 'Manuale d'officina'.
Il punto di partenza era riconoscibile a tre metri: violet #7c3aed, font Geist, scala zinc, card rounded-2xl, hero "Ciao sono Andrea + 2 bottoni", radial gradient mesh sullo sfondo. Default Vercel/Next.js 2024-2026, indistinguibile da centinaia di portfolio dev. L'AI slop test della skill impeccable lo bocciava al primo livello: chiunque guardando la home avrebbe indovinato la categoria dal solo aspetto.
Ho applicato impeccable, una skill Claude Code derivata dal pattern frontend-design di Anthropic, che impone tre gate sequenziali prima di toccare codice. Il senso è proprio impedire la convergenza estetica.
Il gate più importante è il primo. Teach chiede di scrivere PRODUCT.md (register brand-vs-product, lettore primario, anti-references esplicite, principles strategici) e DESIGN.md (palette OKLCH, scala tipografica, motion). Senza l'output approvato dall'utente, gli altri comandi non procedono.
L'effetto è stato chirurgico. La domanda "chi è il lettore primario?" mi ha forzato a scegliere: imprenditore o direttore di PMI manifatturiera italiana, 40-65 anni, non sviluppatore. Cambia tutto rispetto a "developer peer". Niente più hero techbro, niente CTA aggressivi: la home doveva sembrare un frontespizio di volume, non una landing.
Da qui la direzione: Manuale d'officina, edizione personale. Riferimenti positivi Olivetti, Vignelli, Pirelli storico, Stripe Press. Palette Committed: panna calda (oklch(96.5% 0.012 78)), oltremare profondo (oklch(35% 0.10 252)), ottone (oklch(62% 0.13 65)) come accent rare. Fraunces variable con axes wonk e SOFT per il display, Inter per body, JetBrains Mono per metadata. Numerazione progressiva visibile su tutto: lavori #01-#13, concetti romani I-VI.
Il craft è diventato meccanico. Otto wave incrementali, una alla volta:
- Wave 0: token CSS, fonts, header, footer.
- Wave 1: frontespizio (home come copertina di volume).
- Wave 2: indice lavori numerato e scheda tecnica.
- Wave 3a-d: concetti come voci di enciclopedia, diario come registro datato, pagine personali, pulizia componenti residui (CommandPalette, MermaidBlock, ReadingProgress).
Otto commit puliti su un branch dedicato redesign-officina, con main congelato per rollback istantaneo. Build statico verificato a ogni wave, deploy via FTP a fine ciclo.
La cosa che mi sono portato a casa è che la skill non è un generatore di estetica: è un protocollo che impedisce le scelte di reflex. Senza teach, sarei rimbalzato su un palette swap superficiale (dark mode con accent diverso) e il risultato sarebbe stato un altro portfolio dev distinguibile dagli altri solo per la mano di vernice. Con teach, è la voce del lettore a guidare persino la composizione del frontespizio.
Il sito è visibile in produzione: il colophon racconta lo stack, le voci concetti usano lo stesso pattern di sezione, l'indice diario è adesso un registro datato con la data come anchor laterale. Un post recente si occupa invece dell'altra metà del progetto, l'AI-discoverability via llms.txt.