Telex: das offizielle moderne WordPress-Theme mit nur einem Klick!

Telex ist ein experimentelles KI-Programmier- und Entwicklungstool, das von Automattic, der Muttergesellschaft von WordPress, entwickelt wurde und speziell dafür konzipiert ist, Entwicklern und Site-Buildern bei der Erstellung benutzerdefinierter Gutenberg-Blöcke zu helfen. Benutzer geben einfach alltägliche natürlichsprachliche Eingabeaufforderungen ein, die die gewünschte Blockstruktur, das Styling und das Interaktionsverhalten beschreiben, und Telex schreibt den Code automatisch in wenigen Sekunden, indem es ein umfangreiches Sprachmodell verwendet, um vollständig funktionierende WordPress-Blockkomponenten zu generieren.

Das Tool ist tief in das auf WebAssembly basierende WordPress integriert. Playground Die serverlose Sandbox-Umgebung ermöglicht es den Nutzern, eine Vorschau des Front-End-Effekts zu sehen und das Back-End des Editors direkt im Browser zu testen, ohne nach der Codegenerierung eine lokale Entwicklungsumgebung bereitstellen zu müssen.Telex bietet eine kontinuierliche Dialog-Iteration, die es den Nutzern ermöglicht, den Code in mehreren Runden mit dem KI-Assistenten abzustimmen. Die fertigen Blöcke können verpackt und in Standardformate exportiert werden. .zip Format Plugin-Datei, kann nahtlos in jede selbst gehostete Live-WordPress-Website installiert werden, um direkt aufrufen, eine deutliche Verringerung der Schwelle der Entwicklung von Funktionsmodulen.

Funktionsliste

• Codegenerierung in natürlicher SpracheUnterstützung für einfache Textaufforderungen, die die Logik und das Aussehen der gewünschten Komponente beschreiben, die von der KI in nativen WordPress Gutenberg-Blockcode übersetzt werden.
• Eingebauter Spielplatz-Sandkasten VorschauNahtlose Integration von WordPress Playground in die unterste Ebene, virtualisierte WordPress-Umgebung, die auf der Browserseite läuft und die Echtzeit-Ansicht des Rendering-Effekts des Blocks auf dem Front-End der Webseite und den Status der Back-End-Parameter-Einstellungsleiste unterstützt.
• Kontinuierliche Iteration des DialogsKI-Assistent: Ein KI-Assistent in der Seitenleiste ermöglicht es dem Benutzer, bestimmte Änderungsbefehle (z. B. Farben ändern, Abstände anpassen, neue Interaktionen hinzufügen) an Blöcke zu geben, die in der ersten Version erstellt wurden, und die KI versteht automatisch den Kontext und aktualisiert nur den geänderten Code.
• Plugin für den Verpackungsexport mit einem KlickUnterstützung für die Verkettung von debuggten Blöcken mit abhängigem Code (React/JSX, CSS, PHP.),block.json usw.) in ein Standard-WordPress-Plugin-Archiv (.zip) mit einem Klick.
• Native KompatibilitätsarchitekturDer generierte Code folgt den offiziellen Entwicklungsspezifikationen und Best Practices für Block-Editoren und garantiert so die Kompatibilität mit verschiedenen Themes.
• Code-Visualisierung und ÜberprüfungDies bietet nicht nur eine grafische Vorschau, sondern ermöglicht es Entwicklern mit technischem Hintergrund, den zugrunde liegenden, von der KI geschriebenen Quellcode direkt einzusehen, wodurch sichergestellt wird, dass die Logik transparent ist und eine spätere manuelle Weiterentwicklung erleichtert wird.
• Analyse von visuellen Referenzdiagrammen (progressive Öffnung)Unterstützung des Hochladens von visuellem Material, wie z. B. Screenshots oder Wireframes, in Kombination mit Stichworten, um das große Modell anzuleiten, das Layout des Designentwurfs genauer wiederherzustellen.

Hilfe verwenden

Willkommen bei Telex, der KI-Programmierplattform von Automattic, die Ihre Textideen direkt in voll funktionsfähige WordPress-Blöcke verwandelt. Damit Sie das Beste aus der Produktivität der Plattform herausholen können, finden Sie hier eine äußerst detaillierte Anleitung.

