Your site works. The layout is solid. The content reads well. But something is missing — it looks like a homework assignment, not a real website. The difference between "functional" and "professional" almost always comes down to visual design: images, icons, colors, and spacing.
In this lesson, you will learn how to guide Claude toward beautiful results — working with images, choosing icon libraries, describing color palettes, and building a polished photo gallery. The good news? You do not need a design degree. You just need the right vocabulary.
Finding and Using Images
Every professional website uses imagery. Fortunately, there are excellent free sources where you can find high-quality, royalty-free photos for any project:
Curated, high quality
Artistic, editorial
Huge library, varied
Custom, on demand
The great thing about vibe coding? You can ask Claude to handle the entire image pipeline for you. Here is a prompt that does exactly that:
Think of it as a four-step pipeline that takes you from an empty folder to polished visuals on the page:
You can ask Claude to handle any or all of these steps. "Find me images" covers the first two. "Add those images to my homepage hero section" covers the third. "Compress all images to under 200KB" covers the last.
Icons, Not Emojis
This is one of the most important design rules you will learn in this entire course. When you need small visual symbols in your site — for navigation, feature lists, buttons, or callouts — never use emojis. Use an icon library instead.
Here is why. Look at the difference:
Our Features
Emojis render differently on every device. Sizes are inconsistent. They look playful when you need professional.
Our Features
Icons are consistent, scalable, and match your color scheme. One library, one style, every device.
Emojis look different on every operating system, they cannot be resized cleanly, and they clash with professional typography. Icon libraries solve all of these problems: consistent style, crisp at any size, and customizable colors.
Here are the main icon libraries to know about:
| Library | Style | Best For |
|---|---|---|
| Phosphor Icons | Clean, consistent, versatile | Great default choice for any project |
| Lucide | Lightweight, modern | Minimal designs, React projects |
| Font Awesome | Widest selection | When you need a niche icon |
| Heroicons | Tailwind-aligned | If you are using Tailwind CSS |
To use them, just tell Claude which library you want. It handles the rest — adding the CDN link and placing icons in the right spots:
In the generated HTML, you will see clean markup like this:
Simple, semantic, and professional. Pick one icon library per project and stick with it for visual consistency.
Describing Design Like a Pro
The quality of Claude's design output is directly proportional to how well you describe what you want. Vague requests get generic results. Specific vocabulary gets stunning ones. Here is a cheat sheet for the three pillars of visual design:
Color Palettes
Instead of: "Use nice colors"
- "Warm earth tones — terracotta, cream, olive"
- "Ocean palette — navy, seafoam, white"
- "Monochrome — all grays with a pop of electric blue"
- "Dark mode — charcoal background, amber accents"
Layout
Instead of: "Make a good layout"
- "Two-column layout, image left, text right"
- "Card grid, 3 across on desktop, 1 on mobile"
- "Full-width hero with centered text overlay"
- "Sidebar navigation on the left, content area on the right"
Typography
Instead of: "Use nice fonts"
- "Serif headings for elegance, sans-serif body for readability"
- "Large, bold headings with lots of whitespace"
- "Monospace font for code blocks, system font for body"
- "Tight letter-spacing on headings, relaxed line-height on body"
Mood & Style
Instead of: "Make it look cool"
- "Clean and minimal — lots of white space, thin borders"
- "Bold and modern — large type, bright accent colors"
- "Warm and inviting — rounded corners, soft shadows"
- "Dark and dramatic — black background, neon highlights"
Notice the pattern: name specific colors, describe spatial relationships, reference concrete font characteristics, and set an overall mood. The more sensory detail you give, the closer Claude gets to what you are picturing in your head.
Building a Photo Gallery
Let us put everything together by building a real project: a photo gallery with a lightbox viewer. Here is the prompt that does it:
This is what the result looks like. A clean grid of thumbnails, and clicking one opens it in a full-screen lightbox:
Notice how one prompt produced a complete, interactive feature — grid layout, click handlers, keyboard navigation, and animations. This is where vibe coding really shines. You describe the behavior you want, and Claude builds all the pieces.
Visual Density: The One-Image Rule
There is a simple rule that separates amateur web pages from professional ones: every 1–2 paragraphs should have a visual element. That means an image, a chart, a callout box, a pull quote, or an icon grid. Walls of text drive people away.
Mountain hiking in Nepal offers breathtaking views of the Himalayas. The trails range from moderate to extreme difficulty. Most trekkers begin in Lukla and work their way toward Everest Base Camp over several days.
The best season for trekking is autumn, from September through November. The skies are clear and the temperatures are manageable at lower altitudes. Spring is the second most popular season.
Accommodation along the route consists of simple teahouses that provide basic meals and sleeping quarters. Most trekkers carry a daypack while porters handle the heavier gear.
Altitude sickness is the primary health concern. Trekkers should ascend gradually, stay hydrated, and descend immediately if symptoms become severe. Most guided treks include built-in acclimatization days.
The cost of an Everest Base Camp trek varies widely depending on whether you go independently or with a guided group. Budget around $1,500 to $5,000 for the full trip including flights and permits.
Despite the challenges, the experience is unforgettable. Standing at Base Camp with Everest towering above is a moment that stays with you forever.
Mountain hiking in Nepal offers breathtaking views of the Himalayas. The trails range from moderate to extreme difficulty.
The best season for trekking is autumn, from September through November. The skies are clear and the temperatures are manageable.
Accommodation along the route consists of simple teahouses. Most trekkers carry a daypack while porters handle the heavier gear.
The cost varies from $1,500 to $5,000 depending on whether you go independently or with a guided group.
Same content. Completely different reading experience. The version on the right uses images, a pull quote, and a callout box to break the visual monotony. When you are building with Claude, ask for this explicitly: "Add images between sections" or "break up the text with pull quotes and callout boxes."
When text overlaps an image, always ask for contrast treatment. Tell Claude: "Add a semi-transparent dark overlay behind the text" or "add a text shadow for readability." White text on a bright photograph is one of the most common design mistakes — and one of the easiest to fix.
Ask Claude to build you a photo gallery with at least 6 images. Try describing a specific mood — "moody and atmospheric with dark tones" or "bright and playful with rounded corners and pastel colors" — and see how it changes the entire design. Experiment with different descriptions to see how much control your words give you over the visual output.
Quick Check
1. Why should you use icon libraries instead of emojis?
2. What is a good way to describe a color palette to Claude?
3. What should you always add when placing text over an image?
4. What is the visual density rule for web content?
Key Takeaways
- Free image sources like Pexels, Unsplash, and Pixabay give you professional photos at no cost. Ask Claude to search, download, and place them.
- Always use icon libraries (Phosphor, Lucide, Font Awesome) instead of emojis. Icons are consistent, scalable, and professional.
- Specific design vocabulary gets better results. Describe colors, layouts, typography, and mood using concrete terms, not vague adjectives.
- Every 1–2 paragraphs should have a visual break — an image, callout, pull quote, or chart. Walls of text are a failure state.
- When text sits on an image, always add contrast treatment: an overlay, shadow, or gradient. Readability is non-negotiable.
- Complex visual features like photo galleries with lightboxes are a single prompt away. Describe the behavior and let Claude build it.