Das bekommst du
- Eine HTML-Datei mit eingebetteten Schriften und Bildern, ohne Netzwerkanfragen
- Hero mit E-Mail-Anmeldung, Produktvorschau mit lebendem Diagramm, Angebotsauswahl, Preise, FAQ und Anmeldung zum Schluss
- Funktionierende Seiten: Musterausgabe mit Paywall, durchsuchbares Archiv, Beitritt mit Plätzen und Geschenken, Anmeldung, rechtliche Seiten, 404
- Eine Prüfung für Links, Routen, Beschriftungen, das Glas-Rezept und übrig gebliebenen Beispieltext
- Optional Bilder, Porträts, eine Hero-Schleife und eine Social Card von PopNow nach einem Credit-Angebot
Gut für
- Anmeldeseiten für Newsletter und Briefings
- Wartelisten, geschlossene Betas und Launch-Kampagnen
- Mitgliedschaften, Kurse oder Veranstaltungen mit begrenzten Plätzen
Nicht für
- Helle, pastellfarbene oder bunte Marken: die Seite ist nur schwarz-weiß
- Onlineshops mit vielen Produkten
- SaaS-Seiten, die eine lange Funktionsrundfahrt brauchen
So nutzt du ihn
In Claude oder ChatGPT
Nutze den PopNow-Skill „Glassmorphism-Website-Vorlage“ (glassmorphism-website-template) dafür: Mach die Anmeldeseite für Tidewatch, eine Freitags-E-Mail für Bootsfahrer: ein Vorhersage-Diagramm, drei Hafennotizen und ein langer Text. Kostenlos, plus eine Crew-Stufe für 5 $ im Monat.
In einem Coding-Agent
/popnow-glassmorphism-website-template Mach die Anmeldeseite für Tidewatch, eine Freitags-E-Mail für Bootsfahrer: ein Vorhersage-Diagramm, drei Hafennotizen und ein langer Text. Kostenlos, plus eine Crew-Stufe für 5 $ im Monat.
Dann probier
Nenn mir vorher den Preis für ein Hero-Bild von dunklem Wasser bei Nacht und eine 5-Sekunden-Schleife daraus.
Portiere die Seite als Komponenten und echte Routen in meine Astro-Seite.
Das solltest du bereithalten
- Der Name, was Anmelden den Leuten bringt, und das eine Versprechen für die Überschrift
- 3 bis 4 Fakten, hinter denen du stehst, Tarife und Preise, 4 bis 6 FAQ-Antworten
- Dein DESIGN.md, falls die Marke eines hat
- Optional: ein PopNow-API-Schlüssel oder eigene dunkle Fotos und Aufnahmen
Ähnliche Skills
Alle ansehen →3D-Avatar-Maker
+3Baue im Browser eine niedliche 3D-Figur im Plüschtier-Look und speichere sie als transparentes PNG oder 3D-Seite.
Kalender-Heatmap
+3Ein Jahr täglicher Aktivität als schattiertes Kalenderraster, mit Serien, Summen und Tastaturbedienung.
KI-SaaS-Landingpage
+3Warmes Sandpapier und feine Linien um ein lebendiges Kanban-Board, auf dem ein Assistent Aufgaben plant.
Animierte Hero-Section
+3Ein Landingpage-Hero mit sanft wechselndem Schlagwort, zwei Buttons und einem breiten Bildrahmen.
Shader-Hero-Website für Agenturen
+3Orange-Shader hinter großer Aussage, Pillen-Navigation und versetztem Raster mit Fallstudien.
Dunkle SaaS-Landingpage
+3Eine dunkle, bewegungsreiche Marketingseite für ein Softwareprodukt, geliefert als eine eigenständige HTML-Datei.
Designer-Portfolio-Website
+3Sechs geneigte Karten um eine verblassende Überschrift auf ruhigem Grau, eine rote Porträtkarte, Fallstudien.
Entwickler-Portfolio-Website
+3Eine dunkle persönliche Website für Entwickler mit Fallstudien, Artikeln, Vorträgen, Lebenslauf und Kontaktformular.
Redaktionelle SaaS-Website
+3Marineblauer geteilter Hero, Serifen-Überschrift neben einem Dokumentarbild, schräge Bänder, ein Kobaltakzent.
Website für Hardware-Produkte
+3Riesige haarlinige Modellnamen auf Silber-Studioaufnahmen, Datenkarten und eine maßstabsgetreue Reihe.
Interaktives Architekturdiagramm
+3Ein offline nutzbares, klickbares Systemdiagramm aus einem geprüften JSON-Modell, mit den Belegen zu jedem Kasten.
Interaktiver Raster-Hero
+3Dunkles Raster feiner Fäden, das sich zum Cursor neigt und bei jedem Klick einen Ring ausrollt.
Knowledge-Graph-Explorer
+3Mach aus Projektnotizen einen durchsuchbaren Offline-Graphen, in dem jede Aussage auf ihre Quellzeile verweist.
KPI-Dashboard-Vorlage
+3Vier KPI-Kacheln mit Veränderungs-Chips über einem leuchtenden Liniendiagramm, Aufschlüsselung und Zielbalken.
Landingpage aus KI-Mockups
+3Drei Entwürfe ganzer Seiten ansehen, einen wählen, dann baut dein Agent ihn als sauberen Code.
Magazin-Website-Vorlage
+3Eine Magazin-Website in Printqualität mit Artikeln, Themen, kleinem Shop und Abos, als eine HTML-Datei.
Partikel-Animations-Hero
+3Text auf warmem Papier neben einer drehenden Kugel aus Tinten- und Türkispunkten, die sich je Idee formt.
Persönliche Marken-Website
+3Ein Porträt, das in warmes Papier übergeht, darüber eine feine Klammer, daneben kurze und fette Aussagen.
Kinoreife Produkt-Launch-Seite
+3Fastschwarze Filmseite: Serifen-Titelkarte über gleitendem Licht, Letterbox-Nachtszene, Reservierungsformular.
Admin-Dashboard-Vorlage
+3Eine funktionierende Backoffice-Konsole mit Diagrammen, Tabellen, Kanban und Kalender, als eine Offline-HTML-Datei.
SaaS-Landingpage-Vorlage
+3Eine ruhige, helle Marketingseite für ein Softwareprodukt mit funktionierender Produktkonsole, Preisen und Registrierung.
Portfolio-Website im Scrapbook-Stil
+3Ein mehrseitiger Online-Lebenslauf aus Papierobjekten, mit Fallstudien und druckbarem Lebenslauf.
Sneaker-Shop-Website-Vorlage
+3Ein kompletter Schuh- oder Modeshop mit Katalog, Produktseiten, Warenkorb und Demo-Checkout in einer HTML-Datei.
Landingpage für Workflow-Automatisierung
+3Graphit-Seite mit kleiner Überschrift und einem lebenden Knotengraphen, der läuft und Logs streamt.
Fragen
Was lässt das Glas richtig wirken statt wie einen verwaschenen Kasten?
Jede erhöhte Fläche nutzt ein Rezept: ein kaum getöntes Inneres mit Hintergrundunschärfe, ein weicher Glanz oben und ein Rand, der mit einem maskierten Verlaufsring gezeichnet ist, damit Licht an den oberen und unteren Kanten hängen bleibt. Die Prüfung schlägt bei einer Seite fehl, die das Rezept auslässt.
Kann sich der Hero bewegen?
Ja. Nach deiner Freigabe des Hero-Bildes kann PopNow es in einen 5-Sekunden-Clip verwandeln, und das mitgelieferte Schleifen-Skript macht daraus eine nahtlose, stumme Schleife mit Vorschaubild. Reduzierte Bewegung und verborgene Tabs zeigen das Standbild.
Ist es nur für Newsletter?
Nein. Das Beispiel ist ein Abend-Briefing, aber der Anpassungsleitfaden bildet dieselben Bereiche auf App-Wartelisten, Kurse, Veranstaltungen und Podcasts ab: Die Produktvorschau wird zum App-Bildschirm, das Archiv zu einem Changelog oder einer Sitzungsliste.
Brauche ich einen PopNow-API-Schlüssel?
Nein. Die Seite enthält für jeden Bildplatz neutrale mitgelieferte Bilder und CSS-Ersatzlösungen. Ein Schlüssel ergänzt neue Bilder, Porträts, die Schleife und eine Social Card, jeweils in Credits angeboten, bevor etwas läuft.