Der Baukasten: Durchsuchen, Vorschauen und ein Modul hinzufügen

Der Explorer hat genau drei Ebenen, und jede lebt in der eigenen Adresse der Seite, nicht nur im Komponentenstatus: das Kategorienraster (/projects/kit oder /projects/<id>/kit), die Modulliste einer einzelnen Kategorie (mit ?cat=<key>) und die Detailseite eines Moduls (mit &module=<id>). Dadurch funktioniert die Zurück-Taste des Browsers immer richtig, und die Detailseite eines bestimmten Moduls ist ein echter, teilbarer Link – schicke jemandem direkt „Hier ist genau das, was dir das Angebots- oder Schätzungsanfrage-Formular bringt“, statt zu beschreiben, wo er klicken muss. Escape geht wie Zurück jeweils eine Ebene zurück.

Wird die Seite aus einem Projekt heraus geöffnet (/projects/<id>/kit), weiß sie, welches Projekt du gerade ansiehst, zeigt, was schon darin enthalten ist, und lässt dich direkt dorthin hinzufügen. Wird sie eigenständig geöffnet (/projects/kit, über den Link im Kit-Tab oder direkt), gibt es dieselben drei Ebenen ohne projektspezifische Inhalte – nützlich zum Durchstöbern, bevor du entschieden hast, was du bauen willst, oder um jemandem den Katalog zu zeigen, ohne ein bestimmtes Projekt zu öffnen.

Oben im Kategorienraster teilt derselbe Zweiwege-Schalter wie überall in aiKit den gesamten Katalog auf: Website-Kit sind Bereiche und Funktionen, die Teil der Website oder App selbst werden (Seiten, Formulare, Galerien, Shop, Buchung, SEO); Geschäftstools-Kit sind Werkzeuge, die neben dem Projekt statt darin laufen (Marketing-Automatisierung, Rechnungsstellung, CRM, Teamtools, Berichte). Jede Kategoriekachel zeigt, wie viele Module sie hat, und ein Abzeichen „N sofort verfügbar“, sobald mindestens eines davon ein sofort verfügbares Modul ist (siehe unten).

Das Suchfeld über den Kategorien sucht im GESAMTEN Katalog gleichzeitig nach Modulnamen oder Beschreibungen – sowohl Website-Kit als auch Geschäftstools-Kit, unabhängig vom gewählten Schalter. Wenn du also „Rechnung“ suchst, findest du es auch, während du dir gerade Website-Kit ansiehst.

Wird die Seite aus einem Projekt heraus geöffnet, und nur solange du nicht suchst, erscheint über dem Kategorienraster eine Zeile „Für dieses Projekt empfohlen“, sobald aiKit echte Vorschläge hat: einfache Regeln ohne KI, die auf die Art des Projekts abgestimmt sind (eine Website bekommt ein Angebotsformular, ein Kontaktformular, eine Bewertungsübersicht, lokale SEO und FAQ-Seiten vorgeschlagen; ein Online-Shop bekommt Warenkorb und Kasse, Wiederherstellung abgebrochener Warenkörbe und Produktbewertungen; und so weiter für Landingpages, Apps, Verwaltungssysteme, Dashboards, Kundenportale, Blogs und Marketing-Automatisierungsprojekte), dazu einige Stichwort-Treffer im Zieltext des Projekts (wenn „Angebot“, „Buchung“, „Bewertung“, „E-Mail“, „Rechnung“ oder „online verkaufen“ vorkommt, erscheint das passende Modul mit seinem eigenen einzeiligen Grund). Alles, was bereits im Projekt ist, wird ausgelassen, und die Liste ist auf sechs begrenzt.

