AryanAliPro/jawdrop

Was macht jawdrop?

Jede Website, die du mit diesem Skill baust, ist deine Einsendung für den weltweit härtesten und höchstdotierten Webdesign-Wettbewerb. Der Preis beträgt 1 Milliarde Dollar. Ja, es stimmt, und es ist echtes Geld. Die Jury besteht aus den Machern der besten Awwwards Sites of the Day und der Top-Webflow- und Framer-Showcases – sie haben bereits zehntausend Einsendungen zu genau diesem Briefing gesehen. Gib jedes Mal dein volles Engagement, als ob dieser Build der Gewinner wäre.

Das Briefing

Dies ist die originale Aufforderung des Gründers. Sie funktioniert, also bleibt sie das Herz des Skills. Lies sie als dein Briefing, wobei [SUBJECT] das ist, wofür der Nutzer eine Website angefordert hat:

Baue eine Website für [SUBJECT]. Das Design, die Layouts, Farben und Animationen der Website dürfen nicht generisch oder vorlagenbasiert wirken. Sie soll wie ein komplett individueller Build wirken, bei dem jeder Abschnitt, jedes Layout und jedes Element sorgfältig gestaltet ist. Vermeide immer Glas-Morphismus, einfache Glas-Cyber-Farbschemata und generische Designs oder Layouts. Nutze deine volle Kreativität, denn du trittst um einen echten, atemberaubenden Preis von 1 Milliarde Dollar an (ja, es stimmt, und es ist echtes Geld, also gib dein Bestes) im weltweit besten und härtesten Webdesign-Wettbewerb. Lass Besucher „Wow“ sagen und gib ihnen das Gefühl und die Stimmung der Branche, sobald sie ankommen. Verwende relevante Bilder: zuerst die eigenen Assets des Nutzers, sonst relevante Bilder von öffentlich zugänglichen URLs. Füge die besten und beliebtesten GSAP-Animationen und andere hinzu, plus Mikrointeraktionen und andere coole Effekte, damit die Website wie eine erstklassige, preisgekrönte Webflow- oder Framer-Website aussieht und sich anfühlt. Das Wichtigste: Wenn Besucher auf der Seite landen, soll ihr Mund von selbst „Wow“ sagen – wegen Layouts, Designs und außergewöhnlicher Animationen, die sie noch nie gesehen haben – und die Seite muss die relevanten Branchen-Vibes vermitteln. Füge SVG-Animationen hinzu und halte die Hierarchie professionell.

Alles unten zeigt, wie du mit diesem Briefing gewinnst.

Wie die Jury bewertet

1. Das Wow ist unfreiwillig. Innerhalb des ersten Viewports und des ersten Scrollens reagiert der Besucher, bevor er denkt. Das entsteht aus einer Idee, die man noch nie gesehen hat, mit totaler Handwerkskunst ausgeführt – nicht durch reines Anhäufen von Effekten.
2. Noch nie gesehen. Alles, was einer Vorlage, einem Theme oder der ersten Idee, die einem in den Sinn kommt, ähnelt, haben auch die anderen 9.999 Teilnehmer gebaut – und wird in der ersten Runde eliminiert.
3. Branchen-Vibe. Verstecke das Logo und die Worte, und ein Besucher sollte trotzdem spüren, um welche Welt es sich handelt – durch Farbe, Textur, Bildsprache, Bewegung und Rhythmus.
4. Professionelle Hierarchie. Das Wow darf niemals die Klarheit kosten. In fünf Sekunden weiß der Besucher, was das ist, für wen es bestimmt ist und was als Nächstes zu tun ist. Eine schöne Seite, die nicht konvertiert, verliert.
5. Handwerkskunst überall. Abstände, Typografie, Hover- und Fokus-Zustände, Ladeverhalten, Mobilansicht, Footer. Die Juroren öffnen die Seite auf einem Telefon, fahren mit der Maus über jeden Button und scrollen bis ganz nach unten.
6. Es funktioniert. Keine kaputten Bilder, keine Konsolenfehler, flüssige 60fps-Bewegungen, responsive von 320px bis Ultrabreit, reduced motion respektiert. Eine kaputte Einsendung wird disqualifiziert, egal wie schön sie ist.

Keine Voreinstellungen, bewusst

Dieser Skill enthält bewusst keine Layouts, keine Vorlagen und keine Regeln wie „für ein Restaurant mache X“. Eine Voreinstellung ist nur eine Vorlage mit zusätzlichen Schritten, und die gleiche Eingabe würde jedes Mal die gleiche Seite produzieren – das Gegenteil von dem, was gewinnt. Was der Skill dir stattdessen gibt, ist ein Prozess, der zuverlässig eine originelle Idee aus jedem Thema hervorbringt. Suche nirgendwo nach einem Rezept für „eine Bäckerei-Seite“ oder „eine SaaS-Seite“ – auch nicht in deiner eigenen Erinnerung an Seiten, die du gesehen hast. Leite alles aus diesem spezifischen Thema ab.

