Screen Design with the New Capability of Claude 3.5 Sonnet - Artifacts

Screen Design with the New Capability of Claude 3.5 Sonnet - Artifacts

Claude 3.5 Sonnet

New Capability for Easy and Effortless UI/UX Design Without Experience

In today's digital world, the ability to create and manage high-quality graphic content has become more essential than ever. With the new capability of Claude, entrepreneurs and eCommerce site owners can now produce high-quality visual and coding outputs on their own.

🫧

Examples of Uses with Claude 3.5 Sonnet:
🫧 App Screen Design
🫧 Animated Newsletter Design
🫧 Buttons for Online Sites
🫧 Interactive Banners and Pop-ups

🫧

Step 1 - Settings

To access Claude, click on the link:
https://claude.ai
You can try it for free before deciding whether to upgrade to a paid plan.
In the bottom left corner, go to Settings and click on Feature Preview. Then, enable the Artifacts option. This will allow you to see the visual outputs you create in real-time.

Step 2 - Writing the Prompt

You can describe the visual output or upload your own sketch. In the product specification guide, I demonstrate how ChatGPT's AI can generate the framework for any screen.

In the example before you, I want to show how the screen I built in the guide can easily be designed with code using Claude's new capability.

For this example, I am using the file upload feature (marked in green).

I am uploading an image file of the screen framework that I want to design to Claude's prompt.

 

I am adding a textual prompt that explains the request. You can write your prompt in any language you prefer!

 

We can describe the screen, button, or any design for our website or app that we want to develop using a textual prompt—in any language.

We can upload a sketch we prepared and request to transform it into a design and code—the example I attached for you.

🫧

Step 3 - Receiving the Design Output

 

Within a few seconds, I received an amazing design for the requested screen on the right side.

 

The design we received comes with code that can be copied and added to the product specification document. Additionally, you can click "Publish" at the bottom to make the design appear in a live link that can be shared with relevant stakeholders. Here is the link to my design.

You can continue chatting with Claude, asking to change colors, styles, add or remove details, and see the design change in real time for you :)

Interested in learning how to outline an idea for a tech product? Check out my product specification guide.

Back to blog