Video summary

5 Ways to ACTUALLY Build Beautiful Websites Using Claude for FREE

Main summary

Key takeaways

Technology

Overview

The video explains 5 prompting techniques to make Claude (inside Base44) generate genuinely “designed” websites rather than generic AI templates.

The core argument: most “pretty but samey” results happen because prompts are too vague, causing Claude to fall back on safe defaults instead of following intentional design decisions.

The 5 prompting techniques (technology/product feature + method)

1) Select the correct Claude model in Base44 (setup prerequisite)

Before prompting, check the model selector, because the default model may not be Claude.

This build uses Claude for:

  • design reasoning
  • UI logic
  • final site quality

Choose Claude Sonnet or Claude Opus (depending on availability).

Key point: correct model selection is described as the most important setup step—before design prompts matter.

2) Control “mood” with dark mode (but don’t be vague)

Dark mode is positioned as a fast route to a more premium feel (with a “luxury lighting” analogy). It also references that people often prefer dark interfaces (including examples like smartphone usage and brands adopting dark UI patterns).

Common failure: prompting something like “make it dark” can lead to:

  • muddy/flat designs
  • hard-to-read results

Fix: explicitly specify:

  • the base color
  • the dominant accent color
  • where the accent appears

Recommended accent colors:

  • electric blue
  • emerald
  • teal
  • gold/amber
  • violet

Important constraint: keep one dominant accent—avoid random multi-accent sections.

Extra caveat: dark mode may be less appropriate for healthcare/education/government, where clarity and trust are prioritized.

3) Give a typography system (fonts + hierarchy), not just colors/layout

Typography is framed as a major determinant of perceived quality and credibility.

The video references an “evidence-style” example (attributed to Errol Morris with ~45,000 respondents) where the same message felt more believable depending on the font.

Problem: Claude’s default fonts can be common “AI builder” stacks (e.g., Inter/Roboto/Open Sans and variants).

Solution: prompt typography early, including:

  • specific fonts for headings vs body/UI
  • explicit hierarchy strength

Font examples mentioned:

  • Space Grotesque
  • Playfair Display
  • Crimson Pro
  • Clash Display
  • Satoshi
  • Cabinet
  • IBM Plex
  • Merriweather

Example pairings depending on site type:

  • Playfair Display + Inter (editorial/luxury)
  • Poppins + Work Sans (SaaS/corporate)
  • DM Serif Display + Inter (startup landings)
  • Merriweather + Roboto (content-heavy B2B)

Demonstrated effect: without typography direction the page can be “clean but generic,” while typography-first prompts improve personality and contrast (including in neo-brutalism/solar punk examples).

4) Use whitespace as a design directive (micro + macro spacing)

The video explains why AI pages look cheap: layouts often become too tightly packed.

Whitespace is treated as intentional, supporting:

  • rhythm
  • focus
  • perceived quality

It also addresses a common misconception: clients may see empty space as “wasted,” but design theory treats it as meaningful.

Prompt should instruct both:

  • micro whitespace
    • line height
    • letter spacing
    • paragraph gaps
    • spacing between small elements
  • macro whitespace
    • section gaps
    • card padding
    • breathing room between major blocks

If spacing isn’t specified, Claude may avoid overcrowding but won’t treat whitespace as a primary style.

Workflow tip: Base44’s edit feature can adjust padding/spacing after generation.

Constraint: extremely whitespace-heavy designs may hurt usability for dense dashboard/finance/SaaS pages—spacing should be balanced.

5) Design the hero section with conversion-specific structure

The hero section is described as the highest-impact area because users form an opinion extremely quickly (video cites ~17–50ms) and follow eye-tracking priorities (headline → visual → CTA).

Generic AI hero failure modes:

  • the headline describes the business, not the customer outcome
  • CTA copy is vague (“get started”)
  • the visual is abstract stock art

Hero prompt should include all five:

  1. value proposition headline (customer outcome)
  2. specific subheadline
  3. one primary CTA with specific copy
  4. product visual / interface screenshot slot
  5. trust signal (testimonial, logo bar, customer count, metric, etc.)

The hero-focus prompt should explicitly tell Claude:

hero is the main focus, not a background section.

Demonstrated effect: the first screen becomes clearer and more intentional even if the rest of the page stays similar.

Color technique (treated as part of the “five”)

Although the video frames these as part of the five, “color system” is treated as a key technique.

Issue with vague prompts:

  • inconsistent shades
  • accents appearing randomly across sections
  • readability problems

Solution: define a color allocation system using the 60/30/10 rule:

  • 60% dominant color (backgrounds/main surfaces)
  • 30% secondary color (cards, nav, dividers)
  • 10% accent color (CTAs, active states, key highlights)

Accessibility note: specify contrast targets (mentions 4.5:1 for normal text and 3:1 for large text).

Supports:

  • brand hex codes (if available)
  • reference descriptions (e.g., Bloomberg-like black, watch bezel, monitor glow)
  • uploaded image references in Base44 for consistency across components/pages

How the video shows results / guidance

A side-by-side comparison argues each technique makes a subtle but meaningful difference:

  • dark mode → premium mood
  • typography → personality
  • whitespace → calmer, more expensive pacing
  • hero → faster message clarity
  • color system → consistent brand feel

A final combined demo uses one prompt that includes all five directives, producing a site that looks “upgraded” compared to a basic version.

Beginner recommendation:

  • start with typography or whitespace
  • if only one, start with the hero section (because first impressions break fastest)

Main speakers / sources (as stated or implied)

  • Primary speaker: the video creator/host (mentions themselves repeatedly and promotes a “Base44 master class”)
  • Referenced products/tools:
    • Base44 (tool/environment)
    • Claude (Claude Sonnet / Claude Opus)
  • External references mentioned:
    • Anthropic design guidance (fonts to avoid)
    • Apple/Airbnb/Linear (used as examples of whitespace)
    • Eyetracking research (hero behavior)
    • Errol Morris (2012 experiment) (font credibility effect)
    • Interaction Design Foundation / design theory (whitespace as not wasted)

Original video