Funktionsüberblick zu Kimi Websites

Was ist Kimi Websites

Kimi Websites ist das Full-Stack-Produkt von Kimi Agent zum Erstellen von Websites, unterstützt von Kimi K3, einem multimodalen, visuellen agentischen KI-Modell. Die Kernfunktion ist visuelles Programmieren (Vibe Coding): Sie können aus natürlicher Sprache, einem Design-Mockup oder einer Bildschirmaufnahme eine vollständige Full-Stack-Website erzeugen, sie online in der Vorschau prüfen und mit einem Klick veröffentlichen.

Mit Kimi Websites erzeugte Websites können Folgendes enthalten:

• Frontend: HTML-Seitenstruktur, CSS-Layouts und -Styling sowie JavaScript-Interaktionslogik (Bewegungseffekte, Animationen usw.)
• Backend: Persistente Datenbankspeicherung, Benutzeranmeldung und Authentifizierung
• Engineering: Automatische Versionsverwaltung, Full-Stack-Vorschau und öffentliche Bereitstellung

Produktfunktionen

Verwendung

Methode 1: Zugriff über das Web

Besuchen Sie die dedizierte Kimi Websites-Seite

1. Browser öffnen: Verwenden Sie einen gängigen Browser wie Chrome, Safari, Edge oder Firefox.
2. Offizielle Zugangsadresse öffnen: Dedizierte Kimi Websites-Seite: https://www.kimi.com/zh/websites (unterstützt chinesische und englische Oberflächen)
3. Bei Ihrem Konto anmelden: Melden Sie sich mit einem Kimi-Konto an (Registrierung per Mobilnummer oder E-Mail wird unterstützt)
4. Website-Aufgabe eingeben. Kimi Websites bietet drei Hauptwege, um eine Website zu erstellen:
   1. Texteingabe: Geben Sie die Aufgabe in das Dialogfeld ein und beschreiben Sie die gewünschte Website in natürlicher Sprache;
   2. Bild-/Website-remix: Laden Sie ein Design-Mockup oder einen Screenshot einer Website hoch, die Ihnen gefällt, um die entsprechende Funktion auszulösen;
   3. Vorlagenbasierte Website-Erstellung: Erstellen Sie schnell eine Standardwebsite, indem Sie eine voreingestellte Vorlage auswählen und die Inhalte bearbeiten;
5. Erstellung starten: Wechseln Sie in die Oberfläche der Websites-Funktion, wählen Sie eine Vorlage oder erstellen Sie die Website direkt im Dialog.

Methode 2: Zugriff über die mobile App

Wählen Sie in der mobilen App das dedizierte Website-Tool aus

Offizielle Apps sind für iOS, Android und HarmonyOS verfügbar (App-Name: "Kimi"). Tippen Sie oberhalb des Eingabefelds auf die Symbolleiste (Taskleiste) → wechseln Sie in den Websites-Modus. Dieser umfasst multimodale Generierungswerkzeuge und Agent-Funktionen, sodass Sie visuelle Eingaben bereitstellen und Frontend-Code generieren können.

Methode 3: Allgemeiner Agent-Modus

Geben Sie im allgemeinen Agent-Modus Ihre Anforderungen für die Website-Erstellung ein

Wählen Sie auf der offiziellen Website oder auf einem Mobilgerät das K3-Modell aus und geben Sie Aufgabenanweisungen zum Erstellen einer Website ein. Kimi ruft dann Funktionen für visuelles Programmieren und Code-Ausführungstools auf.

Schritte

Eine Website per Dialog erstellen

Beschreiben Sie im Eingabefeld in natürlicher Sprache, was Sie benötigen; Kimi versteht die Anforderung und führt sie aus. Drei Erstellungsmethoden werden unterstützt:

Praxisbeispiel

Text

Überblick über den Website-Erstellungsworkflow

Text

Kimi Websites aktiviert die webapp-building SKILL, einen mehrstufigen Codegenerierungs-Agent, der auf den Aufbau von Websites spezialisiert ist. Er führt eigenständig den folgenden Workflow aus:

1. Anforderungsanalyse: Analysiert automatisch Funktionsmodule, visuellen Stil und Interaktionslogik der Website
2. Aufgabenplanung: Zerlegt die Arbeit in Teilaufgaben wie Design, Entwicklung und Vorbereitung von Assets
3. Technische Lösung: Wählt automatisch eine passende technische Architektur aus (z. B. React + Tailwind CSS)
4. Asset-Generierung: Erzeugt bei Bedarf visuelle Assets wie Bilder und Icons
5. Code-Erstellung: Schreibt Seitenstruktur, Styling und Interaktionscode
6. Mehrstufige Optimierung: Passt die Website anhand der Vorschau selbstständig an, bis sie fertig ist

Vorschau und Anpassung

• Echtzeitvorschau: Generiert eine HTML-Demo-URL, die Sie sofort im Browser öffnen können
• Bearbeitung per Dialog: Setzen Sie den Dialog fort, um Änderungen anzufordern, z. B. "ändere die Navigationsleiste auf einen dunklen Stil"

Reales Beispiel

Text

Oberfläche des Vorschau-Panels

Nachdem die Website generiert wurde, öffnet sich rechts das Vorschau-Panel; außerdem erscheinen Versionskarten im Dialog. Die wichtigsten Bedienpunkte sind:

Obere Symbolleiste des Vorschau-Panels (von links nach rechts):

