How to Make a Website with Claude Design (Step-by-Step for Beginners)
In this video, I walk you through the entire process from a blank prompt to a fully animated, live website using Claude Design, Netlify, and a custom .online domain.
🚀 Get your .online domain for $0.99: https://get.online/blogwithben1
🚀 Get started with Claude: https://claude.ai/login
🚀 Get started with Netlify: https://www.netlify.com/
DISCLAIMER: This video is sponsored by .online Domains, but as always, I only partner with tools that I would actually use in my own business.
— — — — — — — — — —
PROMPT USED IN THE VIDEO
Build a one-page website for a coffee shop. Bold editorial coffee brand. Black, cream (#F5F0E8), and tomato red (#E84A2F) palette with cobalt blue (#1A3EE8) for CTAs only. Heavy black-weight condensed sans-serif headlines at oversized scale. Think Anton or Black Han Sans. All-caps display text that breaks the grid intentionally. Full-bleed photo sections with text overlaid. High contrast between sections: black strips, cream backgrounds, and red accent blocks alternating down the page. Scrolling marquee elements. Flat design, zero gradients or shadows. Feels like a street culture magazine crossed with a premium product brand. Use Unsplash's embed API for images.
Smooth scroll-triggered animations throughout: sections fade and slide up into view as you scroll down the page. Marquee text loops horizontally in a continuous ticker. Hero headline words stagger in one at a time on load. The product section has parallax -- background elements move slower than foreground content. Keep animations subtle and purposeful, not flashy. CSS transitions and keyframes only, no animation libraries.
— — — — — — — — — —
WHAT YOU'LL LEARN
✅ What Claude Design is and how to access it
✅ How to create a new project and choose the right settings
✅ How to write a detailed prompt that gets great results on the first try
✅ How Claude Design plans and builds your site in real time
✅ How to refine your design using Tweaks, Comment, Draw, and Edit mode
✅ How to export your site as a standalone HTML file with everything bundled in
✅ How to deploy to Netlify and get a live URL in seconds
✅ How to buy a .online domain for 99 cents and connect it to your Netlify site
— — — — — — — — — —
TOPICS + TIMESTAMPS
0:00 Introduction to Claude and .online Domains
2:37 Claude Design Overview
3:23 How to Build a Website with Claude Design
7:24 Making Edits in Claude Design
10:41 How to Deploy Your Website With a Custom Domain
24:56 My Final Thoughts
— — — — — — — — — —
🤝 CONNECT WITH BLOG WITH BEN
Instagram: / blogwithben
Facebook: / blogwithben
X: / blogwithben
Website: https://www.blogwithben.com
— — — — — — — — — —
🔔 Don't forget to subscribe to my channel for more tutorials, tips, and tricks! Also, hit the like button if you found this tutorial helpful, and leave a comment if you have any questions or suggestions.
🙏 Thanks for watching!
#claudedesign #websitedesign #ai #tutorial
All music used in this video was created by Ben Cummings using Suno. I have Commercial Use rights.