TrickleAI

Was ist Trickle AI?

Trickle AI ist eine visuelle AI-Entwicklungsplattform zur Erstellung von Webseiten, Formularen und leichten Webanwendungen, deren Kernprodukt Magic Canvas heißt. Benutzer können ihre Anforderungen in natürlicher Sprache beschreiben und anschließend direkt auf der Leinwand die Seiten, Referenzmaterialien, Versionen sowie die AI-Aktionen einsehen.

Offiziell wird es als ein intelligenter Zeichentisch für Vibe Coding definiert – der Schwerpunkt liegt nicht darauf, nur einen Codeabschnitt zu erzeugen, sondern darauf, dass die Nutzer im Rahmen einer kontinuierlichen Visualisierung gemeinsam mit der KI Design, Funktionen, Daten sowie die Veröffentlichung umsetzen können.

Wie Magic Canvas funktioniert

Herkömmliche AI-Programmierwerkzeuge trennen in der Regel das Chatten, den Code und die Vorschau voneinander – der Benutzer muss daher immer wieder die Positionen der Seiten sowie die zu ändernden Stellen beschreiben. Magic Canvas hingegen bringt Seiten, Regeln, Bilder, Skizzen sowie frühere Versionen in einem einzigen Raum zusammen, wodurch der eigene „Canvas“ zum Kontext wird, den die KI zur Verständnis des Projekts benötigt.

• Erstellung in natürlicher Sprache: Beschreibung von Produkten, Seiten und Funktionen; von KI eine funktionsfähige Erstversion erzeugt.
• Visualisierter Kontext: Referenzdiagramme, Regeln und Seiten werden gemeinsam auf dem Bildschirm dargestellt.
• Mehrpagineneinsatz: Organisation von Startseite, Detailseiten, Anmeldeseite usw. innerhalb desselben Projekts.
• Direkte Bearbeitung: Wählen Sie die Seitelemente aus, um den Text, das Design oder die Position zu ändern – ohne jedes Mal erneut gefragt zu werden.
• Versionen verwalten: Verschiedene Erstellungsresultate werden beibehalten, und frühere Versionen können wiederhergestellt werden.
• Code-Synchronisierung: Visuelle Änderungen werden mit dem zugrunde liegenden Projektcode synchronisiert.
• Einfache Veröffentlichung: Nach Abschluss kann es auf die Domain der Plattform oder auf eine eigene, angepasste Domain veröffentlicht werden.

Hauptfunktionen

• Erstellung von AI-Webseiten und -Anwendungen: Schaffung von Seitenstrukturen, Styles und Interaktionen aus textuellen Anforderungen.
• Integrierte Datenbank: Speichert Formulareingaben und dynamischen Inhalt, ohne dass zunächst ein eigenständiger Backend eingerichtet werden muss.
• KI-Bildmodi: Erstellung, Bearbeitung und Verwaltung von visuellen Elementen auf Seiten.
• Materialverwaltung: Hochladen von Bildern, Verwendung von Bildergalerien oder Einsatz von Rohskizzen.
• Mehrpaginae und Versionen: Seiten im Canvas erweitern und historische Iterationen wiederherstellen.
• Direkte Bearbeitung und Verschiebung: Präzise Anpassungen an ausgewählten Elementen, um die Ressourcenverbrauch zu reduzieren.
• Webhosting: Sowohl kostenlose als auch kostenpflichtige Angebote beinhalten die Plattform-Hosting-Option.
• Domainnamen und Analyse: Die Pay-Version unterstützt benutzerdefinierte Domainnamen, und es sind Zugriffsdaten im Backend einsehbar.
• SEO-Einstellungen: Konfiguration von Titel, Beschreibung, Site-Icon und Informationen für den Sozialen Teilen.
• Drittanbieter-Integration: Die offiziellen Dokumentationen bieten Anleitungen zur Anbindung von Supabase, Stripe und Three.js.

Welche Produkte können erstellt werden?

