What you get
- A 23-page product site in one offline HTML file, or ported into your framework
- Model switcher hero, to-scale lineup, hardware bento and white spec cards
- Product pages with gallery, full specs and a configurator that hands off to contact
- A validator for offline safety, structure and leftover sample names
- Optional PopNow product renders, scenes and hero loop, quoted first
Good for
- Robotics, e-bikes, drones, audio and camera brands
- Launch or catalogue sites for a small product family
- Pitching a premium redesign with working pages
Not for
- Shops that must take payments today
- Catalogues with hundreds of products
- Warm, playful or software-only brands
How to use it
In Claude or ChatGPT
Use the PopNow skill "Hardware Product Website" (hardware-product-website) for this: Build the site for our three e-bikes, Arc 1, Arc 2 and Arc Cargo, with prices, range and weight from specs.csv.
In a coding agent
/popnow-hardware-product-website Build the site for our three e-bikes, Arc 1, Arc 2 and Arc Cargo, with prices, range and weight from specs.csv.
Then try
Generate studio shots of the three bikes on the silver backdrop and quote the whole set first.
Port it into our Next.js app with one route per bike.
What to have ready
- Product names, codes, prices and the specs that matter
- Product photos, or a PopNow API key to generate a matched set
- Real facts for partners, team, contact and lead times
Similar skills
View all →3D Avatar Maker
+3Build a cute soft-toy 3D character in your browser and save it as a transparent PNG or a 3D page.
Calendar Heatmap
+3A year of daily activity as a shaded calendar grid, with streaks, totals and keyboard access.
AI SaaS Landing Page
+3Warm sand paper, hairline rails and hatched gutters around a live kanban board where an assistant plans tasks.
Animated Hero Section
+3A landing-page hero with a gently rotating headline word, two buttons and a wide image frame.
Shader Hero Agency Website
+3A live orange-heat shader hero behind a bottom-pinned statement, pill nav and a staggered case-study grid.
Dark SaaS Landing Page
+3A dark, motion-rich marketing site for a software product, delivered as one self-contained HTML file.
Designer Portfolio Website
+3Six tilted cards hover round a fading headline on calm grey, one red portrait card, editorial case studies.
Developer Portfolio Website
+3A dark personal site for engineers with case studies, writing, talks, a résumé and a contact form.
Editorial SaaS Website
+3Navy split hero, a five-line serif headline beside a documentary still, slanted bands and one cobalt accent.
Glassmorphism Website Template
+3Frosted glass pills on a near-black film, a huge serif headline with one italic word and an email capture.
Interactive Architecture Diagram
+3An offline, clickable system diagram built from a checked JSON model, with the evidence behind each box.
Interactive Grid Hero
+3A dark grid of fine strands that bends toward the cursor and rolls a glowing ring out from every click.
Knowledge Graph Explorer
+3Turn project notes into an offline, searchable graph where every claim links back to its source line.
KPI Dashboard Template
+3Four KPI tiles with change chips over a glowing line chart, a breakdown table and target bars on warm paper.
Landing Page from AI Mockups
+3See three full-page designs first, pick one, and your agent builds it as clean, responsive code.
Magazine Website Template
+3A print-quality magazine site with articles, topics, a small shop and subscriptions, as one HTML file.
Particle Animation Hero
+3Copy on warm paper beside a turning sphere of ink and teal dots that reshapes per idea and scatters on scroll.
Personal Brand Website
+3A portrait feathered into warm paper under a thin bracket, with light-and-bold statements on either side.
Cinematic Product Launch Page
+3Film-lit near-black page: serif title card over drifting light, letterboxed night scene, reservation form.
Admin Dashboard Template
+3A working back-office console with charts, tables, kanban and calendar, built as one offline HTML file.
SaaS Landing Page Template
+3A calm, light marketing site for a software product with a working product console, pricing and sign-up.
Scrapbook Portfolio Website
+3A multi-page online CV made of paper objects, with case studies and a printable resume.
Sneaker Store Website Template
+3A complete footwear or apparel shop with catalog, product pages, bag and demo checkout in one HTML file.
Workflow Automation Landing Page
+3Graphite page, small left-aligned headline, and a live node graph below that runs, retries and streams logs.
Questions
Does it only work for robots?
No. The sample brand is a robot maker, but any small family of physical products fits: bikes, drones, speakers, cameras or instruments. The lineup scale, sections and labels map onto your products.
Can it take orders?
The configurator builds a priced specification and hands it to a quote form. It does not take payments until you connect a provider, and the page says so.
What if I have no product photos yet?
PopNow can generate a consistent set from one written description of your product, after quoting the total. Until then the page can show labelled placeholder tiles.
How do I know nothing from the sample is left?
The bundled validator fails the build if any sample brand, product, person, partner, place, phone number or domain remains, and also checks offline safety and that every link reaches a page.