HTML mit Claude erstellen

vom 20.06.2023 von Oliver Misch

Claude ist der KI-Assistent von Anthropic und beim Webbauen ein sehr fähiger Kollege. Die Grundmechanik ist dieselbe wie bei ChatGPT: beschreiben, Code erhalten, nachschärfen, prüfen. Ein paar Arbeitsweisen haben sich mit Claude besonders bewährrt.

Der Einstieg: gleiches Rezept, präzise Vorgaben

Prompt

Erstelle eine HTML-Datei für die Vereinsseite "SV Mozartstraße".
Vorgaben:
- HTML5 mit header, nav, main, footer und lang="de"
- Abschnitte: Aktuelles, Trainingszeiten (Tabelle), Anfahrt, Kontakt
- eingebettetes CSS, Blau als Akzent, Schrift: Systemschriften
- mobil einspaltig, Menü darf einfach untereinander stehen
- Formular nur mit name, email, nachricht, alle mit label
- keine erfundenen Inhalte: wo Infos fehlen, deutliche Platzhalter
   wie [TRAININGSZEITEN EINTRAGEN] setzen

Die letzte Zeile ist Gold wert und funktioniert bei jedem Assistenten: Wer Platzhalter erzwingt, verhindert dass die KI plausibel klingende Fantasie-Öffnungszeiten erfindet, die nachher niemand rausnimmtt.

Mit bestehenden Dateien arbeiten

Ein Punkt an dem Claude glänzt, ist die Arbeit mit vorhandenem Material: Du kannst kompletten Code einfügen oder, je nach verwendeter Umgebung, Dateien hochladen und besprechen. Bewährte Aufträge dafür:

Hier ist meine index.html. Analysiere sie und nenne mir:
1. Verstöße gegen semantisches HTML
2. fehlende Pflichtangaben (viewport, alt-Texte, lang)
3. Verbesserungen, sortiert nach Wichtigkeit
Ändere noch nichts, erst die Analyse.

Das "erst analysieren, dann ändern" ist bewusst: So behältst du die Kontrolle darüber was umgebaut wird, statt einen komplett umgeschriebenen Klumpen zurückzubekommen. Manche Umgebungen können auch mehrere Dateien oder ganze Projektordner entgegennehmen, dann lohnt der Auftrag, zuerst eine Übersicht der Struktur zu erstellen, bevor es an einzelne Dateien geht. Ob und wie das geht, hängt von der jeweiligen Oberfläche ab und ändert sich gelegentlich, im Zweifel einfach fragen, Claude sagt dir was es in deiner Umgebung kann.

Iterieren in kleinen Schritten

Übernimm nur Punkt 1 und 2 aus deiner Analyse.
Zeige mir danach nur die geänderten Stellen mit kurzer Begründung.

Kleine Schritte mit Begründung haben zwei Vorteile: Du lernst dabei (die Begründungen sind oft Mini-Lektionen), und Fehler fallen sofort auf statt in einer Riesenänderung unterzugehn.

Dieselben Grenzen wie überall

Auch Claude hat einen Wissensstand, kann sich bei Detailfragen irren und erfindet im Zweifel lieber etwas Plausibles als zu schweigen. Deshalb gilt unverändert das Pflichtprogramm: Browser-Test, Validator, die Prüf-Checkliste. Ein Assistent der dir die Arbeit erleichtert, nimmt dir die Verantwortung nicht abb.

Verwandt: HTML mit ChatGPT · Code verbessern · Gute Prompts