• Produkt-Website, persönliche Homepage und Marketing-Seiten.
• Seiten für die Einführung neuer Produkte, Veranstaltungsseiten und eine Warteliste.
• Umfragen, Tests, Anmeldungen und von KI unterstützte Formulare.
• Interne Anzeigen, Dateneingabe und leichte Geschäftswerkzeuge.
• Webanwendungen mit Anmeldefunktion, Datenspeicherung und mehrseitiger Struktur.
• Portfolio, interaktive Geschichten und Markenausstellungen.
• Das kleinste funktionsfähige Produkt zur Überprüfung der Marktnachfrage.
• Ein Geschäftsprototyp zur Verbindung externer Datenbanken mit Zahlungsdiensten.

Integrierte Datenbank

Die integrierte Datenbank von Trickle ermöglicht es, mithilfe von Anleitungen Sammlungen zu erstellen und Formulardaten oder Anwendungsdaten in Echtzeit zu speichern. Für Anmeldungen, Rückmeldungen, Wartelisten sowie kleine Inhaltsysteme kann sie die Anzahl der Schritte zur individuellen Konfiguration des Backends verringern.

• Erstellen Sie Felder und Datensätze für die Formularübermittlung.
• Auf der Anwendungsseite werden dynamische Inhalte gelesen und angezeigt.
• Datenstrukturen durch natürliche Sprache hinzufügen oder anpassen.
• Über die Projekt-Backend-Ansicht können gesammelte Aufzeichnungen angezeigt und verwaltet werden.
• Die kostenlose Version unterstützt maximal 100 Zeilen, Pro 1.000 Zeilen und Premium 10.000 Zeilen.
• Für sensible oder hochbelastete Produktionsdaten müssen weiterhin Berechtigungen, Backups sowie Skalierungsanforderungen bewertet werden.

Bildgenerierung und Materialverwaltung

Der Bildmodus ist ein eigenständiger visueller Arbeitsraum, der zum Erstellen, Bearbeiten und Organisieren von Bildern verwendet werden kann, um die Ergebnisse anschließend in Webprojekten einzusetzen. Die offiziellen Dokumentationen unterstützen außerdem das Hochladen eigener Materialien, die Verwendung von Referenzbildern von Unsplash sowie das Zeichnen von Rastergrafiken.

• Erstellung des Hauptvisuellen Elements, von Illustrationen und Interface-Materialien für die Startseite.
• Anpassen Sie anhand der Anweisungen den Hauptinhalt, Hintergrund oder Stil des vorhandenen Bildes.
• Platzieren Sie die Referenzbilder auf dem Canvas, um der KI zu helfen, die gewünschte Richtung zu verstehen.
• Laden Sie das Markenlogo, Produktbilder und eigene Design-Ressourcen hoch.
• Beschreiben Sie die Anordnung mit einfachen Skizzen, anstatt sich nur auf textliche Beschreibungen zu verlassen.
• Vor der Veröffentlichung müssen Lizenzen für Bilder, Porträts von Personen sowie Nutzungsrechte für Marken überprüft werden.

Direkte Bearbeitung und Verschiebung von Elementen

„Direct Edit“ ermöglicht es den Nutzern, die Elemente auf der von KI erstellten Seite auszuwählen und deren Inhalt sowie Design direkt zu ändern. „Move Element“ dient dazu, die Positionen der Elemente anzupassen. Solche manuellen Eingriffe müssen nicht über neue Anweisungen durchgeführt werden, und es werden auch keine zusätzlichen Punkte für die Behebung von Fehlern verbraucht.

• Ändern Sie die Überschriften, Schaltflächen, Beschreibungen und andere Inhalte der Seite.
• Anpassen von Farben, Schriftgröße, Abständen und visuellen Details.
• Elemente verschieben, um die Anordnung auf dem Desktop oder auf mobilen Geräten zu verbessern.
• Erst führt man eine manuelle Feinarbeit durch, anschließend überlässt man der KI die Bearbeitung größerer Strukturänderungen.
• Verringert die Wahrscheinlichkeit von unerwünschten Änderungen auf der ganzen Seite durch wiederholte Anzeigen.

Versionen und mehrseitige Projekte

Magic Canvas bringt die Versionsgeschichte und die Seitenverwaltung in denselben visualisierten Raum. Nutzer können Seiten in verschiedenen Richtungen erstellen, neue Seiten anlegen oder frühere Versionen wiederherstellen – ideal zur schrittweisen Erweiterung von Projekten.