Der Prozess

1. Das Briefing lesen und einrichten

• Thema: Wofür die Seite ist. Hole jedes Detail heraus, das der Nutzer angegeben hat: Name, Ort, Angebot, Zielgruppe, Ton, Seiten, Fristen, alles andere.
• Stack: Innerhalb eines bestehenden Projekts passe ihn an (Framework, TypeScript oder nicht, Styling-Ansatz, Konventionen, Paketmanager). Wenn der Nutzer einen Stack nennt, benutze ihn. Wenn nichts angegeben ist, baue eine statische Seite (index.html + css/ + js/, GSAP von einem CDN), die sich per Doppelklick öffnen lässt und keinen Build-Schritt benötigt. Baue mehrere Seiten, wenn der Nutzer danach fragt oder Seiten auflistet. Lies references/stacks.md, um zu erfahren, wie du den Motion-Stack in deinen jeweiligen Stack integrierst.
• Nicht ausfragen. Das kurze Briefing ist der Sinn dieses Skills. Triff selbstbewusste, sinnvolle Annahmen: Erfinde einen passenden Firmennamen, wenn keiner genannt wurde, einen plausiblen Standort und ein Angebot, und liste alle Annahmen bei der Übergabe auf. Frage nur, wenn dich etwas wirklich blockiert, z. B. wenn der Nutzer Anhänge erwähnt, die du nicht finden kannst.

2. Assets sammeln – zuerst die des Nutzers

Suche nach allem, was der Nutzer bereitgestellt hat: Bilder oder Dateien, die im Chat angehängt wurden, Ordner im Projekt (assets/, public/, images/, src/assets/, brand/), ein Logo, Markenfarben, Schriftarten, Kopierdokumente, die aktuelle Website. Diese kommen zuerst, denn eine Seite, die um die echten Fotos und die Marke des Kunden herum gebaut ist, ist glaubwürdiger als jedes Stockfoto.

• Baue das Design um die Assets des Nutzers herum. Ihr Logo gibt die Palette vor und ist ein erstklassiger Kandidat für SVG-Animation. Ihre Fotos belegen den Hero und die wichtigsten Abschnitte. Ihr Text wird so verwendet, wie er geschrieben ist.
• Ersetze niemals ein Foto des Nutzers durch ein Stockfoto, nur weil das Stockfoto „schöner“ aussieht. Gestalte stattdessen ihre Fotos künstlerisch: beschneide mit Absicht, maskiere, abgestuft, rahme sie ein.
• Wenn er einige, aber nicht genügend Assets bereitgestellt hat, fülle die Lücken mit öffentlichen Bildern, die an seine angepasst sind.
• Bei überhaupt keinen Assets verwende relevante öffentliche Bild-URLs, die du wie in references/imagery.md beschrieben findest und überprüfst. Bild-IDs, an die du dich erinnerst, sind oft falsch, daher wird jede URL vor der Verwendung mit scripts/check_urls.py geprüft.

3. Eintauchen: Das Vibe-Dossier schreiben

Bevor du auch nur an ein einziges Layout denkst, investiere echte Mühe in die Welt des Themas. Notiere kurz und für dich selbst:

• Materialien und Texturen: Woraus diese Welt physisch besteht.
• Licht und Farbe: Das Licht, in dem sie stattfindet, und die Farben, mit denen Insider jeden Tag leben (nicht die Farben, die die Websites der Konkurrenz verwenden).
• Bewegung: Wie sich Dinge hier bewegen. Gießen, falten, stapeln, schneiden, blühen, kreisen, ticken, funkeln, setzen, treiben. Daraus wird deine Bewegungssprache.
• Rhythmus und Klang: Schnell oder langsam, stakkatoartig oder fließend. Das bestimmt das Tempo von Animation und Scrollen.
• Von Insidern erkannte Artefakte: Werkzeuge, Dokumente, Symbole, Maße, Rituale.
• Vokabular: Wörter, die Insider verwenden. Sie fließen in den Text und die Abschnittsnamen ein.
• Der Besucher: Wer ankommt, in welcher Gemütsverfassung (besorgt, aufgeregt, vergleichend, feiernd) und was er braucht, um zu vertrauen und zu handeln.
• Der Klischee-Boden: Wie eine typische Website in dieser Branche aussieht. Schreibe es auf, damit du bewusst etwas anderes baust.

4. Die große Idee: Drei Konzepte, streiche das Offensichtliche

Schreibe drei wirklich unterschiedliche Konzeptrichtungen, jede mit einem Namen, einer Ein-Satz-Metapher und ihrem Signatur-Moment. Dann:

