Zurück zur Einreichung

Tipps zur Erstellung von Webtools mit KI

Künstliche Intelligenz revolutioniert die Art und Weise, wie wir Webtools erstellen. Mit den richtigen KI-Assistenten können Sie innerhalb weniger Minuten professionelle, funktionsfähige Lerntools entwickeln – ganz ohne Programmierkenntnisse!

Der Schlüssel zum Erfolg liegt in der präzisen Formulierung Ihrer Anforderungen. Mit dem von uns bereitgestellten Prompt-Template können Sie sicherstellen, dass Ihre Tools alle notwendigen Kriterien erfüllen und nahtlos in unsere Plattform integriert werden können.

Die besten KI-Editoren für Code

Claude.ai

Unsere Top-Empfehlung für die Erstellung von Webtools. Claude versteht komplexe Anforderungen hervorragend und erstellt sauberen, funktionalen Code.

Zu Claude.ai

Google AI Studio

Eine solide Alternative mit guter Code-Generierung. Besonders stark bei der Erstellung von interaktiven Elementen und Animationen.

Zu Google AI Studio

Beispielprompt für perfekte Toolgenerierung

Verwenden Sie diesen bewährten Prompt als Grundlage für Ihre Tool-Erstellung. Ersetzen Sie einfach den Platzhalter **!*Hier die Beschreibung eingeben**!* und **!*Hier Alter eingeben**!* mit Ihrer eigenen Tool-Beschreibung:

Verhalte dich wie ein Programmierer. Erstelle eine einzelne funktionsfähige HTML-Datei.
                
Es ist ein Webtool, das **!*Hier die Beschreibung eingeben**!*

Passe Sprache und Inhalt an folgendes Alter der Lernenden an: **!*Hier Alter eingeben**!*

Das html muss zudem folgende Bedingungen erfüllen:
* Erstelle ein funktionsfähiges html inklusive Javascript und CSS. Es muss alles in einer einzelnen html-Datei sein.
* Die Seite muss responsiv gestaltet sein für 4K-Monitore, HD, Computerbildschirme, Tablets und Smartphones.
* Das Design soll modern und beeindruckend wirken: luftiges Layout, großzügiger Einsatz von Whitespace, abgerundete Ecken, Schatteneffekte, Farbverläufe, serifenlose Standardschriftarten (ohne externe Fonts).
* Der Rechtsklick soll deaktiviert sein.
* In der oberen rechten Ecke soll sich ein dezenter, runder Button befinden, mit dem man in den Fullscreen-Modus wechseln und diesen auch wieder verlassen kann.
* Alle Buttons sollen einen Hover-Effekt besitzen (bei Maus) und einen Tooltip anzeigen. Die Tooltips sollen auch bei Touch-Geräten durch kurzes Antippen eingeblendet werden können.
* Die Seite muss auf Smartphones scrollbar sein, um alle Inhalte zugänglich zu machen.
* Alle Funktionen der Seite müssen sowohl per Maus als auch über Touch-Eingabe vollständig nutzbar sein.
* Der gesamte Code soll ohne Kommentare geschrieben sein.

Tipp: Beschreiben Sie Ihr Tool möglichst genau. Je detaillierter Ihre Beschreibung, desto besser wird das Ergebnis. Erwähnen Sie spezifische Funktionen, das gewünschte Aussehen und die Zielgruppe.