How to use Claude 3.5 Sonnet to create a website?

Published on

06/21/2024

Tag

You may have already heard about Claude 3.5's exceptional performance.

Today, I'd like to share how you can use Claude 3.5 Sonnet as your personal website designer, enabling you to create an entire website without any coding skills.

Table of Contents
Step 1: Login to Claud and turn on Artifact feature
Step 2: Type your prompt and create a website from text
Step 3: Adjust the design and download code
More ideas & use cases
🎁 Free resource

Step 1: Login to Claud and turn on Artifact feature

Go to claude.ai and login. Click your profile picture and click Feature Preview, then turn on Artifacts.

Step 2: Type your prompt and create a website from text

Start by describing your website's design requirements, like title, description, colors, background, font, Here is an example prompt:

Create a luxury-style product landing page titled "The Rundown Chocolate." Website background color: #331D2C, body font color: #EFE1D1, highlight color: #A78295. Use Google Font Libre Baskerville bold 700 for headings, and Inter for body.

Step 3: Adjust the design and download code

Review the website preview generated by Claude and adjust the design if necessary.

I asked Claude to modify the heading font and add a navigation bar with the following items: Home, Contact, About, and Shop.

Next, I asked Claude to apply the glassmorphism effect to the navbar, change the color of the body text, and add a glow effect to the buttons.

And Claude did everything correctly! See this glowing effect!

👉 Here is the website preview:

You can add additional pages, rearrange content, or ask Claude to write better UX copy that adheres to your brand's voice of tone.

Once you are satisfied with the website, click the download button located at the bottom right of the website preview. This will provide you with a completed HTML file!

More ideas & use cases

What else can Claude 3.5 do?

Make the website responsive!
Create a WebVR scene using a-frame
Turn course material into an interactive website
More!!!

Share your idea in the comment below 👇

🎁 Free resource

Awwwards Website design trends: https://www.awwwards.com/
Coolors color palette generator: https://freefrontend.com/
CSS Tricks: https://css-tricks.com/
CSS Animation Library: https://animate.style/