Deine erste Website mit Claude: Einsteiger-Guide mit Prompts

Ihr habt eine Idee für eine Website, könnt aber nicht programmieren? Genau für diesen Moment ist Claude gebaut. Ihr beschreibt, was ihr wollt, und bekommt eine funktionierende Seite zurück, die ihr direkt im Browser anschauen könnt.

Dieser Guide zeigt euch, wie ihr in unter einer Stunde von einer leeren Idee zu einer ersten Website kommt. Im Mittelpunkt stehen die Prompts: also was ihr Claude tippt, damit am Ende etwas Brauchbares herauskommt. Kein Hexenwerk, aber ein paar Muster, die den Unterschied machen. Wenn ihr lieber direkt im Terminal arbeitet, springt zum Setup-Guide für Claude Code.

Das Wichtigste in Kürze

• Mit Claude Artifacts braucht ihr keine Programmierkenntnisse. Ihr beschreibt die Website in normaler Sprache, Claude generiert HTML, CSS und JavaScript.
• 63 Prozent der Nutzer von KI-gestützter Code-Erstellung sind Nicht-Entwickler (Hostinger, 2026). Die Adoption bei Nicht-Technikern stieg innerhalb eines Jahres um 520 Prozent.
• Der erste Prompt sollte wie ein kurzes Briefing klingen: Was ist die Seite, wer schaut sie an, welche Inhalte und welcher Ton.
• Artifacts sind seit Februar 2026 für alle Claude-Nutzer kostenlos, inklusive HTML-Export und Teilen.

Was ist Claude Artifacts und warum reicht das für eine erste Website?

Claude Artifacts ist eine Funktion, die euch in einem separaten Fenster rechts neben dem Chat das fertige Ergebnis anzeigt. Tippt ihr "Bau mir eine Landingpage für meinen Hundetrainer", erscheint dort eine echte HTML-Seite, die ihr anklicken, scrollen und ausprobieren könnt (Claude Help Center, 2026).

Für eine erste Website reicht das in vielen Fällen vollständig aus. Ihr könnt einseitige Landingpages, Portfolios, einfache Visitenkarten-Seiten oder interaktive Rechner bauen. Die Seite läuft im Browser, ihr könnt sie als HTML-Datei herunterladen und auf jeden beliebigen Host hochladen.

Drei Dinge solltet ihr im Kopf behalten. Erstens: Artifacts speichert keine Daten serverseitig, alles passiert im Browser. Zweitens: Komplexe Multi-Page-Sites oder Apps mit Login gehören in Claude Code, nicht in Artifacts. Drittens: Was Claude generiert, ist normaler Code. Ihr könnt ihn jederzeit selbst anpassen oder einem Entwickler geben.

Wie schreibt ihr einen guten ersten Prompt?

Der beste erste Prompt klingt nicht wie ein Suchbegriff, sondern wie ein kurzes Briefing an einen Freelancer. Claude liefert sichtbar bessere Ergebnisse, wenn ihr Zweck, Zielgruppe, gewünschte Seiten und den Ton im ersten Anlauf mitgebt (Claude API Docs, 2026).

Ein Briefing-Prompt hat vier Bausteine: das Was, das Für-Wen, das Wie und das Womit. Was für eine Seite ist es, wer schaut sie an, welche Stimmung soll sie haben, und welche Sektionen braucht ihr konkret. Wenn ihr diese vier Punkte nennt, spart ihr drei bis fünf Korrektur-Runden.

Hier ist ein Prompt, den ihr direkt kopieren und an euer Thema anpassen könnt:

Bau mir eine einseitige Landingpage für meine Yogaschule "Studio Nord".
Zielgruppe sind Berufstätige zwischen 30 und 50 in Hamburg.
Ton: ruhig, freundlich, ohne Esoterik-Floskeln.
Sektionen, von oben nach unten:
1. Hero mit Titel, Untertitel und einem Button "Probestunde buchen"
2. Drei Kurse als Karten (Vinyasa, Yin, Pranayama)
3. Über mich, kurzer Text plus Bildplatzhalter
4. Stundenplan als einfache Tabelle
5. Kontakt mit E-Mail und Adresse

