Lovable
Lovable prompt for a pricing section
A section-scoped brief that has Lovable insert three pricing tiers into a page it already built, wired to a working signup action. Emphasis lives on one recommended plan and a single state-driven billing toggle, which is what keeps the section honest and tappable. The style, palette, typography, and motion lines come from the dropdowns above.
Last updated
Prompt
On the landing page you already have in Lovable for {{product}}, insert a pricing section directly after the feature grid — this brief covers only that section, aimed at {{audience}}, not a separate pricing page.
Structure it as:
- Header block: small caps label, then an h2 that states what a customer gets for the money (derive it from {{product}}'s core promise), then a one-line subhead addressed to {{audience}}.
- Billing toggle: a two-state control, "Monthly" and "Yearly (2 months free)". Store the state once at section level and drive all three prices from it so a single tap flips everything.
- Tier row: three cards — Starter, Growth, Scale. Growth is the recommended plan: give it a "Recommended" tag, a slightly stronger card treatment, and a touch more height; the other two stay quiet.
- Card contents in order: plan name, who it's for in under ten words, price plus unit, divider, feature bullets, button. Starter shows its full feature list; Growth and Scale show "All of Starter/Growth, plus" and 3–4 additions only. No comparison table inside this section — link out to one if it exists.
- Per-tier buttons: Starter and Scale get their own verbs; Growth's button reads "{{cta}}" and should be wired to the app's real signup flow so clicking it works in the deployed preview, not just visually.
Visual direction:
{{style}}
Palette: {{palette}}
Typography: {{type}}
Motion: {{motion}}
Rhythm and responsiveness:
- Keep roughly 96px of vertical padding around the section and 24px gaps between cards; inside cards use one consistent spacing step.
- On phones, cards stack with Growth on top and the toggle becomes full-width.
After you build it, check that: toggling billing changes all three prices; only Growth carries the recommended treatment; the "{{cta}}" button navigates to signup; the section's h2 doesn't compete with the page hero; nothing above or below the section shifted.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Your customized prompt
On the landing page you already have in Lovable for a project management SaaS, insert a pricing section directly after the feature grid — this brief covers only that section, aimed at engineering managers at startups, not a separate pricing page. Structure it as: - Header block: small caps label, then an h2 that states what a customer gets for the money (derive it from a project management SaaS's core promise), then a one-line subhead addressed to engineering managers at startups. - Billing toggle: a two-state control, "Monthly" and "Yearly (2 months free)". Store the state once at section level and drive all three prices from it so a single tap flips everything. - Tier row: three cards — Starter, Growth, Scale. Growth is the recommended plan: give it a "Recommended" tag, a slightly stronger card treatment, and a touch more height; the other two stay quiet. - Card contents in order: plan name, who it's for in under ten words, price plus unit, divider, feature bullets, button. Starter shows its full feature list; Growth and Scale show "All of Starter/Growth, plus" and 3–4 additions only. No comparison table inside this section — link out to one if it exists. - Per-tier buttons: Starter and Scale get their own verbs; Growth's button reads "start a free trial" and should be wired to the app's real signup flow so clicking it works in the deployed preview, not just visually. 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. Rhythm and responsiveness: - Keep roughly 96px of vertical padding around the section and 24px gaps between cards; inside cards use one consistent spacing step. - On phones, cards stack with Growth on top and the toggle becomes full-width. After you build it, check that: toggling billing changes all three prices; only Growth carries the recommended treatment; the "start a free trial" button navigates to signup; the section's h2 doesn't compete with the page hero; nothing above or below the section shifted.
Same task in other tools
Questions about this prompt
Will the recommended tier's button actually work in the deployed app?
The prompt asks Lovable to wire it to the real signup flow, so in preview and after deploy it should navigate rather than dead-click. If Lovable stubs it, follow up with "connect the Growth button to the signup route" — it can wire forms and auth in the same chat.
I already have a standalone pricing page — does this conflict with it?
No; the brief is deliberately section-scoped. It renders three tiers inline on the landing page and tells Lovable to link out to a comparison table instead of embedding one, so a dedicated /pricing page stays the deep-detail destination.
The toggle changed only one card's price — what went wrong?
Lovable sometimes duplicates state per card. Ask it to "lift the billing state to the section and pass it down to all three tiers" — the prompt specifies storing the state once, so quoting that line back usually fixes it in one turn.
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.