Website-Baukasten · Entwicklung
React-Websites, die Sie visuell und mit KI gestalten
Beschreiben Sie Ihr Projekt und geben Sie den Brief frei. Swizz.ai erstellt eine mehrseitige Website mit React, TypeScript und Tailwind CSS, die Sie in einer Live-Vorschau mit visuellem Inspector und KI auf Element-Ebene verfeinern.
In der App heisst er Professional Builder: Wählen Sie «Webseite» und dann «Professional Builder entdecken».
- React, TypeScript und Tailwind CSS
- Desktop, Tablet und Mobil separat bearbeiten
- 44 Website-Sprachen, auch von rechts nach links
- Ihre letzten 50 Versionen, Wiederherstellung per Klick
So funktioniert es
Vom Brief zur React-Website in vier Schritten
Dieselben vier Schritte wie in der App. Die Content-Auswahl ist optional: Was Sie offen lassen, entscheidet Swizz.
Veröffentlichen und eigene Domains sind in den kostenpflichtigen Plänen enthalten.
Ausprobieren
Visuelle Änderungen, in Ihrem React-Quellcode gespeichert
Wählen Sie ein Gerät, bewegen Sie einen Regler und sehen Sie die Vorschau mitlaufen. Beim Speichern landen die Änderungen als Tailwind-Klassen in Ihrem React-Quellcode: Mobil schreibt Basisklassen, Tablet ergänzt md: und Desktop ergänzt lg:.
Gerät
Änderungen gelten nur in Desktop-Grösse
Typografie
Abstände
Farben
Farben gelten auf jedem Gerät
In Ihrem React-Quellcode gespeichert
BeispielNur zur Veranschaulichung: In der App arbeiten Sie mit den Reglern, es gibt keinen Code zu bearbeiten.
In der App heisst er Professional Builder: Wählen Sie «Webseite» und dann «Professional Builder entdecken».
Der Workspace
Ein Workspace für jede Art von Änderung
Ihre Website läuft während der Bearbeitung in einer Live-Vorschau. Ändern Sie ein einzelnes Element oder die ganze Seite mit KI, justieren Sie Stile und nehmen Sie jede Änderung zurück.
KI-Chat pro Element
Klicken Sie ein Element an und sagen Sie der KI, was sich ändern soll. Sie bearbeitet genau dieses Element und zeigt Ihnen jeden Schritt.
Inspector & Zustände
Passen Sie Layout, Abstände, Typografie, Farben, Rahmen und Effekte an, bearbeiten Sie Text und Links im Element und gestalten Sie die Zustände Hover, Fokus, Aktiv und Deaktiviert.
Ebenen & Sektionen
Sortieren, duplizieren, benennen, verbergen oder löschen Sie Sektionen, oder fügen Sie fertige Hero-, Preis-, Testimonial-, FAQ- oder Galerie-Sektionen ein.
Versionsverlauf
Versionen werden beim Arbeiten automatisch gespeichert, auch bei KI-Änderungen, visuellen Änderungen und Wiederherstellungen. Sehen Sie sich Ihre letzten 50 an und stellen Sie eine per Klick wieder her.
Selbstheilende Vorschau
Wenn die Vorschau bricht, sucht die KI die Ursache und versucht selbst eine Lösung. Klappt das nicht, sagt sie es, und Sie beschreiben das Problem im Chat.
Beispiele
Ein Baukasten, viele Arten von Websites
Drei Websites für erfundene Marken, jede aus einem Schnellstart-Typ und in einer anderen Sprache.
- Tech / SaaSEnglish
Tallyfern
Die Website einer Rechnungs-App mit Funktionen, Preisen und Anmeldung.
- AnwaltskanzleiDeutsch
Kanzlei Almrain
Eine deutschsprachige Kanzlei-Website mit Leistungen, Team und Kontakt.
- Restaurantالعربية · Rechts nach links
Mawqid
Eine arabische Familienrestaurant-Website, von rechts nach links gesetzt, mit Menü und Kontakt.
BeispielBeispiel-Designs für erfundene Marken. Ihre Website entsteht aus Ihrem eigenen Brief.
Funktionen
Der letzte Schliff ist eingebaut
Links, Bilder, zusätzliche Seiten, funktionierende Kontaktformulare und ein Sicherheitsnetz unter jeder Änderung.
Links zu allem
Verlinken Sie Text mit einer Seite, einer Sektion, einer URL, einer E-Mail-Adresse oder einer Telefonnummer.
Bilder für genau diese Stelle
Erzeugen Sie ein KI-Bild im Format des gewählten Elements oder laden Sie PNG, JPG oder WebP hoch.
Seiten auf Abruf
Fügen Sie eine Seite hinzu und generieren Sie sie per Klick mit KI. Swizz meldet, sobald sie bereit ist.
Kontaktformulare, die ankommen
Nachrichten erreichen Sie per E-Mail an Ihre Konto-Adresse oder eine andere Adresse, die Sie verifizieren.
Fragen ohne Änderungen
Fragen Sie, welche Sektionen eine Seite hat oder welche Farben Ihr Theme nutzt, ohne dass sich etwas ändert.
Rückgängig und Wiederholen
Gehen Sie bis zu 50 Änderungen zurück mit Strg oder ⌘ + Z, und mit zusätzlichem Shift wieder vorwärts.
Veröffentlichen und eigene Domain verbinden
Veröffentlichen Sie per Klick aus dem Editor und verbinden Sie dann Ihre eigene Domain. Swizz zeigt den DNS-Eintrag und prüft weiter, bis die Domain verbunden ist. Veröffentlichen und eigene Domains sind in den kostenpflichtigen Plänen enthalten.
Zwei Wege zur Website
Standard oder Entwicklung: Sie entscheiden
Beide Wege enden mit einer Website auf Ihrer eigenen Domain. Wählen Sie den Weg, der zu Ihrem Kontrollbedürfnis passt.
| Unterschied | StandardGeführter Assistent, visuelles Bearbeiten, kein Code. | EntwicklungSie sind hierReact-Projekt, Live-Vorschau, Kontrolle bis zum Element. |
|---|---|---|
| Am besten für | Firmen- und Broschüren-Websites, die Sie selbst pflegen | Websites, die Designkontrolle bis zum Element brauchen |
| So starten Sie | Ein Assistent in fünf Schritten: Business, Brief, Farben, Logo, Review | Ein Brief in vier Schritten: Business Info, Brief, Content, Generate |
| Was Swizz baut | Eine Seite aus einer geprüften Sektionsbibliothek, mit Texten für Ihr Unternehmen | Eine mehrseitige Website in React, TypeScript und Tailwind CSS |
| Bearbeiten | Element anklicken und visuell ändern, oder die KI die Auswahl anpassen lassen | Live-Vorschau mit visuellem Inspector und KI-Chat je Element |
| Responsives Design | Sektionen für Desktop, Laptop, Tablet und Mobile anpassen | Desktop, Tablet und Mobile bearbeiten je ihren eigenen Breakpoint |
| Sprachen | In der Sprache Ihres Briefs geschrieben | 44 Sprachen zur Auswahl, auch von rechts nach links |
| Versionsverlauf | Automatische Versionen, benannte Wiederherstellungspunkte und ein Stand vor jedem Publizieren | Ihre letzten 50 Versionen, mit Vorschau vor dem Wiederherstellen |
| Publizieren und Domains | Mit einem Klick publizieren, danach eigene Domain verbinden. Kostenpflichtige Pläne. | Mit einem Klick publizieren, danach eigene Domain verbinden. Kostenpflichtige Pläne. |
| Wo Sie es in der App finden | Erstellen → Website → Von Grund auf erstellen | Erstellen → Website → Professional Builder entdecken |
FAQ
Fragen zum Entwicklungs-Baukasten
Der Standard-Baukasten erstellt Ihre Website aus professionell gestalteten Sektionen, die Sie in einem visuellen Editor bearbeiten. Entwicklung erstellt ein Projekt mit React, TypeScript und Tailwind CSS, das Sie in einer Live-Vorschau verfeinern, mit Inspector, Reglern pro Gerät und pro Zustand und einer KI, die jeweils ein Element bearbeitet. Sie wählen den Baukasten, wenn Sie eine Website starten.
Professional Builder ist der Name dieses Baukastens in der App. Wählen Sie im Erstellen-Bildschirm «Webseite» und dann «Professional Builder entdecken». Projekte, die Sie so starten, tragen in Ihrer Website-Liste das Abzeichen Professional, Websites aus dem Standard-Baukasten das Abzeichen Builder.
Nicht im Editor. Sie ändern Ihre Website mit dem visuellen Inspector und dem KI-Assistenten, und Swizz schreibt diese Änderungen für Sie in den React-Quellcode. Es gibt keinen Code-Editor, keine Dateiansicht und keinen Code-Download zu verwalten.
Ein laufendes React-Projekt mit bis zu vier Seiten. Swizz schreibt Ihre Startseite und bereitet die übrigen vor, sodass Sie jede per Klick mit KI generieren und jederzeit weitere Seiten hinzufügen können. Ihre Website läuft während der Arbeit in einer Live-Vorschau, und Änderungen werden als Versionen gespeichert, die Sie wiederherstellen können.
Ja. Wählen Sie beim Brief aus 44 Sprachen, darunter Arabisch, Hebräisch, Persisch und Urdu. Swizz schreibt Ihre Website in der gewählten Sprache, und Rechts-nach-links-Sprachen erhalten ein Rechts-nach-links-Layout.
Der Build läuft weiter. Öffnen Sie das Projekt erneut über Ihre Website-Liste und machen Sie dort weiter, wo Sie aufgehört haben. Ein früh gestoppter Build wird als unvollständig markiert, und beim Fortsetzen werden nur die noch fehlenden Seiten generiert.
Mehr von Swizz.ai
Ein Konto, drei weitere Wege zu gestalten
Websites, Posts und Logos teilen ein einziges Swizz.ai-Konto. So bleibt Ihre Marke überall gleich.
Ihre nächste Website, in React geschrieben
Beschreiben Sie Ihr Projekt, geben Sie den Brief frei und verfeinern Sie jedes Detail in der Live-Vorschau, bis sie bereit ist.
In der App heisst er Professional Builder: Wählen Sie «Webseite» und dann «Professional Builder entdecken».