Versionskarten im Dialog: Zeigen den Namen der Website, die Versionsnummer (z. B. V2) und die URL an. Klicken Sie auf Vorschau, um die entsprechende Version zu öffnen; klicken Sie auf Wiederherstellen, um zu dieser Version zurückzukehren. Über die Karte Alle Dateien können Sie die vollständigen Projektdateien ansehen oder herunterladen. Einzelheiten zur Verwendung der einzelnen Schaltflächen finden Sie in den entsprechenden Abschnitten unten.

Visuelle Bearbeitung

• Mehrstufige Optimierung: Stimmen Sie Website-Details über einen fortlaufenden Dialog fein ab
• Bearbeitungsmöglichkeiten:
  • Anmerkungsmodus: Klicken Sie auf den Teil der Webseite, den Sie ändern möchten, und fügen Sie Kommentare in natürlicher Sprache hinzu
  • Auswahlmodus: Wählen Sie ein beliebiges Element auf der Webseite aus und fügen Sie Kommentare hinzu
  • Verwenden Sie Rechtecke, Pfeile, Pinsel, Farbwechsel und weitere Auswahl- und Bearbeitungswerkzeuge, um Änderungsvorschläge hinzuzufügen
• Nachdem Sie an mehreren Stellen Anmerkungen hinzugefügt haben, übernehmen Sie sie in den Dialog und senden alle Vorschläge auf einmal an Kimi

Code-Deployment und Veröffentlichung

Zur "benutzerdefinierten URL": 3–30 Zeichen, nur Kleinbuchstaben, Zahlen und Bindestriche. Darf nicht mit einem Bindestrich beginnen oder enden und darf nicht nur aus Ziffern bestehen. Einige reservierte Wörter (z. B. kimi, www, login usw.) sind nicht verfügbar. Wenn der Name belegt oder nicht verfügbar ist, wählen Sie bitte einen anderen.

Zu den Grenzen von "Herunterladen und bereitstellen": Anmeldung mit Kimi-Konto und plattformverwaltete Cloud-Datenbank werden von der Kimi-Plattform bereitgestellt und werden nicht mit dem exportierten Code migriert. Wenn Sie den Code auf Ihrem eigenen Server bereitstellen, muss die Anmeldemethode auf ein Benutzername/Passwort-Verfahren auf Basis Ihrer eigenen Datenbank umgestellt werden; außerdem müssen die Daten in Ihre eigene Datenbank migriert werden. Für rein öffentlichen Zugriff empfehlen wir, direkt One-Click-Veröffentlichung zu verwenden; Anmeldung mit Kimi-Konto und Cloud-Daten funktionieren dann weiterhin normal. Weitere Informationen finden Sie unter Warum funktioniert die von mir erstellte Website nicht?.

Versionsspezifische Vorschau

Nach Abschluss der Generierung gelangen Sie auf die Vorschauseite. In der Vorschauoberfläche können Sie verschiedene Bereitstellungsversionen anklicken und Dateien für unterschiedliche Versionen herunterladen.

Veröffentlichen, teilen und Veröffentlichung zurücknehmen

Vor der Veröffentlichung kann die Website nur im Dialog in der Vorschau angezeigt werden. Damit andere darauf zugreifen können, klicken Sie oben rechts im Vorschau-Panel auf Teilen, um das Veröffentlichungs-Panel zu öffnen:

1. Benutzerdefinierte URL: Sie können den Namen in der Standard-URL ändern, zum Beispiel in yourname.ok.kimi.link;
2. Klicken Sie auf Link kopieren, um die öffentliche URL zu erhalten, oder auf Website öffnen, um sie in einem neuen Tab anzuzeigen. Nach der Veröffentlichung zeigt der obere Bereich des Panels Veröffentlicht an, und jeder mit dem Link kann darauf zugreifen;
3. Um die Website offline zu nehmen, wählen Sie im Menü … oben rechts im Panel Veröffentlichung zurücknehmen aus. Die Website ist dann nicht mehr öffentlich erreichbar (Code und Daten bleiben erhalten, und Sie können sie jederzeit erneut veröffentlichen).

Mehrstufige Bearbeitung

Wenn Sie mit einem bestimmten Teil nicht zufrieden sind, klicken Sie im Vorschaufenster auf die Bearbeiten-Schaltfläche, um ihn weiter zu verfeinern. Sie können Kimi auch Anweisungen in natürlicher Sprache senden und die Bearbeitung mit Agent fortsetzen. Sobald Sie das Ergebnis bestätigen, laden Sie den vollständigen HTML/CSS/JS-Code herunter und stellen ihn direkt bereit – oder verfeinern ihn in einem Editor weiter.

Für wen ist es gedacht

• Entwickler: Entwerfen Sie Produktprototypen und Frontend-Demos und verkürzen Sie die Zeit für den Aufbau von Grund auf deutlich.
• Gründer: Erstellen Sie bei begrenzten Ressourcen schnell offizielle Websites, Landingpages und Produktpräsentationsseiten.
• Produktmanager: Verwandeln Sie ein PRD oder Design-Mockup schnell in einen interaktiven, vorführbaren Prototyp, ohne auf Entwicklungsplanung warten zu müssen.
• Nichttechnische Nutzer: Programmierkenntnisse sind nicht erforderlich. Beschreiben Sie Ihre Idee oder laden Sie ein Referenzbild hoch – vom Konzept bis zur lauffähigen Webseite.

Beispiel-Prompts

Die folgenden Szenarien und Prompts können Ihnen als Orientierung für die Inhaltserstellung dienen