Jedes Modul trägt eine von zwei Statusmarken, und die Formulierung ist bewusst wörtlich gemeint, nicht als Werbesprache. „Sofort verfügbar“ bedeutet, dass das Modul eines der getesteten Module der Build-Engine ist – echter Code, der eine tatsächliche Seite mit Beispieldaten anstelle deiner Angaben darstellt, genau die gleiche Vorlage, die eine Live-Website bekommt. „Für dich gebaut“ bedeutet, dass das Modul ein echter, geplanter Teil des Katalogs ist, den noch nichts darstellt: Wenn du es auswählst, wird es dem Plan hinzugefügt und ein echter Arbeitsauftrag angelegt, und das Modul wird in den eigenen Code der Website gebaut, in deiner eigenen Marke und deinem eigenen Wortlaut, so wie jede andere KI-Bearbeitung – es gibt nur heute noch keine getestete Vorlage, die bereitliegt.

Keiner der beiden Status bedeutet „nicht echt“ oder „hypothetisch“. Beide sind Dinge, die aiKit tatsächlich für dich bauen wird. Der einzige Unterschied, den die Marke anzeigt, ist, ob du die fertige Form schon jetzt sehen kannst oder sie dir anhand einer Beschreibung und eines Diagramms vorstellen musst.

Öffnest du eine Kategorie, siehst du jedes Modul darin als Karte: eine Miniatur, den Namen des Moduls, seine Statusmarke, eine kurze einzeilige Beschreibung, eine Zeile mit Chips „Am besten geeignet für“ (bis zu drei) und „In diesem Projekt“, falls es bereits hinzugefügt wurde (wenn du innerhalb eines Projekts stöberst). Die Miniatur eines sofort verfügbaren Moduls ist eine kleine Live-Vorschau der echten Seite – sie wird erst geladen, sobald sie ins Sichtfeld scrollt, und auf dem Bildschirm sind höchstens sechs Live-Miniaturen gleichzeitig, damit eine lange Kategorie die Seite nicht ausbremst; alles darüber hinaus zeigt einen einfachen Ladeplatzhalter, bis es tatsächlich sichtbar ist. Die Miniatur eines Für-dich-gebaut-Moduls ist dieselbe illustrative Darstellung, die unten beschrieben ist, nur kleiner – außer bei Modulen mit funktionierender Vorschau (siehe unten): Deren Karte zeigt die echte Beispiel-Website verkleinert, ein Abzeichen „Funktionierende Vorschau · N Varianten“ und eine Schaltfläche „Ansehen“ statt „Details ansehen“. „Details ansehen“ öffnet die eigene Seite des Moduls.

