Agentur-Webseite mit Claude: 3 kostenlose Skills
Amir TahassoriViel Spaß damit! 👋
Agentur-Webseite mit Claude: 3 kostenlose Skills
Eine Webseite, die aussieht, als hätte eine Agentur Tausende dafür bekommen – gebaut von Claude Code. Dafür brauchst du vier Bausteine: Claude Code, UI UX Pro Max, einen Startbereich von 21st.dev und Framer Motion. Hier ist alles plus der Befehl, der sie zusammenbringt.
Die 4 Bausteine
1. Claude Code
Claude Code läuft auf deinem Rechner (im Terminal oder in der Claude-Desktop-App) und baut echte Dateien. Du brauchst einen bezahlten Claude-Plan. Anleitung: Claude Code einrichten (Anthropic).
2. UI UX Pro Max (kostenlos)
Ein Skill, mit dem Claude saubere, moderne Layouts baut: Er bringt Stile, Farbpaletten, Schriftpaare und Regeln für gute Landingpages mit. Ich habe ihn selbst installiert. In Claude Code eingeben:
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill /plugin install ui-ux-pro-max@ui-ux-pro-max-skill
Quelle + Alternative per npm: GitHub: ui-ux-pro-max-skill (MIT-Lizenz). Braucht Python 3.
3. Startbereich von 21st.dev
Auf 21st.dev findest du fertige Bereiche wie Hero-Sections. Bei jedem gibt es einen Knopf „Copy prompt“ – den Text fügst du in Claude Code ein, und Claude baut den Bereich in deine Seite.
Ansehen ist kostenlos, kopieren geht kostenlos 2-mal am Tag (Stand 23.10.2026). Mehr gibt es mit Mitgliedschaft.
4. Framer Motion
Die Animations-Bibliothek, mit der sich jeder Bereich der Seite beim Scrollen bewegt. Claude kann sie direkt einbauen. Wer einen eigenen Skill dafür will: Die kostenlose Sammlung claudedesignskills enthält einen Framer-Motion-Skill (MIT-Lizenz):
/plugin marketplace add freshtechbro/claudedesignskills /plugin install core-3d-animation
Der Befehl, der alles zusammenbringt
Einmal in den Kasten tippen – alles wird markiert. In Claude Code in einem leeren Ordner einfügen und ausfüllen.
Bau mir eine Landingpage für: [Firma / Angebot in 2 Sätzen]. Zielgruppe: [wer]. Ziel der Seite: [z. B. Anfrage, Termin, Kauf]. 1. Nutze den Skill ui-ux-pro-max: Schlag mir zuerst 3 Stilrichtungen vor (Stil, Farben, Schriften) und warte auf meine Wahl. 2. Nutze als Startbereich diese Komponente von 21st.dev: [hier den kopierten Prompt einfügen]. 3. Animiere die Bereiche mit Framer Motion: dezent, beim Scrollen, nichts blinkt. Respektiere „weniger Bewegung“ in den Geräte-Einstellungen. 4. Bereiche: Hero, Problem, Lösung, Ablauf in 3 Schritten, Stimmen von Kunden (nur Platzhalter, nichts erfinden), häufige Fragen, Kontakt. 5. Zuerst fürs Handy, dann für den Desktop. Schnelle Ladezeit, saubere Überschriften (eine H1). 6. Zeig mir am Ende eine Vorschau im Browser und eine Liste, was ich noch selbst eintragen muss.
Ehrlich gesagt
- Schön ist nicht gleich verkauft: Der Text auf der Seite entscheidet, ob jemand anfragt. Design ist nur die Verpackung.
- Online stellen musst du die Seite noch selbst, zum Beispiel bei einem Hoster. Claude erklärt dir die Schritte.
- Rechtliches wie Impressum und Datenschutz prüfst du selbst oder mit einem Profi.
Häufige Fragen
Brauche ich Programmierkenntnisse?
Nein, aber du solltest bereit sein, Befehle zu kopieren und das Ergebnis genau anzusehen.
Kann ich so Webseiten für Kunden bauen?
Ja. Prüf vorher die Lizenzen der Komponenten, die du nutzt, und plane Zeit für Texte und Feinschliff ein.
Was kostet das?
Die Skills sind kostenlos. Du brauchst einen bezahlten Claude-Plan für Claude Code und ggf. Hosting für die fertige Seite.
Passend dazu
- Webseiten für lokale Firmen mit KI bauen: 3 Prompts
- Landingpage mit ChatGPT erstellen: Prompt, der verkauft
- Claude Code Plugins: 4 kostenlose für den Start
- Google Platz 1 mit Claude: 10 kostenlose SEO-Tools
Stand: 23.10.2026 · Quellen: GitHub-Seiten der Projekte, 21st.dev. Preise und Bedingungen können sich ändern. Von Amir Tahassori.