Drei Codex-Design-Skills für bessere WordPress-Oberflächen

Von TikTok zum eigenen Website-Versuch

Ich baue immer wieder Webseiten. Der Hinweis auf die drei Design-Skills, um die es hier geht, kam allerdings nicht aus einer Dokumentation, sondern aus einem TikTok-Video. Dort wurden sie im Zusammenhang mit Claude Code vorgestellt. Ich wollte sie mit Codex ausprobieren und ließ Codex deshalb nach den vorgestellten Skills suchen.

Codex wurde fündig. Ich habe die drei Skills anschließend bei einer Website eingesetzt. Wie ich dabei vorgegangen bin und was beim ersten Versuch herauskam, zeige ich im nächsten Abschnitt. Hier beginnt die Geschichte erst einmal mit diesem Weg: ein Hinweis aus einem Video, die Suche mit Codex und schließlich der Einsatz bei einer eigenen Website-Arbeit.

Diesen Versuch möchte ich mit euch teilen, weil ihr vielleicht ebenfalls Webseiten baut und etwas damit anfangen könnt. Dabei interessiert mich nicht nur meine eigene Erfahrung. Ich möchte auch wissen, ob euch die drei Skills bei euren Projekten helfen. Deshalb stelle ich sie einzeln vor und zeige anschließend einen möglichen Ablauf für eine WordPress-Oberfläche.

Was beim ersten Einsatz gut funktioniert hat

Ausprobiert habe ich die drei Skills bei der Arbeit an einer Website, die ich bereits kannte. Dafür habe ich Codex die Branche genannt und den Auftrag gegeben, sich die besten Seiten dieser Branche hier in der Gegend anzuschauen. Dieser Vergleich sollte als Orientierung dienen, auch für die Erstellung passender Texte. Gemeint ist dabei nicht, fremde Formulierungen zu übernehmen, sondern eigene Inhalte für die Website zu entwickeln.

Dazu kamen einige Designvorgaben von mir. Die steckten ebenfalls im ersten Prompt – und tatsächlich kam schon mit dieser einen Eingabe ein sehr vernünftiges Ergebnis heraus. Gerade beim Design hat das für mich auf Anhieb gut funktioniert. Mit diesem ersten Einsatz war ich wirklich sehr zufrieden.

Das heißt nicht, dass damit eine fertige, fehlerfreie Website vorlag. Aber ich hatte eine gute Ausgangsbasis für die weitere Arbeit. Wie viel davon auf welchen der drei Skills zurückging, lässt sich aus diesem einen Versuch nicht ableiten. Der erste Eindruck war jedenfalls sehr positiv.

frontend-design – eine bewusste visuelle Richtung finden

Der Skill frontend-design von Anthropic setzt bei der gestalterischen Grundrichtung an. Welche Wirkung soll die Website haben? Wie passen Schrift, Farbpalette und Seitenaufbau dazu? Statt beliebige Standardoptik zu erzeugen, soll der Coding-Agent eine eigenständige, zusammenhängende Gestaltung entwickeln. Ein solcher Skill ist dabei kein WordPress-Plugin und kein Theme. Er enthält Arbeitsanweisungen für den Agenten, der die Oberfläche umsetzt. Er liefert also keine fertige Vorlage, die man in WordPress einfach einschaltet.

Für eine Unternehmenswebsite könnte ein beispielhafter Auftrag lauten: „Entwickle eine zur Branche passende visuelle Richtung. Begründe die Wahl von Typografie, Farben und Layout. Stelle die wichtigsten Leistungen klar heraus und vermeide austauschbare Gestaltung.“ Damit wird aus „Mach die Seite moderner“ eine konkretere Aufgabe. Bestehende Vorgaben wie Logo, Hausschrift oder Unternehmensfarben gehören ebenfalls in diesen Auftrag.

Das Ergebnis lässt sich anschließend an einfachen Fragen anschauen: Ist auf den ersten Blick klar, was wichtig ist? Sind die Texte gut lesbar? Wirken Überschriften, Abstände und Farben über die Seite hinweg einheitlich? Das sind keine Nachweise für den späteren Erfolg der Website. Sie helfen aber, den Entwurf nicht nur nach „gefällt mir“ zu beurteilen.

emil-design-eng – Komponenten und Details ausarbeiten

Wenn die gestalterische Richtung steht, rücken einzelne Bedienelemente und ihr Verhalten in den Mittelpunkt. emil-design-eng aus Emil Kowalskis Skill-Sammlung setzt bei dieser Detailarbeit an: bei der Ausarbeitung von Komponenten, dem Feinschliff der Oberfläche und Entscheidungen über Animationen. Damit ergänzt der Skill den visuellen Entwurf. Es geht nicht um eine neue Farbwelt, sondern darum, wie sich die vorhandene Gestaltung in konkreten Elementen fortsetzt und wie diese auf Eingaben reagieren.