• Erstellen Sie separate Seiten für die Startseite, die Funktionen-Seite, die Preisseite und die Kontaktseite.
• Vergleichen Sie verschiedene Design- und Inhaltsoptionen, anstatt die alte Version sofort zu ersetzen.
• Bei Fehlern oder ungünstiger Richtung auf die vorherige Version zurückkehren.
• Organisieren Sie Referenzen, Seiten und Versionen nach räumlichen Beziehungen, um den Kontext des Projekts beizubehalten.
• Es wird weiterhin empfohlen, vor einer erheblichen Änderung zu überprüfen, ob die Daten und externen Dienste nicht unumkehrbar beeinträchtigt werden.

Domainnamen, Hosting und Webanalyse

Alle Pakete beinhalten Webhosting. Die kostenpflichtigen Optionen bieten eine unterschiedliche Anzahl an Domainnamen sowie möglichkeit zur Verwendung von benutzerdefinierten Domainnamen. Für die Verbindung der Domainnamen ist in der Regel das Hinzufügen eines CNAME-Eintrags sowie die Verifizierung auf der Plattform erforderlich.

Im Analytics-Panel können Daten wie Seitenaufrufe, einzigartige Besucher, Traffic-Trends und Regionen angezeigt werden. Es eignet sich zur grundlegenden Überprüfung, doch für komplexe Attributionen, Datenschutzbestimmungen sowie Geschäftsanalysen sind möglicherweise andere Tools erforderlich.

SEO und Teilen-Einstellungen

• Legen Sie einen Seitentitel fest, damit die Suchergebnisse das Thema der Seite genau widerspiegeln.
• Verfassen Sie eine Metabeschreibung, die den Wert der Seite zusammenfasst, anstatt Keywords anzuhäufen.
• Laden Sie das Site-Icon hoch, um die Browser-Tab-Icons und die Markenidentität zu vereinheitlichen.
• Konfigurieren Sie die Open Graph-Informationen, um die Vorschau bei der Teilen in sozialen Netzwerken zu verbessern.
• Nach dem Go-Live sollten Index, Mobile-Version, Geschwindigkeit und die tatsächliche Suchleistung überprüft werden.
• Von KI erstellte Seiten erhalten keine automatische Platzierung – Inhalt und Qualität der Website bleiben weiterhin entscheidend.

Supabase-Integration

Wenn die Kapazität der integrierten Datenbank oder die Anforderungen an den Backend-Teil unzureichend sind, kann man gemäß den offiziellen Anleitungen Supabase anschließen. Es eignet sich für Projekte, die Authentifizierung, relationale Daten sowie eine umfassendere Kontrolle über den Backend-Teil benötigen.

• Verwenden Sie eigenständige Projekte, um Anwendungsdaten zu speichern.
• Entwerfen Sie die Tabellens Struktur und die Zugriffsstrategie entsprechend den Geschäftsanforderungen.
• Es wird den angemeldeten Benutzern eine kontrollierte Les- und Schreibzugriff auf Daten gewährt.
• Konfigurieren Sie vor dem Go-Live die Zeilenbasierte Sicherheit und die Umgebungs-Schlüssel.
• Lassen Sie keine Dienstschlüssel mit hohen Berechtigungen im Browser sichtbar werden.

Stripe-Zahlungsintegration

Die offiziellen Dokumente liefern Anleitungen zur Integration von Stripe-Zahlungen, die für Produkte, Abonnements oder andere Zahlungsszenarien verwendet werden können. Die Zahlungsfunktion beinhaltet tatsächliches Geld sowie Kundendaten; es reicht daher nicht aus, nur zu überprüfen, ob die Schaltflächen auf der Seite klickbar sind.

• Zuerst sollte das Produkt, der Betrag sowie der Zahlungsprozess in einer Testumgebung überprüft werden.
• Der Server überprüft das Zahlungsergebnis und ist nicht von der Entscheidung der Browser-Seite abhängig.
• Richtige Handhabung von Fehlern, Stornierungen, Rückerstattungen und wiederholten Benachrichtigungen.
• Konfigurieren von Steuern, Währungen, Bedingungen und Prozessen für Kundensupport.
• Überprüfen Sie vor dem Go-Live die Schlüssel, Callbacks, Berechtigungen sowie die Anforderungen an die regionale Konformität.

