Open menu

Section Prompt Builder

Choose a section type from more than 40, such as a hero, pricing table, cart drawer or dashboard, and the builder writes a focused prompt covering its layout variant, content slots, states, interactions and built-in accessibility rules. Pick React, Shopify Liquid, plain HTML or another stack, then copy the prompt for Claude, ChatGPT, v0 or Cursor.

Presets (30)
Jump to your prompt
Section

Choose the section to build. The fields below adapt to it.

For example: a SaaS marketing site, a Shopify fashion store.

Layout & content
Hero copy
Interactions & states
Stack, design & output

Your prompt

<role>
You are a senior React + Tailwind developer who builds minimal interfaces.
</role>
<layout>
- Layout variant: centered.
- Content slots: eyebrow, headline, subheadline, primary CTA, secondary CTA.
- Breakpoints 640/768/1024/1280 px, mobile-first.
- Copy: realistic, specific copy — no lorem ipsum.
</layout>
<interactions>
- States to design: loading media.
- Interactions: cta hover, video pause control.
- The hero image is the LCP element: load it eagerly with fetchpriority="high" and explicit width/height.
- Use the headline as the page's only <h1>.
- Pause or remove motion under prefers-reduced-motion.
- Animation: subtle; respect prefers-reduced-motion.
</interactions>
<design>
Minimal; comfortable spacing; primary #4F46E5, surface #FFFFFF, muted #F1F5F9, text #0F172A; radius 12px; font "Inter".
</design>
<accessibility>
WCAG 2.2 AA: semantic HTML, visible focus, labelled controls, 4.5:1 text contrast and full keyboard operation.
</accessibility>
<output_format>
1. A single component file with typed props (defaults included).
2. A short usage example.
No dependencies beyond React + Tailwind.
</output_format>
<acceptance_criteria>
- Renders correctly at 360, 768 and 1280 px with no horizontal scroll.
- Zero critical axe issues; every interactive part works with a keyboard.
- No layout shift when states change.
</acceptance_criteria>
<constraints>
Use only the colors, font and radius above so the section matches the rest of the site.
</constraints>
<task>
Build a responsive **Hero section** component.
</task>

1,542 characters · 215 words · ~386 tokens

Your saved presets (0)

How to use the section prompt builder

  1. Pick a section type, for example Pricing, Cart drawer or Hero. The rest of the form adapts to it.
  2. Choose a layout variant and the content slots the section needs, such as headline, CTAs and social proof for a hero.
  3. Fill in the specific details that appear for some sections: pricing tiers, hero copy, form fields or the free-shipping threshold for a cart.
  4. Review states and interactions. States are the moments the design must cover, such as empty, loading, error and success. Built-in best practices are pre-selected.
  5. Set the stack, style, palette, font and output format, then choose the target AI and detail level.
  6. Copy, download or share the prompt. Save combinations you reuse as presets.

How it works: what a section prompt needs

A section is small, but the details that make it production-ready are easy to leave out. Every prompt this builder generates covers:

  • Role and task: a stack-specific role (“a senior React + Tailwind developer”) and a one-line task naming the section and where it will be used.
  • Layout and content: the variant, the content slots, the number of items where relevant, breakpoint behaviour and where the copy comes from.
  • Section-specific details: tiers with prices, period and a highlighted plan for pricing; headline and CTA text for a hero; field lists and spam protection for forms; a free-shipping bar and upsell for a cart.
  • Interactions and states: the states to design, the interactions to support and the accessibility rules for that pattern, following the W3C’s ARIA Authoring Practices where they apply.
  • Design and output format: style, palette roles, radius and font, plus exactly what to return — a typed component, HTML and CSS, Tailwind JSX or a Shopify section with schema — and an optional usage example.
  • Acceptance criteria at detail level 3 and above: no horizontal scroll at 360px, zero critical axe issues and no layout shift when states change.

Worked examples

Example 1: a SaaS pricing table for ChatGPT

Apply SaaS pricing, 3 tiers and choose ChatGPT at detail 3. The prompt asks for a responsive pricing component with Starter ($12/mo), Pro ($29/mo, “Most popular” badge and highlighted border) and Business ($79/mo), six feature rows with screen-reader text for each tick, and a monthly/yearly toggle showing “Save 20%”. It requires the toggle to be a keyboard-operable radio group that announces price changes with aria-live, and ends with a scope block.

Example 2: a Shopify cart drawer for Claude

Apply Shopify fashion cart drawer with the Claude target. The prompt wraps each part in XML tags and asks for a .liquid section with line items, quantity steppers, an upsell for a matching scarf and a free-shipping progress bar towards $100. Its built-in rules require a focus trap that closes on Esc and returns focus to the cart button, and the output format adds a schema block with settings, blocks, presets and translation keys.

Example 3: a hero section for v0

Apply SaaS hero with product mockup and switch the target to v0. The prompt lists the eyebrow, the headline “Answer every customer in minutes”, two CTAs, social proof and a product screenshot. It includes the rule that the hero image is the Largest Contentful Paint element and must load eagerly with fetchpriority=“high”, which protects page speed scores. Because v0 builds visual components, the prompt ends with an invitation to ask questions before building.

Tips and common mistakes

  • Name the context. “For a Shopify fashion store” changes the copy, the imagery and the conventions the AI follows.
  • Always cover states. Empty carts, failed submissions and loading tables are where generated components most often break.
  • Keep the built-in rules. They encode accessibility requirements that are expensive to add later.
  • Match the output format to your stack. Ask for a Liquid section for Shopify and typed props for React, so the code drops into your project without rework.
  • Reuse your palette. Use the same palette and radius as your Website Prompt Builder output so every section matches.

Limitations

The builder produces prompts only; it doesn’t generate or test code. AI tools sometimes ignore parts of a prompt, so check each acceptance criterion yourself, especially keyboard operation and screen-reader announcements. Built-in rules cover common patterns but are not a substitute for an accessibility audit of the finished site.

Frequently asked questions

Why build one section at a time instead of a whole page?

Smaller, focused prompts give AI tools less to guess, so results are more accurate and easier to review. Lovable's own documentation recommends prompting by component rather than by page.

What are the built-in best practices?

Each section type comes with accessibility and performance rules that are easy to forget, such as a focus trap in a cart drawer, a pause button on an auto-playing carousel or eager loading for the hero image. They are ticked by default and you can untick any of them.

Can it generate Shopify sections?

Yes. Choose Shopify Liquid as the stack and the output asks for a .liquid section file with a schema block containing settings, blocks, presets and translation keys.

Which section types are included?

More than 40, including navbar, announcement bar, hero, features, how it works, pricing, comparison table, testimonials, logo cloud, FAQ, contact form, booking widget, footer, blog layouts, product card and page, collection page, cart drawer, checkout summary, dashboard, settings, auth screens, modals, toasts, cookie banners and more.

Why does the ChatGPT version include a scope block?

OpenAI's GPT-5 guidance recommends telling the model to implement exactly what is requested and not to invent colors, shadows or extra UI. Without it, models often add sections or effects you didn't ask for.

Do the options change when I switch section type?

Yes. Layout variants, content slots, states, interactions and built-in rules are specific to each section type, and extra fields appear where they help, such as tiers for pricing or fields for forms.

Sources