Das bekommst du
- Eine 23-seitige Produktseite als Offline-HTML-Datei oder portiert in dein Framework
- Hero mit Modellumschalter, maßstabsgetreue Reihe, Hardware-Bento und weiße Datenkarten
- Produktseiten mit Galerie, vollständigen Daten und einem Konfigurator, der an den Kontakt übergibt
- Eine Prüfung für Offline-Sicherheit, Struktur und übrig gebliebene Beispielnamen
- Optional PopNow-Produktrenderings, Szenen und Hero-Schleife, vorher bepreist
Gut für
- Marken für Robotik, E-Bikes, Drohnen, Audio und Kameras
- Launch- oder Katalogseiten für eine kleine Produktfamilie
- Ein hochwertiges Redesign mit funktionierenden Seiten pitchen
Nicht für
- Shops, die heute Zahlungen annehmen müssen
- Kataloge mit Hunderten Produkten
- Warme, verspielte oder reine Software-Marken
So nutzt du ihn
In Claude oder ChatGPT
Nutze den PopNow-Skill „Website für Hardware-Produkte“ (hardware-product-website) dafür: Baue die Seite für unsere drei E-Bikes, Arc 1, Arc 2 und Arc Cargo, mit Preisen, Reichweite und Gewicht aus specs.csv.
In einem Coding-Agent
/popnow-hardware-product-website Baue die Seite für unsere drei E-Bikes, Arc 1, Arc 2 und Arc Cargo, mit Preisen, Reichweite und Gewicht aus specs.csv.
Dann probier
Erzeuge Studioaufnahmen der drei Räder auf dem silbernen Hintergrund und nenn mir vorher den Preis für den ganzen Satz.
Portiere sie in unsere Next.js-App mit einer Route pro Rad.
Das solltest du bereithalten
- Produktnamen, Codes, Preise und die Daten, die zählen
- Produktfotos oder einen PopNow-API-Schlüssel, um einen passenden Satz zu erzeugen
- Echte Angaben für Partner, Team, Kontakt und Lieferzeiten
Ä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.
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
Funktioniert es nur für Roboter?
Nein. Die Beispielmarke ist ein Roboterhersteller, aber jede kleine Familie physischer Produkte passt: Räder, Drohnen, Lautsprecher, Kameras oder Instrumente. Maßstab der Reihe, Bereiche und Beschriftungen lassen sich auf deine Produkte abbilden.
Kann es Bestellungen annehmen?
Der Konfigurator erstellt eine bepreiste Spezifikation und übergibt sie an ein Angebotsformular. Es nimmt keine Zahlungen an, bis du einen Anbieter verbindest, und die Seite sagt das.
Was, wenn ich noch keine Produktfotos habe?
PopNow kann einen konsistenten Satz aus einer geschriebenen Beschreibung deines Produkts erzeugen, nach Angabe der Gesamtsumme. Bis dahin kann die Seite beschriftete Platzhalterkacheln zeigen.
Woher weiß ich, dass nichts aus dem Beispiel übrig bleibt?
Die mitgelieferte Prüfung bricht den Build ab, wenn eine Beispielmarke, ein Produkt, eine Person, ein Partner, ein Ort, eine Telefonnummer oder Domain bleibt, und prüft außerdem Offline-Sicherheit und dass jeder Link auf eine Seite zeigt.