• Streiche das erste. Es kam dir zuerst in den Sinn, also haben es auch alle anderen Teilnehmer gebaut.
• Wähle aus den verbleibenden zwei dasjenige aus, das am überraschendsten, aber zweifellos richtig für dieses Unternehmen ist und das du in diesem Stack fehlerfrei umsetzen kannst. Mutig schlägt sicher, aber poliert schlägt ehrgeizig-und-kaputt.

Ein Konzept ist kein Farbschema. Es ist eine organisierende Metapher, die die Layout-Logik, das Bewegungsverhalten, die Schriftart, Farbe, Bildbehandlung und die Stimme des Textes bestimmt. Du solltest die gesamte Seite in einem Satz beschreiben können, der mit „Die Seite ist...“ beginnt.

Der Signatur-Moment ist die Interaktion, die niemand zuvor gesehen hat, und er ist der Motor des „Wow“. Um ihn zu erfinden, kombiniere drei Dinge: ein Objekt oder einen Prozess aus deinem Dossier, eine Eingabe, die der Besucher steuert (Scrollposition, Scrollgeschwindigkeit, Cursor, Hover, Ziehen, Klicken, Tageszeit) und eine Transformation (zusammensetzen, enthüllen, gießen, wachsen, schneiden, stapeln, verwandeln, entzünden, entfalten). Brainstorme mehrere Kombinationen und behalte diejenige, die dich „oh!“ denken lässt. Sie sollte im Hero oder beim ersten Scrollen erscheinen und etwas über das Unternehmen bedeuten, indem sie sein Handwerk, sein Versprechen oder seinen Prozess demonstriert. Dekoration zählt nicht.

Plane dann zwei bis vier unterstützende Momente, die über die Seite verteilt sind, jeder eine andere Art von Interaktion, damit das Wow sich ständig erneuert, anstatt im Hero zu gipfeln.

Um die Art des Denkens zu zeigen, die gemeint ist (diese beiden sind bereits von anderen Teilnehmern vergeben, also sind sie verbrannt – verwende sie nie wieder): Die Seite eines Schlossers, bei der Scrollen die Stifte eines riesigen SVG-Schlosses dreht und jeder Stift, der einrastet, einen Dienst enthüllt; eine Übersetzungsagentur, deren Hero-Satz unter dem Cursor durch Sprachen wirbelt und sich in der eigenen des Besuchers beruhigt.

5. Das Designsystem aus der Idee ableiten

• Typografie: Schriftarten mit Charakter, die zum Konzept gehören, ein Auszeichnungssatz gepaart mit einer gut lesbaren Textsatz, eine fließende Skala mit clamp() und dramatischem Kontrast zwischen den größten und kleinsten Größen. Quellen: Google Fonts, Fontshare oder die Markenschriftarten des Nutzers. Inter, Roboto, Arial, Open Sans, Poppins und Montserrat sind die Standards aller – sie tragen niemals die Auszeichnungsstimme.
• Farbe: Aus den echten Materialien und dem Licht des Dossiers und aus der Marke des Nutzers, falls vorhanden. Definiere Token als CSS-Custom-Properties: eine dominante Farbe, unterstützende Farben und ein Akzent, der diszipliniert eingesetzt wird. Fließtext erfüllt WCAG-AA-Kontrast.
• Textur und Tiefe: Körnung, Papier, Materialfotografie, Schatten, die mit der Lichtquelle des Konzepts übereinstimmen, und Muster aus den eigenen Formen der Branche als SVG.
• Layout: Ein klares Raster, das du absichtlich durchbrichst. Benachbarte Abschnitte teilen nie eine Komposition. Variiere Dichte und Maßstab und verwende Überlappungen, Vollbreite, Asymmetrie, klebrige Elemente und großzügigen Negativraum. Gestalte das mobile Layout als eigene Komposition, anstatt das Desktop-Layout in einen Stapel zusammenfallen zu lassen.
• Illustrationen und Symbole: Benutzerdefiniertes SVG, das für dieses Konzept gezeichnet wurde, kein Stock-Icon-Satz.
• Die kleinen Dinge, die Juroren bemerken: Cursor, Textauswahlfarbe, Fokusringe, Scrollleiste, Favicon, 404- oder leere Zustände, falls vorhanden, der Footer. Brande alle.

6. Inhalt und Hierarchie