Three.js und interaktive Erlebnisse

Trickle kann gemäß den offiziellen Anleitungen mit Three.js integriert werden, um 3D-Präsentationen sowie interaktive Seiten zu erstellen. Solche Effekte verbessern die visuelle Darstellung, erhöhen aber auch die Anforderungen an die Ladezeiten, die Kompatibilität auf mobilen Geräten sowie die Bedienbarkeit.

• 3D-Präsentation von Produkten und räumliche Gestaltung der Markenseiten.
• Interaktive Portfolios, experimentelle Projekte und visuelle Geschichten.
• Seite zur Veröffentlichung der Animation oder Seite für kreative Aktionen.
• Für Geräte mit geringer Leistung sollte eine vereinfachte Version bereitgestellt werden.
• Wichtige Informationen und Schaltflächen sollten nicht ausschließlich auf komplexe Animationen angewiesen sein.

Für welche Benutzer geeignet

• Unternehmer und unabhängige Entwickler, die Ideen für Produkte schnell überprüfen müssen.
• Marketing-Mitarbeiter, die hoffen, Landing Pages und Veranstaltungsseiten selbst erstellen zu können.
• Designer, die der visuellen Gestaltung große Bedeutung beimessen, aber mit den vollständigen Frontend-Technologien nicht vertraut sind.
• Es sind Geschäftsteams erforderlich, die interne Tools und Formulare entwickeln.
• Produktmanager, die mit natürlicher Sprache Prototypen beschleunigen möchten.
• Freiberufler, die eine erste Version der Kunden-Website schnell fertigstellen müssen.
• Ingenieure, die bereit sind, Sicherheit und Code zu überprüfen und KI als Entwicklungs-Hilfsmittel einzusetzen.

Typische Anwendungsszenarien

• Innerhalb eines Tages die offizielle Website für das neue Produkt sowie die Warteliste erstellen.
• Die Anforderungen der Veranstaltung in eine Anmelde-Seite sowie Tabellen für die Backend-Daten umwandeln.
• Erstellung interaktiver Tools mit Tests, Ergebnisseiten und Datenerfassung.
• Erstellung einer leichten Anwendung für die Eingabe und Darstellung von Informationen für interne Teams.
• Erstellen von mehreren Versionen von Landing Pages zur Testung von Informationen und Design.
• Verbinden Sie Supabase, um ein MVP mit Anmeldefunktion und dynamischen Daten zu erstellen.
• Verbindet den Stripe-Verifizierungsprozess mit Produkten oder Abonnements, die per Zahlung bezahlt werden.

Trickle AI-Grundlagenleitfaden für die Erstellung einer Website

1. Definieren Sie die Ziele der Website, die Zielgruppe, die Liste der Seiten sowie die von den Nutzern auszuführenden Aktionen.
2. Erstellen Sie ein Projekt und beschreiben Sie in Magic Canvas die Marke, die Struktur, den Stil und die Funktionen.
3. Fügen Sie das Logo, Produktbilder, Referenzseiten und Regeln als Kontext auf das Canvas hinzu.
4. Lassen Sie die KI die erste Seite erstellen und passen Sie anschließend den Text sowie die visuellen Details direkt an.
5. Erstellen Sie weitere Seiten und überprüfen Sie die Navigation, Links sowie die Benutzererfahrung auf Mobilgeräten und für Menschen mit Behinderungen.
6. Wenn Daten gesammelt werden müssen, wird eine eingebaute Datenbank konfiguriert oder ein externer Backend angebunden.
7. SEO, Domain- und Analyseeinstellungen ergänzen, nach Abschluss der Formular- und Sicherheitstests veröffentlichen.

Prozess zur Veröffentlichung einer Webanwendung

