Build an audio product website around specification evidence and listening. Shoppers compare portable speakers by weight, battery duration and price, then audition two supplied audio files through a real player. The page preserves sculptural photography and a calm monochrome composition.
- Uses PopNow for
- Images
- Needs
- Node.js
The skill is free. Optional AI images, video and sound are quoted for your approval before generation. API-key calls use your separate API balance in USD; generation through ChatGPT or Claude connected via OAuth/MCP uses your website credits.
v1.0.1 · Updated Oct 24, 2026 · 80 KB · Use it for personal and client work; please don't resell or share the package.
What you get
A two-product specification comparison and user-file A/B player
An editable, fully offline website with domain-specific data
Executable normal, boundary and invalid-input checks
Optional PopNow media with a quote before generation
Good for
- Audio hardware launches
- Speaker comparison pages
Not for
- Audio streaming services
- Fake checkout or fabricated acoustic claims
How to use it
You say
Use the PopNow skill "Audio Product Website" (audio-product-website) for this: Build a website for our three portable speakers using the supplied specification sheet. Keep test conditions next to battery life and let visitors compare two models.
Then try
Adapt the sample to our verified data and brand.
Show the edge cases and export a real example result.
What to have ready
- Product names, specifications, test conditions and prices in USD cents
- Licensed product photography and optional two audio excerpts
- A real purchase URL if sales will be enabled
Similar skills
View all →
WebBeverage Brand Website Template
+25A sunny drinks or snack brand site with shop, case builder, stockist map and demo checkout in one file.
WebScrollable Paper World
+25Walk through a layered paper landscape, discover three keepsakes and build a small pocket journal.
WebScrapbook Portfolio Website
+25A multi-page online CV made of paper objects, with case studies and a printable resume.
WebSneaker Store Website Template
+25A complete footwear or apparel shop with catalog, product pages, bag and demo checkout in one HTML file.
WebVinyl Record Microsite
+25Turn an album into a tactile record sleeve with two playable sides, liner notes and a spinning disc.
WebHardware Product Website
+25Huge hairline model names on silver studio shots, frosted spec cards, a to-scale lineup and a hardware bento.
WebTravel Agency Website Template
+25A photo-led site for tours, guides or lodges with trip search, booking requests and a trip-finder quiz.
WebFreelance Designer Website
+25A bold one-person studio site that sells fixed-price packages, with plan pages, case studies and a brief form.
WebGlassmorphism Website Template
+25Frosted glass pills on a near-black film, a huge serif headline with one italic word and an email capture.
Web3D Avatar Maker
+25Build a cute soft-toy 3D character in your browser and save it as a transparent PNG or a 3D page.
WebAcademic CV Website
+25Publish research, teaching and service in a structured academic CV with citation export.
WebCalendar Heatmap
+25A year of daily activity as a shaded calendar grid, with streaks, totals and keyboard access.
WebAgriculture Product Website
+25Compare field equipment by compatible crops, operating limits and supplied specifications.
WebAI SaaS Landing Page
+25Warm sand paper, hairline rails and hatched gutters around a live kanban board where an assistant plans tasks.
WebAnimated Hero Section
+25A landing-page hero with a gently rotating headline word, two buttons and a wide image frame.
WebArcade Personal Website
+25Present creative projects as playable-looking cartridges in a tiny room with keyboard and touch navigation.
WebArchitecture Portfolio Website
+25An architecture portfolio with project filters, metric and imperial areas, detailed briefs and a printable project shortlist.
WebAudio Spectrum Visualizer
+25Inspect a local recording with a real frequency spectrum, peak readout and playback controls.
WebCase Study Website Template
+25An evidence-led case study page with baseline and outcome comparisons, missing-source warnings and a claim audit export.
WebCashflow Dashboard
+25Reconcile opening cash, signed transactions and closing balance with a traceable running ledger.
WebCinematic Scroll Story
+25Tell a four-act photo story with full-frame scenes, gentle scroll motion and a letterbox view.
WebCMS Marketing Website
+25A CMS product page with an editable content schema, exact field errors, JSON preview and a valid-content export.
WebConference Speaker Page
+25A speaker page with topic and duration filters, approved host introductions, AV requirements and a downloadable event brief.
WebConstellation Memory Map
+25Connect six photo memories as stars, then explore them freely or follow a chronological tour.
WebConstruction Website Template
+25A construction company page with an editable scope estimator, integer-cent totals, a separate contingency and CSV export.
WebConsulting Website Template
+25A consulting website with an engagement-fit finder, explicit tradeoffs and a downloadable scope brief based on stated constraints.
WebConversion Funnel Dashboard
+25Find where a journey loses people, with cohort checks, step conversion and an accessible data table.
WebShader Hero Agency Website
+25A live orange-heat shader hero behind a bottom-pinned statement, pill nav and a staggered case-study grid.
WebCustomer Onboarding Portal
+25Guide a customer through dependent setup steps with owner visibility, saved exports and honest progress.
WebDark SaaS Landing Page
+25A dark, motion-rich marketing site for a software product, delivered as one self-contained HTML file.
WebDesign System Showcase
+25Explore editable color tokens, measure contrast and export a consistent CSS and JSON token set.
WebDesigner Portfolio Website
+25Six tilted cards hover round a fading headline on calm grey, one red portrait card, editorial case studies.
WebDeveloper Journal Site
+25Turn structured posts into a searchable technical journal with readable code and a portable RSS feed.
WebDeveloper Portfolio Website
+25A dark personal site for engineers with case studies, writing, talks, a résumé and a contact form.
WebEbook Landing Page
+25An ebook page with real original chapter excerpts, local reading progress, text-size controls and an accessible sample download.
WebEditable Budget Grid
+25Edit quantities and unit costs, track actual spending and export a reconciled budget.
WebEditorial SaaS Website
+25Navy split hero, a five-line serif headline beside a documentary still, slanted bands and one cobalt accent.
WebEvent Attendance Chart
+25Compare registrations, check-ins and capacity, with weighted attendance and explicit no-show counts.
WebEvent Website Template
+25An event site with track filters, a personal agenda, overlapping-session warnings and a real UTC calendar download.
WebExperiment Comparison Chart
+25Compare conversion variants with sample sizes, percentage-point lift and honest uncertainty intervals.
WebFinancial Report Portal
+25A financial report directory with year and type filters, source-linked metric comparisons and explicit missing-data handling.
WebFlight Search Prototype
+25Search a local flight inventory by route, date and seats, then compare price, duration and stops.
WebInteractive Architecture Diagram
+25An offline, clickable system diagram built from a checked JSON model, with the evidence behind each box.
WebInteractive Museum Walk
+25Explore three small exhibition rooms, inspect the objects and collect a personal visitor ticket.
WebInterior Design Website Template
+25Turn a room’s dimensions, budget and priorities into an editable interior project brief with a clear allocation and export.
WebJewelry Store Website Template
+25A jewelry catalog with material and size choices, availability checks, a comparison tray and an honest inquiry-list export.
WebKnowledge Graph Explorer
+25Turn project notes into an offline, searchable graph where every claim links back to its source line.
WebKPI Dashboard Template
+25Four KPI tiles with change chips over a glowing line chart, a breakdown table and target bars on warm paper.
WebLanding Page from AI Mockups
+25See three full-page designs first, pick one, and your agent builds it as clean, responsive code.
WebLaunch Waitlist Referral Demo
+25A clearly labeled local waitlist simulation with stable referral codes, duplicate checks, referral counts and queue export.
WebLaw Firm Website Template
+25A restrained law firm website with a service and jurisdiction finder plus a printable consultation preparation checklist.
WebMagazine Website Template
+25A print-quality magazine site with articles, topics, a small shop and subscriptions, as one HTML file.
WebMembership Pricing Calculator
+25A membership pricing page with exact member, billing-period and add-on totals, transparent annual comparisons and quote export.
WebNonprofit Campaign Website
+25A nonprofit campaign page with transparent goal arithmetic, cost assumptions, volunteer filters and a shareable planning summary.
WebOnline Course Landing Page
+25A course website with prerequisite self-checks, a realistic weekly study plan, module previews and progress saved on the device.
WebOperations Dashboard Kit
+25Triage work by priority, owner and overdue status, with clear state transitions and an exportable queue.
WebParticle Animation Hero
+25Copy on warm paper beside a turning sphere of ink and teal dots that reshapes per idea and scatters on scroll.
WebPersonal Brand Website
+25A portrait feathered into warm paper under a thin bracket, with light-and-bold statements on either side.
WebPet Store Website Template
+25A working pet supply shop with catalog, variants, bag, refill planner and demo checkout in one HTML file.
WebPhoto Sequence Editor
+25Reorder a photo story, choose crops and beat labels, then export and restore the exact sequence.
WebPhoto Sticker Playground
+25Arrange photo stickers with drag or keyboard controls, rotate them, undo changes and save a PNG collage.
WebPhotography Portfolio Website
+25Build a local photo portfolio with collection filters, keyboard lightbox and a printable contact sheet.
WebPodcast Website Template
+25A podcast site with a playable hero, episode archive, guest pages and a player that keeps playing.
WebHand-Drawn Pricing Section
+25A notebook-style pricing table with tilted ink cards, a yearly switch and dark mode, in one offline file.
WebProduct Integration Directory
+25A searchable integration catalog with capability and authentication filters, honest setup requirements and exportable checklists.
WebCinematic Product Launch Page
+25Film-lit near-black page: serif title card over drifting light, letterboxed night scene, reservation form.
WebReal Estate Website Template
+25A property website with budget and bedroom filters, side-by-side listing comparison and a printable shortlist of verified facts.
WebResearch Paper Website
+25A project page for your paper with an interactive Figure 1, results, limitations and one-click citation.
WebRevenue Mix Dashboard
+25Explain product or channel revenue with reconciled period totals and amount-to-share comparison.
WebRevenue Trend Report
+25Compare recorded revenue periods without hiding missing dates or inventing a forecast.
WebAdmin Dashboard Template
+25A working back-office console with charts, tables, kanban and calendar, built as one offline HTML file.
WebSaaS Landing Page Template
+25A calm, light marketing site for a software product with a working product console, pricing and sign-up.
WebSearchable Records Table
+25Turn a flat CSV into a searchable, sortable table with pagination and safe filtered export.
WebService Status Dashboard
+25Publish an honest service snapshot with stale checks, component health and incident history.
WebSports Club Website Template
+25A club, gym or studio site with timetable, coach pages, memberships, court plan and booking in one file.
WebTestimonial Wall Section
+25A masonry or slowly drifting wall of customer quotes that only ships quotes people agreed to.
WebTravel Itinerary Website
+25Build a printable trip plan with timed activities, travel buffers, conflict checks and a clear budget.
WebUX Case Study Portfolio
+25Present design decisions with traceable evidence, clear ownership and honest outcome labels.
WebWorkflow Automation Landing Page
+25Graphite page, small left-aligned headline, and a live node graph below that runs, retries and streams logs.
WebWriter Portfolio Website
+25Turn published work into a searchable writer portfolio with a reading queue, article previews and a downloadable media bio.
WebInteractive Grid Hero
+25A dark grid of fine strands that bends toward the cursor and rolls a glowing ring out from every click.
Questions
Does the listening test play real sound?
Yes. Choose two audio files and the HTML audio player plays them locally, retaining the time position when switching. No audio is invented.
Does the page take orders?
The demonstration only compares products. Add an owner-approved purchase link or a real commerce integration before accepting orders.