Zum Hauptinhalt springen

Mit Claude schnell eine schöne, hochmoderne Website veröffentlichen

Fortgeschritten

Du kannst von einer einzeiligen Idee zu einer veröffentlichten, wirklich gut aussehenden Website in einer einzigen Sitzung gelangen. Der Trick liegt nicht in mehr Prompts — sondern im richtigen Prompt-Gerüst plus einem schnellen Stack und einer engen Feinschliff-Schleife. Diese Seite ist das Rezept.

What you'll learn
  • Wähle die richtige Oberfläche: Artifacts für sofortige Apps vs. Claude Code für ein echtes, deploybares Repo
  • Schlage den 'AI-Slop'-Standard mit Anthropics Frontend-Aesthetics-System-Prompt
  • Führe einen Von-der-Idee-zum-Deployment-Workflow mit den untenstehenden Steps aus
  • Übernimm Copy-Paste-Build- und Refine-Prompts, die klingen, als hätte sie ein erfahrener Product Designer gebrieft
  • Verbessere Typografie, Motion und Responsiveness — dann deploye auf Vercel, Netlify oder GitHub Pages

Wähle zuerst deine Oberfläche​

Zwei sehr unterschiedliche schnelle Wege, je nachdem, was du am Ende haben möchtest:

  • Claude Artifacts — beschreibe eine App und Claude rendert ein lebendiges, in sich geschlossenes React/HTML-Artifact innerhalb des Chats. Kein Setup, teilbarer Link, perfekt für Prototypen, interne Tools, Rechner und Landingpage-Mockups. Standardmäßig führt ein Artifact in sich geschlossene Logik aus; es kann über MCP externe Dienste erreichen, aber es ist kein Repo, das dir gehört.
  • Claude Code + ein Framework — Claude legt eine echte Codebasis (Next.js / Astro / Tailwind / shadcn/ui) auf deinem Rechner an und bearbeitet sie parallel, die du committest und deployst. Das ist der Weg, wenn du das Ding besitzen, erweitern und ausliefern möchtest.
Pro tip
  • Prototypisiere das Aussehen in einem Artifact in 60 Sekunden, dann sage Claude Code, es als echtes Next.js- + Tailwind-Repo neu aufzubauen. Du bekommst sofortiges Feedback UND eine deploybare Codebasis.
  • Claude Design (Anthropic Labs, Research Preview) ergänzt eine visuelle Canvas und ein persistentes Designsystem mit einer Übergabe an Claude Code — nützlich, wenn du in einem Design-Tool lebst.

Das eine, was großartig von generisch unterscheidet​

Auf seine Standardwerte überlassen, konvergiert Claude zu dem, was die Community "AI-Slop" nennt: Inter-Schrift, ein violetter Verlauf auf Weiß, drei gleichmäßig abgerundete Karten. Anthropics eigenes Frontend-Aesthetics-Cookbook ist deutlich, warum das so ist — und die Lösung besteht darin, die Dimensionen, die dir wichtig sind, und die zu vermeidenden Standardwerte explizit zu benennen.

Anti-Slop-Spickzettel
Drücke Enter oder die Leertaste, um die Karte umzudrehen. Nutze die Pfeiltasten links und rechts, um zwischen den Karten zu wechseln.Begriff angezeigt.
1 / 4

Der wirkungsvollste Move ist, Anthropics <frontend_aesthetics>-Block (oder deine eigene DESIGN.md) zu Beginn eines Builds einzufügen, damit das Modell weiß, was es vermeiden soll, bevor es eine Zeile CSS schreibt.

Anti-Slop-System-Block (vor jedem UI-Build einfügen)

<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>

Von der Idee zur veröffentlichten Website​

Guided walkthrough1 of 6
  1. Gib Claude in einer Nachricht: was die Website ist, die Sektionen, die Zielgruppe und EINE benannte ästhetische Richtung (z.B. 'warm-redaktionell, wie Notion trifft auf ein Printmagazin'). Vage Briefs erzeugen vage Websites.

Build-Prompts, die klingen, als hätte sie ein erfahrener Designer gebrieft​

