Lovable
Lovable prompt for a bento grid section
A Lovable brief for a five-cell bento section that slots under an existing hero: a 2x2 anchor capability, a tall metric card, two one-sentence features, and a wired action card. Lovable's advantage is that the action card links to a real route immediately. The customizer swaps style, palette, typography, and motion around the fixed structure.
Last updated
Prompt
Add a bento grid section to my existing Lovable landing page for {{product}}, directly below the hero. Leave the hero and everything beneath the new section exactly as they are.
Header block above the grid: an overline word, then a headline of six to eight words stating what {{audience}} can stop doing once they have {{product}}. Center both, with 48px between header and grid.
Grid definition — 3 columns, five cells, 20px gaps, one message per cell:
- A: spans 2 columns and 2 rows. The core capability, shown rather than told: a framed interface-snippet placeholder plus a two-line explanation.
- B: 1 column, 2 rows, tall. A single metric with a simple sparkline or bar placeholder and a one-line caption tying the number to {{audience}}.
- C and D: 1x1 each. Two supporting features, each as icon, four-word title, one sentence. If a feature needs a second sentence, it is two features — split or cut.
- E: 1x1. A linked card labelled "{{cta}}" pointing at the live demo or signup route; Lovable should wire this to a real route now, not a dead href.
Cell treatment: 24px interior padding, the same corner radius on every card, captions bottom-anchored in A and B.
Vertical rhythm: 96px of section padding above and below; the section background may differ from the page background, but the container width must match the hero's.
Visual direction:
{{style}}
Palette: {{palette}}
Typography: {{type}}
Motion: {{motion}}
Mobile: one column in the order A, B, E, C, D — the action card moves up so it is never stranded at the bottom of a long stack.
After building, verify: (1) no card overflows or clips its content at desktop and phone widths, (2) the E card navigates to a real route in preview, (3) A reads as the obvious anchor — the first card the eye lands on, (4) container edges align exactly with the hero above. Publish once all four pass.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Your customized prompt
Add a bento grid section to my existing Lovable landing page for a project management SaaS, directly below the hero. Leave the hero and everything beneath the new section exactly as they are. Header block above the grid: an overline word, then a headline of six to eight words stating what engineering managers at startups can stop doing once they have a project management SaaS. Center both, with 48px between header and grid. Grid definition — 3 columns, five cells, 20px gaps, one message per cell: - A: spans 2 columns and 2 rows. The core capability, shown rather than told: a framed interface-snippet placeholder plus a two-line explanation. - B: 1 column, 2 rows, tall. A single metric with a simple sparkline or bar placeholder and a one-line caption tying the number to engineering managers at startups. - C and D: 1x1 each. Two supporting features, each as icon, four-word title, one sentence. If a feature needs a second sentence, it is two features — split or cut. - E: 1x1. A linked card labelled "start a free trial" pointing at the live demo or signup route; Lovable should wire this to a real route now, not a dead href. Cell treatment: 24px interior padding, the same corner radius on every card, captions bottom-anchored in A and B. Vertical rhythm: 96px of section padding above and below; the section background may differ from the page background, but the container width must match the hero's. 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. Mobile: one column in the order A, B, E, C, D — the action card moves up so it is never stranded at the bottom of a long stack. After building, verify: (1) no card overflows or clips its content at desktop and phone widths, (2) the E card navigates to a real route in preview, (3) A reads as the obvious anchor — the first card the eye lands on, (4) container edges align exactly with the hero above. Publish once all four pass.
Same task in other tools
Questions about this prompt
Why five cells instead of a packed classic bento?
On a 3-column grid, five cells with one 2x2 and one 1x2 tile perfectly with no filler. Packed bentos push tools toward inventing content to plug holes, which is how feature grids go generic. If you genuinely have more to say, repeat the C/D pattern in a second row rather than shrinking cells.
How do I change what the metric card shows?
Give Lovable the exact number, unit, and caption in a follow-up message — real numbers beat generated placeholders for trust. Keep the caption tied to the audience benefit rather than the metric itself; bare numbers without a so-what line read as decoration.
The section background Lovable chose clashes with my hero — what do I ask for?
Ask it to derive the section background from the palette block's surface tones rather than inventing one, or to fall back to the page background and let card borders do the separation work. The container-width rule keeps the transition clean either way.
Don't have Lovable yet? This link may be an affiliate link; it never changes what you pay.
Try LovablePart of the Lovable landing-page cluster — start from the main Lovable landing page prompt.