Windsurf prompt to build a landing page
You get a complete marketing page with a hero, feature grid, code block, and footer, built mobile first and checked at three widths. Windsurf's preview loop matters here: the prompt has Cascade boot the dev server and inspect its own markup for unsized images and missing alt text before you look.
Last updated
Create a landing page at src/pages/index with these sections in this order: hero with one headline and a single primary CTA, a three-item feature grid, a code snippet block with a copy button, a social proof placeholder, and a footer with nav links. Constraints: semantic header, main, and footer landmarks, system font stack, no carousel, no external scripts, and images below the fold lazy loaded with explicit width and height. Build mobile first at 360px, then adapt at 768px and 1200px. Use {{addon}} for styling only if the repo already includes it; otherwise CSS modules. Have Cascade start the dev server, open the preview at each breakpoint, and flag markup problems it can see, like missing alt text or unsized images, before I review.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Create a landing page at src/pages/index with these sections in this order: hero with one headline and a single primary CTA, a three-item feature grid, a code snippet block with a copy button, a social proof placeholder, and a footer with nav links. Constraints: semantic header, main, and footer landmarks, system font stack, no carousel, no external scripts, and images below the fold lazy loaded with explicit width and height. Build mobile first at 360px, then adapt at 768px and 1200px. Use input validation for styling only if the repo already includes it; otherwise CSS modules. Have Cascade start the dev server, open the preview at each breakpoint, and flag markup problems it can see, like missing alt text or unsized images, before I review.
Same task in other tools
Questions about this prompt
Can Cascade really review the page it just built?
It can open the running preview and reason about the rendered result alongside the markup it wrote. Treat that as a first pass; spacing and copy decisions are still yours to make.
How do I change the section list?
Edit the ordered list inside the prompt rather than describing changes afterward. Cascade follows an explicit section order closely, while sections requested later tend to get bolted onto the bottom instead of integrated.
The page ships with layout shift. Where does it come from?
Almost always images missing width and height attributes, or a web font swapping in late. The prompt bans unsized images, so if shift appears, ask Cascade to audit every img tag and the font loading strategy specifically.