Content & Media

A site with real routes still feels like a wireframe until you drop in real content. Lorem ipsum, unsplash-generic hero photos, and mismatched icons flatten every design decision you made in Lesson 3. This lesson is about the last mile — the images, icons, and asset choices that make the site feel like yours, and how to keep them fast on every device.

Part 1 · Why content is the design

The agent draws the page around the words and pictures you give it. Placeholder copy hides the real problem: a hero headline that is too long, a bio that is too short, a portrait that doesn't match the palette. Real content forces real design decisions.

Part 2 · Images: upload, generate, or link

You have three ways to bring an image into a Lovable project. They aren't interchangeable — pick the one that matches what the image is for.

Upload — for things you own

• Your portrait, event photos, product shots, screenshots of your own work.
• Client logos and brand assets you have permission to use.
• Drag files into the chat and reference them by name in the same prompt.

Generate — for atmosphere and illustration

• Hero backgrounds, textures, abstract accents, illustrated section dividers.
• Describe the mood and the palette, not just the subject: "moody navy backdrop, soft coral rim light, editorial photo".
• Regenerate a few times and keep the one that fits — cheap iteration is the point.

Link — for content that lives elsewhere

• News thumbnails, third-party article previews, embeddable video posters.
• Prefer a stable source (official press pages) over social media URLs that expire.
• If the image is central to your identity, download it and re-upload — don't hotlink your own hero.

"Generate a hero image for the home page: a moody navy studio portrait feel, no faces, soft coral rim light, editorial 3:2. Use it as the background of the hero section behind the existing headline."

Part 3 · Icons & small assets

Icons are the smallest visual element on the page and the fastest way to make a site look amateur. The rule is boring but non-negotiable: pick one family and stick to it.

What to ask for

• Use Lucide icons everywhere on the site. Same stroke width. No emoji.
• Replace the section icons with Lucide equivalents that match: research → flask, teaching → book-open, contact → mail.
• Set the favicon to the AN monogram I uploaded, and generate the standard sizes.

Part 4 · Responsive by default

More than half your visitors will land on a phone. "Responsive" isn't a stretch goal — it's the baseline. The good news: the agent already writes responsive Tailwind by default. Your job is to check it and describe fixes precisely when it breaks.

How to prompt responsively

• Name the breakpoints: "one column on mobile, two on tablet, three on desktop".
• Call out the hero specifically: mobile heroes usually need shorter headlines and a smaller image, not just a shrunk desktop.
• Ask the agent to verify: "check the layout at 375, 768, and 1280 and fix anything that overflows or wraps ugly".

Part 5 · Performance basics

When a site "feels slow", it's almost always images. A single 4MB PNG hero can double your load time on a phone. You don't need to become a performance engineer — you just need to ask for the right defaults.

Prompts that keep the site fast

• Convert all hero and card images to WebP and generate 1x/2x variants.
• Lazy-load every image below the fold; preload the LCP image on the home page.
• Cap the hero image at 1600px wide — I don't need 4K on a landing page.
• Add descriptive alt text to every image using the surrounding context.

Content & media cheat sheet

Five moves that separate a demo from a real site.

• Real content first — draft the copy, then design around it. No lorem ipsum.
• Right source per image — upload what you own, generate what you don't, link only what belongs elsewhere.
• One icon family — Lucide (or one alternative), consistent stroke and weight, no emoji fallbacks.
• Check three widths — 375, 768, 1280. Every route, every time.
• WebP + lazy + alt — the three defaults that make images stop hurting your site.