Cursor
Cursor prompt for a feature grid section
A feature grid prompt built for Cursor inside an existing repo: it reads the neighboring sections first, matches their container and heading conventions, and lands as new files plus one insertion edit you can audit in git diff. Uniform cells, no bento spans, outcome-first copy under 12 words. The customizer supplies style, palette, type, and motion.
Last updated
Prompt
In this repo, add a feature grid section to the {{product}} landing page. Work like a contributor, not a generator: open the page file and the two sections adjacent to the insertion point, note the container component, spacing scale, and heading levels, then build to those conventions. New files: the section component beside its siblings, plus the six feature entries in the repo's content or data location if one exists — otherwise as a const above the JSX.
The layout is a uniform grid, which is not a bento: every card occupies exactly one cell, all cells equal height, three across on desktop. Bentos mix spans to spotlight a favorite feature; this section refuses favorites, which is why it suits capability lists read by {{audience}} while comparing options. Do not let any card grow a screenshot or a double span.
Per card: an icon from the icon dependency already in package.json (install nothing), a title of 2-3 words, and a one-line benefit. Write all six benefits from {{product}}'s real functionality with outcome-first phrasing — lead with what the user can now do, keep each under 12 words, and vary the opening verbs so the grid doesn't chant.
The heading block above the grid follows the page's existing hierarchy — if sections open with h2, use h2. Below the grid, render the page's standard link component carrying "{{cta}}" as its label.
Hover: reuse the card hover treatment if one already exists anywhere in the codebase; otherwise a single subtle elevation on the card root, nothing per-child.
Visual direction:
{{style}}
Palette: {{palette}}
Typography: {{type}}
Motion: {{motion}}
Spacing and responsive:
- Take section vertical padding verbatim from the neighboring sections' classes; grid gap one step below the page's section gap.
- Collapse 3 to 2 to 1 columns at the breakpoints the codebase already defines — no custom breakpoint values.
Before finishing, verify: git diff contains only the new files and the insertion edit, both neighboring sections render identically to before, no package was installed, cards hold equal height with the real copy in place, and heading levels continue the page's hierarchy without skips.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Your customized prompt
In this repo, add a feature grid section to the a project management SaaS landing page. Work like a contributor, not a generator: open the page file and the two sections adjacent to the insertion point, note the container component, spacing scale, and heading levels, then build to those conventions. New files: the section component beside its siblings, plus the six feature entries in the repo's content or data location if one exists — otherwise as a const above the JSX. The layout is a uniform grid, which is not a bento: every card occupies exactly one cell, all cells equal height, three across on desktop. Bentos mix spans to spotlight a favorite feature; this section refuses favorites, which is why it suits capability lists read by engineering managers at startups while comparing options. Do not let any card grow a screenshot or a double span. Per card: an icon from the icon dependency already in package.json (install nothing), a title of 2-3 words, and a one-line benefit. Write all six benefits from a project management SaaS's real functionality with outcome-first phrasing — lead with what the user can now do, keep each under 12 words, and vary the opening verbs so the grid doesn't chant. The heading block above the grid follows the page's existing hierarchy — if sections open with h2, use h2. Below the grid, render the page's standard link component carrying "start a free trial" as its label. Hover: reuse the card hover treatment if one already exists anywhere in the codebase; otherwise a single subtle elevation on the card root, nothing per-child. 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. Spacing and responsive: - Take section vertical padding verbatim from the neighboring sections' classes; grid gap one step below the page's section gap. - Collapse 3 to 2 to 1 columns at the breakpoints the codebase already defines — no custom breakpoint values. Before finishing, verify: git diff contains only the new files and the insertion edit, both neighboring sections render identically to before, no package was installed, cards hold equal height with the real copy in place, and heading levels continue the page's hierarchy without skips.
Same task in other tools
Questions about this prompt
What stops Cursor from reformatting my whole page file?
The prompt scopes the diff — new section files plus one insertion edit — and the final verification step tells the agent to confirm that in git diff. Cursor's review UI lets you accept hunks individually, so even if it drifts, unrelated edits never have to reach your branch.
My repo has no content-file convention — where does the copy go?
Then the six icon-title-benefit entries live as a const above the JSX in the section component. That keeps the useful part of the pattern — data separated from markup — without inventing a new directory your teammates would question in code review.
Should I use this or a bento layout for my features section?
Ask whether one feature deserves double the space. If yes, use a bento; if your features are peers — as they usually are for comparison-shopping visitors — this uniform grid scans faster and is safer to drop into an existing codebase, since every card shares one implementation.
Part of the Cursor landing-page cluster — start from the main Cursor landing page prompt.