● SKILL 01 · FRONTEND DESIGN · CLAUDE CODE
Siti: la claude skill di frontend design che non sembra AI.
Vuoi un sito che sembri fatto da un'agenzia, senza un'agenzia e senza scrivere una riga di codice. I template Tailwind si riconoscono a chilometri, Wix e Squarespace bloccano la creatività, le AI builder sfornano sempre la stessa hero centrata su sfondo viola. Siti è la skill Claude Code di frontend design anti-template: descrivi il brand in italiano e Claude costruisce HTML, CSS e JavaScript completi, con gli effetti che prima volevano un web designer (la luce che segue il mouse, sfondi che respirano, foto che si sciolgono in WebGL).
Guarda cosa sa fare. Dal vivo.
Questi effetti sono online adesso. Aprili da computer e muovi il mouse: non sono mockup, sono pagine vere costruite con questa skill. Non escono da un prompt fortunato, escono dalle ricette di movimento del sistema (ventisei, già pronte).
Cosa risolve.
I siti generati dalle AI generaliste hanno un problema: si riconoscono tutti. Stessa hero centrata, stesso pattern a tre colonne con icone Heroicons, stesso gradient viola-arancione, stessa frase "Build the future of [X]". Lo capisce il tuo cliente in tre secondi, e l'effetto è opposto a quello che volevi: sembri uno che ha usato una scorciatoia, non uno con un brand.
Siti è una skill Claude Code costruita esattamente per evitare questo. Non è un wrapper di Tailwind UI, non è una libreria di template pre-fatti. È un sistema di frontend design che insegna a Claude come ragionare sulla composizione: scegliere un archetipo visivo coerente col brand, costruire una griglia non ovvia, usare motion che ha senso narrativo, scrivere copy in voce. Il risultato è un sito che non sembra AI, perché non è un template — è una composizione originale.
Apri Claude Code sulla cartella del tuo brand. Scrivi in italiano cosa ti serve: "landing page per il mio servizio di consulenza, archetipo editorial-collage, palette terracotta e crema, hero con headline grossa e una foto grunge a destra, sezione case study orizzontale scroll, contatto con form a tre campi". Claude genera HTML, CSS e JavaScript completi. Apri il file in browser, è già pronto per il deploy.
Cosa c'è dentro.
- SKILL.md — file di istruzioni che insegna a Claude come ragionare sul frontend design: gerarchia visiva, ritmo, contrasto, archetipo coerente.
- 12 archetipi visivi — brutalist-raw, editorial-collage, kinetic-type, apple-motion, magazine-grid, swiss-mono, retro-tech, organic-handmade, glass-modern, anti-design, terminal-vibes, museum-quiet. Ognuno con regole compositive proprie.
- Motion library (26 ricette) — non solo fade e parallax: spotlight che segue il cursore, sfondi aurora generativi, displacement WebGL, testo che si ricompone, galleria orizzontale legata allo scroll. Gli effetti che vedi nelle demo escono da qui, ognuno con fallback per chi ha ridotto le animazioni.
- Anti-AI design rules — vincoli che impediscono a Claude di generare i pattern tipici dei siti AI (hero centrata standard, tre colonne icone, gradient stantii, copy generico).
- Brand voice integration — legge il
PROFILE.mddel tuo brand (palette, font, tono) e applica copy e visual coerenti. - Sistema di componenti riusabili — nav, hero, sezioni feature, case study grid, footer, form, FAQ accordion. Combinabili tra archetipi diversi.
- README + esempi — 5 esempi di prompt-to-site da cui partire.
Per chi è.
- Founder con prodotto che vogliono una landing che converte senza assumere un'agenzia.
- Freelance e creativi che vogliono un portfolio personale che non sembri Cargo o Carrd.
- Professionisti (consulenti, coach, terapeuti) che vogliono un sito brand-aware che converte chiamate conoscitive.
- Brand che lanciano una campagna e hanno bisogno di una landing dedicata in 48 ore.
Come si installa.
- Scarichi Claude Code (gratuito, Mac o Windows) da claude.com/product/claude-code.
- Acquisti Siti, ricevi via email il file
.zip. - Apri Claude Code → Impostazioni → Funzionalità → Competenze → Personalizza → Carica skill → selezioni il
.zip. - Crei la cartella del tuo brand: ci metti il
PROFILE.md(lo genera la skill Brand Voice Extractor gratuita) e gli asset grezzi se ne hai. - Scrivi a Claude che sito vuoi, che archetipo, che sezioni. Il file HTML è pronto in pochi minuti.
Da quel momento, ogni richiesta in italiano produce un sito nuovo con la tua identità — senza toccare un file .css.
"Ma queste sono cose da programmatori."
No. È la confusione più comune, e si capisce perché: leggi "HTML, CSS, WebGL" e pensi serva saperli scrivere. Non serve. Tu non apri un editor, non tocchi il terminale, non installi librerie.
Scarichi un file, lo trascini dentro Claude una volta sola, e da lì parli in italiano: "fammi la home con una hero scura dove la luce segue il mouse". Claude scrive il sito, gli effetti e i testi. Tu guardi il risultato nel browser e, se qualcosa non ti torna, glielo dici a parole.
Il codice c'è, ma è roba sua. A te basta un prompt per avere il sito.
Domande frequenti.
Posso pubblicarlo su Vercel o Netlify?
Sì, l'output è HTML/CSS/JS statico, deploy in un drag-and-drop su Vercel, Netlify, Cloudflare Pages, GitHub Pages. Nessun build step richiesto.
Funziona con WordPress o Shopify?
Non è il caso d'uso principale. Siti genera frontend statici brand-aware. Per WordPress puoi adattare il markup come tema custom, ma serve un developer che lo integri.
Include la SEO base?
Sì: meta title, description, Open Graph, JSON-LD Organization, sitemap suggerita. Il copy generato è scritto pensando alle query del tuo settore se passi i target nel prompt.
Quanti archetipi visivi sono inclusi?
Dodici: brutalist-raw, editorial-collage, kinetic-type, apple-motion, magazine-grid, swiss-mono, retro-tech, organic-handmade, glass-modern, anti-design, terminal-vibes, museum-quiet. Ognuno con regole proprie di griglia, typography, palette e motion.
Posso modificare il codice generato?
Sì, è codice tuo. Puoi modificarlo a mano o chiedere a Claude di rifare singole sezioni. Niente lock-in, niente CMS proprietario.
Funziona col piano gratuito di Claude?
Sì. Per progetti lunghi e iterazioni multiple il piano Pro è più comodo, ma non è obbligatorio.
Altre skill compatibili.
Un prompt. Claude scrive il tuo sito.
€39 · download immediato · pagamento sicuro Stripe
Acquista Siti →