Design: warme Beigetöne, viel Weißraum, serifenlose Schrift.
Mobil zuerst, alles in einer HTML-Datei.

Was hier wichtig ist: ihr sagt nicht "mach es schön", sondern nennt eine konkrete Stimmung. Ihr listet die Sektionen in der Reihenfolge, wie sie auftauchen sollen. Und ihr legt eine technische Randbedingung fest, in diesem Fall die eine HTML-Datei.

Welche Prompt-Muster funktionieren immer wieder?

Es gibt drei Muster, die wir in der Praxis bei jeder Website-Iteration nutzen. Sie sparen Zeit und Token, und sie führen zu Code, den ihr später wirklich anpassen könnt.

Muster 1: Das Rollen-Prompting. Ihr schreibt am Anfang, wer Claude in dieser Aufgabe sein soll. Das schärft den Output messbar, weil Claude sich an die Konventionen dieser Rolle hält (Anthropic, 2026).

Du bist eine erfahrene Webdesignerin, die seit zehn Jahren für deutsche
Mittelständler arbeitet. Du schreibst sauberen, semantischen HTML-Code
und vermeidest aufgeblasene Frameworks. Baue mir [Beschreibung].

Muster 2: Die Constraint-Liste. Ihr listet auf, was die Seite nicht haben darf. Das wirkt unscheinbar, ist aber das stärkste Werkzeug gegen generische Ergebnisse.

Wichtig, was die Seite NICHT haben darf:
- Keine Stockfoto-artigen Hero-Bilder von lachenden Menschen am Laptop
- Keine pinkfarbenen Gradients
- Kein Bootstrap, kein Tailwind, nur eigenes CSS
- Keine Cookie-Banner-Platzhalter
- Keine Floskeln wie "innovative Lösungen" oder "leidenschaftliche Experten"

Muster 3: Iterieren statt neu starten. Statt einen Mega-Prompt zu bauen, schickt ihr eine kurze Version ab und korrigiert dann. Claude behält den Kontext im selben Chat, das ist wie ein echtes Gespräch mit einer Designerin.

Erster Prompt: "Bau mir eine Landingpage für meine Töpferei."
Zweiter Prompt: "Mach die Hero-Sektion ruhiger, kleinere Schrift, weniger Kontrast."
Dritter Prompt: "Tausche die drei Karten gegen eine Bildergalerie mit sechs Plätzen."
Vierter Prompt: "Letzte Sektion: Kontakt mit E-Mail-Feld und Telefonnummer."

Welcher Weg passt zu eurem Projekt?

Claude bietet euch drei verschiedene Wege, eine Website zu bauen. Die Wahl hängt davon ab, wie groß euer Projekt ist und ob ihr die Seite später selbst weiter pflegen wollt.

Wenn ihr eine einzelne Landingpage testet oder einen Kunden-Mockup baut, reicht Artifacts. Sobald ihr mehrere Unterseiten, ein Blog oder einen Kontakt-Formular-Endpoint braucht, lohnt sich der Schritt in Claude Code. Eine vollständige Anleitung dazu haben wir in unserem Post zu Website bauen mit Claude Code zusammengefasst.

Ein Detail aus der Praxis: Artifacts speichert nur die aktuelle Version. Wenn ihr eine längere Iterationsstrecke vor euch habt, lohnt sich der Wechsel auf Desktop App oder Claude Code, weil ihr dort echte Dateien auf der Platte habt und mit Git versionieren könnt.

Was wir bei Einsteigern in der Praxis sehen

