Aller au contenu principal

Livrer un site magnifique et à la pointe, rapidement, avec Claude

Intermédiaire

Vous pouvez passer d'une idée en une ligne à un site déployé et réellement beau en une seule séance. L'astuce n'est pas d'ajouter des prompts — c'est le bon échafaudage de prompt, plus une stack rapide et une boucle de finition serrée. Cette page, c'est la recette.

What you'll learn
  • Choisir la bonne surface : Artifacts pour des apps instantanées vs. Claude Code pour un vrai dépôt déployable
  • Battre le réglage par défaut « AI slop » avec le system prompt frontend-aesthetics d'Anthropic
  • Dérouler un workflow de l'idée au déploiement avec les Steps ci-dessous
  • Récupérer des prompts de build et de raffinement en copier-coller qui semblent briefés par un designer produit senior
  • Peaufiner typographie, mouvement et responsivité — puis déployer sur Vercel, Netlify ou GitHub Pages

Choisissez d'abord votre surface​

Deux chemins rapides très différents, selon ce que vous voulez au bout :

  • Claude Artifacts — décrivez une app et Claude affiche un artifact React/HTML autonome et vivant dans le chat. Zéro configuration, lien partageable, parfait pour les prototypes, les outils internes, les calculatrices et les maquettes de landing page. Par défaut, un artifact exécute une logique autonome ; il peut atteindre des services externes via MCP, mais ce n'est pas un dépôt qui vous appartient.
  • Claude Code + un framework — Claude échafaude et édite une vraie base de code (Next.js / Astro / Tailwind / shadcn/ui) sur votre machine, en parallèle, que vous committez et déployez. C'est le chemin quand vous voulez posséder, étendre et livrer la chose.
Pro tip
  • Prototypez le look dans un Artifact en 60 secondes, puis demandez à Claude Code de le reconstruire en un vrai dépôt Next.js + Tailwind. Vous obtenez un retour instantané ET une base de code déployable.
  • Claude Design (Anthropic Labs, aperçu de recherche) ajoute un canevas visuel et un design system persistant, avec un passage de relais vers Claude Code — utile si vous vivez dans un outil de design.

La seule chose qui sépare l'excellent du générique​

Laissé à ses réglages par défaut, Claude converge vers ce que la communauté appelle le « AI slop » : police Inter, un dégradé violet sur blanc, trois cartes aux coins uniformément arrondis. Le cookbook frontend-aesthetics d'Anthropic est franc sur les raisons — et la solution est de nommer explicitement les dimensions qui vous importent et les réglages par défaut à éviter.

Antisèche anti-slop
Appuyez sur Entrée ou Espace pour retourner la carte. Utilisez les flèches gauche et droite pour naviguer entre les cartes.Terme affiché.
1 / 4

Le mouvement au meilleur levier est de coller le bloc <frontend_aesthetics> d'Anthropic (ou votre propre DESIGN.md) au début d'un build afin que le modèle sache quoi éviter avant d'écrire une ligne de CSS.

Bloc system anti-slop (à coller avant tout build d'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>

De l'idée au site déployé​

Guided walkthrough1 of 6
  1. En un seul message, donnez à Claude : ce qu'est le site, les sections, l'audience, et UNE direction esthétique nommée (ex. « éditorial chaleureux, comme Notion croisé avec un magazine imprimé »). Des briefs vagues produisent des sites vagues.

Des prompts de build qui semblent briefés par un designer senior​

Ouvrir avec un rôle professionnel précis élève de manière mesurable la qualité de sortie et réduit la variance. Soyez concret sur l'esthétique, la stack et les états.

Build en un coup : un vrai site 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.

Prototype Artifact instantané (chat, sans configuration)

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.

Raffiner : tuer le rendu générique

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.

Une finition qui donne un air coûteux​

Pro tip
  • La typographie est l'upgrade la moins chère : une Google Font distinctive + un saut de taille de 3x+ entre le display et le corps se lit instantanément comme « designé ».
  • Mouvement : investissez dans UN grand moment (un chargement orchestré avec animation-delay) plutôt que dix minuscules survols.
  • Responsivité : demandez explicitement à Claude de gérer le mobile, le texte long, les états vide, chargement et erreur — il les saute par défaut.
  • Profondeur : des dégradés CSS superposés ou un grain/motif subtil battent un arrière-plan plat à chaque fois.
  • Rappelez-vous que Claude ne peut pas voir sa propre sortie — collez une capture d'écran ou décrivez ce qui ne va pas pour que la boucle de raffinement converge.
Watch out
  • « Make it beautiful » seul sous-performe — c'est l'équivalent en prompt du réglage par défaut. Nommez plutôt l'esthétique, la politique de police et les réglages par défaut à éviter.
  • Ne laissez pas un seul prompt géant tout construire d'un coup pour un vrai site ; le section-par-section avec un DESIGN.md est plus contrôlable et utilise mieux les tokens.
  • Traitez les affirmations marketing, les stats et le texte générique produits par l'IA comme des brouillons — vérifiez avant de publier.

Déployer en quelques minutes​

  • Vercel — le meilleur choix pour Next.js. Connectez le dépôt GitHub ; chaque push build et déploie automatiquement avec des URL de prévisualisation par branche.
  • Netlify — agnostique au framework, même flux git-push-to-deploy, hébergement statique généreux.
  • GitHub Pages — hébergement statique gratuit directement depuis le dépôt ; associez-le à un export statique (Next.js output: "export", ou un build Astro) pour un site en ligne à coût zéro. (Ce site même est publié ainsi.)

Câbler le déploiement

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.

Vérifiez-vous​

Vérifiez-vous

0/4
  1. Vous voulez un prototype vivant et partageable en 60 secondes sans aucune configuration. Quelle surface ?
  2. Selon les conseils frontend-aesthetics d'Anthropic, lequel est un réglage par défaut « AI slop » révélateur à éviter ?
  3. Quelle est la manière recommandée de garder le look d'un site cohérent à travers de nombreux prompts/sessions ?
  4. Où Anthropic suggère-t-il de dépenser votre budget mouvement pour un maximum d'enchantement ?
Key takeaways
  • Choisissez la surface : Artifacts pour les prototypes instantanés, Claude Code + framework pour un site possédé et déployable.
  • Battez l'« AI slop » en nommant l'esthétique, la politique de police et les réglages par défaut à éviter — collez le bloc frontend_aesthetics d'Anthropic.
  • Persistez un DESIGN.md pour que le look reste cohérent entre les sessions, comme CLAUDE.md le fait pour le code.
  • Prompt-rôle en designer senior, construisez section par section, et exigez les états sautés (mobile, chargement, vide, erreur).
  • Dépensez le budget mouvement sur un chargement orchestré ; déployez via git-push vers Vercel/Netlify ou un export statique vers GitHub Pages.

Sources & lectures complémentaires​