So baut Claude Seiten, die nicht nach KI aussehen

Die 3 Skills

• Frontend-Design (von Anthropic, github.com/anthropics/skills, Ordner skills/frontend-design): Claude wählt Schrift, Farben und Aufbau bewusst passend zu Thema und Zielgruppe statt Standard-Look.
• UI UX Pro Max (github.com/nextlevelbuilder/ui-ux-pro-max-skill, MIT-Lizenz): erzeugt ein Design-System mit Stil, Farbpalette und Schriftpaar passend zur Branche.
• Skills von Emil Kowalski (github.com/emilkowalski/skills, MIT-Lizenz): Regeln für saubere Animationen, Design-Reviews und Details – aus seiner Arbeit bei Vercel und Linear.

In der Claude-App installieren (Pro, Max, Team oder Enterprise)

Mit Claude Code geht es schneller: Die Befehle stehen jeweils in der README des Repositorys (z. B. „npx skills@latest add emilkowalski/skills“). Hochgeladene Skills sind nur für dein Konto sichtbar.

1. 1In Claude die Einstellungen öffnen, Bereich Capabilities (Funktionen): Code-Ausführung und Dateierstellung einschalten.
2. 2Auf GitHub das Repository öffnen, auf „Code“ und dann „Download ZIP“ klicken und die Datei entpacken.
3. 3Den Ordner des gewünschten Skills suchen (der Ordner, in dem die Datei SKILL.md liegt) und nur diesen Ordner wieder als ZIP packen.
4. 4In Claude bei den Skills auf „Skill hochladen“ klicken und die ZIP auswählen. Claude nutzt den Skill danach automatisch, wenn er zur Aufgabe passt.

3 Prompts für deine Shop-Landingpage

Ersetze die Angaben in eckigen Klammern. Gib nur echte Fakten an – die KI soll nichts erfinden.

1. Landingpage bauenKopieren

   „Nutze den Skill frontend-design. Baue eine mobile Landingpage für [Produkt] aus meinem Shop [Name]. Zielgruppe: [wer]. Typische Situation, in der das Produkt gebraucht wird: [z. B. Radpendeln bei Regen]. Echte Fakten: [Preis, Material, Maße, Versand, Rückgabe]. Erfinde keine Bewertungen, Zahlen oder Siegel. Wähle Schrift und Farben passend zum Thema – keine lila Verläufe, keine Emojis als Icons. Gib mir eine einzelne HTML-Datei.“

2. Premium-Look mit AnimationenKopieren

   „Nutze die Skills frontend-design und die Animations-Regeln von Emil Kowalski. Mach die Seite hochwertig wie eine Marken-Website: edle Schrift, ruhige Farben, viel Weißraum. Scroll-Effekte: Die Überschrift baut sich Zeile für Zeile auf, das Produktbild bleibt beim Scrollen stehen und wechselt mit jedem Abschnitt (z. B. Farbe oder Blickwinkel), Abschnitte blenden weich ein. Wenn möglich: eine 3D-Ansicht des Produkts mit Three.js. Alles muss am Handy flüssig laufen und die Einstellung „Bewegung reduzieren“ respektieren.“

3. Design prüfen lassenKopieren

   „Prüfe diese Seite wie eine erfahrene Designerin: Typografie, Abstände, Kontrast, Lesbarkeit am Handy, Ladezeit. Nenne die 10 wichtigsten Verbesserungen mit Begründung und setze sie danach um.“

Bevor die Seite live geht – das bleibt deine Aufgabe

• Impressum und Datenschutzerklärung verlinkt (am besten die deines Shops übernehmen)
• Preise, Versandkosten und Lieferzeit stimmen mit deinem Shop überein
• Nur eigene oder lizenzierte Bilder und Schriften
• Seite ins Shopsystem eingebaut (z. B. Shopify-Seitenvorlage, WooCommerce-HTML-Block) oder von deiner Agentur einbauen lassen
• Am Handy getestet: Text lesbar, Knöpfe gut klickbar, Seite lädt schnell
• Keine erfundenen Bewertungen, Zahlen oder Gütesiegel