Bei einem Modul „Sofort verfügbar“ ist die Vorschau ein echtes iframe der tatsächlich getesteten Seite in voller Größe, eingerahmt wie ein kleines Browserfenster, mit einem Umschalter Desktop/Telefon, der den Rahmen tatsächlich verkleinert, damit Sie sehen, wie die Seite auf einem Handy wirkt (auf einem echten Telefon wird der Umschalter durch eine einfache Beschriftung „Telefonvorschau“ ersetzt, und der Rahmen öffnet sich direkt am Formular, damit Sie die Felder sehen und nicht nur den Kopfbereich). Der Rahmen blendet unten aus; „Vollständige Vorschau öffnen“ darunter öffnet die ganze Seite in einem neuen Tab, und eine Bildunterschrift darunter nennt das Beispielunternehmen, dessen Daten hier stellvertretend verwendet werden. Innerhalb eines Projekts wechselt der Schalter „In den Farben dieser Website anzeigen“ die Vorschau auf die eigenen Markenfarben des Projekts (direkt aus den #Hex-Codes in den Markenhinweisen des Briefings gelesen) und ersetzt den Projektnamen, sodass Sie etwas sehen, das Ihrer echten Website näherkommt und nicht nur eine allgemeine Musterseite ist.

Bei einem Modul „Für Sie gebaut“ gibt es kein Live-iframe. Stattdessen sehen Sie dieselbe illustrative Skizze wie in der Kategorieliste, nur größer gezeichnet: ein schlichtes SVG-Diagramm mit einfachen Linien, das die Form des Layouts zeigt (die Felder eines Formulars, das Raster eines Kalenders, die Kacheln eines Dashboards, je nachdem, welche Art Bildschirm zum Modul passt), dazu einige kurze Beschriftungen aus den Vorschaudaten des Moduls. Darunter steht immer eine Bildunterschrift, die nie entfernt wird: „Illustration des Layouts. Ihre Version ist so gestaltet, dass sie zu Ihrer Website passt.“ Sie soll verhindern, dass eine Skizze der Form mit einer fertigen, markengerechten Vorschau verwechselt wird.

Funktionierende Vorschauen (2026-10-04): Eine wachsende Zahl von Modulen „Für Sie gebaut“ verzichtet auf die Skizze und öffnet stattdessen eine vollständige, klickbare Beispielseite, die über die volle Breite oberhalb der Details angezeigt wird. Alle zwölf Module für E-Commerce / Online-Shop öffnen denselben Beispiel-Töpferladen Juniper Kiln, jeweils mit dem Teil, um den es im Modul geht: der Katalog (filtern, sortieren, suchen, ein Produkt öffnen und eine Glasur und Größe wählen – Bild und Preis ändern sich), Warenkorb und Kasse (Mengen ändern, Artikel entfernen, WELCOME10, FREESHIP oder GIFT-2580 eingeben, die Lieferung über die PLZ schätzen und zur Bestätigungsseite zur Kasse gehen), Zahlungsoptionen (Karte, Pay in 4 und Wallet-Schaltflächen), Versandkosten, Rabattcodes und Geschenkkarten, Produktbewertungen (nach Sternen oder Fotos filtern, als hilfreich markieren, eine schreiben), Bundles und Zusatzoptionen, Umsatzsteuer (den Liefer-Bundesstaat ändern, und die Steuerzeile ändert sich), Kundenkonten (anmelden, erneut kaufen, ein Paket verfolgen, eine Rücksendung starten), Bestell-E-Mails (Bestätigung, Versandt- und Zustellungs-E-Mail, mit funktionierender Sendungsverfolgungsseite), Rücksendungen und Umtausch (Bestellung finden, Artikel und Grund wählen, ein Rücksendeetikett erhalten) sowie Lagerbestand (eine Ansicht für den Inhaber, in der eine Bestandsänderung ändert, was Kunden sehen). Alle zehn Module für Online-Kurse und digitale Produkte öffnen eine Beispiel-Brotschule namens Rise & Crumb: eine Lektion abspielen (Tempo, Untertitel), als abgeschlossen markieren, zusehen, wie der Fortschrittsring sich füllt, das Quiz machen, über die kostenlose Vorschau einschreiben, das Zertifikat ansehen, unter einer Lektion eine Frage stellen, ein digitales Download kaufen, ein Kursbundle wählen oder ein Zusatzangebot an der Kasse ankreuzen und in die Ansicht für den Inhaber wechseln, um Lektionen umzubenennen, neu anzuordnen, hinzuzufügen oder zurückzuziehen und festzulegen, wann jede Woche freigeschaltet wird. Beim Modul Veröffentlichungsplan gibt es oberhalb des Rahmens eine Zeile „Vorschauzeit“ mit „Eine Woche vorspulen“ (und „Zurück zu heute“), damit Sie sehen, wie gesperrte Lektionen an ihren Terminen freigeschaltet werden.

Oberhalb des Rahmens: eine Reihe von Auswahlmöglichkeiten für jede Variante, die das Modul bietet (zum Beispiel Shop-Layout: Raster, Liste oder Empfohlen; Warenkorb: Ausklappbarer Warenkorb oder Warenkorbseite plus Kasse: Eine Seite oder Schritt für Schritt; Freigaberegel: An festen Terminen, Tage nach dem Beitritt oder Nach Abschluss der letzten Lektion). Eine Auswahl zeichnet die Beispielseite sofort in dieser Variante neu und wird in der Seitenadresse gespeichert (?v=…), sodass ein Link zu einer bestimmten Variante geteilt werden kann. Desktop und Telefon verkleinern den Rahmen, sodass die Beispielseite so umbricht, wie sie auf einem Handy aussehen würde (auf einem echten Telefon steht hier eine einfache Beschriftung „Telefonansicht“). Zurücksetzen bringt die Beispielseite in ihren Ausgangszustand zurück. Eine kurze Zeile „Was Sie tun können“ listet auf, worauf Sie zuerst klicken sollten, und die Beschreibung jeder gewählten Variante steht unter dem Rahmen. Innerhalb eines Projekts mit Markenfarben im Briefing tauscht „In den Farben dieser Website anzeigen“ die Hauptfarbe der Beispielseite gegen die eigene Farbe des Projekts aus (nur wenn diese Farbe dunkel genug ist, damit weißer Schaltflächentext gut lesbar bleibt).

Nichts in einer funktionierenden Vorschau erreicht einen Server. Es gibt keine Zahlungsanbindung: Die Kasse ist mit „Vorschau – es wird nichts berechnet und keine Bestellung gesendet“ gekennzeichnet, die Kartennummer ist ein festes, nur lesbares Beispiel, und Wallet-Schaltflächen (Apple Pay, Google Pay, PayPal) zeigen nur einen Hinweis. Es wird keine E-Mail versendet, keine Bewertung veröffentlicht und nichts gespeichert; wenn Sie die Seite verlassen, ist alles vergessen. Die Beispielunternehmen, Produkte, Personen und Preise sind erfunden. Die Bildunterschrift unter dem Rahmen sagt das deutlich: „Funktionierende Vorschau mit Beispieldaten für ein erfundenes Unternehmen. Ihre Version verwendet Ihre eigenen Produkte, Preise, Texte und Ihre Marke. Hier wird nichts berechnet, gespeichert oder versendet.“ Jedes andere Modul „Für Sie gebaut“ zeigt weiterhin die Layout-Illustration.

• Was der Besucher sieht – eine nummerierte, verständliche Schritt-für-Schritt-Beschreibung dessen, was eine Person bei der Nutzung des Moduls tatsächlich erlebt.
• Was Sie erhalten – was das Modul dem Projektinhaber übergibt (Leads, die an einem echten Ort erfasst werden, ein Status, den Sie aktualisieren können, und so weiter).
• Funktionen und – nur bei einem Modul mit echten, im Katalog definierten Varianten – eine Gruppe auswählbarer Karten „Variante wählen“ direkt in diesem Abschnitt (die erste ist standardmäßig ausgewählt und mit einem kleinen Häkchen markiert), sodass eine echte Entweder-oder-Wahl hier getroffen wird und nicht von Hand ausgeschrieben werden muss.
• Warum es wichtig ist – der ehrliche Grund, warum ein Unternehmen es haben möchte.
• Wie es sich anpassen lässt (Sofort verfügbar) bzw. Varianten zur Auswahl (Für Sie gebaut) – was daran tatsächlich anders gestaltet werden kann.
• Ideal für – dieselben Branchen-Chips wie auf der Karte, hier vollständig angezeigt.
• So entsteht es: ein Satz, der genau erklärt, wie dieses Modul entsteht (eine getestete Seite, die die Engine bereits heute ausgibt, oder etwas, das die KI während eines Builds in die Website einbaut), mit einem Hinweis, falls ein Drittanbieter-Konto wie Zahlungen oder Karten nötig ist.

Ganz unten steht „Zu <Projektname> hinzufügen“ (oder „Zu Ihrem Projekt“, wenn noch kein Projekt gewählt ist). Wenn für das Modul Anpassungsideen hinterlegt sind, werden sie zuerst als Checkliste angezeigt – mit der Bezeichnung „Vorgeschlagene Anpassungen“ bei einem sofort verfügbaren Modul bzw. „Wählen Sie die gewünschten Varianten“ bei einem für Sie erstellten Modul. Wenn Sie eine davon markieren, wird genau diese Zeile in das Gesendete übernommen und ist nicht nur ein stilles Kästchen.

Bei einem Modul mit funktionierender Vorschau steht das Panel in der linken Spalte unter der Vorschau und beginnt mit »Deine Variante« – die Variante, die du in den Auswahlzeilen der Vorschau gewählt hast (zum Beispiel »Warenkorb: Warenkorbseite · Kasse: Schritt für Schritt«). Was beim Klick auf Hinzufügen in der Vorschau zu sehen ist, wird gespeichert: Es landet im Briefing des Projekts zusammen mit dem Modul, und der Arbeitseintrag lautet »Variante: …«, damit derjenige, der baut, genau dieses Layout umsetzt. Hat ein Modul zusätzlich benannte Optionen im Abschnitt Funktionen, fragt es dort »Was ist dir am wichtigsten?«, damit die beiden Auswahlen nicht verwechselt werden.

»Was soll bei dir anders sein?« ist ein Freitextfeld mit derselben Diktierfunktion wie überall in aiKit, dazu eine Schaltfläche »Foto oder PDF anhängen« (nur Bilder und PDFs, bis zu 2,5 MB je Datei) für ein Logo, ein Referenzfoto oder ein Datenblatt. Angehängte Dateien erscheinen direkt dort als entfernbare Chips. Braucht das Modul konkrete Fragen, die vor dem Bauen geklärt werden müssen, erscheinen sie unter »Was wir dich fragen werden«, jede mit einem eigenen optionalen Textfeld. So kannst du sie gleich beantworten, statt später gefragt zu werden.

»Zum Plan hinzufügen« ist immer verfügbar, sobald du in einem echten Projekt bist: Es speichert die Auswahl im Briefing des Projekts (demselben Plan, aus dem die Seite Website-Plan und die Projektseite lesen) und legt einen echten Arbeitseintrag im Feedback-Tab an, der mit »Warten auf uns« markiert ist – genau wie jede andere Anfrage. »Hinzufügen und jetzt bauen« steht daneben erst, wenn das Projekt bereits echte Dateien zum Bearbeiten hat – der erste Build ist fertig oder die Seite ist bereits live. Es tut dasselbe und startet dann sofort denselben Arbeitseintrag im selben KI-Editor, den auch »Mit KI korrigieren« verwendet, ohne eigene Warteschlange. Ein Modul, das bereits im Projekt ist, wird mit der klaren Meldung »bereits in diesem Projekt« abgelehnt, statt ein Duplikat anzulegen.

Nach dem Senden ersetzt eine Bestätigung die Schaltflächen und zeigt, was tatsächlich passiert ist: die schlichte Meldung »Zum Plan als Arbeitseintrag hinzugefügt« oder bei einer Anfrage zum sofortigen Bauen den echten Status (gestartet oder der konkrete Grund, warum nicht, etwa das Warten auf die Freigabe vor dem Veröffentlichen). Dazu gibt es zwei Links direkt zu »Plan öffnen« und »Anfragen ansehen«, damit du nie im Unklaren bleibst, wo etwas gelandet ist.

Unter /projects/kit – mit derselben echten Anmeldung wie im restlichen Dashboard für gehostete Projekte, ohne dass ein Projekt nötig ist – funktioniert alles genauso, bis du etwas hinzufügen möchtest. Ein Klick auf »Zu einem Projekt hinzufügen« (die Schaltfläche heißt so statt »Zum Plan hinzufügen«, wenn kein Projekt geladen ist) öffnet »Zu welchem Projekt hinzufügen?«, eine kleine Auswahl mit allen Projekten deines Kontos. Wählst du eines aus, gelangst du direkt zum Kit-Explorer dieses Projekts, wobei genau dasselbe Modul noch geöffnet ist und du das Hinzufügen abschließen kannst. Hast du noch keine Projekte, sagt die Auswahl das klar und bietet einen direkten Link »Projekt starten →« an, statt dich festsitzen zu lassen.