Ein hypothetisches Beispiel wäre das Kontaktformular einer Website. Hier könnte ein Arbeitsauftrag lauten: „Arbeite die Zustände der Absenden-Schaltfläche und die Rückmeldungen des Formulars aus. Mache erkennbar, wann eine Eingabe fehlt, eine Anfrage verarbeitet wird oder der Versand abgeschlossen ist. Setze Bewegung nur ein, wenn sie eine Veränderung verständlicher macht.“ Das wäre ein Vorschlag für die Arbeit mit dem Skill, kein Bericht über einen durchgeführten Test.

Am Ergebnis ließe sich dann fragen: Passen die Zustände zusammen? Ist eine Rückmeldung eindeutig der jeweiligen Aktion zugeordnet? Erklärt eine Animation etwas, oder lenkt sie nur ab? Solche Fragen helfen bei der Detailarbeit, ersetzen aber keine Prüfung der tatsächlichen Bedienbarkeit und Barrierefreiheit.

web-design-guidelines – den UI-Code überprüfen

Der Skill web-design-guidelines von Vercel Labs setzt beim vorhandenen UI-Code an. Er gibt einen Prüfablauf anhand der Web Interface Guidelines vor. Vor jedem Review sollen die aktuellen Regeln neu abgerufen werden. Dafür braucht Codex Zugriff auf den relevanten Quellcode und die Möglichkeit, die Regeln aus dem Web zu laden. Sind sie nicht erreichbar, muss diese Lücke im Ergebnis stehen; ein Review nach frisch abgerufenen Regeln lässt sich dann nicht behaupten.

Die Prüfpunkte sind konkret: Ein Button, der nur ein Symbol zeigt, braucht einen zugänglichen Namen, etwa über aria-label. Formularfelder benötigen eine zugängliche Beschriftung, möglichst durch ein zugeordnetes label. Aktionen gehören auf Buttons, Navigation auf Links. Bilder brauchen einen Alternativtext; bei rein dekorativen Bildern bleibt er leer. Befunde sollen mit Datei und Zeile ausgegeben werden. So lässt sich nachvollziehen, welche Stelle beanstandet wird, statt nur eine pauschale Bewertung der Oberfläche zu erhalten.

Das ist eine Prüfung, keine automatische Reparatur. Welche Änderungen sinnvoll sind, muss anschließend entschieden und überprüft werden. Auch ein Review ohne Befunde ist weder eine Zertifizierung noch eine Garantie für vollständige Barrierefreiheit oder Rechtssicherheit.

Ein Beispielablauf für WordPress mit Codex

Für WordPress würde ich daraus folgenden Ablauf ableiten. Der konkrete nachfolgende Ablauf ist ein Beispielvorschlag: zuerst ein Backup anlegen und auf einer lokalen Kopie oder Staging-Version arbeiten. Für diesen codebasierten Beispielweg benötigt Codex Zugriff auf die relevanten Projektdateien. Änderungen über den WordPress-Admin oder einen Pagebuilder hängen von den verfügbaren Werkzeugen und Zugriffsrechten ab; die Skills allein schaffen diesen Zugriff nicht.

Vor dem Einsatz würde ich die Skills anhand ihrer vertrauenswürdigen Originalquellen prüfen und die benötigten Ressourcen und Werkzeugzugriffe klären. Die Codex-Dokumentation beschreibt, wie vorhandene Skills in CLI und IDE über /skills oder $ ausgewählt beziehungsweise erwähnt werden können. Im Auftrag würde ich trotzdem ausdrücklich festlegen, welche Skills Codex lesen und anwenden soll. Ein anpassbarer Beispielprompt könnte so aussehen:

Aufgabe: Entwickle einen Startseitenentwurf für eine WordPress-Website aus der Branche [Branche] in [Region]. Berücksichtige diese Designvorgaben: [Designvorgaben].

Arbeite ausschließlich in der bereitgestellten lokalen Kopie oder Staging-Umgebung. Prüfe zunächst die Projektstruktur und benenne die bearbeitbaren Dateien sowie technische Grenzen, etwa durch einen Pagebuilder. Erhalte bestehende Funktionen.

Lies und verwende die Skills frontend-design, emil-design-eng und web-design-guidelines. Melde vor der Umsetzung, wenn ein Skill, eine benötigte Ressource oder ein Werkzeugzugriff fehlt.

