Canvas Designer: entwirft Webseiten live im Chat

Eine KI um eine Website zu bitten und Code zu erhalten, den du erst funktionieren siehst, wenn jemand ihn bereitstellt, ist unnötige Reibung. Canvas Designer verwandelt den ADRI-Chat in einen visuellen Live-Editor: Du siehst die Website sofort gerendert, klickst auf ein beliebiges Element, um es zu prüfen, und bittest die KI um konkrete Änderungen an genau diesem Teil.

Ein visueller Editor innerhalb der Konversation

Die meisten KI-Tools zur Website-Generierung funktionieren nur in eine Richtung: Du beschreibst, was du willst, die KI generiert Code, und du musst ihn bereitstellen oder separat öffnen, um das Ergebnis zu sehen. Canvas Designer beseitigt diesen Zwischenschritt. Das Ergebnis wird live angezeigt, im selben Chat-Fenster, und aktualisiert sich jedes Mal, wenn du eine Änderung anforderst.

Der Designer-Modus fügt eine zusätzliche Ebene hinzu: Du kannst den Dateibaum des Projekts erkunden, den Blickwinkel ändern, um Mobiltelefon, Tablet, Desktop oder Breitbildschirm zu simulieren, und den Zoom anpassen, um die Details eines beliebigen Abschnitts zu prüfen.

Element-Inspektor: Klicken und bearbeiten

Das Herzstück von Canvas Designer ist der Element-Inspektor. Du klickst auf jeden beliebigen Teil der Website, die gerade in der Vorschau angezeigt wird (einen Button, eine Überschrift, ein Bild, einen ganzen Abschnitt), und ein Seitenpanel öffnet sich mit allen relevanten Informationen zu diesem Element: dem CSS-Selektor, den angewendeten Stilen, der Position im Design und dem entsprechenden HTML-Inhalt.

Von dort aus öffnet ein Button "Mit KI bearbeiten" ein Menü mit Schnellaktionen (Farbe ändern, Abstand anpassen, Text ändern, Stil überarbeiten), das automatisch eine gezielte und spezifische Anfrage für ADRI zusammenstellt, anstatt den gesamten Kontext erneut schriftlich beschreiben zu müssen.

Warum es wichtig ist: Von der vagen Beschreibung zur präzisen Anweisung

Eines der größten Probleme beim Anfordern von Designänderungen per Text ist die Mehrdeutigkeit: "Mach den Button größer" kann sich auf jeden der Buttons auf der Seite beziehen. Wenn du direkt auf das Element klickst, das du ändern möchtest, verschwindet diese Mehrdeutigkeit. Die KI weiß genau, auf welchen Teil des Codes sie einwirken muss, was zu schnelleren und präziseren Änderungen führt.

• Weniger Umwege: Die genaue Position eines Elements muss nicht mit Worten beschrieben werden
• Abgegrenzte Änderungen: Die KI ändert nur, was zum ausgewählten Element gehört, ohne den Rest des Designs anzutasten
• Vollständiger visueller Kontext: beim Senden der Änderung werden automatisch Informationen zu Stilen und Struktur des Elements einbezogen

Anwendungsfälle

• Kommerzielle Landingpages: die Seite für eine Dienstleistung oder ein Produkt in Minuten erstellen und verfeinern, Texte und Bilder dabei spontan anpassen
• Schnelle Prototypen: eine Designidee einem Kunden in Echtzeit während eines Meetings zeigen und Dinge nach unmittelbarem Feedback ändern
• Wartung bestehender Websites: gezielte Anpassungen an Stil oder Inhalt anfordern, ohne für jede kleine Änderung von einem Entwickler abhängig zu sein
• Mobile-First-Prüfung: auf einen Blick prüfen, wie das Design in verschiedenen Bildschirmgrößen aussieht, bevor man es freigibt

Fazit

Canvas Designer bringt die KI-Webgenerierung näher an die Arbeitsweise echter Designer: das Ergebnis live sehen, markieren, was geändert werden soll, und schnell iterieren. Es ist nicht nötig, einen separaten Code-Editor zu öffnen oder etwas bereitzustellen, um zu prüfen, ob eine Änderung funktioniert: Alles geschieht innerhalb derselben Unterhaltung mit ADRI.

Möchtest du es mit deinem eigenen Projekt ausprobieren? Fordere eine Demo an oder schreib uns an [email protected].

• Canvas Designer
• Webdesign
• ADRI
• Visueller Editor
• Generative KI