Eine auffällige Webseite in wenigen Minuten nachbauen und anschließend mit deinen eigenen Inhalten befüllen: In diesem Snip siehst du, wie du mit ClaudeCode, einem Code-Editor, einer Markdown-Datei mit klaren Arbeitsanweisungen und einem Screenshot-Loop aus einer bestehenden Referenzseite ein neues Webdesign erzeugst. Du lernst einen reproduzierbaren Workflow, mit dem du Webseiten schnell klonen, iterativ verbessern und mit den Inhalten einer bestehenden Unternehmensseite neu bespielen kannst.
Ergebnis: Nach dem Umsetzen dieses Snips kannst du eine nahezu vollständige Kopie einer Webseite erstellen und anschließend die Inhalte deiner eigenen Seite in dieses Design übertragen. So entsteht in Minuten ein erster professioneller Webseiten-Prototyp, den du anschließend weiter iterieren und verfeinern kannst.
- Du öffnest deinen Code-Editor und arbeitest in einem neuen Projektordner.
- Du legst eine Markdown-Datei an, hier zum Beispiel
Claud.md, und hinterlegst darin alle Arbeitsanweisungen für ClaudeCode. - Du installierst die ClaudeCode-Extension im Editor, damit ClaudeCode direkt im Entwicklungsworkflow arbeiten kann.
- Du suchst dir eine Webseite aus, die du als visuelle Referenz klonen möchtest.
- Du öffnest die Zielseite im Browser, gehst per Rechtsklick auf „Untersuchen“ beziehungsweise „Inspect“ und stellst die Ansicht auf volle Desktop-Breite, idealerweise 1920 Pixel.
- Du erstellst mit dem Command-Menü im Browser einen Screenshot der gesamten Seite in voller Größe.
- Du suchst im Inspektor das
body-Element der Seite und kopierst die Styles, damit ClaudeCode zusätzlich zur Bildreferenz auch Styling-Informationen erhält. - Du wechselst zurück in den Code-Editor und gibst ClaudeCode den Screenshot sowie die kopierten Stil-Vorgaben mit.
- ClaudeCode startet nun den Bau der Seite anhand deiner Anweisungen aus der Markdown-Datei.
- Über den eingebauten Screenshot-Loop erstellt ClaudeCode nach jeder größeren Runde neue Screenshots, vergleicht sie mit der Referenz und verbessert das Ergebnis iterativ selbstständig.
- Du kontrollierst zwischendurch den Fortschritt und bestätigst gegebenenfalls Berechtigungen, etwa für das Screenshot-Tool.
- Sobald das Grunddesign steht, gibst du ClaudeCode eine zweite Aufgabe: Inhalte, Struktur, Bilder und Informationen einer bestehenden Unternehmensseite sollen in das neue Design übertragen werden.
- ClaudeCode zieht dafür Inhalte der Zielmarke heran, baut sie in das neue visuelle System ein und führt den Screenshot-Loop weiter, bis das Ergebnis deutlich hochwertiger wirkt.
- Du öffnest die fertige
index-Datei im Browser und prüfst, welche Elemente schon gut funktionieren und wo noch manuelle Iteration nötig ist. - Im letzten Schritt verfeinerst du Details wie Verlinkungen, Logos, Produktstruktur, Argumentationslogik, Testimonials und visuelle Konsistenz, bis aus dem Klon eine eigenständige, markengerechte Seite geworden ist.
- Du verstehst, wie du ClaudeCode in einem Code-Editor für Webdesign-Aufgaben einsetzt.
- Du lernst, wie eine Markdown-Datei als Arbeitsgrundlage für wiederverwendbare Anweisungen genutzt wird.
- Du weißt, wie du eine Referenzseite technisch sauber per Full-Page-Screenshot und Style-Kopie vorbereitest.
- Du verstehst, wie ein Screenshot-Loop funktioniert und warum er die Qualität des Ergebnisses deutlich verbessert.
- Du lernst, wie du ein geklontes Design mit den Inhalten einer bestehenden Unternehmensseite kombinierst.
- Du erkennst, welche Teile automatisch gut funktionieren und welche in einer zweiten Iteration manuell nachgeschärft werden sollten.
- Du bekommst einen realistischen Eindruck davon, wie schnell heute ein erster hochwertiger Webdesign-Prototyp entstehen kann.
- Rapid Prototyping von Webseiten-Layouts zur Visualisierung von Designideen.
- Schnelles Migrieren von Inhalten von einer alten zur neuen Webseite mit automatischer Stilübernahme.
- Erstellung von individualisierten Landingpages auf Basis bestehender Templates.
- Automatisierte Style-Guides und Corporate-Design-Anpassungen für unterschiedliche Webauftritte.
- Iterative Verbesserung und Testing von Webdesigns auf Basis von KI-unterstütztem Screenshot-Vergleich.
