Cursor prompt to build a landing page
One page, one call to action, no component library sprawl. This prompt keeps Cursor's agent on your existing Tailwind tokens so the landing page matches the rest of the product, and it bans lorem ipsum so every unfinished string is a searchable TODO. You end with a responsive page that survives a production build.
Last updated
Build a single landing page at the site root for {{resource}}. Structure: a hero with one headline, one subline, and one primary call to action, a three-item feature section, a short how-it-works list, and a footer with links. Pull colors and spacing from the existing Tailwind config or CSS variables in this repo, do not introduce a second design system. All copy must be real text I gave you or a clearly marked TODO comment, never lorem ipsum. Make it responsive down to 360px wide with the hero readable without scrolling on a laptop viewport. No carousel, no animation library, no cookie banner. Verify by running the production build in the terminal and confirming it exits with code zero and no errors or warnings in the build output, then show me the component tree you created as a list so I can review the diffs in order.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Build a single landing page at the site root for users. Structure: a hero with one headline, one subline, and one primary call to action, a three-item feature section, a short how-it-works list, and a footer with links. Pull colors and spacing from the existing Tailwind config or CSS variables in this repo, do not introduce a second design system. All copy must be real text I gave you or a clearly marked TODO comment, never lorem ipsum. Make it responsive down to 360px wide with the hero readable without scrolling on a laptop viewport. No carousel, no animation library, no cookie banner. Verify by running the production build in the terminal and confirming it exits with code zero and no errors or warnings in the build output, then show me the component tree you created as a list so I can review the diffs in order.
Same task in other tools
Questions about this prompt
The page comes out looking generic. How do I steer it?
@-mention a component whose look you like and add one sentence of direction, such as dense and technical or airy with large type. The agent mirrors patterns in files it can see far more reliably than it follows adjectives alone.
I am not using Tailwind. Does the prompt still work?
Yes. Swap the design token sentence for wherever your variables live, a globals.css or theme file, and @-mention it. The point of that constraint is a single source of styling truth, not Tailwind specifically.
The agent installed a UI kit anyway. Now what?
Reject the package.json diff in the review pane before accepting anything else, then reply that the dependency is out of scope. Unwanted packages are the diff most worth catching early, because everything downstream imports from them.