Wie KI eine Website für Sie baut

Künstliche Intelligenz

Der Büroalltag ist voll mit lästigen Aufgaben. Haben Sie mal gezählt, wie viele Mausklicks es braucht, um ein Foto zurechtzuschneiden? Oder vermissen Sie in manchen Standardprogrammen ganz simple, aber enorm hilfreiche Funktionen? Gängige Sprachmodelle schreiben Ihnen gerne den Code für die App, die diese Kunststücke draufhat. Nur: Wie werden aus dem Code ausführbare Apps?

Nützlich ist hierfür die Funktion „Artefakte“ des KI-Modells Claude. Wenn Claude umfangreiche Inhalte generiert – etwa Code-Snippets, Textdokumente, Diagramme oder Webdesigns –, werden diese als „Artefakt“ in einem separaten Fenster neben dem Chat dargestellt. Dieses Artefakt-Fenster ist ein interaktiver Arbeitsbereich, in dem die KI Ergebnisse grafisch präsentiert und sie direkt bearbeitet werden können.


Lesen Sie auch:


Sie erreichen die Funktion auch direkt über die Navigationsleiste links unter „Artefakte“. Stellen Sie auf jeden Fall sicher, dass in Ihrem Profil „Artefakte“, „AI-powered artifacts“ und das „Analysetool“ aktiviert sind. Sie finden alle drei Einstellungen, wenn Sie unten links auf Ihren Namen klicken und dann auf „Einstellungen“ und „Funktionen“.

In einem frischen Chat schreiben Sie dann zum Beispiel: „Erstelle eine einfache HTML-Website über unser Sonnensystem mit Header, Navigationsmenü und Footer.“ Claude generiert dann den passenden Code. Die Vorschau der Website erscheint rechts neben dem Chat in einem Fenster.

Das ist nur ein erster Aufschlag. Mit Texteingaben im Chat können Sie das Modell auffordern nachzubessern. Wenn Sie den Header größer, den Footer kleiner und die Schriftart kursiv setzen wollen, bessert Claude den Code nach und präsentiert Ihnen eine neue Version Ihrer galaktischen Website.

Manchmal kommt es vor, dass Ihnen die neue Version schlechter gefällt als die vorige. Über dem aktuellen Artefakt wird die Version angezeigt. Dort können Sie zu früheren Versionen des Projekts zurückkehren.

Claude kann eine Vielzahl von Inhaltstypen als Artefakt ausgeben. Typischerweise ist jeder Output ab ungefähr 15 Zeilen Text umfangreich oder komplex genug, dass Claude dafür ein Artefakt öffnet. Das können Texte sein, Programmcode, Websites, Diagramme, Grafiken oder interaktive Seiten wie Dashboards. Füttern Sie Claude doch einmal mit dem PDF einer wissenschaftlichen Studie und geben Sie folgenden Befehl: „Extrahiere die wichtigsten Ergebnisse und Zahlen dieser Studie und erstelle daraus ein interaktives Dashboard, das die Ergebnisse visualisiert. Das Design soll raffiniert und elegant sein.“

Kein eigener Webspace nötig

Wenn Sie mit einer Version Ihres Projekts zufrieden sind, können Sie diese online schalten. Sie brauchen keinen Webspace. Sie müssen den Code auch nicht in ein Programm konvertieren. Stattdessen erhalten Sie einen Link, wenn Sie auf die Buttons „veröffentlichen“ oder „teilen“ klicken. Jede Person mit diesem Link kann fortan Ihre App benutzen, Ihre Website ansehen oder Ihre Animation genießen.

Seit Juni können Apps, die Claude auf diese Weise baut, sogar ihrerseits KI einsetzen. Ich habe beispielsweise folgende Anfrage geschrieben: „Entwirf eine Website, in der man ein Textfeld und ein Dropdown-Menü unter dem Textfeld mit den Optionen ‚Englisch‘, ‚Einfache Sprache‘, ‚Leichte Sprache‘, ‚Mittelaltersprache‘ hat. Wählt man eine der Optionen aus, übersetzt die Website den Text in die gewünschte Zielsprache.“ Das Ergebnis können Sie unter folgendem Link bewundern: https://www.kom.de/translator

Viele von Ihnen werden keinen Account bei Claude besitzen. Kein Problem. Fast alle großen KI-Modelle bieten mittlerweile die Option, Projekte umzusetzen und dann auch für Sie auszuführen und zu hosten. Bei OpenAI muss man die Option „Canvas“ aktivieren, bei Perplexity heißt die Funktion „Labs“. Bei Google muss man noch das „Firebase Studio“ aufrufen, bei Gemini ist sie noch nicht verfügbar.

Dieser Beitrag erschien zuerst in der gedruckten Ausgabe #Zukunft. Das Heft können Sie hier bestellen.