The Blueprint · SaaS & AI · We sell products online
The website blueprint for software sold as a one-off purchase.
Licences, lifetime deals and one-off software purchases behave like retail, not like SaaS. The architecture that reflects that.
Free, no email gate, no watermark · assembled from a curated matrix, so nothing here is invented
Where this combination usually goes wrong.
One-off software gets marketed like a subscription, which confuses the buyer about what they are actually getting. Price, licence terms and what happens at version two, all stated plainly.
The pack below assumes the most common starting problem for this pairing: people visit, then leave without doing anything. Change it on the live generator.
The blueprint pack
Your blueprint pack · assembled, not generated · steal freely
SaaS & AI · We sell products online · The full site, rebuilt
01 · The positioning brief
SaaS buyers punish vagueness. The best software sites shorten the distance from interest to understanding to action: the hero names the job your product does, the first viewport shows the real interface, and proof (logos plus one hard number) lands before the visitor has to think.
Your revenue arrives through online product sales rather than the motion this industry usually runs on. That is a real strategic difference rather than a rounding error, so the architecture below leads with the shelf and the product page, and whatever the category would normally put first becomes secondary.
Traffic without action is almost always a message problem wearing a design costume. The brief: one singular promise per page, one primary action repeated, proof placed exactly where doubt lives. Shorter pages with a single clear message reliably beat longer ones, so everything that does not serve the promise gets cut.
02 · The site architecture
01Hero: the job, named
Headline states the outcome, subline states who it is for, one CTA.
02Product shelf, priced
Four to eight products, price visible, one click to the product page. This is the revenue path, so it sits high.
03The product page standard
Reviews near the price, objections (shipping, returns, sizing) answered inline, sticky add-to-cart on mobile.
04Product in the first viewport
Real interface, moving if possible. A 60 to 90 second product film beats a feature grid.
05Proof strip
Logos plus one hard number, immediately after the hero.
06Three outcome blocks
What changes for the buyer, not what the software has. Three, never nine.
07Case proof
One customer, named, with the before and after in numbers.
08Pricing, transparent
Tiers on the page. Hidden pricing filters out the buyers you want.
09Final CTA, repeated
Same action as the hero. One conversion verb per site.
Conversion path Land, browse, product page, cart, with every objection answered on the page where the doubt occurs. The product page is the revenue page; invest there first.
Performance: largest contentful paint under 2.5 seconds, layout shift at zero, below-fold media lazy-loaded, modern image formats. Past three seconds the bounce cliff starts.
Mobile first: most visits arrive on a phone and mobile-optimised pages convert measurably higher. Design at 390 pixels, then widen.
Accessibility: WCAG 2.2 AA. Semantic landmarks, visible focus, 4.5:1 contrast, reduced-motion respected. It is also the cheap route to better speed scores.
Motion: one signature idea, executed with restraint. Reveals resolve and hold. Never hijack the scroll.
One primary conversion action per page, repeated. Everything else is secondary styling.
03 · The master prompt · paste it into any AI tool
You are a senior web designer and front-end engineer. Build a production-grade website for my business.
CONTEXT
Industry: SaaS & AI. Revenue arrives through online product sales: cart, checkout and repeat purchase.
The current failure is conversion: visitors arrive and leave. Enforce one singular promise per page, one primary CTA repeated, and place proof directly beside every claim and price.
Scope: the full site. Build the homepage from the sections below, then derive interior pages from the same component system.
PAGE ARCHITECTURE (build in this exact order)
1. Hero: the job, named: Headline states the outcome, subline states who it is for, one CTA.
2. Product shelf, priced: Four to eight products, price visible, one click to the product page. This is the revenue path, so it sits high.
3. The product page standard: Reviews near the price, objections (shipping, returns, sizing) answered inline, sticky add-to-cart on mobile.
4. Product in the first viewport: Real interface, moving if possible. A 60 to 90 second product film beats a feature grid.
5. Proof strip: Logos plus one hard number, immediately after the hero.
6. Three outcome blocks: What changes for the buyer, not what the software has. Three, never nine.
7. Case proof: One customer, named, with the before and after in numbers.
8. Pricing, transparent: Tiers on the page. Hidden pricing filters out the buyers you want.
9. Final CTA, repeated: Same action as the hero. One conversion verb per site.
CONVERSION PATH
Land, browse, product page, cart, with every objection answered on the page where the doubt occurs. The product page is the revenue page; invest there first.
NON-NEGOTIABLE STANDARDS
- Largest contentful paint under 2.5 seconds. Zero layout shift. Lazy-load all below-fold media. Modern image formats (WebP or AVIF).
- Mobile first: design at 390px wide, then scale up. Test every section at that width.
- WCAG 2.2 AA: semantic HTML landmarks, visible focus states, 4.5:1 text contrast minimum, honour prefers-reduced-motion.
- One primary call to action per page, repeated. Do not add secondary CTAs that compete with it.
- Motion: at most one signature animation idea, subtle, resolving into a held state. Never animate on scroll in a way that hijacks scrolling.
- Typography: one display face, one text face, maximum. Real hierarchy through size and weight, not colour.
- No stock-photo cliches, no carousels in the hero, no autoplaying sound.
COPY RULES
- Plain English. Short sentences. Name the buyer and the outcome in the first headline.
- Every claim sits next to its proof. If there is no proof, cut the claim.
- Write placeholder proof slots as [PROOF: description] for me to fill with real numbers and names. Do not invent statistics, testimonials or client names.
DELIVERY
Build it as a fast static site (or the framework of your choice with static output). Show me the homepage first for approval before building further. List any assumptions you made.
04 · The operating plan · how to run it after it ships
01
The Prototyper
Ideates and tests before anything is built properly. Rough pages, quick copy variants, throwaway experiments. Their job is to be wrong fast and cheap so the Builder is right the first time.
Your focus Prototype the homepage and the one money page first. The rest of the site inherits what those two prove.
02
The Builder
Ships the real thing to the standard: the architecture above, the performance budget, the accessibility bar. Takes the winning prototype and makes it production-grade, then stops. Builders who keep building past done create the mess the Sweeper inherits.
Your focus Build from a component system, not page by page. Every page assembles from known blocks so future changes take minutes.
03
The Sweeper
Prunes. Kills the sections nobody scrolls to, the pages nobody visits, the copy that hedges. Most sites fail by addition; the Sweeper is the discipline that keeps the singular message singular.
Your focus Audit quarterly: any page below meaningful traffic gets merged or killed. Fewer, stronger pages rank and convert better.
04
The Grower
Finds product-market fit for the site itself: which messages pull, which channels feed it, which pages earn traffic. Reads the numbers the Builder instrumented, feeds winners back to the Prototyper.
Your focus Map every page to a buyer question and check monthly that each page is winning its question. Gaps become the content plan.
05
The Maintainer
Keeps the ship seaworthy as it scales: dependencies, uptime, performance budgets, broken links, stale proof. Unglamorous, and the reason the site still converts in year three. Every claim on the site has an expiry date; the Maintainer enforces it.
Your focus A standing checklist run monthly: performance budget held, no broken paths, testimonials and numbers still true.
Five archetypes, not five hires. In a small business one person spans all five; the point is knowing which hat is on. Sites rot when the same person builds, grows and prunes in the same sitting without noticing the mode switch.
This is one of twenty-four published combinations. The live generator covers every industry, revenue model, problem and scope, and nothing you enter leaves the page.