Video summary

How to Actually Use Claude Design Like a Pro | Claude Design Tutorial

Main summary

Key takeaways

Technology

Summary of the Tutorial (Claude Design Like a Pro)

The video is a step-by-step tutorial showing how to use Claude Design to generate a fully working, responsive website (with SEO readiness), then export and deploy it to a hosting provider with a free domain. It also covers setting up business email so that contact form submissions are delivered to the creator’s inbox.

1) Getting Started with Claude Design (Account + Plan)

  • The creator visits 30.com/Claude and signs up using email authentication.
  • They create an account and choose a paid tier: Pro, specifically Max (to generate more websites).
  • They track usage like credits/tokens consumed per project.
  • They adjust the interface to a dark appearance via settings.

2) Creating a Reusable “Design System” for Consistent Branding

Before generating any website pages, the tutorial recommends building a design system so every page shares the same:

  • color palette / “vibe”
  • typography
  • motion states
  • iconography
  • visual fundamentals

How the design system is built

  • In Claude Design, go to Design Systems → Create and name it (e.g., “Web Divine Design System”).
  • They source style inspiration using getdesign.md (inspired by recognizable brands like Airbnb / Apple / BMW / Bugatti / Dell).
  • They copy an entire style/design system (or select a light/dark variant) and paste it into Claude.
  • They note generation time can be ~5 to ~15 minutes, depending on the run.
  • They validate the result by checking structured sections and preview examples.

3) Generating a Website Prototype Using the Design System

  • They create a prototype (initial website generation).
  • They select the design system as the default styling backbone.
  • They recommend using reference inspiration sites:
    • Awwwards (award-winning sites)
    • Dribbble (UI/agency inspiration)

Key workflow tool

  • They suggest using the GoFullPage Chrome extension to capture a full-page screenshot for use as an input to Claude.

4) Improving the Initial Site (Prompting + Clarifying Build Decisions)

The creator emphasizes clear requirements for Claude—and sometimes uses ChatGPT to craft a stronger prompt.

The prompt includes:

  • role: world-class creative director / UX strategist / senior front-end designer
  • location: Amsterdam
  • number of pages + a contact page
  • conversion goal: visitors contact the agency
  • form content requirements

Claude then asks implementation questions such as:

  • which pages to build first
  • navigation approach (in-page vs separate files)
  • imagery strategy (use provided images vs insert images)
  • motion level (restrained/premium)
  • portfolio authenticity
  • brand name capitalization

They report the website build can take around ~50 minutes.

5) Filling Placeholder Images with an External AI Generator (Higgs Field)

If the initial site contains no images (placeholders), they:

  • connect a connector to Higgs Field
  • request: “Use Higgs Field to create all placeholder images… high-quality images… no placeholder left.”

Claude updates the website with generated images, improving realism for preview and later export.

6) Iterative Layout/Style Refinement Using Uploaded References

They demonstrate iterative redesign:

  • Upload a screenshot/image that represents the desired redesign.
  • Instruct Claude to:
    • maintain existing content
    • adjust styling to match the reference
    • change specific colors (example: make a purple area warmer using red-orange-brown)

This can include making the site resemble an Awwwards-style example while preserving functionality—especially the contact form.

7) Ensuring Contact Form Functionality After Export (Hostinger + send.php)

To make form submissions actually work:

  • Export the site as an HTML project archive
  • Add required form-handling scripting:
    • insert script into the contact form
    • create a send.php handler
    • include all submitted fields (full name, company, work email, phone, budget, services)

Deployment steps

  • Deploy to Hostinger
  • rename the homepage file to index.html
  • upload to the public HTML folder
  • confirm the live site works

8) Setting Up Business Email (So Submissions Go to the Inbox)

The tutorial stresses that email delivery depends on correct mailbox credentials.

Steps shown:

  • claim a free business email for the domain (e.g., info@yourdomain.com)
  • confirm receiving a test email
  • update send.php with the mailbox SMTP password

Warning: explicitly “paste the password before uploading,” otherwise form sending fails.

After setup:

  • they test form submission
  • verify an inbox email like “project inquiry” with submitted fields

9) Export Size Optimization for Faster Performance

The exported project can be very large (example: 147 MB). They reduce size by:

  • resizing images to max 1280px on the longest side
  • compressing images to around ~300KB per image
  • renaming images to keyword-based filenames (SEO-ish)

Result: export size can drop dramatically (example: 8.4 MB vs 147 MB) with visuals still effectively the same.

10) Post-Processing Optimization (Faster Code + Fewer Assets)

They use Claude to optimize the exported source, such as:

  • “Optimize the source code. Make it shorter without losing functionality.”

They verify by checking fewer/lighter code blocks and a cleaner output. Common actions include:

  • consolidating/rebuilding CSS (e.g., shared styles.css)
  • rebuilding HTML pages (index/about/services/etc.)
  • removing obsolete support files
  • verifying all pages and forms

11) Adding Google Analytics to Measure Traffic and Leads

They set up:

  • a Google Analytics property (with country, timezone, currency)
  • request Claude to inject the Google Analytics tag into every page (in the head section)

Validation:

  • use “test” mode to confirm the tag is detected
  • after ~48 hours, check early user/traffic data

12) Improving the Email Submission UI (Better Incoming Email Layout)

They further improve the email appearance:

  • ask Claude to “make it look so much better”
  • redeploy with updated send.php and/or email template

They test by submitting a form and reviewing the mobile inbox email layout.

13) Claimed Advantages Over WordPress (Performance)

The creator claims that sites generated/exported this way:

  • avoid “unnecessary plugins”
  • remain fast due to fewer dependencies
  • have less “fluff” than typical WordPress setups

They conclude by suggesting follow-up topics (e.g., adding portfolio items) and claiming Claude-based sites can rank.

Main Speaker / Sources

  • Main speaker: Ferdi (referred to in the tutorial; “My name is Ferdi…”)
  • Key external services/tools referenced:
    • Claude Design / Claude AI (primary platform)
    • ChatGPT (prompt improvement)
    • getdesign.md (style reference material)
    • Higgs Field (AI image generation)
    • GoFullPage (Chrome extension) (full-page screenshots)
    • Hostinger (HTML hosting + mailbox)
    • Google Analytics (tracking)
    • Inspiration sites: Awwwards, Dribbble

Original video