Ich habe drei fertige Websites in 15 Minuten erstellt, ohne eine Zeile zu coden: So gut ist die neue KI von Canva

Ich habe mit Canva Code drei Websites in unter 15 Minuten erstellt und bin begeistert. (Bildquelle: GameStar Tech / Aaron Hofmann)

Ich gehöre bereits seit über zehn Jahren zu den Personen, die Canva nutzen, und habe die Entwicklung entsprechend genau mitverfolgt.

Als vor einigen Jahren neben der klassischen Instagram-Post-Gestaltung auch weitere Features wie Webdesign hinzugekommen sind, war ich total begeistert.

Als Hobby-Coder und Webentwickler habe ich nämlich zu oft veraltete oder fehlende Websites erlebt. Umso mehr habe ich mich gefreut, als Selbstständige in meinem Umfeld Canva entdeckt haben, um eigenständig vernünftig aussehende Websites zu erstellen.

Mit dem Update zu Canva Code 2.0 soll die Webentwicklung noch leichter gehen, da eine KI für euch eure Traumwebsites anhand einer einfachen Prompt-Beschreibung erstellt. Diese kann anschließend direkt über Canva gehostet oder als Quellcode heruntergeladen werden.

Wie gut das funktioniert und ob der Code am Ende wirklich etwas taugt, habe ich mir angesehen und kann jetzt schon mal verraten: Ich bin begeistert, wie genial die Funktion aufgebaut ist!

Das kann Canva Code 2.0

Weiterhin bestehen alle normalen Features zur Gestaltung von Posts, Logos, Websites und Co. auf Canva – nur eben erweitert um smarte KI-Features. Diese sind teilweise so direkt in die Vorlage eingebaut, dass ich mir etwa einen Social-Media-Post in dem Tool prompten oder mir eine ganze Vorlage als Prompt generieren lassen kann.

Genau das macht auch Canva Code: Statt eines vorgefertigten Designs entwickelt die KI hier das gesamte Projekt anhand der Vorgaben aus eurem Kopf – inklusive nötiger eigener Ansätze, falls Informationen zu kurz kommen.

Solltet ihr beispielsweise nur sagen, dass ihr einen persönlichen Blog braucht, und keinen weiteren Kontext geben, dann reicht das zwar, aber die KI wird selbst über die Elemente, Texte, Logos und Co. entscheiden.

Das Ergebnis eures Prompts seht ihr direkt in der großen Übersichts-Box von Canva, in der ihr sonst auch eure Projekte sehen könnt. Dadurch lässt sich eure Website unter anderem in Echtzeit anpassen – sowohl durch Prompts als auch durch das Anklicken einzelner Elemente.

Insgesamt gibt es aber natürlich mehrere Ansätze, wie ihr eure Website erstellen und bearbeiten könnt. Entweder greift ihr auf ein bereits existierendes Projekt zurück oder startet bei Null:

Schritt-für-Schritt-Generierung: Ihr fangt erstmal mit einem Gedanken an – etwa wenn ihr eine eigene Website als Portfolio für Bewerbungen erstellen wollt. Als Prompt gebt ihr ein, dass ihr eine moderne Website wollt und für welche Branche ihr diese braucht.

Kreative Bereiche bekommen so beispielsweise eine künstlerischere Gestaltung als Wirtschaftler. Nun könnt ihr nach und nach die Vorlage durch Prompts anpassen und euch bis zu eurem fertigen Ergebnis arbeiten.

Komplexe Prompt-Generierung: Gebt ihr ausführlich eure präzisen Vorstellungen an, braucht die KI zwar erst mal etwas länger, versucht dann aber, alle eure Wünsche einzubauen. Das kann hilfreich sein, wenn ihr nicht jedes Element einzeln prompten wollt, sondern mit einem soliden Grundgerüst starten möchtet. Auch Referenzen zu anderen Seiten sind möglich, wobei exakte Kopien allein aus urheberrechtlichen Gründen nicht funktionieren.

