Next.js landing page with Cursor in one day: 5 steps + prompts
Published: September 7, 2026 · 6 min read
Ship a Next.js landing page with Cursor in about 7 hours: Tailwind CSS and shadcn/ui setup, outline, copy-ready prompts, motion sections, and Vercel deploy.
How to build a Next.js landing page in one day with Cursor
Ask Cursor to "build a landing page" and the skeleton shows up in minutes.
Then polishing the look, adding motion, and actually shipping drags on for days. Most people who have tried it know the feeling.
To get to live in a day, stop generating everything and split the roles.
Cursor generates the skeleton, motion sections come from finished pieces you pick, and you direct the copy and the finish. With that split, the work fits in roughly 7 hours.
This guide walks through five steps, with a prompt for each and a one-day timetable.
Step 1: Set up Next.js + Tailwind CSS + shadcn/ui
Step 2: Decide the section outline before writing code
Step 3: Generate low-motion sections, pick the motion ones
Step 4: Give Cursor one integration prompt for placement, deps, and brand
Step 5: Deploy to Vercel and check three things before launch
Why a fully generated landing page takes more than a day
Cursor plus Next.js is fast, but in practice you hit three walls.
The design looks like every other SaaS page
Motion quality lags, so you keep re-prompting
Spacing and color differ by section, so it never reads as one page
All three come from handing the agent too wide a scope. Lock the base and outline yourself, choose motion by watching it run, and re-prompts drop sharply.
The five steps follow that idea.
Step 1: Set up the landing page base with shadcn/ui
Time spent shopping for a stack is the most wasted time. For a landing page, lock Next.js (App Router), Tailwind CSS, and shadcn/ui.
Cursor's agent writes this stack fluently, so prompts drift less.
shadcn/ui is not imported as a library. You copy component source into your repo, which makes it easy to rewrite color and spacing for your brand later. That suits one-off pages like a landing page.
These are the commands if you type them yourself. Telling Cursor "Create a Next.js App Router project and set up Tailwind CSS and shadcn/ui" works too.
npx create-next-app@latest my-lp
cd my-lp
npx shadcn@latest init
npx shadcn@latest add button card accordionStep 2: Plan the landing page section outline first
Most of a landing page is decided by the outline before implementation. The standard flow is hero, problem and empathy, features, logos, pricing, FAQ, final CTA.
B2B pages often move proof forward; consumer pages often push pricing back. Adjust the order only.
Decide now which sections get motion. Motion everywhere breaks the page tempo, so keep strong motion on two places: the hero and the final CTA (the closing call to sign up or get in touch).
The outline memo becomes the Cursor prompt. Hand it over like this and the skeleton lands in one pass.
Build a landing page skeleton in app/(marketing)/page.tsx with this outline.
Put each section in its own file under components/sections/.
1. Hero (with motion; placeholder for now, we will replace it)
2. Problem (problem and empathy)
3. Features (three features)
4. Logos (customer logos)
5. Pricing (three plans)
6. FAQ (accordion, five questions)
7. FinalCta (with motion; we will replace it)Keep the landing page.tsx as a simple list of sections
Keep page.tsx as a list of sections and swapping one later is trivial. The page itself stays a Server Component; only the moving sections become Client Components.
import { Hero } from "@/components/sections/Hero";
import { Problem } from "@/components/sections/Problem";
import { Features } from "@/components/sections/Features";
import { Logos } from "@/components/sections/Logos";
import { Pricing } from "@/components/sections/Pricing";
import { Faq } from "@/components/sections/Faq";
import { FinalCta } from "@/components/sections/FinalCta";
export default function Page() {
return (
<main>
<Hero />
<Problem />
<Features />
<Logos />
<Pricing />
<Faq />
<FinalCta />
</main>
);
}Step 3: Pick landing page motion sections, do not write them
Problem, features, pricing, FAQ: sections with little motion are fine to generate from the Step 2 memo. Leave placeholder copy and polish it all at once later.
Whether you finish in a day comes down to the hero and the final CTA. Writing entrance and scroll-linked motion in Motion (formerly Framer Motion) can easily take half a day per section.
Do not write those. Pick from finished pieces you can watch running in the browser, and the schedule becomes predictable.
Easing and timing do not show in a still, so check them in motion before choosing.
If you do write it yourself, the basics are in https://design-layer.com/en/articles/nextjs-animated-hero-section-guide
Step 4: Integrate landing page sections with one prompt
Paste the chosen section's code into Cursor's Agent with a prompt shaped like this. Replacing the placeholder Hero keeps the outline intact.
Replace components/sections/Hero.tsx with this React section.
- Keep the Tailwind classes as they are
- Add any missing npm packages to package.json
- Rewrite headings, CTA, and links for our product
- Match color and spacing to our existing design tokens
- Keep page.tsx a Server ComponentFixing Next.js build errors
If the build stops on a missing motion or lucide-react package, have the agent read the copied imports and add the deps. Pasting the error text as-is is the fastest fix.
Using a browser-only feature in a server-side component throws an error like "useState only works in Client Components".
The fix is to add "use client" (a marker that says this component runs in the browser) at the top of that file. Add the directive to the moving section's file only, not to the whole page.
Making landing page sections feel like one page
Finish with one page-wide instruction such as "set vertical padding on every section to py-24 and unify heading sizes." One pass across the page leaves less drift than asking section by section.
Step 5: Deploy the landing page to Vercel
Connect the GitHub repo to Vercel and you are live. Add a custom domain in the dashboard and set the DNS records; propagation can take a while.
Before launch, set the page title and description through metadata.
Also prepare the image shown when the page is shared on social media (the OG image). Put it in the app folder as opengraph-image.png and it is picked up automatically.
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Product name | The value in one line",
description: "Whose problem, what problem, and how you solve it, in one or two sentences.",
};Three landing page pre-launch checks
Title, description, and OG image are set
Motion is not too heavy at phone width (scroll on a real device)
CTA links and analytics tags are correct
Tune delay and duration starting from the preview values. On phones especially, softening motion changes perceived speed a lot.
One-day landing page timetable (about 7 hours)
Laid out over one day, the steps look like this. The trick is to overlap work with the agent's wait time.
Morning (2 hours): Steps 1 and 2. Write the outline memo while the agent sets up the base
Early afternoon (2 hours): first half of Step 3. Generate problem, features, pricing, FAQ from the memo
Late afternoon (1.5 hours): rest of Step 3 and Step 4. Pick and integrate the hero and final CTA
Evening (1.5 hours): polish copy, match tokens, set OG, publish on Vercel
The first time, fixing errors in Step 4 can add about 30 minutes. Treat the timetable as a guide.
Picking landing page motion sections from a catalog
For the "pick" part of Step 3, one option is DesignLayer: a catalog where motion sections built with React + Tailwind CSS run live in the browser.
Browsing needs no account and no card.
Copy for Cursor on a section bundles agent-readable integration instructions, the live preview URL, the TSX, and the npm dependency list.
The free plan gives 3 copies per day (JST), so "hero and closing section this afternoon" fits. https://design-layer.com/en/components
The steps for pasting into Cursor are covered in https://design-layer.com/en/articles/cursor-react-motion-components-guide
Cursor and Next.js landing page: common questions
The agent can handle setup, so building it is possible. Without knowing Server Components and "use client", though, Step 4 errors will cost time. Learn the basics first: https://design-layer.com/en/articles/nextjs-components-guide
Summary: building a landing page with Cursor and Next.js
Lock Next.js + Tailwind CSS + shadcn/ui and stop deliberating
Decide the outline and what moves before writing code
Generate low-motion sections; choose the hero and closing section by watching them run
Put placement, deps, and token matching in the prompt
Before launch, check title and description, phone motion, and button links
Try finishing Steps 1 and 2 this morning. Once the outline memo exists, the rest is using that memo as the prompt.
When choosing motion sections, compare real motion in the catalog. https://design-layer.com/en/components
