Liquid-Glass-Landing-Pagev1.0.3
Nutze diesen Skill für: Webseite erstellen.
Im Kommen
5.035 Downloads1 Likes1-mal gemerkt
$4.99
Was bekomme ich, wenn ich diesen Skill kaufe?Baue eine dunkle Landing Page in Milchglas-Optik mit filmischem Hero, einer fokussierten E-Mail-Erfassung und einer zurückhaltenden redaktionellen Story. Glas-Pills fangen an ihren Rändern Licht über einem fast schwarzen Grund, eine übergroße Serif-Headline trägt ein kursives Wort, und das Produkt erscheint als lebendige E-Mail-Vorschau mit Diagramm. Es folgen Preise, FAQ, eine abschließende Erfassung und Seiten für eine Beispielausgabe, Archiv, Charta, Beitritt, Anmeldung und Rechtliches. Standardmäßig ist es eine eigenständige Datei, die offline öffnet.
Am häufigsten gewählt von
Aktualisiert am 3. Okt. 2026
Vorschaugalerie
Ähnliche Skills
Alle Skills ansehen
Das bekommst du
- Eine Landing Page mit rund einem Dutzend Abschnitten für den fiktiven Newsletter Nightfold, vom Glas-Hero und der lebendigen E-Mail-Vorschau bis zu Preisen, FAQ, abschließender Erfassung und einem Footer mit transparentem Schriftzug.
- Sieben Routen: eine Beispielausgabe mit Paywall, ein Archiv mit Suche und Filtern, Charta, Beitritt, Anmeldung, Datenschutz und AGB sowie eine gestaltete 404-Seite.
- Funktionierende Erfassungsformulare, Postfachauswahl, Monats- oder Jahrespreise mit Platzzähler, Leserstimmen-Karussell und Countdown, mit vier eingebetteten Schriften in einer Offline-Datei.
Passt gut für
- Newsletter, Wartelisten, private Betas und Launch-Kampagnen, bei denen es vor allem ums Sammeln von E-Mail-Adressen geht.
- Gründer, die den Schwarzglas-Look wollen, ohne Blur, Rahmen und Lichtreflexe von Hand abzustimmen.
- Produkte, die sich als echter Screen zeigen lassen, etwa eine E-Mail, eine App-Ansicht oder ein Changelog, statt als Stockfoto.
Nicht geeignet für
- Helle, bunte oder illustrationsgetriebene Marken; das Design ist ausschließlich dunkel, ohne Akzentfarbe.
- Den Versand echter E-Mails ab Werk: Erfassungs-, Beitritts- und Anmeldeformulare bestätigen auf der Seite, bis du deinen Mailing-Dienst anbindest.
- Große Content-Websites mit vielen Navigationsebenen; dies ist eine Conversion-Seite mit wenigen unterstützenden Routen.
Produktlaunch & App-WachstumWebdesign & digitale ErlebnisseWebseite erstellenLanding Page erstellenStil fixiertConversion-fokussiertCinematischGlassmorphismDunkel-monochromLiquid GlassSerif-Display
Über diesen Skill
Mach aus einem Namen und einem Versprechen eine dunkle Landing Page, die wirkt wie Milchglas über einem Film: Glas-Pills, die Licht fangen, eine riesige Serif-Headline mit einem kursiven Wort und eine E-Mail-Erfassung im Zentrum. Das ausgearbeitete Beispiel ist der fiktive Newsletter Nightfold mit lebendiger E-Mail-Vorschau, Mitgliedschaftspreisen und sieben funktionierenden Routen. Das Standardergebnis ist eine eigenständige Datei, die offline in jedem Browser öffnet.
Das bekommst du
- Ein Header aus Glas-Pills, ein filmischer Hero mit E-Mail-Erfassung, eine lebendige E-Mail-Vorschau mit Diagramm, eine Faktenleiste und ein geteilter Methodenbereich
- Eine Ausgabenauswahl, Redaktion, Leserstimmen, Mitgliedschaftspreise mit Monats-/Jahresumschalter, aktuelle Ausgaben, FAQ und eine abschließende Erfassung mit Countdown
- Seiten für Beispielausgabe, Archiv, Charta, Beitritt, Anmeldung und Rechtliches sowie eine gestaltete 404-Seite
- Instrument Serif, Newsreader, Geist und Geist Mono eingebettet, ohne eine einzige Netzwerkanfrage
So nutzt du es
- Teile deinen Namen mit, was dein Produkt ist, was die Anmeldung bringt, den Erscheinungsrhythmus, Preise und die Menschen dahinter.
- Dein Agent füllt die Abschnitte, rendert dein Produkt als lebendigen Screen im Glaspanel und erstellt dunkle Bilder oder verwendet dein Hero-Videomaterial.
- Öffne die Seite, probiere Erfassungsformulare, Preisumschalter und Archivfilter aus und wünsche dir dann Änderungen.
Für generierte Bilder können Nutzungskosten deines Bildtools anfallen. Die Formulare bestätigen auf der Seite und senden nichts, bis du deinen eigenen Mailing-Dienst anbindest.
Was du vorab brauchst
- Du bringst mit
- Name, was dein Produkt ist und was die Anmeldung Besuchern bringt · Erscheinungsrhythmus oder Launch-Datum, Preise oder Stufen, ein paar ehrliche Fakten und die Menschen dahinter · Optional: eigenes dunkles Hero-Videomaterial und Teamfotos
- Abhängigkeiten
- Node.js 18 oder neuer auf dem Rechner deines Agenten, um das mitgelieferte Skript auszuführen, das die einzelne Offline-Datei baut · Internetzugang während des Builds, damit die Schriften einmal heruntergeladen und eingebettet werden können · Optional: ein Bildgenerierungstool in deinem Agenten; ohne erhalten Medienrahmen dunkle Platzhalterflächen
- Externe Kosten
- Für das Generieren der dunklen Bilder mit dem Bildtool deines Agenten können dessen Nutzungskosten anfallen. Ohne Bildtool wird die Seite trotzdem gebaut, mit dunklen Platzhalterflächen in jedem Medienrahmen.
- Zuletzt getestet
- v1.0.3 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
Nutzerbewertungen
Bewertungen werden geladen …