1. Führen Sie mit Testdaten den Kernweg aus, einschließlich Registrierung, Einreichung, Zahlung oder Backend-Operationen.
2. Überprüfen Sie die Regeln für den Zugriff auf die Datenbank, um sicherzustellen, dass Benutzer keine Daten anderer lesen oder ändern können.
3. Überprüfen Sie alle Umgebungs-Schlüssel, um zu verhindern, dass Anmeldeinformationen mit hohen Berechtigungen an die Frontend-Seite gelangen.
4. Behandlung von fehlgeschlagenen Netzwerktests, wiederholten Einreichungen, leeren Daten und abnormalen Eingaben.
5. Erstellen Sie formelle Seiten für Privatsphäre, Bedingungen, Rückerstattungen und Kundensupport.
6. Verbinden Sie die Domain und überprüfen Sie die Leistung auf Desktop, Handy und gängigen Browsern.
7. Nach dem Go-Live sollten Fehler, Punkte, die Kapazität der Datenbank sowie die Zugriffstrends überwacht werden, um rechtzeitig Anpassungen vorzunehmen.

Preise und Pakete

Stand der Überprüfung bietet Trickle monatliche Abonnementpläne in den Versionen Free, Pro und Premium an. Auf der offiziellen Preisseite wird für Pro 17 US-Dollar pro Monat und für Premium 42 US-Dollar pro Monat angegeben. Zusätzliche Punktpakete können separat erworben werden.

Zusätzliche Punktpakete

Wie werden Punkte verbraucht?

• Die Plattform verwendet zunächst die monatlichen kostenlosen Punkte, danach die Paketpunkte und schließlich die Zusatzpunkte.
• Der Verbrauch pro Hinweis wird im Antwortbereich der KI angezeigt.
• Beim Beheben eines Fehlers mit „Fix error“ werden keine zusätzlichen Punkte verbraucht.
• Der Energieverbrauch bei verschiedenen Aufgaben kann unterschiedlich sein; dies sollte in einem realen Projekt beobachtet werden.
• Die Punkte in der kostenlosen Version sind täglich begrenzt und können im Monat insgesamt 350 erreichen.
• Preise, Punkte und Vorteile können sich ändern; es gelten die Angaben auf der aktuellen Konto- und Abrechnungsseite.

Wie wählt man ein Paket aus?

Vorteile des Produkts

• Das Canvas verwandelt Seiten, Ressourcen, Regeln und Versionen in einen kontinuierlich sichtbaren Projektkontext.
• Kombination von natürlicher Sprachgenerierung und direkter Bearbeitung – für Geschwindigkeit und lokale Kontrolle.
• Integrierte Datenbanken, Hosting, Domainnamen, Analyse und SEO – dadurch wird die Notwendigkeit, früher verschiedene Tools zusammenzusetzen, reduziert.
• Unterstützt die Erstellung von Bildern und visuellen Referenzen – geeignet für Nutzer, die Wert auf die Gestaltung der Seite legen.
• Mehrpaginierter und versionierter Wiederherstellungsprozess eignet sich besser für kontinuierliche Iterationen als die Erstellung in einem einzigen Chat.
• Die Anleitungen für Supabase, Stripe und Three.js erweitern die Möglichkeiten im Bereich Backend, Zahlungen und Interaktion.
• Das kostenlose Angebot ermöglicht es, die tatsächlichen Ergebnisse vor der Bezahlung zu überprüfen.

Einsatzbeschränkungen und Hinweise

• Die Erzeugung natürlicher Sprache kann keine Garantie für die Korrektheit der Geschäftslogik, Berechtigungen und Zahlungssicherheit bieten.
• Die kostenlose Version bietet begrenzte Projekte, Datenbanken und Punktkapazitäten; komplexe Projekte erreichen schnell ihre Grenzen.
• KI kann bei der Anpassung lokaler Anforderungen andere Seiten beeinflussen, wofür Versionen- und Regressionstests erforderlich sind.
• Integrierte Datenbanken eignen sich für leichte Anwendungen; hohe Konkurrenzlast, komplexe Beziehungen sowie strenge Berechtigungsanforderungen erfordern eine separate Bewertung.
• Eigene Domainnamen sind nur in den kostenpflichtigen Paketen verfügbar, und ihre Anzahl ist durch das Paket begrenzt.
• Externe Integration erhöht die Risiken im Zusammenhang mit Schlüsseln, Callbacks, Privatsphäre und Abhängigkeit von Lieferanten.
• Für die Erstellung von Bildern und Seiteninhalten müssen weiterhin Urheberrechte, Markenrechte sowie Genehmigungen für das Gebrauch von Porträts überprüft werden.
• Plattformhosting und proprietäre Technologien führen zu Abhängigkeiten vom Anbieter; für wichtige Projekte sollten Migrationspläne erstellt werden.

