What you get
- One offline HTML file, or the same sections as components in your framework project
- A hero canvas that runs your product's own flow, including a retry and streaming logs
- Explorer, step library, observability charts, local-first diagram, pricing and install band
- Docs, changelog, download, security, story, sign-up, sign-in, contact, legal and 404 routes
- Optional photos, a background loop and a social card generated with PopNow after a credit quote
Good for
- Workflow, automation and CI tools
- Self-hosted or desktop developer tools and open source projects
- Data pipeline, job queue and agent platform homepages
Not for
- Consumer apps, shops or portfolios
- Bright or colourful brands: the page is dark-first with one cyan accent
- Products that should be shown as a photo or screenshot rather than live UI
How to use it
In Claude or ChatGPT
Use the PopNow skill "Workflow Automation Landing Page" (workflow-automation-landing-page) for this: Build the homepage for Relaypoint, a self-hosted job runner for small data teams. It installs with brew, winget or Docker. Plans: Community free, Team $18 per seat, Enterprise on request.
In a coding agent
/popnow-workflow-automation-landing-page Build the homepage for Relaypoint, a self-hosted job runner for small data teams. It installs with brew, winget or Docker. Plans: Community free, Team $18 per seat, Enterprise on request.
Then try
Turn the explorer tabs into Queues, Workers, Retries and Dead letters.
Quote a slow loop of the server photo before generating anything.
What to have ready
- Product name, one-line promise and what a flow is in your product
- Trigger types, step runtimes and how it installs
- Plans, prices and any real customers, quotes and security facts
- Optional: a DESIGN.md, a PopNow API key or your own 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.
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.
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.
Questions
Is the canvas in the hero a screenshot?
No. It is HTML and SVG driven by data arrays: your steps, their wiring and a scripted run with a retry. It stays sharp in both themes, reacts to clicks, and shows the final state when the visitor prefers reduced motion.
What does PopNow generate for this page?
Only the photographic parts: a customer portrait and story header, a detail shot, an avatar set from one grid image, an optional slow loop of the machine the product runs on, and an optional social card plate. Each run is quoted in credits first and starts only after you agree.
Can I use it without a PopNow API key?
Yes. The bundled runner photo and avatar stand-ins, your own photos or a photo-free story card keep every section complete, and the social card can be built from HTML for free.
My product is a hosted API, not a desktop app. Does it still fit?
Yes. The local-first section becomes a diagram of where data goes, the per-OS install band becomes SDK install tabs, and the download route becomes an SDK or integrations page.