Das Wichtigste in Kürze
- Websites mit KI zu erstellen ist heute praxistauglich – Thorsten Jekel hat seine eigene Seite komplett mit KI neu aufgebaut.
- Man braucht kein HTML zu beherrschen; die Website läuft weiterhin über WordPress, inklusive aller Erweiterungen.
- Claude Design erstellt aus der bestehenden Seite ein Designsystem (Farben, Schriften, Logos) und daraus einen Website-Entwurf.
- Per „Send to Claude Code“ wird der Entwurf übergeben und dort weiterbearbeitet.
- Als Website-Baukasten empfiehlt sich Divi 5 – mit günstiger Lifetime-Lizenz statt teurem Jahres-Abo.
- Das Plugin Novamira verbindet Claude mit dem Baukasten (Divi, Elementor, Bricks, Beaver Builder u. a.) für rund 49 € im Jahr.
- Der Skill „UI Pro Max“ verbessert die Bau-Ergebnisse in Claude spürbar.
- WPML sorgt für Mehrsprachigkeit – auf Knopfdruck Deutsch und Englisch.
- Blogbeiträge lassen sich per KI SEO-/GEO-optimieren: Zusammenfassungen, Cross-Verlinkungen und Q&As für bessere Auffindbarkeit in Google und KI-Suchen.
- ClaudeSEO.md samt Google Search Console und Bing ermöglicht komplette SEO-Analysen; Higgsfield erzeugt passende Bilder – etwa im Pop-Art-Stil.
Einführung
Herzlich willkommen zu einer weiteren Folge von TJs Technology Tuesday und wie immer geht es um das Thema Digital 4 Productivity. Heute einmal zum Thema, wie ich meine Webseite mit KI neu aufgebaut habe. Denn ich werde immer wieder gefragt, kann man denn mit KI heute Webseiten erstellen? Und ja, das geht. Vor einem halben Jahr habe ich immer noch gesagt, so richtig begeistert mich das nicht.
Man muss kein HTML-Code beherrschen, um Webseiten selbst zu programmieren
Und wenn, dann war es immer so, ich habe einen HTML-Code generiert bekommen, den ich zwar lesen konnte, aber wenn ich dann parallel dazu manuell noch mal was bearbeiten wollte, dann war es immer schwierig. Und meine Idee war, ich möchte gerne KI dazu nutzen, um eine Webseite zu erstellen, möchte sie aber weiterhin über WordPress laufen lassen, damit ich eben die Millionen von Erweiterungen, die es dafür gibt, nutzen kann. Und möchte idealerweise einen Website-Baukasten haben, den ich ebenso nutzen kann, dass ich entweder in dem Website-Baukasten was ändere oder eben in Claude. Das ist das Tool, was ich dafür nutze, und dass sie sich gegenseitig synchronisieren, dass ich praktisch nicht einfach nur dann, wenn ich auf WordPress gehe, einfach nur praktisch HTML-Code habe, wo ich dann drin rumfriemeln muss, sondern ich oder mein Assistent beispielsweise oder ein Externer kann jederzeit auch darauf gehen. Ja, wie schaut das in der Praxis aus?
Webseiten erstellen – ein Beispiel
Wir gucken zuerst mal auf meine aktuelle Seite, wie die so ausschaut. Also, und natürlich gibt es wie immer schönere Seiten, das ist gar kein Thema. Aber die Idee ist, ich habe hier eine Webseite mit einer Hero-Sektion, wo eben ein solches Hero-Video im Hintergrund läuft. Dann eben, wann sind Sie hier richtig, zu sagen, wobei kann ich Ihnen helfen. Genau die 3 Themen, mit denen ich hier vor allen Dingen schwerpunktmäßig unterwegs bin, nämlich mehr Abschlüsse mit dem iPad, Microsoft 365 effektiv nutzen und KI als Produktivitätsbooster umzusetzen.
So, meine Mission eben hier mit dabei. Thorsten Jekel, auch gerne mit dem kleinen, ich sag mal, Spruch, den konnte ich mir auch nicht verkneifen. Gestern Thermomix-Experte, heute KI-Experte. Nein, mit mir haben Sie eine fundierte Umsetzungsbegleitung für mehr Produktivität. Also eine Webseite, die man logischerweise immer besser machen kann.
Aber sie ist ebenso, dass ich hier die wichtigsten Themen mit draufhabe, dass ich hier die Verbindung habe, um jederzeit einen Termin vereinbaren zu können, dass ich hier einen Blog habe, wo ich mir auch unterschiedliche Bilder erzeugen lassen kann. Das ist so die alte Bildwelt, die man vielleicht noch von mir kennt. Ich habe jetzt die alten Bilder mal eben auch hier mit Nanobanana mir entsprechend so anpassen lassen, dass ein bisschen besser ausschaut. Und eben auch hier, dass sie sagen kann, ich hier kann hier Zeitraum wählen, ich kann hier nach verschiedenen Inhalten wählen, beispielsweise zu bestimmten Bereichen. Also ich habe hier die Möglichkeit, dass ich in dem Bereich Download aussagen kann, hier für Veranstalter.
Und wenn Sie jetzt mal gucken, bei Download bin ich jetzt schon gewechselt, und zwar ich habe hier Digital 4 Productivity. Wenn ich auf Vorträge gehe, dann schaut das für Sie genauso aus, aber er wechselt eben auf die thorsten-jekel.de. So, das heißt, ich habe einmal eine Seite mit Thorsten Jekel. Als Redner wird man häufig auch nach dem Namen gesucht, also deswegen finden Sie mich über Thorsten Jekel. Wenn ich auf Thorsten Jekel gehe und auf Microsoft 365 klicke, dann springt er automatisch auf die digital4productivity.de um.
Webseite überprüfen bzw. umbauen lassen mit Claude
Also so kann man auch das Thema lösen. Und ich habe mich damit Claude unterhalten, habe gesagt, was ist denn eine gute Strategie? Schau dir mal meine Webseiten an. Da sagt er, okay, du hast bei dem Thema Digital 4 Productivity, hast du eine schon relativ gute eben Webseiten-Findbarkeit durch das Thema SEO und GEO, weil du viele Blogbeiträge drauf hast über Jahre, eben meinen TJ Technology Tuesday und meinen Digital 4 Productivity Podcast. Und dann habe ich nicht platt gemacht, was man nicht machen sollte, sondern habe die genutzt und habe die thorsten-jekel.de dann praktisch neu aufgebaut, habe das rüber gezogen.
Alles solche Umbauarbeiten, die tendenziell sehr anstrengend erstmal sind. Wie bin ich vorgegangen? Als Erstes habe ich genutzt ein System, das heißt Claude Design, und mit Claude Design kann man eben sich solche Webseiten bauen. Und dazu ist der erste Schritt, dass man sich erstmal Designsystem baut. Und ich habe eben hier, man kann auch mehrere Designsysteme bauen.
Ich habe einmal gesagt, guck dir mal meine bestehende Webseite an und mach dir auf der Basis meiner bestehenden Webseite, erstelle mal ein Designsystem. Und dann zieht er sich automatisch die Schriftarten raus, er zieht sich die Farben entsprechend raus, er zieht sich die Logos raus, also alles, was er dort auf der Webseite findet. Da habe ich gesagt, mach das bitte noch ein bisschen Apple-mäßiger, Also, dass es noch irgendwie ein bisschen schöner ist, und das kann man eben alles überarbeiten. Im zweiten Schritt habe ich dann gesagt, okay, erstelle mir eine Webseite. Und dazu habe ich einfach, hier sieht man auch in der Historie, ich gehe mal nach ganz oben und gehe mal auf die andere Seite, dann bin ich nicht im Weg.
Webseiten mit KI nachbessern lassen
So, hier habe ich gesagt, eben generiere bitte eine, einen Entwurf für meine neue Webseite. Hier ist der Content eben die digital4productivity.de und optimier es mir So, das ist ein bisschen mehr ausschaut wie der Screenshot. Da habe ich die iPhone-Seite von Apple genommen und habe gesagt, so soll es ein bisschen mehr ausschauen. Und dann hat er mir diese Seite gebaut. Und ja, da war noch ein paar kleine Tweaks hinterher, wo ich gesagt habe, nee, das Orange finde ich nicht so gut, nehmen wir noch ein paar Sachen raus.
Das HTML-Code mit Claude Code generieren lassen
Aber alles, was ich eben hier leicht prompten konnte, und eben sogar so, dass ich, wenn ich hier draufklicke, dann unterschiedliche Dinge habe. Hier habe ich sogar schon die Vortragsseite verlinkt, also wo die Vorträge drin sind und eben hier inklusive auch dem Thema, dass ich hier meine Testimonials, meine Vorträge, eben alles Dinge, die ich hier habe und wo ich dann auch Vortragsaufschnitte draufhabe, wo ich komplette Vorträge draufhabe und eben hier noch mal mein Trustmary-Widget, was ich habe. Also man kann hier alles mit einbetten an Themen, was ich hier mit dabeihabe. Und dann können Sie Folgendes machen, dann gibt es hier Share und dann kann ich „Send to“ und dann kann ich sagen „Send to“ Claude Code. Dann wird es übergeben an Claude Code und dann kann man in Claude Code weitermachen.
Das ist spannend. Dieses „Send to“ Claude Code gibt es erst seit kurzem, also zur Ausstrahlungszeit dieser Episode seit knappen zwei Wochen. Das heißt, man kann es direkt rüberschicken und dann ist die Idee, dass ich Folgendes mache: Dann habe ich eben Claude Code, was ich in der Applikation nutze, und dann brauche ich noch zwei Komponenten.
Der Webseiten-Baukasten Divi
Das eine, einen Website-Builder, und ich empfehle dazu den Divi 5. Divi 5 hat den großen Charme, dass das ganze Ding relativ günstig zu kriegen ist, nämlich als Lifetime-Lizenz. Das heißt, ich kriege hier für $250, beziehungsweise die große entsprechende Agenturlizenz sogar kriege ich hier für $297. Und bei den meisten anderen Tools wie Thrive beispielsweise muss ich jährlich Abo zahlen, was teilweise sogar noch teurer ist.
Mit diesem Baukasten kann ich eben ähnlich, wie man das bei Wix zum Beispiel kennt oder Jimdo, habe ich einen leichten Baukasten, habe aber noch mehr Möglichkeiten, weil ich dieses komplette WordPress-Universum habe.
Das Novamira-Plugin für WordPress
Die nächste Komponente, die man da braucht, ist eine Mittelkomponente, die heißt Novamira. Und die Idee von Novamira ist, dass ich sage, ich kann praktisch verbinden Claude mit einem Website-Baukasten. Und da funktioniert ein paar mehr, also es funktioniert nicht nur Divi, es funktioniert auch Elementor beispielsweise. Also das heißt, wenn ich gucke, also with all major AI agents funktioniert, also nicht nur mit Claude, funktioniert auch mit Windsurf, mit Cursor. Ich finde es am besten hier zu nutzen mit Claude Code. Und dann gibt es eben die Möglichkeit, dass ich sage, ich kann es eben mit unterschiedlichen Website-Buildern verbinden. Also ich habe es jetzt mit Divi verbunden.
Es geht auch mit Elementor, mit Bricks, mit Beaver Builder, Breakdance, WooCommerce. Also hier sieht man einige weiter. Es geht nicht mit dem Thema Thrive. Das hatte ich vorher auf meiner Seite drauf und fand ich auch super. Thrive kostet nur jedes Jahr relativ viel Geld und wird davon nicht unterstützt.
Deshalb empfehle ich eben auf Divi zu gehen und ich hatte sowieso schon eine ältere Divi-Lizenz, dann habe ich die genutzt. Als Nächstes gibt es sogenannte Skills, die man noch mal verbessern und optimieren kann. Der wichtigste, den es hier gibt, ist der UI Pro Max Skill. Den sollte man in Claude eben dort mit reinnehmen. Und dann ist die Idee, dass man ähnlich wie man das hier hat, dann eben in der Applikation in Claude— also gibt man den Claude Code, man macht das in der Applikation, oder eben, wenn man Hardcore arbeiten möchte, im Terminal.
Muss man aber nicht. Man kann sich die App runterladen, in der App habe ich dann die Übergabe und dann ist es wichtig, dass ich sage, kannst du eben darauf zugreifen? Muss eben Novamira, muss man eben einmal in WordPress in der Administration als Plugin installieren. Braucht da einmal die bezahlte Version, die kostet so ein Fuffi im Jahr, also 49 € glaube ich kostet die im Jahr. Da muss man das verbinden, muss das einmal in Claude autorisieren und dann kann ich sagen, so, hier habe ich das Ganze, bau mir doch bitte mal die Webseite, dass sie so ausschaut.
Und bau mir die Menüstruktur, dass sie so ausschaut, mach mir die Buttons so breit, wie es ausschaut. Und das Coole ist, der baut das Ganze dann in Divi um. Das heißt, ich kann eben auf der einen Seite, kann ich halt sagen, ich gehe hier ganz normal eben über Claude rein und sag, mach mir da eine Farbe anders, mach mir einen Button breiter beispielsweise. Ich kann aber parallel dazu eben weiterhin mit dem Webseitenbaukasten arbeiten. Das ist eben dann interessant, wenn Sie beispielsweise verteilt arbeiten.
Das heißt, jemand ist eben so, dass er halt als Master Admin dort immer mitarbeiten kann. Und ich gehe jetzt mal einfach hier, zeige es auch gleich, ich gehe noch mal auf eine Seite, wo ich Ihnen das zeigen kann. So, und ich gehe jetzt einfach mal auf eine Seite, wir nehmen die einfach mal, und ich nehme einfach mal iPad mit Divi bearbeiten. So, habe ich die richtige Seite? Ah, nee, ich habe die falsche Seite erwischt.
Man sollte auch die richtige Seite erwischen. Das ist noch eine alte Version. So, ich habe jetzt Edit mit Divi.
Genau, das ist jetzt, und dazu schaltet sich jetzt wieder frei. Das heißt, ich habe jetzt meine Seite in Divi aufgemacht, also in diesem Website-Builder. Und das Coole ist, ich kann jetzt halt hier reingehen rein und kann jetzt halt die Texte komplett ändern. Ich kann hier die Farben, ich kann hier alles, tutto completto, ich kann die Boxen hier ändern. Das heißt, ich habe hier komplett die Bearbeitungsmöglichkeit, kann die verschieben, kann die nach oben reinnehmen, kann ja noch weitere Blöcke entsprechend mit reinnehmen.
Das heißt, alles diese Dinge, die ich eben hier brauche, die kann ich eben hier wunderbar mit reinnehmen. Also kann jetzt hier dort das komplett mit bearbeiten, und das ist halt der große Charme, und den, auf den Sie mal achten sollten. Weil ich werde immer gefragt, wie kann ich schnell eine Webseite machen. Ja, schnell eine Webseite ist eine gute Idee, aber jetzt will man vielleicht auch Erweiterungen drin haben. Und ich sag mal, ich gebe Ihnen mal die wichtigsten Plugins, die ich zum Beispiel nutze.
WPML – eine Mehrsprachigkeitslösung für WordPress
Also ich nutze WPML, ist eine Mehrsprachigkeitslösung. Das heißt, da kann ich einfach umschalten, Englisch, Deutsch. Und jetzt habe ich einfach gesagt, beispielsweise, Mensch, übersetze mir alle die Dinge eben mit WPML, so dass sie auch auf Englisch sind. Macht er wunderbar. Wenn ich jetzt Claude verbunden habe über den Weg, kann ich bei den Blogbeiträgen auch nachträglich noch mal nacharbeiten.
Also ich habe beispielsweise 250 Blogbeiträge roundabout drauf. Jetzt habe ich gesagt, okay, optimiere mir bitte noch mal alle Blogbeiträge SEO-mäßig, mach mir unter jedem Blogbeitrag noch mal eine Zusammenfassung, mach mir Cross-Verlinkungen zwischen den Beiträgen und mach mir hinterher noch mal 10 Fragen und Antworten, denn KI liebt Q&As, denn die Leute stellen eine Frage und suchen nach einer Antwort. Machen Sie es der KI möglichst leicht, dass die KI entsprechend auch die Antwort finden kann. Und das habe ich früher nicht gemacht, weil es einfach viel aufwendiger war als alles andere. Und das Geniale: Jetzt geht es besser.
Geheimwaffe zum Thema SEO-/ GEO-Optimization
Und das Schöne ist, man hat schon eine gewisse Basis, wo man sagt, okay, wie kann ich das eben noch optimieren vor dem Thema SEO und Geo und so weiter? Und dann gibt es noch eine weitere Geheimwaffe. Und diese weitere Geheimwaffe ist diese. Das ist nämlich hier Your SEO Team in the Terminal, ClaudeSEO.md. Und mit ClaudeSEO.md, was Sie jetzt machen können, hier können Sie diesen Skill noch mal optimieren.
Und das ist auch keine Raketenwissenschaft. Man muss einfach nur einen Befehl korrigieren und muss ihn mit reinnehmen. Und dann kann ich das Ganze verbinden mit der Google Search Console. Ich kann es verbinden mit der Bing-Konsole, kann eine komplette SEO-Analyse machen. Last but not least, ein wichtiges Thema, wenn es um das Thema Bilder geht, dann kann man eben noch verbinden Higgsfield.
Bilder erstellen mit Higgsfield
Higgsfield ist eine Plattform, die den Charme hat, dass ich über eine Plattform ganz viele Bild- und Videoerstellungen machen kann. Und das Genialste ist, ich habe hier einen MCP-Server, und MCP heißt Model Context Protocol, und damit ist das Schöne, ist, ich kann eben hier diesen Higgsfield MCP in Claude mit integrieren. Und dann habe ich beispielsweise gesagt, Mensch, hier bei meinem Thema Blog beispielsweise habe ich halt einfach gesagt, generiere mir beispielsweise 250 Bilder, die ganzen bitte im Pop-Art-Stil. Und dann hat er mir die eben im Pop-Art-Stil gemacht.
Das heißt, die Bilder hat er mir eben komplett dadurch erstellt. Er hat mir dann die Überschriften noch mal optimiert. Und das, was ich gerade auch gesagt habe, hier ist immer das Transkript mit dabei, was mir mein echter Assistent dort immer erstellt hat. Dann habe ich gesagt, das Wichtigste in Kürze. Also hier über HappyScribe habe ich hier ein automatisiertes Transkript.
Fazit
Das Ganze noch mal von einem Menschen überlesen. Dann habe ich hier gesagt, das Wichtigste in Kürze, häufige Fragen, FAQ und hier noch mal, das könnte Sie auch interessieren. Also diese Cross-Verlinkungen, die hat der alle tutto completti automatisch gemacht. Also alles Dinge, die auch keine Raketenwissenschaft sind, aber viel Fleißarbeit. Und das ist einfach total genial.
Und ich sage mal, bevor Sie anfangen, Mit KI LinkedIn-Beiträge zu verfassen. Nutzen Sie doch KI, um Ihre Webseite nach vorne zu bringen, sodass Sie bei Google immer auf Seite 1 sind und bei ChatGPT, Perplexity, bei Google KI auch auf Seite 1 sind. Wenn Sie zu diesem Thema Unterstützung brauchen wollen, um das bei Ihnen auch einzusetzen, sprechen Sie mich gerne an. Ein Angebot, was ich habe, dass ich im Rahmen einer IT-Sparrings-Flatrate Ihnen genau bei solchen Themen helfe, dass wir gucken, wie können Sie Ihre Webseite optimieren, wie können Sie eigene Programme entwickeln, wie können Sie Microsoft 365 noch optimaler nutzen. Sprechen Sie mich bei Bedarf gerne an.
Ihr Personal IT-Coach für Führungskräfte, Thorsten Jekel.
Häufige Fragen (FAQ)
Kann man heute wirklich Websites mit KI erstellen?
Ja. Während das vor einem halben Jahr noch wenig überzeugend war, lassen sich Websites heute mit KI professionell aufbauen – Thorsten Jekel hat seine eigene Seite so neu erstellt.
Braucht man HTML-Kenntnisse, um mit KI eine Website zu bauen?
Nein. Sie müssen keinen HTML-Code beherrschen. Die Seite läuft weiter über WordPress und einen visuellen Baukasten, sodass Sie oder Ihr Team jederzeit auch manuell nacharbeiten können.
Welches KI-Tool nutzt Thorsten Jekel für die Website-Erstellung?
Er arbeitet mit Claude. Der Entwurf entsteht in Claude Design (inklusive eigenem Designsystem) und wird per „Send to Claude Code“ zur Weiterbearbeitung übergeben.
Welcher Website-Baukasten wird empfohlen – und warum Divi 5?
Empfohlen wird Divi 5. Der große Vorteil ist die günstige Lifetime-Lizenz (rund 250 $, Agenturlizenz ca. 297 $) statt eines teuren Jahres-Abos wie bei anderen Tools.
Was macht das Novamira-Plugin?
Novamira ist die Mittelkomponente, die Claude mit dem Website-Baukasten verbindet. Es funktioniert nicht nur mit Divi, sondern auch mit Elementor, Bricks, Beaver Builder, Breakdance und WooCommerce.
Wie viel kostet Novamira?
Für die Verbindung mit Claude wird die bezahlte Version benötigt. Sie kostet rund 49 € im Jahr und wird einmalig in WordPress installiert und autorisiert.
Wie mache ich meine Website mehrsprachig?
Über das Plugin WPML. Damit schalten Sie zwischen Deutsch und Englisch um und lassen Inhalte automatisch übersetzen – bei Bedarf über Claude auch nachträglich verfeinert.
Wie optimiere ich Blogbeiträge mit KI für SEO und GEO?
Sie lassen zu jedem Beitrag eine Zusammenfassung, Cross-Verlinkungen und rund zehn Fragen und Antworten erstellen. KI liebt Q&As – so findet sie leichter passende Antworten. ClaudeSEO.md in Kombination mit Google Search Console und Bing ermöglicht zudem komplette SEO-Analysen.
Womit erstelle ich passende Bilder für die Website?
Mit Higgsfield. Über den MCP-Server lässt sich die Plattform direkt in Claude einbinden und erzeugt Bilder und Videos im Batch – zum Beispiel im Pop-Art-Stil.
