Passa al contenuto principale

Pubblica velocemente un sito bellissimo e all'avanguardia con Claude

Intermedio

Puoi passare da un'idea espressa in una riga a un sito online davvero bello in un'unica sessione. Il trucco non sono più prompt, ma la giusta impalcatura di prompt, unita a uno stack veloce e a un ciclo di rifinitura serrato. Questa pagina è la ricetta.

What you'll learn
  • Scegli la superficie giusta: Artifacts per app istantanee oppure Claude Code per un repository reale e pubblicabile
  • Batti l'estetica predefinita da 'AI slop' con il system prompt di estetica frontend di Anthropic
  • Esegui un flusso dall'idea alla pubblicazione con gli Steps qui sotto
  • Ruba i prompt di build e refine copia-incolla, scritti come se li avesse impostati un senior product designer
  • Rifinisci tipografia, movimento e responsività, poi pubblica su Vercel, Netlify o GitHub Pages

Scegli prima la tua superficie​

Due percorsi rapidi molto diversi, a seconda di cosa vuoi ottenere alla fine:

  • Claude Artifacts — descrivi un'app e Claude esegue il rendering di un artifact React/HTML autonomo e dal vivo all'interno della chat. Zero setup, link condivisibile, perfetto per prototipi, strumenti interni, calcolatori e mockup di landing page. Per impostazione predefinita un artifact esegue logica autonoma; può raggiungere servizi esterni tramite MCP, ma non è un repository di tua proprietà.
  • Claude Code + un framework — Claude crea l'impalcatura e modifica un codebase reale (Next.js / Astro / Tailwind / shadcn/ui) sulla tua macchina, in parallelo, che poi committi e pubblichi. È il percorso da scegliere quando vuoi possedere, estendere e spedire la cosa.
Pro tip
  • Prototipa l'aspetto in un Artifact in 60 secondi, poi di' a Claude Code di ricostruirlo come un vero repository Next.js + Tailwind. Ottieni feedback istantaneo E un codebase pubblicabile.
  • Claude Design (Anthropic Labs, research preview) aggiunge una canvas visiva e un design system persistente, con un passaggio di consegne verso Claude Code: utile se vivi dentro uno strumento di design.

L'unica cosa che separa l'eccellente dal generico​

Lasciato alle sue impostazioni predefinite, Claude converge verso ciò che la community chiama "AI slop": font Inter, un gradiente viola su bianco, tre card con angoli uniformemente arrotondati. Il cookbook di estetica frontend di Anthropic è schietto sul perché, e la soluzione è nominare esplicitamente le dimensioni a cui tieni e le impostazioni predefinite da evitare.

Cheatsheet anti-slop
Term shown.
1 / 4

La mossa con la leva più alta è incollare il blocco <frontend_aesthetics> di Anthropic (o il tuo DESIGN.md) all'inizio di una build, così il modello sa cosa evitare prima di scrivere una riga di CSS.

Blocco di sistema anti-slop (incollalo prima di qualsiasi build di UI)

<frontend_aesthetics>
You converge toward generic, "on-distribution" output — the "AI slop" aesthetic. Avoid it.
Typography: choose a distinctive, beautiful font (NOT Inter/Roboto/Arial). Use it decisively.
Color & theme: commit to ONE cohesive aesthetic via CSS variables; dominant colors + sharp accents, not a timid even palette. No purple-gradient-on-white.
Motion: prioritize one orchestrated page-load with staggered reveals over scattered micro-interactions. CSS-only for HTML; Motion for React.
Backgrounds: build atmosphere/depth with layered gradients or patterns — never a flat solid.
Make unexpected, context-specific choices. Think outside the box.
</frontend_aesthetics>

Dall'idea al sito pubblicato​

Guided walkthrough1 of 6
  1. In un solo messaggio dai a Claude: cos'è il sito, le sezioni, il pubblico e UNA direzione estetica con un nome (es. 'editoriale caldo, come Notion incontra una rivista cartacea'). Brief vaghi producono siti vaghi.

Prompt di build scritti come se li avesse impostati un senior designer​

Aprire con un ruolo professionale specifico alza in modo misurabile la qualità dell'output e ne riduce la varianza. Sii concreto su estetica, stack e stati.

Build one-shot: un vero sito Next.js + Tailwind + shadcn