Mit einer spezifischen professionellen Rolle zu beginnen, hebt die Output-Qualität messbar und reduziert die Varianz. Sei konkret bei der Ästhetik, dem Stack und den Zuständen.

One-Shot-Build: eine echte Next.js- + Tailwind- + shadcn-Website

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.

Sofortiger Artifact-Prototyp (Chat, kein 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.

Refine: das generische Gefühl beseitigen

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.

Feinschliff, der es teuer aussehen lässt​

Pro tip
  • Typografie ist das günstigste Upgrade: eine markante Google Font + ein 3-facher (oder größerer) Größensprung zwischen Display und Body liest sich sofort als 'gestaltet'.
  • Motion: Investiere in EINEN großartigen Moment (ein orchestriertes Laden mit animation-delay) statt in zehn winzige Hovers.
  • Responsiveness: Bitte Claude explizit, Mobile, langen Text sowie Empty-, Loading- und Error-Zustände zu behandeln — standardmäßig überspringt es diese.
  • Tiefe: Geschichtete CSS-Verläufe oder eine subtile Körnung/ein subtiles Muster schlagen jedes Mal einen flachen Hintergrund.
  • Denk daran, dass Claude seinen eigenen Output nicht sehen kann — füge einen Screenshot ein oder beschreibe, was falsch ist, damit die Refine-Schleife konvergiert.
Watch out
  • 'Mach es schön' allein liefert unterdurchschnittliche Ergebnisse — es ist das Prompt-Äquivalent des Standards. Benenne stattdessen die Ästhetik, die Schrift-Policy und die zu vermeidenden Standardwerte.
  • Lass für eine echte Website nicht einen einzigen riesigen Prompt alles in einem Schuss bauen; Sektion für Sektion mit einer DESIGN.md ist kontrollierbarer und nutzt Tokens besser.
  • Behandle KI-generierte Marketing-Behauptungen, Statistiken und Stock-Texte als Entwürfe — verifiziere sie vor der Veröffentlichung.

In Minuten deployen​

  • Vercel — beste Passform für Next.js. Verbinde das GitHub-Repo; jeder Push baut und deployt automatisch mit Preview-URLs pro Branch.
  • Netlify — framework-agnostisch, gleicher Git-Push-zu-Deploy-Ablauf, großzügiges statisches Hosting.
  • GitHub Pages — kostenloses statisches Hosting direkt aus dem Repo; kombiniere es mit einem statischen Export (Next.js output: "export" oder einem Astro-Build) für eine kostenlose Live-Website. (Genau diese Website wird auf diese Weise veröffentlicht.)

Deployment einrichten

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.

Überprüfe dich selbst​

Überprüfe dich selbst

0/4
  1. Du möchtest einen lebendigen, teilbaren Prototyp in 60 Sekunden ohne jegliches Setup. Welche Oberfläche?
  2. Welches ist gemäß Anthropics Frontend-Aesthetics-Leitfaden ein verräterischer 'AI-Slop'-Standard, den man vermeiden sollte?
  3. Was ist der empfohlene Weg, um das Aussehen einer Website über viele Prompts/Sitzungen hinweg konsistent zu halten?
  4. Wo schlägt Anthropic vor, dein Motion-Budget für maximale Freude einzusetzen?
Key takeaways
  • Wähle die Oberfläche: Artifacts für sofortige Prototypen, Claude Code + Framework für eine eigene, deploybare Website.
  • Schlage 'AI-Slop', indem du die Ästhetik, die Schrift-Policy und die zu vermeidenden Standardwerte benennst — füge Anthropics frontend_aesthetics-Block ein.
  • Halte eine DESIGN.md persistent, damit das Aussehen über Sitzungen hinweg konsistent bleibt, genau wie CLAUDE.md es für Code tut.
  • Rollen-Prompte als erfahrener Designer, baue Sektion für Sektion und verlange die übersprungenen Zustände (Mobile, Loading, Empty, Error).
  • Setze das Motion-Budget auf ein orchestriertes Laden; deploye per Git-Push zu Vercel/Netlify oder einem statischen Export zu GitHub Pages.

Quellen & weiterführende Lektüre​