SaaS website templates. Build your product website and start presenting it to your first customers.
Give your product a public introduction: the workflow, the evidence and the next step. Adapt the marketing website and link it to your real app, demo or trial.
Sample designs · replace the fictional content with your own.
AI ChatWorkflow example
Product workflow
You
Explain my software using this task, input and result before showing the feature list.
AI · example response
Send an example of the input, the action your product takes and the output, plus a screenshot or recording. I can turn that into a short explanation in the template and link to your actual demo or trial.
Explain your product with a real example
Pick one workflow
Use a task your customers can actually do in your product.
Show input and result
Provide a real screen or recording and a short explanation of what happens.
Connect the demo or trial
Let visitors move from the explanation to the working product.
Next: check whether the page explains what someone can do in your software.
Illustrative conversation, not a live AI session.
01 / Product workflow
What must a visitor understand before trying your software?
They need to see what task the software performs, what they provide and what they get back. Show one real workflow with a screenshot or short recording, then link to the trial or demo. The template gives you a layout for that explanation.
01
Input
Show what the user supplies and which environment is required.
02
Product action
Show what the actual app does, using a permitted recording or screenshot.
03
Result
Explain the observed output without inventing time or revenue savings.
02 / SaaS designs
Which narrative fits your product?
Choose a short product explanation like Veyra, workflow scenarios like Relayline, role-based explanations like Velora, or project presentation like Draftwell. Match the structure to how your customers use your software, then add your own screenshots and examples.
Relayline
Workflow scenarios and principles for a task-handoff presentation.
Current download inspected on 2 October 2026. Confirm the selected files on the product page.
index.html
RECREATE.md
assets/paper-detail.webp
assets/print-project.webp
assets/studio-review.webp
Some resources may load from external URLs. Review the selected project before publishing.
Sample designs · replace the fictional content with your own.
See the source files and technical details
Relayline: Source section order
04-relayline/ index.html · main section order
Exact order in the current HTML. These are original English headings, not a proposed redesign.
01 #unnamed — Give every handoffa clear next step
02 #unnamed — (visual section)
03 #overview — Keep the contextwith the next step
04 #features — Small details. Clearer handoffs. Explore the building blocks of this fictional workspace.
05 #unnamed — The next person should be able to pick up the work without piecing together the whole story.
06 #scenarios — Different work.The same clear handoff.
07 #principles — Built around the personwho picks up next
08 #faq — FAQ
09 #try — A clear next step.Ready when you are.
Veyra: Source section order
12-veyra/ index.html · main section order
Exact order in the current HTML. These are original English headings, not a proposed redesign.
01 #unnamed — Thoughts intoa first draft.
02 #steps — Choose your sample
03 #unnamed — (visual section)
04 #unnamed — (visual section)
05 #features — From spoken thoughtto something clear
06 #examples — A useful draft starts with what you mean. “I’ve checked the first two screens. The last one still needs a second look.”
07 #workflows — One thought.A few ways to use it.
08 #notes — Notes for a clearer draft
09 #faq — Frequently asked questions
10 #unnamed — Give an idea a first draft.
Velora: Source section order
15-velora/ index.html · main section order
Exact order in the current HTML. These are original English headings, not a proposed redesign.
01 #unnamed — Make room fora better review.
02 #workflow — A place for each step.
03 #features — Less searching.More reviewing.
04 #plans — A workspace foryour way of reviewing.
05 #faq — Questions, answered.
06 #integrations — Room for the toolsaround your code.
07 #perspectives — Different roles.A shared review.
08 #workspace — Keep the reviewin view.
09 #unnamed — Your next review,in a different light.
Visitor question
Source location
What the actual source shows
What your website needs
How is work handed over?
Relayline #overview / #scenarios / #try
Context first, then creative review, client handoff and launch check; a local review dialog.
Actual product screens, permissions, saved state and supported handoff destinations.
How does an input become a draft?
Veyra #steps / #examples / #workflows
Choose sample → shape/review → copy; text-based local interaction and short/detailed examples.
Actual voice/transcription engine, supported inputs, review rules and real output evidence if those are your features.
Four review stages lead to feature cards, illustrative plans and workspace tabs.
Actual repository integration, permission model, discussion persistence and plan terms.
Relayline
Original supplied English source; fictional sample content. Open the whole page to inspect the sequence and controls.Open full preview ↗
Veyra
Original supplied English source; fictional sample content. Open the whole page to inspect the sequence and controls.Open full preview ↗
Velora
Original supplied English source; fictional sample content. Open the whole page to inspect the sequence and controls.Open full preview ↗
AI ChatWorkflow example
Website vs app
You
Use the website to present my SaaS and make trial and pricing buttons open these app pages.
AI · example response
Give me the real trial, login and plan links from your app. I can replace the example button destinations so visitors move from the website to your application. The app will continue to handle their account and payment.
Link the website to your app
Get the app links
Use real signup, demo and plan URLs from your own product.
Replace the sample actions
Ask AI to connect the corresponding buttons to those addresses.
Follow each link
Confirm visitors reach the correct trial, signup or billing page.
Next: test the route from the public website into your actual app.
Illustrative conversation, not a live AI session.
03 / Website vs app
Which part of the software does the template provide?
It delivers the marketing website: product explanations, screenshots, feature sections and buttons linking to your app. Your software continues to handle accounts, customer data and payments. Ask AI to point each signup or pricing button to the corresponding place in your app.
Marketing website
Approved copy, product visuals, workflow explanation and links to your app.
Your operating product
The actual trial, accounts, services and billing that users access separately.
The actual Clearstead14 email handler only validates, shows a local message and resets. Its workspace/plan dialog says no account is created and no data is connected, stored or sent. The real application remains a separate purchase or build.
form.addEventListener('submit',event=>{event.preventDefault();if(!email.validity.valid){status.textContent='Enter a valid email address to test this form.';email.setAttribute('aria-invalid','true');email.focus();return}email.removeAttribute('aria-invalid');status.textContent='Demo complete. Your address was not sent or saved.';form.reset()});
Clearstead
Original supplied English source; fictional sample content. Open the whole page to inspect the sequence and controls.Open full preview ↗
Actual local Clearstead14 workspace dialog, desktop Chrome 1118×958. Its account/data boundary is visible.
AI ChatWorkflow example
Proof & plans
You
Replace the example plans with my product’s actual prices, limits and available features.
AI · example response
Open the downloaded template folder and send your prices, limits, available features and screenshots. I can replace its example plans and descriptions with those details, keeping the design. We can check the local preview before publishing.
Replace the example plans and features
Open the downloaded project
Unzip the template and open its complete folder in your file-capable AI agent. Keep the supplied asset paths.
Add the real product details
Supply prices, plan limits, available features, screenshots and the real signup or checkout links.
Check the local preview
Read the plans and feature descriptions against your current product information before publishing.
Next: confirm the page shows your actual product, then choose the publication route.
Illustrative conversation, not a live AI session.
04 / Proof & plans
What should replace the sample claims and plan cards?
Use your app screenshots, current features, real prices and limits. Give AI those details and ask it to replace the template examples. If a feature is coming later, mark it as planned or leave it out, so customers know what they can use now.
Checked locally on this device; nothing is submitted.
AI ChatWorkflow example
Keep it aligned
You
Here are the new product features and screenshots. Update the marketing website, not the app.
AI · example response
Give me the release notes, current screenshots and the links users should follow. I can update the feature descriptions and buttons without rebuilding the website design.
Update the product website
Use the current folder
Continue with the website files you last published so earlier changes stay in place.
Describe what changed
Give AI the new information and name the section or element to update.
Preview and republish
Open the updated page, then upload the complete updated project to the existing host.
Next: check the descriptions and app links against the current product.
Illustrative conversation, not a live AI session.
05 / Keep it aligned
How do I keep the website current when the app changes?
Give AI the current website folder and a short list of product changes. Ask it to update the feature text, screenshots and links while keeping the design. Check the preview and republish the files whenever a release changes what customers should see.
See the prepared template example
›_ AI editing exampleFormwell
You
Replace the sample introduction and services with my approved content, retaining the layout.
AI · example response
The prepared Formwell example shows a copy update. A software version also requires your actual app visuals, requirements and verified links.
Prepared conversation and project versions. No live AI connection.
AI ChatWorkflow example
Files & launch
You
Prepare this product website for Cloudflare publication and keep the real app links.
AI · example response
I can prepare the complete folder and use Cloudflare’s CLI or API to upload it after you authorise account access. Keep index.html and asset paths intact. We can open the resulting address and connect your domain next.
Publish the finished website
Prepare the folder
Keep the finished HTML, scripts and assets in their original relative locations.
Authorise deployment
Use your Cloudflare or Vercel account and allow the agent to deploy through the provider’s CLI or API.
Open the public address
Check the website online, then add your domain and test links, images and contact.
Alternative: give the complete ZIP to hosting support or an IT person. Ask whether they can upload it and connect your domain.
Illustrative conversation, not a live AI session.
06 / Files & launch
What do I buy, and what remains to launch?
You buy the website files and instructions. Add the content from your SaaS and link to your app. For publication, your authorised file-capable AI agent can deploy the folder to Cloudflare or Vercel; you can also give its ZIP to hosting support or an IT person.
Website files + design instructions
Ask your AI agent
Ask it to deploy the completed project to Cloudflare or Vercel with your authorised account access.
Or hand over the ZIP
Send the complete folder as a ZIP to hosting support or an IT person and ask whether they can upload it for you.
Open the public website
Connect your domain if needed, then check pictures, mobile layout, links and contact on the live address.
Yes, if you need a public website to explain and promote your SaaS. It also works before launch with a connected waiting list or demo request. If you need to build the app itself, its accounts, data and billing require a separate implementation.
Are the pricing plans functional?⌃
The sample cards present plans. Give AI your real prices and signup or checkout links, then ask it to connect each button. Billing happens in your application or payment service.
Can I use it before the app is available?⌃
Yes. Present the idea or prototype with a waiting list or demo request instead of implying that the app is already available. When it launches, ask AI to replace that route with the real product link.
OneDollarStock is implementing a project to prepare the platform for entry into the German market under the “Go Global” acceleration track of the “Unicorn Hub Startup Booster” programme, project no. FENG.02.28-IP.02-0013/23. The project is co-financed by the European Funds for Smart Economy 2021–2027 under the priority “Innovation-friendly environment”, Measure FENG.2.28 Startup Booster Poland.
Learn more about the project →