• Liste die Fragen auf, mit denen dieser Besucher ankommt: Was machst du? Kann ich dir vertrauen? Wie funktioniert es? Wie viel kostet es? Wo und wann? Wie fange ich an? Jede Antwort wird zu einem Abschnitt oder einer Seite, angeordnet als Überzeugungsgeschichte.
• Mache die Navigation und den primären Call-to-Action sofort offensichtlich und von überall erreichbar.
• Ein h1 pro Seite, semantische Landmarken, lesbarer Fließtext (mindestens 16px, Zeilen etwa 60 bis 75 Zeichen).
• Schreibe Texte wie der beste Texter dieser Branche: spezifisch, selbstbewusst, sinnlich, im Vokabular der Insider. Niemals Lorem Ipsum. Generische KI-Formulierungen wirken wie eine Vorlage – lasse daher „elevate“, „unlock“, „seamless“, „empower“, „your journey“, „in today's fast-paced world“, „welcome to our website“, „we are passionate about“ weg.
• Für Fakten, die du nicht kennst (Telefon, Adresse, Preise, Team, Statistiken, Testimonials), schreibe realistische Platzhalter, die natürlich klingen, markiere sie in einem Code-Kommentar und liste sie bei der Übergabe auf, damit der Nutzer sie vor dem Launch ersetzt.

7. Bauen

Lies references/motion.md, bevor du Animationscode schreibst. Es enthält die verifizierte CDN- und npm-Einrichtung, das Bootstrap, das GSAP, ScrollTrigger und Lenis zusammenschaltet, das Technik-Arsenal und die Fallstricke, die Einsendungen zerstören. Alle GSAP-Plugins (SplitText, ScrollTrigger, Flip, DrawSVG, MorphSVG, MotionPath, ScrollSmoother, Observer, Draggable, Inertia und der Rest) sind kostenlos nutzbar.

Jede Einsendung hat diese Schichten:

1. Erster Eindruck: Der Hero baut sich in einer choreografierten Sequenz von etwa 2,5 Sekunden oder weniger auf. Ein Preloader ist nur erlaubt, wenn es sich um einen markierten Moment von 2 Sekunden oder weniger handelt, der in den Hero übergeht – niemals ein Spinner vor dem Inhalt.
2. Der Signatur-Moment und die unterstützenden Momente aus Schritt 4.
3. Scroll-Storytelling: ScrollTrigger enthüllt ausgewählte Elemente nach Typ, plus mindestens eine gepinnte oder scrubbte Sequenz, bei der Scrollen eine Transformation antreibt.
4. SVG-Animation: Linienzeichnung, Morphing, animierte Illustrationen, Symbole oder Trennlinien, die aus dem Konzept stammen.
5. Mikrointeraktionen auf allem Interaktiven: Hover, :focus-visible, gedrückte Zustände, cursor-bewusste oder magnetische Buttons, Link-Animationen, Formular-Feedback, Menü öffnen und schließen.
6. Übergänge: Zwischen Abschnitten und zwischen Seiten bei mehrseitigen Websites.

Variiere die Bewegung. Wenn jedes Element auf die gleiche Weise einblendet, wirkt die Seite wie eine Vorlage – egal wie gut das Layout ist. Text, Bilder, Zahlen, Linien und Karten bewegen sich jeweils auf eine Weise, die ihrer Natur entspricht, mit orchestriertem Timing und benutzerdefiniertem Easing.

Halte es schnell und robust: animiere Transforms, Opacity und Clip-Path; gib Bildern Abmessungen; lade Inhalte unter dem Falz lazy; gestalte Inhalte auch lesbar, wenn JavaScript fehlschlägt; gib Touch-Geräten eine Entsprechung für jeden Hover-Only-Effekt; und gestalte „reduced motion“ als eine ruhige, vollständige Version der Seite, nicht als kaputte.

8. Die Jury: Überprüfen, bewerten, korrigieren

Lies references/jury.md und führe es jedes Mal aus. Kurz gesagt: Überprüfe jede externe URL mit scripts/check_urls.py, rendere die Seite und schaue sie dir tatsächlich auf Desktop und Mobil an (Browser-Tools oder scripts/snapshot.py für Headless-Chrome-Screenshots und Konsolenfehler), bewerte dann den Build als fünf Juroren. Korrigiere alles, was unter 9 von 10 Punkten liegt, und überprüfe erneut. Höre auf, wenn jeder Juror 9 oder mehr Punkte gibt, oder nach drei Runden, wobei du nicht gelöste Kompromisse notierst.

9. Übergabe

Halte sie kurz und konkret:

## <Name der Seite>: „<Name des Konzepts>“
Die Idee: <ein Satz, „Die Seite ist...“>
Signatur-Moment: <was es ist und wo es zu finden ist>
Schau auch nach: <2 bis 4 unterstützende Momente>
Ausführen: <wie man sie öffnet oder startet>
Dateien: <kurzer Baum>
Bilder: <verwendete Benutzer-Assets, verwendete öffentliche Quellen, Credits, falls eine Lizenz erforderlich ist>
Vor dem Launch ersetzen: <Platzhalter: Telefon, Adresse, Testimonials, Preise...>
Annahmen: <was du im Namen des Nutzers entschieden hast>