Recherchiere öffentlich zugängliche Branchenbeispiele zur Orientierung. Nenne die Quellen, aber kopiere weder deren Gestaltung noch Texte. Verwende für Unternehmensangaben nur vorhandene, belegte Informationen. Erfinde keine Leistungen, Referenzen oder Werbeaussagen; frage bei wichtigen Lücken nach.

Nutze frontend-design für die visuelle Richtung, Typografie und das Layout. Stelle den Entwurf zunächst zur Abstimmung vor. Verfeinere nach Freigabe mit emil-design-eng die Komponenten und Interaktionen; setze Animationen nur ein, wenn sie sinnvoll sind.

Prüfe den entstandenen UI-Code anschließend mit web-design-guidelines anhand der dafür frisch abgerufenen Richtlinien. Liste Befunde mit Datei und Zeile auf. Dokumentiere Änderungen und offene Punkte. Nimm aus dem Review keine ungefragten Reparaturen vor und veröffentliche nichts live.

Vor einer Übernahme würde ich den Entwurf auf Smartphone und Desktop ansehen sowie Navigation, Formulare und Tastaturbedienung selbst prüfen.

Ein guter Start ersetzt nicht die Abschlussprüfung

Ich bin mit dem Design des ersten Entwurfs sehr zufrieden. Das ist meine Erfahrung mit diesem einen Einsatz, kein Versprechen für jedes Projekt. Wenn ihr selbst Webseiten baut, probiert die Skills ruhig einmal mit euren eigenen Vorgaben aus. Dafür muss es nicht gleich die komplette neue Website sein: Auch ein Entwurf für eine einzelne Seite kann zeigen, ob euch die Gestaltung weiterhilft und was ihr noch ändern möchtet.

Inzwischen habe ich die Skills auch an vorhandenen WordPress-Blogs ausprobiert. Dabei ging es nicht um einen großen Umbau, sondern um Feinarbeit: Abstände anpassen und kleine Änderungen am Farbschema und an den Tabs vornehmen. Codex hat dabei auch die Überschriftengrößen von Seite zu Seite verglichen und sich Feinheiten angeschaut, die mir selbst manchmal gar nicht auffallen.

Ich habe Codex dabei so vorgehen lassen, dass ich zunächst sehen konnte, was geändert werden soll. Anschließend hat Codex nach meiner Freigabe gefragt und die Änderungen erst danach tatsächlich umgesetzt. Mit diesen kleinen Anpassungen an meinen bestehenden WordPress-Blogs bin ich sehr zufrieden.

Ein erster brauchbarer Entwurf ist aber noch keine fertige Seite. Gerade generierte Texte und Unternehmensangaben gehören vor einer Übernahme sorgfältig geprüft. Branchenbeispiele können bei der Orientierung helfen, sollten aber nicht als Vorlage zum Kopieren dienen. Am Ende muss die Seite zum jeweiligen Unternehmen passen – nicht nur auf den ersten Blick gut aussehen.

Ich teile diese Erfahrung, weil ich anderen Webseitenbauern damit helfen möchte. Hat euch das Ausprobieren weitergebracht? Schreibt gern in die Kommentare, was gut funktioniert hat, was nicht und wo noch Nacharbeit nötig war.

Häufige Fragen zu den Codex-Design-Skills

Sind die Skills WordPress-Plugins oder Themes?

Die Skills enthalten Arbeitsanweisungen für den Coding-Agenten. Sie sind keine WordPress-Plugins oder Themes und liefern keine fertige Vorlage, die man in WordPress einfach einschaltet.

Welche Erfahrungen habe ich mit bestehenden WordPress-Blogs gemacht?

Ich habe die Skills für Feinarbeit ausprobiert: für Abstände sowie kleine Änderungen am Farbschema und an den Tabs. Codex hat auch die Überschriftengrößen verschiedener Seiten verglichen. Die Änderungen wurden erst nach meiner Freigabe umgesetzt. Mit diesen kleinen Anpassungen bin ich sehr zufrieden.

Ist der beschriebene WordPress-Ablauf ein getesteter Workflow?

Der konkrete Ablauf mit lokaler Kopie oder Staging-Version und dem anpassbaren Beispielprompt ist ein Beispielvorschlag. Davon getrennt stehen meine beschriebenen Erfahrungen mit einer Website und der Feinarbeit an bestehenden WordPress-Blogs.

Repariert web-design-guidelines die gefundenen Probleme automatisch?

Nein. Der Skill gibt einen Prüfablauf vor. Welche Änderungen sinnvoll sind, muss anschließend entschieden und überprüft werden. Auch ein Review ohne Befunde garantiert weder vollständige Barrierefreiheit noch Rechtssicherheit.