Branded Design with Claude Design · From Design System to Live Website [Session 25].

Most AI design tools generate one nice output, and when you ask for another, it comes out in a completely different style. Different colors, different font, different vibe. For a brand, this is a disaster, because a brand lives on consistency. In session 25 of AI Master Club, we went over Claude Design, the new design tool by Anthropic (the same company behind Claude Code). What makes it unique is precisely this point: you build a Design System once (logo, colors, typography, buttons, tone of voice), and everything you produce afterward · a presentation, a landing page, an Instagram carousel, an app mockup · comes out branded and uniform, as if the same designer sat on everything. In the session, we saw this in action: we cloned the design language of a huge brand with unsettling precision, built a landing page for a bakery from scratch, streamed dozens of images from a real website with Firecrawl, and finally took a mockup and turned it into a live website on the web. All in natural language, without writing a single line of code. This guide gathers everything we went over, step by step.

What you will have by the end of the guide

• What Claude Design is, where to log in, and how it differs from every other design tool
• How to build a Design System · the heart of the entire process · in 3 ways according to experience level
• How to generate a presentation, a landing page, and an Instagram carousel that all share the same design language
• The live demonstration: building a bakery landing page from scratch, including the precision questions that Claude asks
• Streaming real images from any website with Firecrawl, and embedding them automatically in the design
• How to turn a mockup into a live website on the web · Claude Code, Vercel, and Supabase
• The most important tip in the session: how not to burn through the token limit within half an hour

What Claude Design is and where to log in

Note three points before starting: Claude Design requires a paid Claude subscription (no free access), it currently works only in the browser, and it has a separate and limited token counter from regular Claude usage. This counter resets every 5 hours. You check it in the top circle, Settings, then Usage. This entire guide is built around this point: how to get the maximum out of the tool without wasting tokens.

Design System · The heart of the entire process

3 ways to build a Design System

• Via Claude Code (recommended, saves the most tokens): ask Claude Code to build the Design System from your website, images, logo, and fonts. At the end, run the slash command by typing /Design and choosing Design Sync, which pulls all files and transfers them automatically to Claude Design. A new system will appear there below the chat box, and you give it a name.
• Directly inside Claude Design: go to Projects, Design Systems, Create Design System, and then Create Here. Enter a website (if you have one), upload a Figma file (for designers), click Browse and drop in everything design-related that you have · logo, images, social media posts. In the Any other notes field, give a verbal instruction (for example, I like blue, I want everything in shades of blue). Give it a name and click Generate. Processing takes about 5 minutes.
• The budget version, with any language model: give ChatGPT a website or reference, ask it to formulate a Design System as a PDF file, and feed it into Claude Design. Less accurate than the previous two, but works when you do not have a codebase.

Prompt to build a Design System in Claude Code

I want you to build a full Design System for my brand. Sources: [Paste a link to your website here, or drag in a logo, fonts, screenshots, and social media posts]. Extract and define: color palette with exact codes, typography (fonts, sizes, weight, hierarchy), button shape and size, tone of voice and tone (including Hebrew usage), calls to action, and emoji policy. When finished, run /Design and choose Design Sync to transfer everything to Claude Design.

The first demonstration · Cloning the design language of a huge brand

Prompts for generating branded outputs

Presentation: Create a presentation about [the topic, for example the new 2026 collection], based on the Design System I attached and the attached images. Product landing page: Create a landing page explaining this product [attach product images], based on the Design System. Instagram carousel: Create an Instagram carousel for me about [the topic], based on the Design System. A series of slides in the same design language.

Content tip worth gold: carousels are one of the most viral formats today. Instagram and LinkedIn promote posts with more than one image much more than a single image. Now that you can generate a branded carousel in a minute, there is no reason not to upload one a week.

Manual editing · The secret to saving tokens

The second demonstration · A bakery landing page from scratch

Landing page prompt from scratch (with precision questions)

Create a landing page for [business type, for example a boutique bakery]. Before you start designing, ask me all the questions you need to refine: business name, desired atmosphere and style, text language, products or services, what the main action I want from the visitor is, and how many versions to generate. After I answer, build the page. If images are missing, mark where, and I will drop them in through Browse Files.

Streaming real images with Firecrawl

AI Master Club opens the door for you: a live session every week, recordings, and a community. ₪47 per month, cancel anytime.

Firecrawl prompts + image embedding

Downloading images (in Claude Code): Use Firecrawl to download all images from this website: [Paste website link]. Save them in a subfolder in the project. Embedding in design (in Claude Design, after Browse Files): Put the relevant images on the site, wherever an image is missing. Choose the most suitable image for each place.

Animation, Tweaks, and Effects

From mockup to live website · Claude Code, Vercel, and Supabase

Build and deploy prompt (for Claude Code / Codex)

