Communitygithub.com

Xaomisatoshi/ultra-3d-premium-landing-architect-skill

Erstellt aus einem kurzen Briefing vollständige, responsive Ultra-3D-Premium-Landingpages mit Conversion-Copy, visueller Art Direction, Interaktionen, umsetzbarem Code oder No-Code-Builder-Anleitung und überprüfbarem QA-Gate.

Was ist ultra-3d-premium-landing-architect-skill?

Dieser Skill ist ein professioneller Landingpage-Architekt, der aus einer kurzen Anforderung (Briefing) eine komplett responsive, hochwertige Single-Page-Website mit auffälligen 3D-Effekten erstellt. Er wählt zufällig aus über 20 verschiedenen Designstilen (wie Neobrutalismus, Glassmorphismus, Japandi oder Retro-Futurismus) oder kombiniert 2–3 Stile – wichtig ist eine echte Zufallsauswahl, nicht die Voreinstellung auf einen Lieblingsstil. Der Skill generiert nicht nur Markdown-Code, sondern liefert auch Conversion-orientierte Texte, visuelle Richtung, interaktive 3D-Animationen (Maus-Tracking, Scroll-Explosionen, Klick-Konfiguratoren) und eine Anleitung zur Umsetzung in Code oder No-Code-Buildern. Zusätzlich enthält er ein QA-Gate zur Überprüfbarkeit der Ergebnisse. Er ist ideal für Agenturen, Freelancer und Entwickler, die schnell Premium-Landingpages, 3D-Websites oder interaktive Produktseiten erstellen möchten – sowohl für Desktop als auch mobil.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Xaomisatoshi/ultra-3d-premium-landing-architect-skill/tree/HEAD

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Ultra 3D Premium Landing Architect

Erstellen Sie eine EINSEITIGE LANDING-PAGE unter Verwendung eines ZUFÄLLIG AUSGEWÄHLTEN Designstils aus der folgenden Liste, oder wählen Sie Ihren eigenen Stil, falls Sie etwas Passenderes finden, das nicht aufgeführt ist, oder Sie können auch 2–3 Designstile kombinieren. Wichtig: Verwenden Sie ein Zufallsverfahren – jede Methode, die für Abwechslung sorgt. Greifen Sie NICHT automatisch auf „Neobrutalismus“ oder einen bestimmten Lieblingsstil zurück. Führen Sie eine echte Zufallsauswahl durch.

Verfügbare Designstile (die Liste ist nicht erschöpfend – Sie können gerne auch andere professionelle Stile identifizieren und verwenden):

  • Neobrutalistisch (rohe, kühne, provokative Optik mit strukturierter Wirkung)
  • Schweizer/International (rasterbasiert, systematisch, extrem klare Typografie)
  • Redaktionell (von Zeitschriften inspiriert, raffinierte Typografie, artikelorientiert)
  • Glassmorphismus (durchscheinende Ebenen, unscharfe Hintergründe, Tiefe)
  • Retro-futuristisch (Zukunftsvision der 80er Jahre, raffinierte Nostalgie)
  • Bauhaus (geometrische Schlichtheit, Grundformen, Form folgt Funktion)
  • Art Déco (elegante Muster, Luxus, Vintage-Raffinesse)
  • Minimalistisch (extreme Reduktion, maximaler Weißraum, nur das Wesentliche)
  • Flat (keine Tiefe, Volltonfarben, einfache Symbole, klar)
  • Material (von Google inspiriert, Karten, dezente Schatten, Bewegung)
  • Neumorphic (weiche Schatten, extrudierte Elemente, haptisch)
  • Monochromatisch (Variationen einer einzigen Farbe, tonale Tiefe)
  • Skandinavisch (Hygge, natürliche Materialien, warmer Minimalismus)
  • Japandi (japanisch-skandinavische Fusion, Zen trifft auf Hygge)
  • Dark Mode First (für dunkle Benutzeroberflächen konzipiert, kontrastreiche Eleganz)
  • Modernistisch (klare Linien, funktionale Schönheit, zeitlos)
  • 3D-Renderings & Computer/Technologie
  • Der „Glassmorphism“
  • Der organische „Blob“
  • 3D-Partikel-Wellen: Hunderte kleine Punkte oder Linien, die sich wie eine digitale Welle bewegen – ideal für KI-, Web3- oder Daten-Startups.

🌐 Immersive 3D-Erlebnisse & Scroll-Animationen

📱 3D Device Mockups

✨ Micro-Animationen mit Funktion

🪟 Glassmorphism & Dark Mode

🖤 Isometrische 3D-Elemente

Interaktive 3D-Effekte für Landingpage:

  1. Mouse-Track: Das 3D-Objekt (z. B. ein Tech-Gadget oder ein abstrakter Code-Würfel) im Hero-Bereich bewegt sich minimal mit der Maus des Nutzers mit.
  2. Scroll-Animate: Wenn der Nutzer nach unten scrollt, dreht sich das Produkt (z. B. ein Sneaker oder eine Flasche), zerlegt sich in seine Einzelteile (Explosionszeichnung) und erklärt so die Features.
  3. Klick-Konfigurator: Nutzer können auf verschiedene Farben oder Knöpfe der 3D-Grafik klicken, woraufhin sich das Modell in Echtzeit verändert.

Verwandte Skills