besonderer HinweisTelex befindet sich derzeit in der Experimentierphase, um eine vollständige Erfahrung der Codegenerierung, des Sandbox-Renderings und der Interaktion mit der Oberfläche zu ermöglichen.Das System muss derzeit zwingend in einem Browser auf der Desktop-Seite (Desktop oder Laptop) ausgeführt werdenDer Hauptarbeitsbereich wird nicht geladen, wenn der Zugriff über ein mobiles Gerät wie ein Telefon oder ein Tablet erfolgt.

I. Kontoregistrierung und Zugang zum Arbeitsbereich

1. ZugangsplattformenÖffnen Sie einen modernen Browser auf Ihrem Desktop (Google Chrome oder Microsoft Edge wird für eine optimale Leistung des WebAssembly-Containers empfohlen) und besuchen Sie die offizielle Website unter https://telex.automattic.ai/。
2. Konto-Login-AutorisierungTelex stützt sich auf das offizielle Ökosystem und verwendet hauptsächlich das WordPress.com-Kontosystem für Single Sign-On (SSO). Wenn Sie bereits ein Konto haben, können Sie es direkt autorisieren; wenn Sie noch kein Konto haben, registrieren Sie bitte ein kostenloses Basiskonto mit Ihrer E-Mail-Adresse.
3. Zugang zur KonsoleNach der Anmeldung sehen Sie ein minimalistisches Dialogfenster mit einer Oberfläche, die der eines gewöhnlichen KI-Chatbots ähnelt und den Ausgangspunkt für die Codegenerierung bildet.

II. operative Kernprozesse: von der Eingabeaufforderung bis zu verfügbaren Plug-ins

Schritt 1: Schreiben Sie eine hochwertige strukturierte Aufforderung (Prompt)

Die Genauigkeit der Code-Generierung hängt ganz von den Details der von Ihnen eingegebenen Anweisungen ab. Anstatt vage Angaben zu machen, empfiehlt es sich, in der Struktur “Funktionsdefinition + Backend-Konfiguration + visueller Stil + Interaktionseffekt” zu schreiben.

• Beispiele für Anforderungen: Sie möchten einen Block “Vorstellung der Teammitglieder” erstellen.
• Empfohlene Aufforderungen zum SchreibenBitte helfen Sie mir, einen Gutenberg-Block für die Anzeige von Teammitgliedern zu erstellen. Er unterstützt die Anzeige von drei Mitgliedern in einer Reihe.Backend-KonfigurationErmöglicht es mir, den Avatar jeder Person hochzuladen, ihren Namen, ihre Berufsbezeichnung und einen kurzen Text separat im WordPress-Editor einzugeben.Visueller StilMinimalistischer Stil: Der Avatar ist als quadratischer Kreis mit hellgrauer Schattierung gestaltet.interaktive WirkungWenn man mit dem Mauszeiger über die Karte eines Mitglieds fährt, muss die Karte eine kleine Animation haben, die 5px nach oben schwebt und die LinkedIn- und Twitter-Symbol-Links anzeigt”.”
• vorlegen (einen Bericht usw.)Nachdem Sie bestätigt haben, dass die Beschreibung korrekt ist, drücken Sie die Eingabetaste oder klicken Sie auf das Symbol Senden, um die Generierungsmaschine zu starten.

Schritt 2: Automatisierte Codeerstellung und Sandbox-Validierung in zwei Ansichten

• VisualisierungNach dem Senden des Befehls zeigt das System einen Fortschrittsindikator für die Codegenerierung an, so dass Sie die Struktur der Datei und die Anzahl der von der KI generierten Codezeilen sehen können; die Berechnung dauert in der Regel etwa 30 Sekunden bis 1 Minute.
• WordPress Spielplatz LadenSobald der Code geschrieben ist, startet Telex sofort eine serverlose WordPress-Sandbox im Speicher des Browsers. Es ist nicht nötig, einen Server zu kaufen oder eine Datenbank zu konfigurieren, um direkt zu testen.
• Nahtloses Umschalten zwischen zwei Standpunkten：
  • Editor-Ansicht (Editor)Dies ist die Standardansicht, die die Bearbeitungsoberfläche im WordPress-Backend nachahmt. Hier können Sie den soeben erstellten Block auswählen und testen, ob das rechte Eigenschaftsfeld erfolgreich das Eingabefeld erstellt hat, das Sie ändern können (z. B. Bild ersetzen, Text ändern).
  • Frontend-Ansicht (Frontend)Klicken Sie auf die Schaltfläche “Frontend” auf der Benutzeroberfläche, um in die Besucherperspektive zu wechseln und zu prüfen, ob das visuelle Layout des Blocks auf der offiziellen Webseite angemessen ist und ob CSS-Animationen wie Mausverschiebungen richtig ausgelöst werden.

