Code-Generierung ermöglicht es dir, benutzerdefinierte interaktive Elemente und Effekte zu deinen Seiten hinzuzufügen.
Im Gegensatz zur Seiten- oder Formularerstellung arbeitest du hier mit Code innerhalb eines speziellen Custom-Code-Rahmens.
Dies ist der Bereich, in dem der KI-Assistent Code-Snippets erzeugen kann, die deine Seite verbessern.
Wie du darauf zugreifst
Du kannst auf den Code-Generator zugreifen, indem du einen Custom-Code-Block auf deiner Seite hinzufügst. Klicke auf den Block und wähle dann KI-Assistent. Von dort aus kannst du mit dem Prompting starten.
Im Gegensatz zu Seiten- oder Formular-Prompts musst du hier präziser sein.
Die Code-Generierung funktioniert mehr wie „AI-native Tools“. Das bedeutet, du solltest genau beschreiben, was du möchtest, manchmal inklusive technischer Details.
Wenn du eine Schritt-für-Schritt-Anleitung zur Nutzung dieser Funktion möchtest, sieh dir unseren Artikel zum KI-Assistenten an.
Was möglich ist
Der KI-Assistent kann viele kleine, aber leistungsstarke Elemente innerhalb des Custom-Code-Rahmens erzeugen, darunter:
Labels und Badges
Diagramme (Balkendiagramme, Kreisdiagramme, Fortschrittsanzeigen)
Rechner (einfach, client-seitige Logik)
Benutzerdefinierte Buttons mit einzigartigem Verhalten
Ganze Sektionen, die im Code gestaltet sind
Elemente mit Effekten, wie Schreibmaschinentext oder animierte Zähler
Im Grunde gilt: Wenn es in den Code-Rahmen passt, kannst du es versuchen.
Was nicht möglich ist
Es gibt einige Einschränkungen, die du beachten solltest:
Keine Back-End-Logik (z. B. Datenbankverbindungen, serverseitige Aktionen)
Keine Effekte, die die gesamte Seite oder große Teile einer Sektion verändern (z. B. vollständig benutzerdefinierte Hintergrundanimationen)
Keine extrem komplexen Anwendungen. Der KI-Assistent eignet sich am besten für fokussierte, leichte Funktionen.
Kein Bearbeiten bestehender Onepage-Elemente
Iterieren im Chat-Modus
Im Gegensatz zu den anderen Generierungsfunktionen (z. B. Seite / Formular) ist die Code-Generierung konversationsbasiert. Du kannst:
Den KI-Assistenten bitten, seinen eigenen Code zu verbessern oder zu korrigieren
So lange iterieren, bis der Code wie gewünscht funktioniert
Bestehenden Code einfügen und den KI-Assistenten bitten, ihn zu ändern
Das macht den Code-Assistenten flexibel, setzt aber voraus, dass du über grundlegende Programmierkenntnisse verfügst. Du musst genug verstehen, um den Code zu testen, anzupassen und vor der Veröffentlichung fertigzustellen.
Das „Cold Start“-Problem überwinden
Wenn du nicht sicher bist, was du anfragen sollst, gibt es einen einfachen Trick: Mach einen Screenshot von etwas, das du woanders gesehen hast. Füge den Screenshot in den KI-Assistenten ein und bitte ihn, den Effekt oder das Element auf deiner Seite nachzubilden.
Der KI-Assistent wird den Screenshot nicht pixelgenau reproduzieren, aber er versteht die Idee und erzeugt etwas Ähnliches. Von dort aus kannst du es Schritt für Schritt verfeinern.
Dies ist eine der schnellsten Methoden, um von null zu einer funktionierenden, benutzerdefinierten Funktion zu gelangen.
Gute Prompt-Beispiele
Hier sind einige Prompts, die gut mit der Code-Generierung funktionieren:
„Erstelle einen Countdown-Timer, der bei 10 Minuten startet und Minuten:Sekunden anzeigt.“
„Füge diesem Text einen Schreibmaschineneffekt hinzu: ‚Wir erstellen KI-Websites schneller als alle anderen.‘“
„Erzeuge eine Fortschrittsanzeige, die bis 75 % gefüllt wird, mit der Beschriftung ‚Projekt abgeschlossen.‘“
„Erstelle einen Button, der seine Farbe beim Überfahren ändert und zur Preissektion verlinkt.“
„Erstelle einen einfachen Rechner, der zwei Zahlen addiert und das Ergebnis anzeigt.“
„Füge einen animierten Zahlenzähler hinzu, der in 3 Sekunden von 0 auf 500 zählt.“
„Erstelle ein Kreisdiagramm, das Sales 60 %, Marketing 25 % und Operations 15 % zeigt.“
„Erstelle ein durchlaufendes Testimonial-Karussell mit 3 Zitaten.“
„Erstelle ein schwebendes Label mit der Aufschrift ‚Neu!‘ in der oberen rechten Ecke eines Produktbildes.“
„Füge einen Button hinzu, der die Seite beim Klicken sanft nach oben scrollt.“
„Erstelle ein Balkendiagramm, das Umsatz, Ausgaben und Gewinn vergleicht.“
„Erstelle einen blinkenden Cursor-Effekt am Ende einer Überschrift.“
„Erstelle ein Karte-Element mit Hover-Animation: leichtes Hereinzoomen und einen Schatten hinzufügen.“
„Füge einen rotierenden Texteffekt hinzu, der zwischen ‚Schnell‘, ‚Flexibel‘ und ‚Leistungsstark‘ wechselt.“
„Erstelle einen Fortschrittskreis, der bis 90 % gefüllt wird, mit der Beschriftung ‚Kundenzufriedenheit.‘“
📝 Zusammenfassung:
Die Code-Generierung eignet sich am besten für kleine, interaktive Funktionen innerhalb des Custom-Code-Blocks.
Sei in deinen Prompts klar, arbeite iterativ über den Chat und zögere nicht, Screenshots als Inspiration zu verwenden.
Mit etwas Ausprobieren kannst du leistungsstarke, benutzerdefinierte Elemente erstellen.
💡Du hast Feedback zu diesem Hilfe-Artikel? Teile es gerne mit uns über den Live-Chat oder an support@onepage.io, damit wir ihn auf dem neuesten Stand halten können. 🙂