The Rundown

In this guide, you will learn to use Claude Design to get a full brand design system, including typography, colors, web components, a full website, and PowerPoint templates. And it will only take you 10 minutes.

Who This Is Useful For

• Founders and consultants who have a real brand already, but it needs a sharper visual system fast
• Marketers and operators who want a better starting point before they hand work to a designer or developer
• Anyone building decks, landing pages, or product mockups who wants one system they can reuse across everything

What You Will Build

You will build a reusable brand system, not just a prettier homepage.

In our run, Claude gave us:

• typography direction and design tokens
• a cleaner color system with primary, accent, neutral, surface, and status colors
• reusable web components like buttons, cards, inputs, and badges
• a refreshed website direction
• slide templates and product UI concepts built from the same system

That is what makes this useful. You are not just getting inspiration. You are getting assets you can keep building on.

What You Need

• A Claude paid plan with access to Claude Design
• A website you can screenshot
• Another AI tool for the brand refresh step. We used ChatGPT, but use whatever you prefer
• Optional logo files, wordmarks, and brand fonts if you already have them

Step 1 Create the Refreshed Brand Description

Screenshot your current site and drop it into your favorite AI. Then paste this prompt:

Analyze this website and create a refreshed brand description.
Keep what works, but sharpen the positioning, visual direction, typography, and color palette.
Give me a concise brand summary I can use in Claude Design.

In our test, Claude did not want to redesign an existing brand directly, so we used ChatGPT for this part. The important thing is getting a clean refresh brief you can reuse.

If the response comes back too long, tell it to tighten the brand description before you move on.

Pro tip: Ask for a refresh, not a reinvention. You want the brand to feel better, not unrecognizable.

Step 2 Generate a Logo and a Wordmark

Take that refreshed brand description and ask your AI to generate a logo and a wordmark logo.

We like ChatGPT for its new image model, but you can use whatever you prefer.

After that, ask for the full brand refresh in one clean block of text so you can copy and paste it into Claude Design without cleaning it up by hand.

Download the logo and wordmark files too. Even rough first-pass assets help Claude Design do a better job.

Step 3 Build the Design System in Claude Design

Go to claude.ai/design and click the Design systems tab.

Then create a new design system and follow this setup:

1. Paste the name of your site in the first box.
2. In the last box, paste the refreshed brand description from step one.
3. Upload the logo, wordmark, and any other photos or assets you want Claude to use.

Claude Design will also offer GitHub and Figma inputs. Those are useful if you have them, but you do not need them to get a strong first pass.

Start the generation when everything is in place.

Claude says this takes about five minutes. In our test, it often took longer. Budget closer to 10 or 15 if the tool is busy.

Step 4 Review the System and Export the Good Parts

Once the system finishes, do not stop at the first pretty screen. Open the foundations and see what Claude actually made.

In our run, Claude generated:

• Teal as the primary color family
• Lime as the accent family
• Graphite neutrals, surfaces, and status colors
• spacing rules, corner radii, and elevation
• component groups for buttons, status pills, inputs, cards, list rows, and charts

The neutral system was especially good. Claude gave us Rundown Black #111112, Academic Black #0F0F12, Graphite #232326, Graphite Raise #2D2D31, Soft White #F7F5F0, Chalk White #F5F2EA, Muted Stone #A8A29E, and Stone Deep #7A7670.

In the same run, we got a refreshed learning dashboard that used the same palette and visual language.

And once the system is working, Claude can stretch it across other outputs like slide templates and app UI.

Going Further

Once Claude finishes, check out the marketing page, web app page, and slide decks it created.

From there:

• click Share and export the design files to Claude Code
• turn the marketing page into a real web project
• use the slide templates as the starting point for future decks
• turn the system into a PDF brand kit for clients or teammates

This is the bigger play. Use Claude Design to get the system fast, then move the good parts into a real project and keep building.