
Vorschaugalerie
Ähnliche Skills
Alle Skills ansehenDas bekommst du
- Eine fertige Beispiel-Website für Parcelo, ein fiktives Produkt für Zustellanalysen: die landing page plus Registrierung, Anmeldung, Demo-Buchung, Changelog, Case Study, Sicherheit, Datenschutz, AGB und eine 404.
- Live-Produkt-UI in den Begriffen deines Produkts: ein Dashboard mit Zeitraumwechsel und Chart-Hover, Mini-Ansichten im Bento, Schritt-Tabs, ein Abrechnungsumschalter, der das Paket in die Registrierung übernimmt, und validierte Formulare.
- Deine Website als eine Offline-Datei mit eingebetteten Onest und JetBrains Mono, dazu Styleguide, Bildplan, Motion-Regeln und Checkliste, nach denen dein Agent baut.
Passt gut für
- Gründer und Marketer, die ein SaaS-Produkt launchen und eine ruhige, glaubwürdige, produktzentrierte Seite wollen.
- Analytics-, Operations- oder Developer-Tools, deren bester Beweis das Produkt selbst ist.
- Teams, die Seiten für Preise, Sicherheit, Changelog und Registrierung brauchen, nicht nur einen Hero.
Nicht geeignet für
- App-Prototypen oder CMS-basierte Websites: Es entsteht eine Marketing-Website mit festen Unterseiten, kein funktionierendes Produkt.
- Marken, die einen bunten Look oder einen Dark-Mode-Umschalter wollen; Meridian ist hell mit dunklen Abschnitten und einem Teal-Akzent.
- Echte Registrierungen, Zahlungen oder Analytics: Formulare validieren und bestätigen auf der Seite, bis du ein Backend anbindest.
Produktlaunch & App-WachstumWebdesign & digitale ErlebnisseWebseite erstellenLanding Page erstellenStil fixiertBearbeitbares ErgebnisConversion-fokussiertDunkle Pill-NavigationHell-Dunkel-RhythmusPerspektiv-MockupMinimal mit Petrol-Akzent
Über diesen Skill

Beschreibe dein Produkt und erhalte eine ruhige, produktzentrierte SaaS-Website: eine weiße Seite mit einem Teal-Akzent, eine dunkle Pill-Navbar und ein Live-Dashboard, das perspektivisch nach hinten geneigt ist und beim Scrollen flach federt. Das Beispiel ist Parcelo, ein fiktives Tool für Zustellanalysen, das verspätete Pakete meldet, bevor Kunden nachfragen.

Das bekommst du
- Eine landing page mit Banner, Pill-Navbar, Hero-Dashboard, dunklem Feature-Bento, Einrichtungsschritten, Kundengeschichte, Testimonials, Preisen, Sicherheit, FAQ und dunkler CTA-Box
- Seiten für Registrierung, Anmeldung, Demo-Buchung, Changelog, Case Study, Sicherheit, Datenschutz und AGB, dazu eine gestaltete 404
- Mini-Produktansichten im Bento, die deine eigenen Objekte statt Stock-Screenshots zeigen
- Ein Umschalter für monatliche und jährliche Preise, Formulare mit Fehler- und Erfolgszuständen und ein Changelog mit Filtern und Suche
- Eine Datei mit eingebetteten Schriften und Fotos, die offline in jedem Browser öffnet

So nutzt du es
- Teile Produktname, was es tut, deine Features, Pakete und was das Dashboard zeigen soll; grobe Notizen reichen.
- Dein Agent benennt jedes Dashboard-Label nach den Objekten deines Produkts um, füllt jeden Abschnitt und jede Seite und prüft alles auf Desktop und Smartphone.
- Öffne die einzelne Datei, klick dich durch die Seiten und beschreibe Änderungen in eigenen Worten.

Fotos, die mit dem Bildtool deines Agenten erstellt werden, können dessen Nutzungskosten verursachen; ohne ein solches Tool springen getönte Flächen und Monogramm-Avatare ein.
Was du vorab brauchst
- Du bringst mit
- Produktname, Versprechen in einem Satz und Zielgruppe · Features, Pakete mit Monats- und Jahrespreisen und was das Dashboard zeigen soll · Optional: eine Kundengeschichte, Zitate, FAQ-Antworten, Sicherheitsfakten und Changelog-Einträge
- 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 · Ein Bildgenerierungstool in deinem Agenten für Story-, Team- und Avatarfotos (optional; ohne werden getönte Flächen und Monogramme verwendet)
- Externe Kosten
- Fotos für Kundengeschichte, Case Study, Team und Avatare werden mit dem eigenen Bildtool deines Agenten generiert, sofern vorhanden, was dessen Nutzungskosten verursachen kann. Ohne Bildquelle werden stattdessen getönte Flächen und Monogramm-Avatare verwendet.
- Zuletzt getestet
- v1.0.3 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
Nutzerbewertungen
Bewertungen werden geladen …









