Cursor
Cursor prompt for an agency landing page
A Cursor prompt that drops a portfolio-forward agency page into your existing repo without disturbing its stack — framework detected, conventions followed, one reviewable diff set. A numbered work index with hover previews replaces the usual card grid. Style, palette, type, and motion come from the customizer; structure and copy rules are fixed.
Last updated
Prompt
In my existing repo, add a portfolio-forward landing page for {{product}}, aimed at {{audience}}. Work with the stack that is already here: detect the framework and styling approach before writing anything, follow current conventions for routing and component placement (app/(marketing)/page.tsx, src/pages/, or whatever this project uses), and split the page into section components inside the repo's components directory. Apply the whole change as one reviewable set of diffs.
Page anatomy, in order:
1. Intro band — {{product}}'s name, a specialty statement of 8–12 words, and current availability.
2. Work index — a numbered index of 6 projects (01–06); each row lists project name, client sector, year, and one metric, and hovering a row previews a thumbnail area pinned to the right.
3. Capability matrix — a 2x3 grid of service cells, each holding a term and a 12–18 word definition.
4. Working method — 4 steps as stacked rows beside a sticky left-column label that stays put while the steps scroll.
5. Manifesto + team — one pull-quote-sized statement, then names and roles on a single comma-separated line.
6. Contact block — a large mail link and a secondary anchor link back to the work index.
Visual direction:
{{style}}
Palette: {{palette}}
Typography: {{type}}
Motion: {{motion}}
Constraints:
- Reuse the repo's existing design tokens and utilities; introduce no new styling system and no new dependencies.
- Section block padding: 6rem desktop, 3.5rem mobile; work index rows keep a fixed height with a 1px divider between them.
- On mobile, the thumbnail preview disappears (rows become direct links) and the sticky method label degrades to a static heading.
The primary call to action is "{{cta}}" — one instance only, in the intro band. Derive every project name and capability definition from {{product}}'s specialty rather than lorem ipsum.
After applying the diffs, verify: the page compiles with the repo's existing build command; the dependency manifest is unchanged; the work index has 6 rows, each with a metric; the sticky label holds at desktop width; "{{cta}}" appears exactly once.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Your customized prompt
In my existing repo, add a portfolio-forward landing page for a project management SaaS, aimed at engineering managers at startups. Work with the stack that is already here: detect the framework and styling approach before writing anything, follow current conventions for routing and component placement (app/(marketing)/page.tsx, src/pages/, or whatever this project uses), and split the page into section components inside the repo's components directory. Apply the whole change as one reviewable set of diffs. Page anatomy, in order: 1. Intro band — a project management SaaS's name, a specialty statement of 8–12 words, and current availability. 2. Work index — a numbered index of 6 projects (01–06); each row lists project name, client sector, year, and one metric, and hovering a row previews a thumbnail area pinned to the right. 3. Capability matrix — a 2x3 grid of service cells, each holding a term and a 12–18 word definition. 4. Working method — 4 steps as stacked rows beside a sticky left-column label that stays put while the steps scroll. 5. Manifesto + team — one pull-quote-sized statement, then names and roles on a single comma-separated line. 6. Contact block — a large mail link and a secondary anchor link back to the work index. Visual direction: Minimal dark style. Near-black canvas (#0A0A0B) with one elevated surface tone (#141416) for cards — never more than two surface steps. Hairline borders (1px, white at 8% opacity) instead of shadows; if a shadow is unavoidable use 0 1px 2px rgba(0,0,0,0.4) and nothing softer. Text in exactly three steps: white at 92% for headings, 60% for body, 40% for captions. Generous negative space — section padding at least 120px on desktop, 64px on mobile. The accent color appears only on interactive elements and one hero highlight, nowhere else. Palette: a strict neutral ramp (white, #F5F5F5, #E5E5E5, #737373, #171717) carries the entire interface; pick one accent and use it only for primary CTAs, active states, and a single hero highlight. If the accent appears more than five times per viewport it stops being an accent. Keep semantic colors (success, error) desaturated so the accent stays in charge. Typography: one geometric sans (a Futura/Poppins-class face) at three weights maximum (400/500/700). Scale: 64-88px hero, 32px section heads, 18px lede, 16px body, 13px caps labels with 0.08em tracking. Tight headline leading (1.05-1.1), relaxed body (1.6). Let the geometry carry the personality — no italics; weight and size do all hierarchy. Motion: none. Zero scroll animations, zero entrance effects — the page is fully composed the instant it paints. Spend the motion budget on input feedback instead: 120-150ms ease-out color and transform transitions on hover and press states only. Hold this constraint absolutely; it is a statement, not an omission. Constraints: - Reuse the repo's existing design tokens and utilities; introduce no new styling system and no new dependencies. - Section block padding: 6rem desktop, 3.5rem mobile; work index rows keep a fixed height with a 1px divider between them. - On mobile, the thumbnail preview disappears (rows become direct links) and the sticky method label degrades to a static heading. The primary call to action is "start a free trial" — one instance only, in the intro band. Derive every project name and capability definition from a project management SaaS's specialty rather than lorem ipsum. After applying the diffs, verify: the page compiles with the repo's existing build command; the dependency manifest is unchanged; the work index has 6 rows, each with a metric; the sticky label holds at desktop width; "start a free trial" appears exactly once.
Same task in other tools
Questions about this prompt
Will this touch my existing routes or design system?
The prompt instructs Cursor to detect the framework, reuse existing tokens and utilities, and add no dependencies — the page arrives as new files plus a route registration, applied as one diff set you review before accepting. Nothing else in the repo should change.
My repo uses CSS modules rather than Tailwind — is that a problem?
No. Spacing is specified in rem values and behavior in plain terms, not utility classes, precisely so Cursor can translate into whatever styling convention it finds. If it drifts into Tailwind anyway, tell it to restate the styles using the repo's approach.
The sticky method label scrolls away instead of holding — common cause?
An ancestor with overflow: hidden, or a sticky element whose parent has no height, defeats position: sticky. Ask Cursor to audit ancestor overflow rules on that section. On mobile it is meant to degrade to a static heading, so only debug at desktop width.
Part of the Cursor landing-page cluster — start from the main Cursor landing page prompt.