Describing UI Layouts Clearly for Lovable AI

// Vague prompt that produces unpredictable results:
// "Create a dashboard page for my app"

// Structured prompt that produces exactly what you want:
// "Create a dashboard page with this layout:
//  1. A sticky header at the top (64px height, full width, white background, bottom border)
//  2. Below the header, a two-column layout:
//     - Left sidebar (250px wide, full height, light gray background)
//     - Main content area (fills remaining width, scrollable)
//  3. In the main content area, a 3-column grid of stat cards with 16px gaps
//  4. Below the grid, a full-width chart section
//  5. On mobile, hide the sidebar and stack everything in a single column"

// Prompt without file reference — AI might create a new file
// "Add a sidebar to my dashboard"

// Prompt with @ reference — AI modifies the exact file
// "In @src/pages/Dashboard.tsx, add a sidebar to the left
//  of the existing content. The sidebar should be:
//  - 250px wide with a light gray background
//  - Sticky (stays in place while main content scrolls)
//  - Contains navigation links: Home, Analytics, Settings, Profile
//  - Each link has an icon from lucide-react and text label
//  - Active link has a blue background
//  - Do not change the existing main content area"

// Trying to describe a complex hero section in words:
// "Create a hero section with a gradient background,
//  a headline, subtext, two buttons side by side,
//  and an image on the right side floating slightly
//  above the buttons with a shadow..."

// Better approach: import from Figma
// 1. Create a rough mockup in Figma (even basic shapes and text)
// 2. In Lovable, use the prompt: "Import this Figma design
//    and convert it to a responsive React component
//    using Tailwind CSS. Use shadcn/ui Button components
//    for the call-to-action buttons."
//
// Or reference a screenshot:
// "Build a hero section that looks like this reference image.
//  [paste or describe the image]
//  Use a gradient from blue-600 to purple-600, white text,
//  and two shadcn/ui Buttons (primary and outline variants)."

// One giant prompt — overwhelming and error-prone:
// "Create a complete e-commerce product page with a sticky
//  header that has a logo, search bar, cart icon, and user
//  menu. Below that a breadcrumb, then a two-column layout
//  with product images on the left (image carousel with
//  thumbnails), product details on the right (title, price,
//  description, size selector, add to cart button), then
//  a reviews section below with star ratings, and a related
//  products carousel at the bottom with 4 visible cards..."

// Sequential prompts — each builds on the last:
//
// Prompt 1 (structure):
// "Create a product page at @src/pages/ProductPage.tsx with
//  this structure: sticky header, breadcrumb row, two-column
//  layout (left 60% for images, right 40% for details),
//  full-width reviews section below, and a related products
//  section at the bottom. Use placeholder text for now."
//
// Prompt 2 (images section):
// "In @src/pages/ProductPage.tsx, replace the left column
//  placeholder with an image carousel. Show one large image
//  and a row of 4 thumbnail images below it. Clicking a
//  thumbnail updates the large image."
//
// Prompt 3 (product details):
// "In @src/pages/ProductPage.tsx, replace the right column
//  placeholder with: product title (h1), price ($49.99),
//  a size selector dropdown, quantity input, and an
//  Add to Cart button using shadcn/ui Button."
//
// Prompt 4 (responsive):
// "Make @src/pages/ProductPage.tsx responsive. On mobile,
//  stack the image and details in a single column. Hide
//  the thumbnail row on screens smaller than 640px."