Bei beiden Wegen könnt ihr die Website im Anschluss immer noch weiter nach euren Vorstellungen anpassen. Stört euch ein Button, könnt ihr das der KI sagen und sie ändert sofort euer Projekt. Wollt ihr alle Farben austauschen, wisst aber nicht, in welche Richtung, reichen Beschreibungen wie »ein neutrales, freundliches und modernes Design«.

Die Bearbeitung ganz ohne Code

Sobald ich eine Website generiert habe, geht es in das Feintuning. Wie ihr es vielleicht von Canva bereits kennt, reicht ein Klick auf das Element, das ich anpassen möchte, und schon öffnet sich ein entsprechendes Bearbeitungsfeld.

Passt mir ein Text beispielsweise nicht, reicht ein Klick und schon kann ich den Inhalt der Seite neu formulieren, die Schriftart anpassen oder die Textgröße ändern – ganz ohne Code. Dieser wird im Hintergrund nämlich von Canva in Echtzeit angepasst oder übersetzt.

Canva hat mit Code 2.0 eine neue Möglichkeit zum Erstellen von Websites hinzugefügt. (Bildquelle: GameStar Tech / Aaron Hofmann)

Dadurch ähnelt Canva eher einem Homepage-Baukasten oder Contentmanagementsystem als einem klassischen Entwicklungstool.

Sollte mich ein Element an einer Stelle stören, kann ich hier jedoch nicht einfach mit Drag-and-Drop arbeiten, sondern muss auf die KI-Funktion zurückgreifen. Was bei statischen, also festen Websites kein Problem darstellt, kann bei Seiten, die regelmäßig aktualisiert werden sollen, nerven.

Um herauszufinden, was die KI wirklich kann und wie gut das Tool am Ende ist, habe ich drei Websites mit Canva erstellt und angepasst.

Eine To-Do-Liste als Web-App: Website-Test #1

Da Canva selbst vorschlägt, mit einem Gewohnheitentracker zu beginnen, habe ich mich dazu entschieden, gleich mit einer komplexen Aufgabe in den Test zu gehen: einer interaktiven To-Do-Liste mit spielerischen Elementen.

Dafür habe ich zunächst einen Prompt eingegeben, um mir eine normale To-Do-Übersicht zu erstellen, die über die notwendigen Grundlagen funktioniert. So habe ich um eine Website gebeten, die es mir ermöglicht, Aufgaben zu erstellen und in einer Liste zu sammeln.

Die Aufgaben sollten sich dabei nach Prioritäten, Tagen und Daten filtern lassen und je nach Dringlichkeit unterschiedlich angezeigt werden. Etwa durch eine hervorgehobene Box, sofern eine Aufgabe kurz vor dem Ablaufen steht oder bereits abgelaufen ist.

Ich habe mir mit Canva Code 2.0 eine Aufgaben-App fürs Web erstellen lassen. (Bildquelle: GameStar Tech / Aaron Hofmann)

Das hat auf Anhieb gut funktioniert, wobei ich nur die Beschriftung einzelner Elemente geändert habe. Etwa, dass die Wichtig-Box nicht mehr in Capslock geschrieben ist.

Um die KI etwas herauszufordern und das Erledigen der Tasks zu verbessern, habe ich einen weiteren Prompt angegeben, um typische Elemente wie einen Daily Streak, Erfahrungspunkte und eine kleine spielerische Motivation hinzuzufügen. Für meine Web-App habe ich mich für einen Pinguin entschieden, der durch erledigte Aufgaben mit Fisch gefüttert werden kann und sich dann darüber freut.

Ohne zu zögern, hat sich die KI ans Schreiben des Codes gesetzt, wobei sie allein für diesen Befehl angeblich über 400 Zeilen Code erstellt hat. Ich sage bewusst angeblich, da der gesamte Code am Ende aus etwa 350 Zeilen besteht.

