Was ist ein Skill?

---

Der Webdesign Skill

Dieser Skill bringt dich von einer vagen Idee („Ich brauche eine Website für meine Kaffeemarke") zu einer live deployten Website auf Vercel — über eine strukturierte kreative Pipeline in 4 Phasen.

Er orchestriert mehrere spezialisierte Tools:

• UI UX Pro Max — Design-Intelligenz mit 161 branchenspezifischen Stilregeln
• 21st.dev Magic MCP — KI-generierte React-UI-Komponenten
• Nano Banana 2 — Custom Image Generation via Google Gemini 3.1 Flash (inference.sh CLI)
• Frontend-Design Skill — Lenkt Claude zu einer eigenständigen, nicht generischen Ästhetik
• Vercel MCP — Deployment mit einem Klick

Installation

Option 1: Installation über GitHub

claude install github:3xLABS/skills/webdesign

Option 2: Installation der .skill-Datei

Wenn du die gepackte .skill-Datei hast:

claude install /path/to/webdesign.skill

Voraussetzungen

Stell sicher, dass Folgendes in deiner Umgebung eingerichtet ist:

1. UI UX Pro Max — Installiere es mit npm install -g uipro-cli, dann uipro init --ai claude
2. Nano Banana 2 — Installiere die inference.sh CLI: npx skills add inference-sh/skills@agent-tools, dann infsh login
3. 21st DEV (optional) — Wähle Favoriten unter den Komponenten aus.
4. Vercel MCP — Account erstellen und mit Claude verbinden über Claudes MCP-Einstellungen
5. Frontend-Design Skill — Sollte bei Claude (Anthropic offizieller Skill) vorinstalliert sein

So funktioniert es

Der Skill läuft durch 4 Phasen, die jeweils auf der vorherigen aufbauen. Zwischen den Phasen gibt es Kontrollpunkte, damit du die Kontrolle behältst.

Phase 1: UX Discovery & Briefing

Claude stellt dir zunächst Fragen zu deinem Projekt — für wen es ist, wie es sich anfühlen soll, welche Websites dir gefallen. Es sucht nach echten Website-Beispielen, die zu deinem Vibe passen, und nutzt dann UI UX Pro Max, um ein Design-System zu erstellen (Farben, Typografie, UI-Stil, Anti-Patterns). Alles wird in einem UX-Brief zusammengefasst, den du vor dem Weitermachen genehmigst.

Phase 2: UI-Komponentenauswahl

Auf Basis des Briefings plant Claude die Seitenbereiche (Hero, Features, Testimonials usw.) und wählt Komponenten von 21st.dev aus oder erstellt eigene. Der Frontend-Design Skill sorgt dafür, dass das Ergebnis eigenständig aussieht — nicht generisch. Du prüfst ein Component Manifest, bevor es weitergeht.

Phase 3: Bildgenerierung

Claude identifiziert alle Stellen, an denen die Website ein Custom-Bild benötigt (Hero, Icons, Hintergründe, Produktfotos), und generiert diese mit Nano Banana 2 (via infsh CLI) — mit Prompts, die auf deine Farbpalette und deinen Stil abgestimmt sind. Du prüfst und iterierst, bis die Bilder stimmen.

Phase 4: Build & Deployment

Claude baut ein Next.js-Projekt auf, implementiert das Design-System, erstellt jeden Bereich, führt Qualitätsprüfungen durch (Responsivität, Barrierefreiheit, SEO) und deployed auf Vercel. Du erhältst eine Live-URL.

Anwendungsbeispiele

Hier sind einige Prompts, die den Skill auslösen:

„Bau mir eine Landing Page für mein KI-Startup. Wir machen Dokumentenverarbeitung für Kanzleien. Ich mag den Look von Linears Website — clean, dark, subtile Animationen. Deploy es auf Vercel."

Claude stellt Rückfragen zu deinem Startup-Namen, Features, Zielgruppe und CTA und führt dich dann durch alle 4 Phasen.

„Ich brauche eine Website für meine Kaffeerösterei namens Ember & Bloom. Wir richten uns an Millennials, denen Nachhaltigkeit wichtig ist. Ich möchte etwas Warmes und Erdiges, aber Modernes."

Claude erkundet deine Ästhetik-Vorlieben, empfiehlt Terrakotta/Salbei/Creme-Paletten, generiert handwerkliche Produktfotografie und baut eine vollständige Landing Page.

„Gestalte eine Portfolio-Website für mein Fotografie-Business. Schwarz-Weiß, minimal — die Fotos sollen sprechen."

Claude fragt nach deiner Fotografie-Nische, baut ein minimales S/W-Design-System und erstellt ein bildorientiertes Layout.

„Ich möchte meine SaaS-Landing-Page neu gestalten. Hier ist die aktuelle Website: [url]. Mach sie moderner und conversion-stärker."

Claude analysiert deine aktuelle Website, fragt nach Schwachstellen und schlägt ein Redesign durch die gesamte Pipeline vor.

Tipps für beste Ergebnisse

• Sei konkret, was dir gefällt und was nicht. „Ich mag Stripes Website, weil sie komplexe Dinge einfach wirken lässt" ist hilfreicher als „Ich mag Stripe."
• Teile Referenz-Websites. Je mehr Beispiele du angibst, desto besser kann Claude deinen Geschmack treffen.
• Überspringe das Briefing nicht. Phase 1 ist der Kern des Ganzen — ein gutes Briefing führt zu einer großartigen Website.
• Iteriere bei den Bildern. Nano Banana 2 braucht für Hero-Bilder meist 2–3 Runden. Sei konkret, was geändert werden soll.
• Early deployen, oft iterieren. Vercel macht das Redeployment trivial. Bring etwas live und verfeinere es danach.

Quellcode

github.com/3xLABS/skills/tree/main/webdesign