Zum Hauptinhalt springen
Skills für Claude Code & Co.

Von WordPress zur schnellen Astro- oder Next.js-Seite, die nicht nach KI aussieht

Ein Skill zieht deine WordPress-Seite nach Astro oder Next.js um, ohne Plugin-Ballast und mit Redirects und SEO-Prüfung vor dem Umschalten. Dazu kommen 17 Webdesign-Skills, damit die neue Seite nicht wie KI-Einheitsbrei aussieht. Alles läuft direkt in Claude Code.

Pakete ansehenSo läuft die Migration
17Webdesign-Skills
445Marken-Design-Systeme
ab 247 €einmalig, zzgl. MwSt.

Bekannt aus

Heise
Der Standard
TAZ
IHK München
Trusted Shops
WordPress-Migration

Raus aus WordPress, mit Redirects und SEO-Prüfung

Der Skill „wordpress-migration“ zieht die öffentliche Seite um und prüft das Ergebnis, bevor du umschaltest. Du bekommst ihn als Download im Paket „Skills + Migrations-Skill“.

Erst erfassen, dann bauen

Der Skill liest zuerst das öffentliche Frontend deiner WordPress-Seite aus, also Seiten, Beiträge, Menüs, Medien und SEO-Daten. Bilder holt er als Original in voller Größe statt als Vorschaubild.

Astro oder Next.js

Welches Framework passt, entscheidet der Skill anhand deiner Seite. Hast du dich schon festgelegt, bleibt es dabei. Das Design baut er mit Tailwind CSS und shadcn/ui neu, Theme- und Plugin-Code wandert nicht mit.

Redirects und SEO-Parität

Deine URLs bleiben standardmäßig gleich. Jede geänderte URL bekommt einen Redirect und einen Test. Titel, Beschreibungen, Canonicals, Schema und Sitemaps aus Yoast, Rank Math und Co. bleiben erhalten.

Prüfung vor dem Umschalten

Eine Abschlussprüfung vergleicht alle Inhalte mit dem Original, sucht nach 404-Fehlern und gleicht die Optik ab. Deployment und DNS-Umstellung machst du selbst, der Skill liefert dir die Checklisten dafür.

Dafür ist die Migration gemacht

Blogs, Magazine, Firmen- und Dienstleistungsseiten. Auch WooCommerce-Kataloge ohne Kasse ziehen mit um.

Dafür nicht

Shops mit Warenkorb und Checkout, Online-Kurse, Mitgliederbereiche, Kundenkonten und Multisite. Bei Page Buildern wie Elementor und bei WPML zieht der Inhalt mit um, das Layout braucht aber Handarbeit.

Das Problem