Bei LowCloud begleiten wir regelmäßig Menschen ohne Code-Hintergrund, die ihre erste Website mit Claude bauen, oft Solo-Selbstständige und Vereine. Drei Beobachtungen, die wir nach Dutzenden Sessions teilen können.

Erstens: der häufigste Anfängerfehler ist nicht zu wenig Prompt, sondern zu viel. Wer fünf Sektionen, drei Farbpaletten, vier Animationen und zwei Sprachen in den ersten Prompt packt, bekommt einen Brei. Lieber klein anfangen und in zehn kurzen Iterationen zur Zielversion.

Zweitens: Texte schlagen Design. Wenn die Texte gut sind, wirkt die Seite professionell, selbst mit Standard-Layout. Wenn die Texte Floskeln sind, hilft kein Design. Wir lassen Claude in solchen Fällen explizit andere Texte vorschlagen.

Drittens: das Hosting ist nicht das Problem. 92 Prozent der Profis nutzen heute KI-Tools im Alltag (Hashnode, 2026). Was die meisten Einsteiger blockiert, ist nicht der Code, sondern die Frage, wo die Seite am Ende laufen soll. Eine statische HTML-Datei könnt ihr auf jedem klassischen Webhoster ablegen. Wenn ihr früh wisst, dass eure Seite wächst, lohnt sich der Blick auf eine Plattform, die mitwächst.

Häufige Fragen

Brauche ich für Claude Artifacts ein zahlungspflichtiges Abo?

Nein. Seit Februar 2026 sind HTML-Artifacts, Diagramme und Teilen im kostenlosen Claude-Plan enthalten. Der kostenpflichtige Plan bringt euch höhere Limits und Zugriff auf Claude Code, ist für eine erste Website aber kein Muss.

Wie veröffentliche ich die fertige Seite im Internet?

Ladet die generierte HTML-Datei herunter und legt sie auf einem Webhoster ab. Für statische Seiten reichen klassische Anbieter wie Hetzner, all-inkl oder Netlify. Wenn ihr eine Domain habt, müsst ihr nur den A-Record auf euren Hoster zeigen lassen.

Was, wenn Claude eine Sektion falsch baut?

Sagt es konkret. Statt "das gefällt mir nicht" schreibt "die Hero-Sektion ist zu dunkel und die Schrift zu klein". Je präziser eure Rückmeldung, desto besser das nächste Ergebnis. Behaltet den Chat offen, damit Claude den Kontext behält.

Kann ich später als Entwickler den Code weiter bearbeiten?

Ja, das ist sogar empfehlenswert. Der generierte HTML- und CSS-Code ist Standard, ohne proprietäre Abhängigkeiten. Ihr oder ein Entwickler könnt jede Zeile ändern. Das ist ein großer Unterschied zu klassischen No-Code-Buildern, die euch in ihrem System einsperren.

Welche Sprache nutze ich beim Prompten am besten?

Deutsch funktioniert sehr gut, gerade für Texte auf der Website. Bei technischen Anweisungen ("baue eine responsive Grid mit drei Spalten") ist Englisch oft etwas präziser, aber kein Pflichtprogramm. Probiert aus, was sich für euch natürlicher anfühlt.

Fazit

Eine erste Website mit Claude zu bauen ist keine Sache von Programmierkenntnissen, sondern von guten Briefings. Wenn ihr einen klaren Zweck, eine konkrete Zielgruppe und eine kurze Liste an Sektionen mitbringt, habt ihr in unter einer Stunde ein Ergebnis, das ihr live stellen könnt. Iteriert in kleinen Schritten, formuliert Constraints, und lasst Claude Texte vorschlagen, wenn ihr selbst nicht weiterkommt.

Wenn euer Projekt aus der einzelnen Landingpage herauswächst, lest unsere Anleitung zu Website bauen und deployen mit Claude Code. Da zeigen wir, wie ihr aus dem Browser-Mockup ein echtes Projekt mit Git, Deployment und souveräner Infrastruktur macht.