Das bekommst du
- Zwei oder drei Mockups ganzer Seiten in verschiedenen Bildsprachen aus einer Bibliothek von zehn
- Der gewählte Entwurf als statische Seite oder als Komponenten in deinem Projekt, mit echten Texten
- Hero- und Abschnittsbilder, sauber neu gezeichnet und als responsive WebP exportiert
- Screenshots für Desktop und Handy, ein Vergleich mit dem Mockup und ein QA-Bericht
- Ein Lint-Bericht zu maschinellen Angewohnheiten mit angewandten Korrekturen
Gut für
- Landingpages für Startups, Apps und Produkte
- Launch- und Warteliste-Seiten, die einen eigenen Look brauchen
- Das Redesign einer Seite, die wie eine generische Vorlage wirkt
Nicht für
- Pixelgenaue Umsetzung einer bestehenden Design-Datei
- Mehrseitige Websites mit App-Logik oder CMS
- E-Mail-Vorlagen
So nutzt du ihn
In Claude oder ChatGPT
Nutze den PopNow-Skill „Landingpage aus KI-Mockups“ (landing-page-from-mockup) dafür: Landingpage für Lumen Notes, eine schlichte Notizen-App, die beim Tippen verwandte Notizen vorschlägt. Kostenlos auf einem Gerät, Pro 6 $ im Monat. Noch keine Testimonials.
In einem Coding-Agent
/popnow-landing-page-from-mockup Landingpage für Lumen Notes, eine schlichte Notizen-App, die beim Tippen verwandte Notizen vorschlägt. Kostenlos auf einem Gerät, Pro 6 $ im Monat. Noch keine Testimonials.
Dann probier
Nimm den Hero aus Mockup B und die Preistabelle aus Mockup A.
Bau es in unserem Astro-Projekt unter site/ und lass die Prüfung noch einmal laufen.
Das solltest du bereithalten
- Produktname, Zielgruppe und das Versprechen der Überschrift
- Drei oder vier Funktionen mit je einem konkreten Detail, dazu Tarife und Preise
- Belege, hinter denen du stehst (echte Zitate, Zahlen oder Fakten)
- Einen PopNow-API-Schlüssel und dein DESIGN.md, falls die Marke schon feststeht
Ä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.
Glassmorphism-Website-Vorlage
+3Mattglas-Pillen auf Fastschwarz, große Serifen-Überschrift mit einem kursiven Wort und E-Mail-Anmeldung.
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.
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
Warum Mockups vor dem Code?
Zwischen fertig wirkenden Seiten zu wählen geht schneller und ist ehrlicher, als einen Stil in Worten zu beschreiben. Außerdem gibt es dem Bau ein konkretes Ziel, sodass der Screenshot-Vergleich genau sagen kann, wo der Code abgewichen ist.
Was erzeugt PopNow, und was kostet es?
Die Mockups (etwa 30 bis 35 Credits je Stück) und, falls gewünscht, saubere Hero- und Abschnittsbilder (etwa 35 bis 75 Credits je Stück). Ein typischer voller Lauf kostet rund 275 Credits; der Light-Modus mit einem Mockup etwa 35. Jede Erzeugung wird vorher angeboten und läuft erst nach deiner Zustimmung.
Muss ich etwas installieren?
Node und Python 3, dazu ein lokales Chrome, Chromium oder Edge für die Screenshots. Playwright wird genutzt, wenn dein Projekt es schon hat. Weitere Abhängigkeiten gibt es nicht.
Enthält die Seite Text aus den Mockup-Bildern?
Nein. Mockups sind Bilder, und ihr kleiner Text kann verstümmelt sein. Überschriften, Funktionen, Preise und FAQ kommen aus deinem Briefing, und alles, was der Agent entwerfen musste, wird dir zur Bestätigung aufgelistet.