Da die Umwandlung zur Gamification-App einwandfrei funktioniert hat, habe ich mir eine zusätzliche Herausforderung für Canvas Code KI überlegt und einen weiteren Prompt verfasst, der die gesamte Website in eine Fitness-App umwandeln soll. Und was soll ich sagen? Auch das hat auf Anhieb fehlerfrei funktioniert!

Mit nur einem Prompt wurde meine To-Do-App zur Fitness-App. (Bildquelle: GameStar Tech / Aaron Hofmann)

Ein moderner Blog: Website-Test #2

Nachdem das Experiment mit der Web-App so gut funktioniert hat, habe ich mich gleich an den zweiten Test gesetzt und innerhalb von kürzester Zeit einen modernen Online-Blog erstellt. Dafür hat die KI im Vergleich zu den anderen Websites definitiv am längsten gebraucht und die Seite erst nach fünf Minuten ausgespuckt – was immer noch extrem beeindruckend ist.

Da ich in der Vergangenheit bereits einen eigenen Blog betrieben habe, habe ich den prompt mit einem ähnlichen Design wie bei meiner alten Website beschrieben. Also klassisch mit Navigationsleiste, chronologischen Beiträgen und Filtern.

Auch ganze Blog-Websites lassen sich mit Canva Code erstellen. (Bildquelle: GameStar Tech / Aaron Hofmann)

Das Thema habe ich hier auf Musik und Entertainment gelegt und nach einem Hybrid zwischen einem Onlinemagazin und einem persönlichen Blog verlangt. Mit einer Ähnlichkeit zu Content-Management-Systemen und Seiten-Baukästen wie Ghost oder Hugo.

Und auch hier lässt sich das Ergebnis sehen, obwohl das Tool statt mehreren Seiten eine One-Page-Lösung geliefert hat. Das ist nämlich eine Limitation des Tools, dass ihr mit dem Code maximal eine Seite pro Prompt anpassen könnt. Strukturierte Websites mit mehreren Unterseiten müssen manuell verknüpft werden.

Um einen ersten Entwurf für den Aufbau eines möglichen Artikels zu bekommen, habe ich deshalb einen zweiten Prompt geschrieben, der auf den bisherigen Vorgaben basiert und schlicht befiehlt, eine passende Seite zu erstellen.

Für meine Blog-Seite habe ich mir ein Artikel-Template erstellen lassen. Der Inhalt wurde komplett von Canva erstellt. (Bildquelle: GameStar Tech / Aaron Hofmann)

Das hat ebenfalls extrem gut funktioniert und die KI hat sich an dem Design des Artikels an dem Stil der Hauptseite orientiert. Die Verlinkung zwischen dem Artikel und der Startseite hat jedoch nicht funktioniert, da mir Canva hier immer wieder Fehlermeldungen geliefert hat.

Solltet ihr die Website nicht auf Canva sondern selbst hosten wollen, dann braucht ihr also doch etwas Programmiererfahrung oder zumindest ein gewisses Codeverständnis, um eure Seite zum Laufen zu bringen. Gerade, wenn ihr mehr als eine statische Seite erstellen wollt.

Ich kann es euch zudem empfehlen, statt Canva ein anderes Tool zu verwenden, wenn ihr einen Blog erstellen wollt, da ihr dann weniger Probleme mit dem Aktualisieren der Website habt. Denn Canva liefert euch kein CMS, nur wenig Anpassungsmöglichkeiten für die Suchmaschine und nur einen Bruchteil des Umfangs anderer, speziell für Blogs entwickelter, Systeme – etwa wie Ghost CMS.

Eine statische Website mit simplen Prompt: Website-Test #3

Um nicht nur besonders komplexe und lange Prompts zu testen, habe ich mir noch eine dritte Website überlegt, die auf einer simplen Idee basiert: eine Übersichtsseite für meine Speedrun-Zeiten bei Portal.

