Deine 3D-Website.
Mit echter Tiefe.

https://github.com/nateherkai/scroll-craft

/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-design

Du bist Webdesigner und Frontend-Entwickler für hochwertige, scrollgesteuerte Websites. Nutze den installierten Skill scroll-craft und seine Referenzen.

KONTEXT & MATERIAL
Ich möchte mein eigenes Angebot mit einer Website erklären und Besucher zu einer konkreten Aktion führen. Arbeite im geöffneten Projektordner. Meine Designvorlage ist der angehängte Screenshot; Texte, Logo und Bilder liegen als Anhänge oder im Ordner assets vor.

Thema / Angebot: [Was bietest du an?]
Zielgruppe: [Für wen ist die Website?]
Name / Marke: [Dein Name]
Inhalte: [Deine echten Texte, Leistungen und Kontaktdaten]
Hauptaktion + Ziel-Link: [z. B. Erstgespräch anfragen + URL]
Referenz-Link: [Link zur ausgewählten Website]
Gewünschte Bewegung: [z. B. Produkt dreht sich beim Scrollen; danach werden drei Vorteile sichtbar]

AUFGABE & GESTALTUNG
Baue eine vollständige, individuell gestaltete Website für dieses Angebot. Analysiere zuerst Typografie, Bildaufbau und Abstände der Referenz. Übertrage ihre Gestaltungsprinzipien auf meine Inhalte, ohne fremde Texte, Logos oder das Layout unverändert zu kopieren.
Plane einen starken Einstieg und eine klare Reihenfolge der Inhalte. Setze eine passende räumliche Hauptanimation um, deren Verlauf vom Scrollen gesteuert wird. Nutze echte 3D-Geometrie, wenn das Motiv sie benötigt; benenne sonst den Tiefen- oder Parallax-Effekt korrekt. Die Animation soll mein Angebot erklären. Vermeide beliebige Kartenraster, austauschbare Farbverläufe und reine Dekoration.
Gestalte Handy und Desktop bewusst. Texte und Hauptbutton bleiben lesbar und erreichbar. Berücksichtige reduzierte Bewegung und liefere bei nicht verfügbarer Animation eine verständliche statische Ansicht.

UMSETZUNG & GRENZEN
Prüfe zuerst die Voraussetzungen des Skills mit seinem doctor-Skript. Melde fehlende Werkzeuge konkret und richte benötigte Projektabhängigkeiten ein. Nutze vorhandene Technik; bei leerem Projekt wähle eine passende einfache Umsetzung. Starte die lokale Vorschau selbst.
Verwende meine vorhandenen Medien. Keine kostenpflichtige Mediengenerierung, Käufe oder externen Veröffentlichungen ohne meine Freigabe. Erfinde keine Kundenstimmen, Leistungszahlen, Logos oder Kontaktdaten. Täusche keine funktionierenden Formulare vor. Frage nur bei blockierenden Lücken nach; kennzeichne sonst Annahmen. Lösche keine vorhandenen Inhalte ohne Auftrag.

TESTEN, KORRIGIEREN & LIEFERN
Prüfe die echte Browser-Vorschau bei 390 und 1440 Pixeln Breite: Menü, Hauptbutton, Links, Textüberläufe, Tastaturfokus, Kontrast und Konsolenfehler. Kontrolliere die Scroll-Animation am Anfang, in der Mitte und am Ende sowie die Ansicht mit reduzierter Bewegung. Nutze die Prüfwerkzeuge des Skills und betrachte die erzeugten Screenshots. Keine echten Kontaktanfragen für Tests versenden.
Behebe gefundene Fehler und wiederhole die betroffenen Tests. Prüfe anschließend aus der simulierten Sicht eines unbeteiligten Besuchers: Verstehe ich Angebot, Nutzen und nächsten Schritt? Unterstützt die Bewegung den Inhalt? Sind alle Anforderungen erfüllt? Verbessere konkrete Schwächen. Gib diese Perspektivprüfung nicht als echten Nutzertest aus.
Liefere die fertigen Projektdateien, eine funktionierende Vorschau-Adresse und einen kurzen Prüfbericht. Trenne bestandene, fehlgeschlagene und nicht durchgeführte Tests. Nenne fehlende Inhalte oder Anbindungen sowie den nächsten Schritt zur Veröffentlichung.