Du erkennst KI-generiertes Webdesign auf den ersten Blick. Deine Besucher auch.

  • Hero mit Farbverlauf von Lila zu Blau, weißer Überschrift Build smarter products with AI und einer weißen Karte mit lila Button

    So nicht: Lila-Verlauf als Standardakzent (#6366f1)

    Indigo nach Blau im Hero, #6366f1 auf dem Button. Die Farbe, die niemand für diese Marke ausgesucht hat.

  • Startseite eines Datenbank-Tools: Überschrift in Space Grotesk, Fließtext in Inter, ein npm-install-Befehl in Geist Mono

    So nicht: Inter, Geist oder Space Grotesk ohne Absicht

    Space Grotesk in der Headline, Inter im Text, Geist Mono im Code-Snippet. Dieselbe Kombination wie auf tausend anderen Startseiten.

  • Zentrierter Hero mit kleiner Pill New: Workflows 2.0 is live, großer Überschrift und drei gleichen Karten mit Icon, Titel und einem Satz

    So nicht: Eyebrow-Pill + riesige Headline + drei Icon-Karten

    Zentrierte Pill, zentrierte Headline, drei gleiche Karten mit Icon im grauen Quadrat. Der Eröffnungszug fast jeder generierten Landingpage.

  • Dunkles Dashboard mit halbtransparenter Navigationsleiste und drei milchig verschwommenen Kennzahlen-Karten

    So nicht: Glassmorphism als Standard-Karten-Look

    Fünf milchige Flächen mit Blur und weißem Rand auf dunklem Verlauf. Glas als Standardoberfläche statt als einzelner Akzent.

  • Formular-Karte Create project mit Eingabefeld, Auswahlfeld und schwarzem Deploy-Button im unveränderten shadcn/ui-Look

    So nicht: Unstyled shadcn/ui-Defaults

    Schwarzer Button, graue Rahmen, 0,625 rem Radius und der unveränderte Token-Block aus der Installation. Ein Gerüst, das niemand gestaltet hat.

  • Drei Feature-Karten mit Raketen-, Schloss- und Diagramm-Emoji anstelle von Icons

    So nicht: Emoji statt echter Icons

    Rakete, Schloss und Balkendiagramm als Feature-Icons. Sehen auf jedem Gerät anders aus und auf allen nach Vorlage.

  • Dunkler Hero mit weißer Überschrift Ship features 10x faster with your AI copilot, die Wörter 10x faster als Farbverlauf von Lila zu Orange

    So nicht: Verlaufstext in der Headline

    Zwei Wörter der Headline in Lila nach Orange, der Rest weiß. Nach KI-Lila der bekannteste Griff generierter Heros.

  • Zwei Reihen grauer Platzhalter-Logos mit Namen wie Globex und Initech unter der Zeile Trusted by teams at

    So nicht: „Trusted by“-Logoband mit Platzhalter-Logos

    Graue Wortmarken erfundener Firmen laufen endlos durchs Bild. Bewegung soll den Beweis ersetzen.

  • Abschnitt How it works mit drei Spalten, jede mit kleiner grauer Nummer 01, 02 oder 03 und Schrägstrich über der Überschrift

    So nicht: Dekorative „01 / 02 / 03“-Eyebrows

    Nummern über Abschnitten, die niemand der Reihe nach liest. Geliehen aus Portfolio-Templates, damit eine schlichte Sektion gestaltet wirkt.

  • Cremefarbene Startseite eines Keramikstudios mit Serifen-Überschrift, einem kursiven rostroten Wort und rostrotem Button

    So nicht: Creme, Rost und kursive Serife: der neue leise Standard

    Cremefarbener Hintergrund, rostroter Akzent, Serifen-Headline mit einem kursiven Wort. Das „Hochwertig“, das aktuelle Modelle liefern, wenn nichts im Briefing entscheidet.

Das Bundle

17 Skills für Webdesign, das nicht nach KI aussieht

Version 6.1.0 deckt alles ab, von der Seitenarchitektur über Design, Schriften und Icons bis zum Audit vor dem Launch. Jeder Skill ist ein festes Regelwerk mit eigenen Scripts, kein vager Prompt.

webdesigner

  • Baut Interfaces, von einer Komponente in deiner App bis zum ersten Entwurf einer neuen Website
  • 445 echte Marken-Design-Systeme und 11 MIT-lizenzierte Website-Vorlagen als Ausgangspunkt
  • Der volle Prozess entwickelt drei Richtungen, macht Kritikrunden und endet mit einer Freigabeprüfung
  • Optionale Bildgenerierung mit deinem eigenen Gemini-Key

webdesigner-codex

  • Die Variante von webdesigner für GPT-Modelle in Codex
  • Baut zwei Richtungen und vergleicht sie als echte Screenshots, bevor du wählst
  • Ein unabhängiger Kritiker prüft die gerenderten Seiten
  • Nur für Codex gedacht, in Claude nutzt du webdesigner

site-architecture

  • Plant Seitentypen, Navigation, URL-Struktur, Sprachen und Redirects
  • Drei Tiefen, von der schnellen Skizze bis zum ausführlichen Plan
  • Empfiehlt als Technik nur Next.js, Astro oder schlichtes HTML/CSS/JS
  • Optionaler CSV-Check ohne Zusatzpakete

design-md-builder

  • Baut eine DESIGN.md aus Markenunterlagen, Live-Seite, Screenshots, Figma oder Code
  • Ein mitgelieferter Extraktor misst eine Live-Seite im Hintergrund aus
  • Trennt gemessene Werte, Vorschläge und offene Entscheidungen sauber
  • Gibt die Design-Tokens an webdesigner und color-palette-generator weiter

color-palette-generator

  • Farbpaletten aus einem Hex-Wert, einem Bild oder einer Markenvorlage
  • Prüft WCAG-Kontraste bis zur AAA-Matrix und leitet Dark-Mode-Varianten ab
  • Simuliert Farbsehschwächen in einer Vorschau
  • Export für Tailwind, CSS, SCSS, Figma, Style Dictionary und Material

custom-font-creator

  • Entwirft eigene Display-Schriften und liefert TTF, WOFF2, CSS und ein HTML-Muster
  • Macht aus einem Briefing 12 unterschiedliche Richtungen
  • Baut statische Schriftfamilien in mehreren Strichstärken
  • Setzt ein Logo als SVG-Wortmarke

icon-set-designer

  • Hilft dir, ein eigenes, einheitliches SVG-Icon-Set im Stil deiner Marke zu zeichnen
  • Prüft jede Form und misst, was bei 16 Pixeln noch erkennbar bleibt
  • Erstellt Kontaktbögen und einen Blindtest zur Wiedererkennung
  • Export als SVG, Sprite, React-Komponenten und CSS

web-cloning

  • Baut eine bestehende Seite in einem neuen Projekt mit shadcn/ui und Tailwind CSS v4 nach
  • Läuft auf Next.js oder Astro
  • Misst das Original im Browser aus und übernimmt keinen fremden Quellcode
  • Vergleicht Original und Nachbau Pixel für Pixel, bis beide übereinstimmen

design-slop-remover

  • Findet generische und KI-typische Muster in einer bestehenden Seite
  • Ein Scanner listet Kandidaten, ein optionaler Check misst Kontrast, Fokus und Bewegung
  • Korrekturen bleiben klein und brauchen deine Freigabe
  • Ein Scanner-Treffer allein gilt nie als Fehler

website-audit

  • Ein Einstieg für das komplette Audit oder einen von 14 Teilbereichen
  • Barrierefreiheit nach WCAG 2.2, Performance, Sicherheit, Datenschutz und SEO-Grundlagen
  • Prüft auch Mobilansicht, Formulare, Mehrsprachigkeit und Rechtsfragen für DE und EU
  • Schreibt einen Gesamtbericht mit Befunden und Punkten zur Handprüfung

web-image-optimizer

  • Prüft, wie deine Seite Bilder ausliefert
  • Plant Formate, responsive Varianten, srcset und sizes
  • Achtet auf feste Abmessungen und das LCP-Bild
  • Überschreibt nie deine Originale

web-code-standards

  • Sauberes HTML, CSS und JavaScript mit datiertem Stand der Browser-Unterstützung
  • Semantisches und barrierefreies Markup, Formulare und Fehlermeldungen
  • Cascade Layers, Container Queries, Farben und Bewegung
  • Ersetzt die früheren Skills für CSS, HTML und JavaScript

next-best-practices

  • Aktuelle Regeln für Next.js 16 mit App Router
  • Grenzen zwischen Server und Client Components, async APIs und Cache Components
  • Metadata, Bilder, Fonts, Sicherheit und Barrierefreiheit
  • Läuft auch in reinen Chat-Tools

screenshot

  • Website-Screenshots lokal im Hintergrund, ohne externe API
  • Nutzt einen bereits installierten Browser
  • Fasst deine persönlichen Browser-Profile standardmäßig nicht an

logo-downloader

  • Lädt Logos von Firmen, Apps und Websites aus 22 Quellen
  • SVG zuerst, Rastergrafik als Rückfall
  • Bereinigt SVGs und speichert zu jeder Datei die Herkunft

domain-checker

  • Sammelt Ideen für Marken- und Domainnamen
  • Prüft 100 Domain-Endungen per RDAP
  • Unterscheidet registriert, frei und unsicher und kauft nie selbst

remove-background

  • Stellt Bilder lokal frei, ohne Cloud-Dienst
  • Transparente PNG und WebP oder ein eigener Hintergrund
  • Verarbeitet ganze Ordner und nutzt auf Apple Silicon CoreML
Beispiele

22 Beispielseiten zum Anklicken

Alle Kunden auf dieser Seite sind erfunden. KI-Agenten haben die Beispielseiten mit den Skills gebaut und in mehreren Kritikrunden nachgeschärft. Fertige Kundenprojekte sind das nicht, und perfekt sind sie auch nicht.

Sieh sie dir als Arbeitsproben an. Jede Demo öffnet als echte Webseite in einem neuen Tab. Formulare senden nichts, Texte, Preise und Kontaktdaten sind erfunden. Ist eine Demo auf Englisch, steht das auf der Karte.

Mit Codex gebaut

6 Beispielseiten aus Codex

Die Webdesign Skills funktionieren nicht nur in Claude. Diese Seiten hat Codex mit GPT-6.1 Sol und dem Skill webdesigner-codex gebaut, einer eigenen Variante für GPT-Modelle. Auch hier sind alle Kunden erfunden.

Codex hat jede Seite selbst entworfen und gebaut. Nach einer unabhängigen Sichtprüfung hat es sie in Korrekturrunden nachgebessert. Von 8 gebauten Seiten zeige ich dir die 6, die eine strenge Abschlussprüfung bestanden haben.

Kompatibilität

Läuft in deinen Tools

Die Skills nutzen das offene Skill-Format. Getestet habe ich sie in Claude Code und in Codex.

Claude Code
ChatGPT Codex
webdesigner
webdesigner-codex
site-architecture
design-md-builder
color-palette-generator
custom-font-creator
icon-set-designer
web-cloning
design-slop-remover
website-audit
web-image-optimizer
web-code-standards
next-best-practices
screenshot
logo-downloader
domain-checker
remove-background

Die meisten Skills führen Scripts aus und brauchen deshalb ein Tool mit Ausführungsumgebung. Nur web-code-standards und next-best-practices funktionieren auch im reinen Chat. webdesigner-codex ist für Codex gedacht, dort ersetzt es webdesigner. Andere Tools mit Skill-Unterstützung lesen dasselbe Format, getestet habe ich sie aber nicht.

So funktioniert es

Kaufen, entpacken, loslegen

Kein Abo und keine Pflicht-API-Keys.

1. Kaufen und herunterladen

Sichere Zahlung über Polar. Den Download-Link bekommst du direkt danach per E-Mail.

2. Entpacken und kopieren

Ein Befehl im Terminal kopiert die 16 Skills für Claude an die richtige Stelle. webdesigner-codex richtest du nur für Codex ein.

unzip webdesign-skills-*.zip && cd webdesign-skills && cp -R webdesigner color-palette-generator custom-font-creator design-md-builder design-slop-remover domain-checker icon-set-designer logo-downloader next-best-practices remove-background screenshot site-architecture web-cloning web-code-standards web-image-optimizer website-audit ~/.claude/skills/

3. Bauen wie immer

Claude Code lädt die Skills, sobald du eine Seite baust, ein Interface gestaltest oder eine Migration startest.

Das brauchst du

  • Claude Code oder ein anderes Tool mit Skill-Unterstützung, dazu ein Terminal
  • Node.js 22 oder neuer und einen installierten Chrome, Chromium, Edge oder Brave für die Browser-Skills
  • Für alle 17 Skills brauchst du Python 3.12 oder 3.13. custom-font-creator und remove-background brauchen außerdem die Python-Pakete aus der mitgelieferten Anleitung. Die separate WordPress-Migration läuft ab Python 3.11.
  • Entwickelt und getestet auf macOS. Unter Linux (arm64) laufen die Test-Suites durch, Windows habe ich nicht getestet.
Finn
15+ Jahre Online-Marketing
1.200+ Kunden
Wer dahintersteckt

Hi, ich bin Finn

KI-Experte, Gründer von gradually.ai und Blogmojo

Ich bin kein Programmierer und kein Designer. Trotzdem habe ich mit Claude Code hunderte echte Apps, Skripte und Websites gebaut, darunter gradually.ai selbst.

Dabei bin ich immer wieder in dieselbe Falle getappt. KI-generierte Seiten sehen alle gleich aus, mit lila Verläufen, derselben Schrift und denselben drei Karten. Diese Skills sind das Ergebnis, ein festes Regelwerk gegen genau dieses Problem.

Seit 2011 bin ich Online-Unternehmer und habe in meinen Online-Kursen und meiner KI-Membership, dem KI Business Club, über 1.000 Menschen dabei geholfen, KI sinnvoll zu nutzen.

  • Hunderte Apps, Skripte und Websites mit Claude Code gebaut
  • Gründer von Blogmojo und Gradually AI
  • Vom Nicht-Programmierer zum App-Bauer
  • 100+ kleinere und größere Tools mit KI entwickelt
PS: Diese Skills sind keine Theorie. Ich nutze sie bei jeder neuen Seite und jedem neuen Tool auf gradually.ai.
Preise

Wähle dein Paket

Alle Preise sind Einmalzahlungen zzgl. MwSt. Kein Abo.

Skills

Die 17 Webdesign-Skills für deine nächste Seite, ohne Migration.

247 €

einmalig, zzgl. MwSt.

  • Alle 17 Skills in Version 6.1.0
  • 445 Marken-Design-Systeme und 11 Website-Vorlagen
  • Lebenslange Updates
  • Für eigene Projekte und Kundenprojekte
Jetzt kaufen

Sichere Zahlung über Polar. Die MwSt. wird an der Kasse ergänzt, die Rechnung kommt automatisch.

Empfehlung

Skills + Migrations-Skill

Für alle, die von WordPress weg wollen. Das Paket, das ich den meisten empfehle.

500 €

einmalig, zzgl. MwSt.

  • Alles aus „Skills“
  • Den Skill „wordpress-migration“ als Download für den Umzug nach Astro oder Next.js
  • Redirects, SEO-Parität und Abschlussprüfung vor dem Umschalten
  • Klare Ampel, welche WordPress-Seiten sich eignen
Jetzt kaufen

Sichere Zahlung über Polar. Die MwSt. wird an der Kasse ergänzt, die Rechnung kommt automatisch.

Auf Anfrage

Done for you

9.997 €einmalig, zzgl. MwSt.

Du willst die Migration gar nicht selbst machen? Dann klone ich deine Website eins zu eins, richte sie komplett ein und erkläre dir in einem Coaching, wie alles funktioniert.

Passt zu Content-Seiten wie Blogs, Firmen- und Dienstleistungsseiten. Shops und Mitgliederbereiche übernehme ich nicht. Den genauen Umfang klären wir vorher in einem Gespräch.

Anfrage per E-Mail

Häufig gestellte Fragen

Alles, was du vor dem Kauf wissen musst.

Ich habe die Webdesign Skills schon gekauft. Was bekomme ich?
Version 6.1.0 mit allen 17 Skills bekommst du als kostenloses Update. Du lädst sie wie gewohnt über deinen Kaufzugang bei Polar herunter.
Welches Paket ist das richtige für mich?
Willst du neue Seiten bauen oder bestehende verbessern, reicht „Skills“. Willst du von WordPress weg, nimm „Skills + Migrations-Skill“. Beide Pakete sind Downloads, die du selbst in Claude Code einsetzt. Soll ich die Migration für dich übernehmen, frag „Done for you“ an.
Was ist ein Claude-Code-Skill überhaupt?
Ein Skill ist ein Ordner mit Anweisungen, Regelwerken und teils Scripts, den Claude Code lädt, wenn er gebraucht wird. Du kopierst ihn einmal in dein Skills-Verzeichnis, danach arbeitet er bei jeder passenden Aufgabe mit.
Was brauche ich, damit alles funktioniert?
Claude Code oder ein anderes Tool mit Skill-Unterstützung, ein Terminal, Node.js 22 oder neuer und Python 3.12 oder 3.13 für alle 17 Skills. custom-font-creator und remove-background brauchen außerdem die Python-Pakete aus der mitgelieferten Anleitung. Die separate WordPress-Migration läuft ab Python 3.11. Für die Browser-Skills brauchst du einen installierten Chrome, Chromium, Edge oder Brave.
Läuft das auf Windows?
Entwickelt und getestet habe ich alles auf macOS. Unter Linux (arm64) laufen die Test-Suites durch. Windows habe ich nicht getestet, deshalb kann ich es dir dort nicht versprechen.
Welche WordPress-Seiten kann die Migration umziehen?
Gut geeignet sind Blogs, Magazine, Firmen- und Dienstleistungsseiten, auch mit Yoast, Rank Math, Contact Form 7 oder einem WooCommerce-Katalog ohne Kasse. Bei Page Buildern wie Elementor und bei WPML zieht der Inhalt mit, das Layout braucht aber Handarbeit. Shops mit Checkout, Online-Kurse, Mitgliederbereiche, Kundenkonten und Multisite kann der Skill nicht umziehen.
Was passiert mit meinen Rankings?
Der Skill hält deine URLs gleich, setzt für jede geänderte URL einen Redirect und übernimmt Titel, Beschreibungen, Canonicals, Schema und Sitemaps. Vor dem Umschalten prüft er, dass keine alte URL ins Leere läuft. Eine Garantie für Rankings kann dir nach einem Umzug allerdings niemand geben, ich auch nicht.
Zieht der Skill meine Seite auch auf den Server um?
Nein. Deployment, DNS-Umstellung und das Abschalten von WordPress machst du selbst. Der Skill liefert dir dafür Checklisten und empfiehlt einen Workflow über GitHub.
Was ist der Unterschied zwischen webdesigner und webdesigner-codex?
Beide teilen dasselbe Regelwerk. webdesigner ist für Claude gedacht, webdesigner-codex für GPT-Modelle in Codex. Die Codex-Variante liest Beispiele und Scripts aus dem webdesigner-Ordner, deshalb liegen beide im Bundle nebeneinander.
Brauche ich einen API-Key?
Nein. Nur ein paar optionale Extras nutzen deinen eigenen Key, z. B. die Bildgenerierung in webdesigner mit einem Gemini-Key oder die Bildstudien in custom-font-creator und icon-set-designer. Alles andere läuft ohne.
Ist das ein Abo?
Nein. Du zahlst einmal und nutzt die Skills, solange du willst. Die Preise verstehen sich zzgl. MwSt.
Bekomme ich Updates?
Ja. Updates der 17 Skills sind lebenslang kostenlos. Neue Versionen lädst du jederzeit über deinen Kaufzugang bei Polar herunter.
Darf ich die Skills für Kundenprojekte nutzen?
Ja. Eigene Projekte und Kundenprojekte sind ausdrücklich erlaubt. Nur die Skills selbst weiterverkaufen oder weitergeben, das geht nicht.
Wie läuft der Kauf ab und wer stellt die Rechnung?
Die Zahlung läuft über Polar als Merchant of Record. Polar kümmert sich um die EU-MwSt. und stellt dir automatisch eine korrekte Rechnung aus. Direkt nach dem Kauf bekommst du den Download-Link per E-Mail.
Kann ich den Kauf widerrufen?
Bei digitalen Produkten erlischt das Widerrufsrecht, sobald du dem sofortigen Download zustimmst (Standard bei Polar). Passt trotzdem etwas nicht, schreib mir einfach an info@gradually.ai. Wir finden eine Lösung.