I want you to build this website from the attached HTML / project files. Match the design exactly. First run it locally so I can review it. Once I approve, upload it to Vercel and give me the live link. If the site needs to store data (emails, reviews), connect Supabase as the database.

Why this matters for business: a landing page like the one we built at the bakery costs around 1,000 shekels with a simple designer, and around 3,000 shekels with a sophisticated designer. Here you built it yourselves in minutes, branded, and with the option to go live. This does not replace a professional designer for every project, but for most ongoing small business needs, it is more than enough.

All tools from the session

The home of Claude Design and Claude Code. Requires a paid subscription. The Design panel currently exists only in the browser

An agent that crawls any website and downloads images and text. Connects to Claude as a Skill and saves tokens. Has a free tier

Deploying the website to the web and a share link. Claude Code connects to it with a click. Generous free tier

Database for the website · saving emails, forms, and reviews. Connects to Claude Code. Generous free tier

Google's tool for designing mockups, which we compared to in the session. More generic results than Claude Design

The comprehensive guide to all Claude Design capabilities, beyond what was covered in this session

Questions raised in the session

No. You need a paid Claude subscription. Its tokens are also separate and limited from regular usage, and they reset every 5 hours. On the other hand, Vercel and Supabase, which are needed to upload a live website, offer a generous free tier.

It is similar to a Brand Book but more comprehensive. Beyond colors and fonts, it also includes components and code, which allows translating the brand directly into the digital world and application. This is the first thing built, and it is what ensures that every output comes out branded and uniform.

You can ask Claude Code to review the website and build a Design System from it, but the result will be weaker because you do not have the original code of the website. This works much better when the asset is yours, because then Claude accesses the code and components themselves and not just the external appearance.

Totally. Click Edit and all text becomes clickable for manual editing. You can also export to PDF, video, PowerPoint, or HTML. The recommendation is to edit manually inside Claude Design instead of asking the agent for every small change, because manual editing saves a ton of tokens.

Export the design as HTML or ZIP, take it to Claude Code or Codex, and it builds the code and uploads it to Vercel which provides a live link. If you need to store information from the site, connect Supabase as a database. You can also connect your own domain.

Yes, there is a connector and MCP for WordPress. However, the preference in the session was to build in Claude and deploy to Vercel, because working with WordPress is more cumbersome compared to the smooth workflow of Claude Code and Vercel.

From Firecrawl themselves. They provide a code snippet that you install once in Claude Code, and from then on the skill is available in every session. They also have a free tier that is sufficient for most needs.

Yes, Claude Design is a collaborative tool. If everyone on the team has an Anthropic account, everyone can work on the same project. You can set a default Design System for the organization, and also a separate Design System for each client.

What is in the next session

The full recording of session 25, along with all the skills and prompts we went over, are available to club members in the content library. Did you build something branded in minutes during the session? Share it in the community. This is exactly the knowledge that the club thrives on.

Frequently asked questions

Is Claude Design free?

No. You need a paid Claude subscription. Its tokens are also separate and limited from regular usage, and they reset every 5 hours. In contrast, Vercel and Supabase, which are needed to publish a live website, offer a generous free tier.

What is a Design System and is it like a Brand Book?

It is similar to a Brand Book but more comprehensive. Beyond colors and fonts, it also includes components and code, which allows translating the brand directly into the digital world and application. This is the first thing you build, and it ensures that every output is branded and consistent.

How do you extract a Design System from a website that is not mine, like a major brand?

You can ask Claude Code to review the website and build a Design System from it, but the result will be weaker because you do not have the original code of the website. This works much better when the asset is yours, because then Claude accesses the code and components themselves and not just the visual appearance.

Can the presentation and page be edited after they are created?

Totally. You click Edit and all the text becomes clickable for manual editing. You can also export to PDF, video, PowerPoint or HTML. The recommendation is to edit manually inside Claude Design instead of asking the agent for every small change, because manual editing saves a ton of tokens.

How do you turn the mockup into a live website with a domain and hosting?

You export the design as HTML or ZIP, take it to Claude Code or Codex, and it builds the code and uploads it to Vercel, which provides a live link. If you need to save data from the website, you connect Supabase as a database. You can also connect your own domain.

Can it be uploaded to an existing WordPress site?

Yes, there is a connector and MCP for WordPress. However, the preference in the session was to build in Claude and deploy to Vercel, because working with WordPress is more cumbersome compared to the smooth workflow of Claude Code and Vercel.

Where do you get the Firecrawl skill from?

From Firecrawl themselves. They provide a code snippet that you install once in Claude Code, and from then on the skill is available in every session. They also have a free tier that is sufficient for most needs.

Can you work on this as a team?

Yes, Claude Design is a collaborative tool. If everyone on the team has an Anthropic account, everyone can work on the same project. You can set a default Design System for the organization, and also a separate Design System for each client.