You are a senior product designer + frontend engineer.
Build a Next.js (App Router) + Tailwind + shadcn/ui marketing site for <PRODUCT>.
Aesthetic: <ONE named direction, e.g. "editorial minimalism, Linear/Stripe energy">.
Typography: one distinctive display face + one mono/sans for body — NOT Inter.
Sections: hero, social proof, 3 feature blocks, pricing, FAQ, footer.
Requirements: fully responsive (mobile-first), dark mode, one orchestrated
page-load animation with staggered reveals, accessible (WCAG AA contrast).
Write DESIGN.md first with the color/type/spacing tokens, then build.
Scaffold files in parallel; show me the tree, then implement.

Prototipo Artifact istantaneo (chat, nessun setup)

Create an interactive Artifact: a single-page landing for <IDEA>.
Make it genuinely beautiful, not generic AI slop — distinctive font (not Inter),
a committed color theme via CSS variables, layered gradient background,
and a staggered fade-in on load. Mobile-responsive. Self-contained HTML/React.

Rifinisci: elimina la sensazione di generico

Critique this UI as a senior product designer and list the 5 "AI default"
fingerprints it still has (font, spacing, color, layout cliché, motion).
Then redesign it around ONE bold aesthetic choice. Increase type contrast
(weight + size extremes), commit to a dominant color with a sharp accent,
and replace scattered hover effects with one orchestrated entrance.

La rifinitura che lo fa sembrare costoso​

Pro tip
  • La tipografia è l'upgrade più economico: un Google Font distintivo + un salto di dimensione di almeno 3x tra display e body fa immediatamente leggere 'progettato'.
  • Movimento: investi in UN grande momento (un caricamento orchestrato con animation-delay) invece di dieci minuscoli hover.
  • Responsività: chiedi esplicitamente a Claude di gestire mobile, testo lungo, stati vuoto, loading ed errore: per impostazione predefinita li salta.
  • Profondità: gradienti CSS sovrapposti o una sottile grana/pattern battono ogni volta uno sfondo piatto.
  • Ricorda che Claude non può vedere il proprio output: incolla uno screenshot o descrivi cosa non va, così il ciclo di rifinitura converge.
Watch out
  • 'Rendilo bello' da solo rende poco: è l'equivalente in prompt dell'impostazione predefinita. Nomina invece l'estetica, la politica sui font e le impostazioni predefinite da evitare.
  • Non lasciare che un unico prompt gigante costruisca tutto in un colpo per un sito reale; procedere sezione per sezione con un DESIGN.md è più controllabile e usa meglio i token.
  • Tratta come bozze le affermazioni di marketing, le statistiche e i testi generici generati dall'IA: verifica prima di pubblicare.

Pubblica in pochi minuti​

  • Vercel — la scelta migliore per Next.js. Collega il repository GitHub; ogni push fa build e deploy automatici con URL di anteprima per ogni branch.
  • Netlify — indipendente dal framework, stesso flusso git-push-to-deploy, hosting statico generoso.
  • GitHub Pages — hosting statico gratuito direttamente dal repository; abbinalo a un export statico (Next.js output: "export", oppure una build Astro) per un sito online a costo zero. (Questo sito è pubblicato proprio così.)

Configura il deployment

Set up this repo for deployment:
1. Add a sensible .gitignore and a README with run/build/deploy steps.
2. Configure a production build (static export if targeting GitHub Pages).
3. Give me the exact steps to connect Vercel (or Netlify) for auto-deploy on push,
 and a GitHub Actions workflow as a fallback. Don't commit any secrets.

Mettiti alla prova​

Mettiti alla prova

0/4
  1. Vuoi un prototipo dal vivo e condivisibile in 60 secondi senza alcun setup. Quale superficie?
  2. Secondo le linee guida di estetica frontend di Anthropic, quale impostazione predefinita rivelatrice di 'AI slop' va evitata?
  3. Qual è il modo consigliato per mantenere coerente l'aspetto di un sito attraverso molti prompt/sessioni?
  4. Dove suggerisce Anthropic di spendere il tuo budget di movimento per la massima delizia?
Key takeaways
  • Scegli la superficie: Artifacts per prototipi istantanei, Claude Code + framework per un sito di tua proprietà e pubblicabile.
  • Batti l'AI slop nominando l'estetica, la politica sui font e le impostazioni predefinite da evitare: incolla il blocco frontend_aesthetics di Anthropic.
  • Persisti un DESIGN.md così l'aspetto resta coerente tra le sessioni, proprio come fa CLAUDE.md per il codice.
  • Usa il role-prompting come senior designer, costruisci sezione per sezione e pretendi gli stati saltati (mobile, loading, vuoto, errore).
  • Spendi il budget di movimento su un unico caricamento orchestrato; pubblica via git-push su Vercel/Netlify o con un export statico su GitHub Pages.

Fonti e approfondimenti​