Schritt 3: Dialog mit dem KI-Assistenten für lokale Iteration

KI-generierte erste Versionen erfordern oft eine Feinabstimmung von Details. Sie brauchen nicht bei Null anzufangen, denn Telex verfügt über eine Zustands-Speicherfunktion.

• Ausgehender Assistent (Assistentin)Klicken Sie im rechten Bereich der Schnittstelle auf die Registerkarte “Assistent”, um den kontinuierlichen Dialogmodus für den aktuellen Block aufzurufen.
• Modifikationsbefehl sendenWeisen Sie direkt und in einfacher Sprache auf das Problem hin. Zum Beispiel: “Verdunkeln Sie die Schatten auf den Mitgliederkarten”, “Ändern Sie die drei Mitglieder pro Zeile in vier Mitglieder pro Zeile” oder “Fügen Sie ein zentriertes Eingabefeld für den Titel ‘Unser Kernteam Team”-Haupttitel-Eingabefeld am oberen Rand des gesamten Blocks".
• Automatische AnwendungsaktualisierungenKI liest die vorherige Codebasis und schreibt den Code für die Änderungen, die nur Ihren Anforderungen entsprechen, neu. Die Sandbox wird nach Fertigstellung automatisch aktualisiert, um die neuesten Auswirkungen der Änderungen anzuzeigen.

Schritt 4: Paket-Export und Produktionsbereitstellung mit einem Klick

Sobald der Block in der Sandbox bis zur Perfektion getestet wurde, kann er auf die tatsächlich betriebene Website portiert werden.

1. ZIP-Pakete exportierenKlicken Sie auf die Schaltfläche “Herunterladen” oder “Exportieren” oben rechts auf der Benutzeroberfläche. Das System fügt automatisch Folgendes hinzu block.json Registrierungsdatei,index.js(React logic),style.css(Stilvorlage) und index.php Alle Abhängigkeiten werden in ein Standard-WordPress-Plugin-ZIP-Paket komprimiert.
2. Hochladen auf die persönliche WebsiteLoggen Sie sich in das Backend-Verwaltungssystem Ihrer Live-WordPress-Site ein.
3. Umsetzung: Navigieren Sie zum linken Menü 插件 -> 安装插件 -> 上传插件Wählen Sie die ZIP-Datei aus, die Sie gerade heruntergeladen haben. Klicken Sie auf “Jetzt installieren” und dann auf “Plugin aktivieren”.
4. tatsächlicher AufrufGehen Sie zum Block-Editor eines beliebigen Artikels oder einer Seite, klicken Sie auf das “+”-Zeichen, um ein Modul hinzuzufügen, und suchen Sie den Namen des Blocks im Suchfeld, um ihn per Drag & Drop auf die Seite zu ziehen und zu verwenden.

III. fortgeschrittener Einsatz von Fähigkeiten und Anti-Pit-Guide

• Modell der CodeüberprüfungWenn Sie selbst Entwickler sind, können Sie auf die Registerkarte Codeansicht klicken, um den zugrunde liegenden Quellcode zu sehen. Wenn die KI bei der Implementierung komplexer Logik (z. B. einer externen API-Datenabfrage) einen Fehler meldet, können Sie sie direkt in der Dialogbox unter Verwendung von Entwicklerterminologie anweisen (z. B. “Bitte wechseln Sie zum useEffect Hooks verarbeiten Datenabrufe und fügen try-catch Mechanismus zur Fehlerbehebung”).
• Beherzigen Sie das Prinzip der ModularitätTelex ist so konzipiert, dass einzelne “Funktionsblöcke” und nicht komplette “Website-Themen” erstellt werden. Es wird empfohlen, große Projekte in mehrere einzelne Funktionsblöcke aufzuteilen (z. B. Preistabellen-Block, FAQ-Akkordeon-Block, dynamischer Countdown-Block), diese separat zu generieren und dann in WordPress zu kombinieren, um die höchste Erfolgsrate und Codequalität zu erreichen.
• Reaktion auf ErzeugungsausfälleDa es sich um ein experimentelles Tool handelt, sind gelegentliche Rendering-Fehler normal. Wenn die Sandbox weiterhin Fehler meldet, empfiehlt es sich, auf "Neu generieren" zu klicken oder die Funktionalität in der Eingabeaufforderung zu vereinfachen, um übermäßig komplexe Bibliotheksabhängigkeiten von Drittanbietern zu beseitigen.