Unterschiede zu herkömmlichen toolbasierten Methoden zum Erstellen von Webseiten ohne Programmierung

GitHub und der Open-Source-Zustand

Trickle verfügt über eine GitHub-Organisation mit dem Namen trickleai und stellt einige Repositorien öffentlich zur Verfügung, doch Magic Canvas, die Hosting-Dienste, die integrierte Datenbank sowie die kommerzielle Plattform wurden nicht als vollständige Open-Source-Projekte veröffentlicht. Bei der Suche finden sich außerdem mehrere Web3-, Python- oder Bandbreitentools mit demselben Namen, die nicht als Quellcode dieses Produkts angesehen werden können.

Grundlegende Informationen

Empfehlungswert

4,4 / 5. Trickle AIs Magic Canvas bringt Anleitungen, Designs, Materialien, Versionen und Veröffentlichungen in einem einzigen visualisierten Raum zusammen – ideal zum schnellen Erstellen von Webseiten und leichten Anwendungen. Bei Konten, Zahlungen, sensiblen Daten sowie komplexen Backend-Systemen sind jedoch weiterhin eine professionelle Sicherheitsprüfung sowie umfassende Tests erforderlich.

Häufige Fragen

Was macht Trickle AI hauptsächlich?

Es erstellt über natürliche Sprache und visuelle Werkbänke veröffentlichte Websites, Formulare, Landingpages, interne Tools und leichte Webanwendungen.

Ist Trickle AI kostenlos?

Es gibt ein kostenloses Paket, das täglich 70 Punkte bietet – maximal 350 Punkte pro Monat. Mit diesem Paket können bis zu 3 Projekte erstellt werden und es stehen 100 Datensätze zur Verfügung.

Wie viel kostet das Pro-Paket?

Offiziell wird derzeit 17 Dollar pro Monat angegeben, was 1500 Paketpunkte, 350 kostenlose Punkte, unbegrenzte Projekte sowie eine eigene Domain beinhaltet.

Kann man seine eigene Domain verbinden?

Ja, Pro unterstützt eine benannte Domain, Premium unterstützt drei. In der Regel ist es notwendig, CNAME-Einträge zu konfigurieren und zu überprüfen.

Kann man eine Website mit mehreren Seiten erstellen?

Ja, Magic Canvas ermöglicht es, in einem Projekt mehrere Seiten zu erstellen und zu organisieren sowie verschiedene Versionen zu speichern.

Gibt es eine Datenbank?

Es gibt eine integrierte Datenbank: Die kostenlose Version bietet 100 Zeilen, Pro 1000 Zeilen und Premium 10.000 Zeilen. Außerdem kann bei Bedarf Supabase angeschlossen werden.

Kann man Stripe für die Zahlungseingänge nutzen?

Die offiziellen Anleitungen zur Integration von Stripe sind verfügbar, doch vor der Veröffentlichung müssen Serverseitige Überprüfungen, Callbacks, Rückerstattungen sowie die Sicherheit der Schlüssel getestet werden.

Verbraucht die direkte Bearbeitung Punkte?

Laut den offiziellen Anweisungen kann man Elemente direkt bearbeiten und verschieben, um die Seite zu optimieren. Die Korrektur von Fehlern verbraucht keine zusätzlichen Punkte.

Eignet sich Trickle für formelle Produktionsanwendungen?

Echte Produkte können veröffentlicht werden, doch Konten, Zahlungen, sensible Daten sowie komplexe Berechtigungsanfragen müssen einer Prüfung hinsichtlich Ingenieurwesen, Sicherheit und Konformität unterzogen werden.

Ist Trickle AI open source?

Es handelt sich nicht um eine vollständig open-source-Plattform – die offiziellen GitHub-Repositorien enthalten nicht den gesamten Quellcode von Magic Canvas sowie der kommerziellen Dienste.