Copy-paste Windsurf prompts for landing pages, dashboards, pricing, login, onboarding and AI apps, written for Cascade with file references, plus a prompt that writes your Windsurf design rules.
A full landing page for a SaaS product: hero, logos, features, how it works, pricing, FAQ and a closing call to action.
Template: Pixel SaaS landing page
“Build a landing page for [product name], a SaaS product that helps [audience] [main outcome]…”
A hero section that explains the product in one line and gets the click, with a product visual and social proof.
Template: Dark gradient hero
“Build the hero section for [product name], which helps [audience] [main outcome]…”
A pricing page with three plans, a monthly and yearly toggle, a comparison table and a pricing FAQ.
Template: Three tier pricing section
“Build a pricing page for [product name]…”
An app dashboard with sidebar navigation, key metrics, a chart, a recent activity table and empty states.
Template: SaaS analytics dashboard
“Build the main dashboard for [product name], used by [user type] to [main job]…”
Sign in, sign up and forgot password screens with social login, clear errors and a branded side panel.
Template: Login page
“Build the sign in, sign up and forgot password pages for [product name]…”
A short onboarding flow: welcome, role, goals and a first-step checklist that gets new users to value fast.
Template: Onboarding role selection
“Build the onboarding flow new users see after sign up for [product name]…”
A ChatGPT-style AI chat app: conversation list, streaming answers, suggested prompts and a clean message box.
Template: AI chat interface
“Build an AI chat app called [product name] that helps [audience] with [topic]…”
A landing page for a mobile app with phone mockups, feature screens, reviews and App Store and Google Play buttons.
Template: Mobile app landing page
“Build a landing page for [app name], a mobile app that helps [audience] [main outcome]…”
A personal portfolio site with selected work, case study pages, an about section and a contact form.
Template: Designer portfolio website
“Build a portfolio website for [name], a [role] who wants [type of client or job]…”
Account, billing, team and notification settings pages with a settings sidebar and clear save states.
Template: Account settings page
“Build the settings area for [product name]…”
A pre-launch waitlist page that collects emails, shows the product and gives people a reason to share.
Template: Waitlist landing page
“Build a pre-launch waitlist page for [product name], launching [launch date]…”
A short launch video built in code: hook, product name, three feature scenes and a closing line, exported as MP4.
Template: App launch video
“Adapt the launch video template for [product name], which helps [audience] [main outcome]…”
Redesign an existing vibe-coded site or app to match a professional template, without breaking content or routes.
Template: AI chatbot landing page
“Redesign this [site or app] so it looks professional, using the template as the new design…”
A rules file that makes Cascade follow your design template, colours and spacing in every session.
“Create the design rules file at .windsurf/rules/design.md for this project, so every future change follows the same design…”
Every Windsurf prompt above shows its opening line for free. The full prompts, and the templates they are written for, come with a BrowserMoon licence.
Get a licenceWindsurf's Cascade can edit a whole project from one prompt, which is exactly why it needs a fixed design to follow. These Windsurf prompts point Cascade at a BrowserMoon template in your project, list the sections, and include a rules file so the design stays the same across every change.
Choose the Windsurf prompt for the page you are building, from a SaaS landing page to a login screen or an AI chat app.
Each prompt is written to go with the template shown on its card. Copy that template, or any template from the Windsurf templates page.
Follow the design in @design/template.html. Match its fonts, spacing, colours, corner radius and components exactly, and reuse existing components.
Replace the parts in brackets, like [product name] and [audience], with your own details. The prompt ends with: “Use Cascade in Write mode. Make the changes, then summarise every file you changed.”
Start with the Windsurf rules prompt so Cascade follows your design in every session, then run the landing page or dashboard prompt with the template file referenced. Once the rules are saved, each page prompt stays short.
Windsurf's Cascade agent reads your project, plans changes and edits many files at once. Like every agent, it designs from whatever it sees: in a new project that means defaults, and in an old one it copies the styles already there, good or bad.
These prompts give Cascade a real design. They reference a BrowserMoon template in your project, list the sections in order and tell Cascade to reuse your components, so the pages it builds look designed and stay consistent.
Each prompt on this page is built from the same five parts. The page-specific part changes per prompt; the rest is written for how Windsurf works.
Save the template in your project and mention it in the prompt so Cascade reads the real file.
Put your design rules in the Windsurf rules file so Cascade follows them in every session.
Ask for one page or section at a time. Cascade keeps the design tighter on smaller changes.
Open the Windsurf preview after each change and point out anything that does not match.
Without rules, Cascade forgets your design between sessions. Save them once in .windsurf/rules.
Stop and review after each page. Long runs can restyle shared components without asking.
Chat mode answers questions; Write mode edits files. Use Write mode for these prompts.
Mention the template file in the prompt so Cascade reads it before writing code.
Windsurf is used by developers who like an agent that keeps track of the whole project as it works. These Windsurf prompts are for developers who want Cascade to build UI that follows one design, across every page, without repeating design instructions in each chat.
A prompt says what to build; a template shows Windsurf what it should look like. These templates also fit the prompts above.
One that mentions the design file with @, lists the sections to build and asks Cascade to reuse existing components. A rules file keeps the style consistent.
Instructions saved in your workspace that Cascade follows in every session. A design rule keeps colours, spacing and components the same across pages.
Yes. They are written for Cascade in Write mode, which can create and edit several files.
Mostly, yes. There is also a Cursor version of every prompt, written for Cursor Agent and Cursor rules.
Yes. They are written for Cascade in Write mode, which plans and edits files across your project.
Save them in .windsurf/rules in your project. Cascade reads them in every session, so the design rules apply to every prompt.
Prompts for other AI coding tools