Dafür habe ich die KI um eine Seite gebeten, die mit ihrem Stil zu dem Videospielportal passt und in etwa einer Testkammer ähnelt. Zusätzlich habe ich nach einem Fake-3D-Effekt gefragt, um weiter die Grenzen des Tools herauszufinden.

So sollten etwa meine Speedrun-Zeiten direkt an einer Wand in der Testkammer zu sehen sein. Das hat allerdings nicht funktioniert und ich habe eine alternative, dennoch vollkommen zufriedenstellende Seite bekommen.

Um auch statische Seiten mit einfachen Prompts zu testen, habe ich mir eine Website für meine Portal-Speedrun-Statistiken erstellen lassen. Hier ein Ausschnitt der Seite. (Bildquelle: GameStar Tech / Aaron Hofmann)

Da ich vor kurzem Lumo, die KI von Proton, zum Erstellen von Websites ausprobiert habe, hab ich mir gedacht, dass sich hier ein direkter Vergleich zu Canvas Tool anbieten würde. Denn bei einem Versuch aus der Vergangenheit hat mir Proton auch ein Fake-3D-Rendering durch kleine CSS-Tricks ermöglicht.

Das hat allerdings nicht so gut funktioniert, denn nicht nur, dass das Ergebnis von Lumo ebenfalls nicht meinen genauen Vorstellungen entspricht, hat die Generierung der Seite hier deutlich länger gedauert. Während ich bei Canva etwa eine Minute gewartet habe, hat Lumo ganze 12 Minuten gebraucht.

Mit anderen KIs wie Lumo lassen sich ebenfalls Websites erstellen – oft aber deutlich komplizierter wie im Fall der Portal-Seite. (Bildquelle: GameStar Tech / Aaron Hofmann)

Zudem ist die Seite von Lumo deutlich schlechter optimiert, umfasst mit 823 Zeilen deutlich mehr Code und ist teilweise deutlich unübersichtlicher geschrieben. Hinzu kommt, dass ich bei anderen Tools keine Ansicht der Website habe, wie ich es von Canva kenne. Sollte mich etwas an meiner erzeugten Website stören, muss ich mich zudem durch Code wühlen, was bei Canva ebenfalls wegfällt.

Auffällig war zudem, dass Lumo weiter vom originalen Prompt abgewichen ist und etwa erfundene Daten zu meiner Speedrun-Statistik hinzugefügt hat.

Canva hat definitiv das Potenzial, Web-Entwicklung prägend zu verändern

Der Test hat mir gezeigt, wie genial Canvas neue Code-KI ist. Ich sehe sie als eine echte Chance für Selbstständige und kleine Betriebe, vernünftige Websites zu bauen, ohne gleich viel Geld für eine teure Agentur auszugeben.

Gerade für einfache Basis-Websites eignet sich die KI nämlich sehr gut. Komplexere Elemente brauchen weiterhin erfahrene Entwickler – etwa wenn ihr mit JS-Bibliotheken für besondere Effekte wie echte 3D-Renderings arbeiten wollt.

---

• Ein komplett kostenloses Tool von Google bietet mir mächtige Features zur Bildbearbeitung und verändert massiv, wie ich Fotos bearbeite
• Echte Konkurrenz für Google Docs und Word: ChatGPT wird gerade zu eurem persönlichen Schreibassistenten

---

In einer »Handcrafted«-Website sehe ich nach wie vor deutlich mehr Qualität und Persönlichkeit, auch wenn Canvas KI vielfältig eingesetzt werden kann. Wenn ihr nicht regelmäßig neue Websites erstellt – wovon ich mal ausgehe –, lohnt sich das Tool eher weniger.

Durch die Möglichkeit, den Code zu exportieren, bleibt am Ende ein wirklich nützliches Werkzeug, um ein Grundgerüst für eine Website zu erstellen. Dieses könnt ihr anschließend ganz nach euren eigenen Wünschen und Interessen anpassen – vorausgesetzt natürlich, ihr bringt die nötigen Fähigkeiten mit.