Beacon SaaS Landing Pagev1.0.4
Nutze diesen Skill für: Landing Page erstellen.
Beliebt
5.0118 Downloads1 Likes3-mal gemerkt
Kostenlos
Ruhige SaaS-Marketing-Website in warmen Neutraltönen mit einem weichen blauen Lichtstrahl, Verlaufs-Headlines, zentriertem Hero und deinem Produkt als Live-Konsole statt Screenshot. Dazu Features, Tour mit Tabs, Setup, Kundengeschichten, Preise monatlich/jährlich mit Vergleich, Sicherheit, FAQ sowie Registrierung, Login, Vertrieb, Changelog, Status, Rechtliches, 404. Hell und dunkel komplett, alles funktioniert.
Am häufigsten gewählt von
Aktualisiert am 3. Okt. 2026
Vorschaugalerie
Ähnliche Skills
Alle Skills ansehen
Das bekommst du
- Eine komplette SaaS-Website in einer eigenständigen HTML-Datei, die offline in jedem Browser öffnet: die Landing Page plus Seiten für Registrierung, Login, Vertriebskontakt, Changelog, Status, Rechtliches und 404
- Eine Live-Produktkonsole, neu aufgebaut im Vokabular deines Produkts, mit Zeitraumumschalter, Diagramm-Tooltips, Live-Zählern und einer Incident-Timeline statt eines statischen Screenshots
- Geist-Typografie, ein blauer Lichtstrahl, warme neutrale Flächen, vollständige helle und dunkle Themes und Formulare mit Validierung, Lade- und Erfolgszuständen; in deinem eigenen Projekt dasselbe Design in deinem Stack
Passt gut für
- Gründer:innen und Indie Hacker, die noch diese Woche eine glaubwürdige SaaS-Marketing-Website mit Preisen, Registrierung und Changelog brauchen
- Developer Tools, Monitoring-, API- und Infrastrukturprodukte, die das Produkt selbst als funktionierende Oberfläche zeigen wollen
- Produktmarketer, die Positionierungstexte direkt auf einer fertig wirkenden Seite iterieren wollen
Nicht geeignet für
- Websites, die ein CMS, einen Blog oder echte Konten brauchen: Registrierungs- und Kontaktformulare bestätigen auf der Seite, die Anbindung eines Backends liegt bei dir
- Marken, die einem bestehenden Designsystem folgen müssen: Die warmen Neutraltöne, der einzelne blaue Lichtstrahl und die Verlaufs-Headlines sind das Produkt
- Consumer- oder Lifestyle-Marken, die mit Fotografie führen: Bilder beschränken sich auf eine Kundengeschichte, Testimonials, ein redaktionelles Foto und ein Teamfoto
Produktlaunch & App-WachstumWebdesign & digitale ErlebnisseLanding Page erstellenStil fixiertBearbeitbares ErgebnisSchnelle LieferungMinimalistischGlow-AkzentVerlaufstypografieSanft-neutral
Über diesen Skill
Beschreib dein Produkt und erhalte eine komplette SaaS-Marketing-Website: warme neutrale Flächen, ein weicher blauer Lichtstrahl, Verlaufs-Headlines und dein Produkt als Live-Konsole statt Screenshot. Sie kommt als eine eigenständige Datei, die in jedem Browser öffnet und offline funktioniert.
Das bekommst du
- Eine Landing Page mit Feature-Bento, Live-Produktkonsole, Tour mit Tabs, Einrichtungsschritten, Kundengeschichte und Testimonials, Preisen mit Vergleichstabelle, Sicherheit, FAQ und einem abschließenden CTA
- Seiten für Registrierung, Login, Vertriebskontakt, Changelog, Status, Datenschutz, AGB und 404 – alle verlinkt und funktionsfähig
- Vollständige helle und dunkle Themes, ruhige Scroll-Einblendungen und Animationen, die sich für Besucher mit reduzierter Bewegung abschalten
- Formulare mit Inline-Validierung sowie Lade- und Erfolgszuständen, dazu Changelog-Filter und Suche
- In deinem eigenen Projekt dasselbe Design als Komponenten in deinem Stack
So nutzt du es
- Nenne Produktname, was es tut, deine Tarife und Kunden oder Zitate, die du verwenden darfst; grobe Notizen reichen
- Lass den Skill die Bereiche und Seiten auswählen oder nenne die gewünschten; alles, was du nicht geliefert hast, wird entworfen und zur Bestätigung aufgelistet
- Öffne die fertige Datei im Browser und bitte in einfachen Worten um Änderungen an Texten, Bereichen oder Preisen
Fotos werden mit dem Bildtool deines Agenten generiert, was dessen Nutzungskosten verursachen kann; ohne ein solches Tool greift die Seite auf Initialen und Produktkarten zurück. Schriften und Bilder sind eingebettet, sodass die fertige Datei keine Netzwerkanfragen stellt.
Was du vorab brauchst
- Du bringst mit
- Produktname, was es tut und für wen, 4–6 Fähigkeiten und 2–4 Tarife mit echten Limits (grobe Notizen reichen) · Optional: Kundennamen, Zitate, Zahlen und Fotos, die du verwenden darfst
- 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 für Kunden-, Redaktions-, Testimonial- und Teamfotos
- Externe Kosten
- Fotos werden mit dem eigenen Bildtool deines Agenten generiert, was dessen Nutzungskosten verursachen kann. Ohne ein solches Tool wird die Website trotzdem gebaut: Testimonials nutzen Initialen, das redaktionelle Foto wird zur Produktkarte und das Teamfoto entfällt.
- Zuletzt getestet
- v1.0.4 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
Nutzerbewertungen
Bewertungen werden geladen …