Design guidance

1. 1

   Describe your project to Lovable, keeping your initial prompt high-level if you want to see a wide variety of visual ideas.

   This is the starting point for Lovable to understand what you want to build and how it should look.

2. 2

   Review the three design directions Lovable generates side-by-side, comparing their layouts, colors, and overall visual tone.

   This allows you to see different visual approaches and decide which one best fits your project's needs.

3. 3

   Refine your chosen design direction by typing in changes or selecting from suggestions, up to six times.

   This helps you fine-tune the look and feel of the design to match your specific preferences without losing the overall style.

4. 4

   Submit the refined design direction.

   This locks in your preferred visual style, and Lovable will then proceed to build your full project based on that direction.

Build me a beautiful landing page for a coffee subscription

design directions

These are three different visual examples or 'looks' for your project that Lovable creates, like mockups, so you can choose one before it builds the full thing.

design questions

These are specific questions Lovable asks you about things like fonts, colors, and how elements are arranged, to help you define the visual style of your project.

typography

This refers to the style and appearance of text, including the fonts used and how they are arranged.

color palette

This is the specific set of colors chosen to be used throughout your project to create a consistent look.

layout

This describes how different elements like text, images, and buttons are arranged on a page or screen.

HTML

This is the basic code that structures content on the web, like headings, paragraphs, and links.

Tailwind

This is a tool that helps style websites quickly by providing ready-made design pieces.

hero section

This is the prominent, often large, section at the top of a webpage, usually containing a main heading, image, and call to action.

navbar

This is the navigation bar, typically at the top of a website, that contains links to different pages.

pricing card

This is a visual block on a webpage that displays information about a product or service's price, features, and options.

footer

This is the section at the very bottom of a webpage, often containing copyright information, contact details, and additional links.

• You can only refine a design direction up to six times before you must submit it or generate new options.
• The design previews use placeholder text and images, so don't expect them to have your final content.
• The design questions offer curated choices for fonts, colors, and layouts; you can't upload your own custom assets directly through this flow.
• Lovable might skip design guidance if your prompt is very specific about design elements, or if the project type (like games or internal tools) doesn't typically require this step.