Anwendungsszenario

1. Rapid Prototyping und visuelle Präsentation
   Wenn ein Webdesigner oder Produktmanager eine neue Seiteninteraktion entwirft, kann er mit Telex seine Textideen in umsetzbare Seitenkomponenten umwandeln und sie seinem Team oder seinen Kunden in einer Besprechung vorführen, anstatt auf den Einsatz eines Front-End-Ingenieurs zu warten.
2. Entwicklung kundenspezifischer Kampagnenkomponenten
   E-Commerce- und Betriebsteams müssen exklusive Webelemente (z. B. Countdown-Anzeigen mit bestimmten visuellen Stilen, dynamische Aktionspreislisten) für bestimmte Feiertagsverkäufe entwickeln. Mit Telex können proprietäre Block-Plugins in wenigen Minuten erstellt werden, wodurch die Kosten und der Zeitaufwand für die Beschaffung kommerzieller Plugins entfallen.
3. Hilfe für WordPress-Entwickler zur Steigerung der Effizienz
   Professionelle WordPress-Plugin-Entwickler können Telex als Code-Kopilot verwenden. Die KI ist für die mühsame Registrierung von Gutenberg-Basisdateien, React-Gerüsten und grundlegendem CSS-Schreiben verantwortlich, während der Entwickler den Quellcode herunterlädt und sich auf die sekundäre Entwicklung der Kerngeschäftslogik konzentriert, was den Entwicklungszyklus erheblich verkürzt.
4. Erweiterung der Funktionsgrenzen für No-Code-Builder
   Wenn ein vorhandenes Theme oder ein Page Builder eines Drittanbieters eine bestimmte Long-Tail-Funktion nicht erfüllen kann, kann Telex die Grenzen von No-Code-Tools durchbrechen, indem es die Komponenten mit natürlicher Sprache anpasst“.

QA

1. Ist Telex ein kostenpflichtiges Tool?
   A: Derzeit ist Telex als experimentelles Projekt von Automattic für alle angemeldeten Benutzer völlig kostenlos, und es gibt vorerst keine Begrenzung der Nutzungsdauer. Da die zugrundeliegende Schicht viele Ressourcen des KI-Rechenmodells verbraucht, könnte in Zukunft nach der Umstellung ein Abonnement- oder Gebührenplan eingeführt werden.
2. Können die von mir erstellten Blöcke direkt auf jeder WordPress-Website installiert werden?
   A: Ja, das können Sie. Solange es sich bei Ihrer Website um eine selbst gehostete WordPress-Umgebung (WordPress.org) handelt, die die Installation von Plugins unterstützt, oder um einen gehosteten Plan, der Premium-Plugins unterstützt, ist es möglich, Telex direkt in das .zip Datei hochgeladen und als reguläres Plugin aktiviert wird.
3. Kann Telex ein komplettes WordPress-Theme für mich erstellen?
   A: Nein. Telex ist so konzipiert, dass es sich ausschließlich auf die Erstellung von “Gutenberg-Blöcken” konzentriert. Es ist auf einzelne oder kombinierte Seitenkomponenten spezialisiert und ist nicht für die Generierung von Themen zuständig, die globales Seitenrouting, Datenbankunterstrukturen oder Site-weite Dateihierarchien beinhalten.
4. Warum kann ich die Telex-Schnittstelle nicht über meinen mobilen Browser öffnen?
   A: Um den stabilen Betrieb und die typografischen Anforderungen des komplexen Code-Generierungsprozesses, des Dual-View-Code-Editors und der integrierten WordPress Playground-Sandbox zu gewährleisten, wurden die Zugriffsgeräte offiziell und zwangsweise eingeschränkt. Bitte stellen Sie sicher, dass Sie dafür den Browser Ihres Desktop-Computers verwenden.
5. Was ist, wenn der generierte Block fehlerhaft ist oder nicht wie erwartet funktioniert?
   A: Sie brauchen den Code nicht zu kennen, um ihn zu beheben. Bitte öffnen Sie das KI-Assistenten-Panel auf der rechten Seite der Benutzeroberfläche und beschreiben Sie der KI den Fehler oder die Unzufriedenheit in einfacher Sprache. Die KI wird den Code automatisch untersuchen und ändern und Ihnen dann die korrigierte Version in der Sandbox zeigen. Wenn Sie sich mit Code auskennen, können Sie auch direkt zur Codeansicht wechseln, um den Code zu überprüfen und dann die KI anzuleiten, den Fehler im Jargon zu beheben.