What you get
- One HTML file with fonts and images embedded, no network requests
- Split hero whose play button opens a working review-and-approve demo
- Workflow tabs, version compare slider, capability bento, approval phone, audit log, pricing with seats
- Customer story, plan comparison, changelog, sign-in, trial, demo booking, legal and 404 pages
- Optional stills, portraits, a moving film clip and a social card from PopNow after a credit quote
Good for
- Review, approval and collaboration tools
- Creative, production and agency software
- B2B products that sell on a careful process
Not for
- Bright consumer apps with big illustrations
- Dark-only developer tools
- One-screen waitlists
How to use it
In Claude or ChatGPT
Use the PopNow skill "Editorial SaaS Website" (editorial-saas-website) for this: Build the site for Redline Room, a contract review tool for small law firms: Draft, Redline, Sign, File. Plans: Solo $19, Firm $49 per seat, Enterprise.
In a coding agent
/popnow-editorial-saas-website Build the site for Redline Room, a contract review tool for small law firms: Draft, Redline, Sign, File. Plans: Solo $19, Firm $49 per seat, Enterprise.
Then try
Quote a documentary hero still of a small law office and three matched portraits before generating.
Drop the customer story for now and keep the plan comparison route.
What to have ready
- Product name, audience, one-line promise and the main call to action
- Your real workflow stages, capabilities, plans and prices
- Customers, quotes and numbers you can use, or approval to draft them
- Optional: a PopNow API key, your own deliverables and team photos
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.
Glassmorphism Website Template
+3Frosted glass pills on a near-black film, a huge serif headline with one italic word and an email capture.
Hardware Product Website
+3Huge hairline model names on silver studio shots, frosted spec cards, a to-scale lineup and a hardware bento.
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
What happens when someone presses the play button in the hero?
A dialog opens with the product's review room, built in HTML and CSS, and runs one cycle: a comment, a pin, the status flipping to approved and a toast. It ends on a Replay button, and reduced motion shows the final state.
My product is not for creative teams. Does it still fit?
Yes, if it moves work through stages. The adapting guide maps the workflow tabs, frames, approval phone and delivery matrix to legal documents, architecture drawings, packaging proofs and video cutdowns.
What does PopNow add?
Photography the page cannot draw: the deliverables shown inside the product, a documentary hero still, matched portraits, an optional moving film clip in the review panel and a social card. Each run is quoted in credits first.
Can it go into my existing Next.js or Astro site?
Yes. The skill reads your project and rebuilds the sections as components and the inner pages as real routes, with the fonts installed as packages instead of the single file.