---

The core of the update: Claude Design now works against a fixed design system instead of guessing fresh with every prompt. And the fastest source for that system is a finished website template.

Why a design system is the foundation for everything

Without a system, every output looks different. Inter today, Space Grotesk tomorrow. Buttons rounded in one chat, sharp in the next. After three sessions you have five versions of your brand.

With a design system, that flips:

• Consistency without prompt marathons. Colors, fonts, and shapes are locked. You only describe the content.
• One system, every format. The same rulebook works for websites, slides, carousels, and animations.
• Faster iteration. No more guessing about colors and shapes. Those are settled, so you only discuss content and layout.

If you would rather write your rulebook by hand: Claude Design System covers the DESIGN.md approach with all 9 sections. The template route in this guide is the faster entry point when you do not have a brand system yet.

Step 1: Find a website template

You need a visual source Claude can read the system from. Website templates are ideal because a good template already is a well-considered design system, built by professionals: type hierarchy, color palette, spacing, and imagery are all consistent.

Where to look:

• Framer: framer.com/marketplace/templates, set the filter to "Free"
• Webflow: webflow.com/templates, plenty of free ones here too

What to look for:

• The template feels like your brand (vibe matters, industry does not)
• Clear type hierarchy: large headlines, readable body copy
• A palette with 2 to 3 core colors at most
• Imagery you can actually reproduce (photos? 3D? illustration?)

Copy the URL of the live preview. You will need it in a minute.

Step 2: Extract the design system in Claude Design

1. Open Claude Design (claude.ai/design or via the desktop app)
2. Start a new project
3. Paste the template URL into the chat. If Claude cannot load the page, take 3 to 4 screenshots (hero, content section, footer, mobile) and drop them in
4. Use the extraction prompt:

Analyze this website and extract a design system from it:

1. Typography: fonts, size hierarchy, weights, line heights
2. Colors: every color with hex value and role (background, text, accent, CTA)
3. Shapes: border radius, spacing logic, shadows
4. Imagery: photo style, illustration, 3D, treatment (duotone? grain?)
5. Tone of voice: how does this site speak? (sober, playful, technical, loud)

Save this as the design system for this project and apply it to
everything we build here from now on.

5. Review the result. Claude shows you the extracted system: are the hex values right? Are the fonts identified correctly?

Step 3: Sharpen it into your brand

The extracted system is the template at first. To make it yours, swap three things:

• Colors: Replace the template's accent color with your brand color, with an explicit rule ("cyan only for primary CTAs, always with black text")
• Fonts: Keep the hierarchy logic, swap the fonts for your own or license-free alternatives
• Tone of voice: Describe in 2 to 3 sentences how your brand speaks. Claude uses that later for headlines and microcopy

Adapt the design system to my brand:

- Primary color: [HEX] replaces [template color]. Rule: [what it is used for]
- Logo color: [HEX], may ONLY appear in the logo
- Display font: [NAME], body font: [NAME]
- Tone of voice: [3 adjectives + 1 example sentence in your voice]

Keep the template's hierarchy, spacing, and shape logic.

Step 4: One system, four formats

This is where the setup pays off. The same design system, four applications:

Website with Claude Code

Put the DESIGN.md in your project root and reference it from your CLAUDE.md. From then on, Claude Code builds every component on brand. The techniques for the high-end polish are in High-End Websites with AI.

Build the landing page for [PROJECT] following the design system in DESIGN.md.
Sections: hero, features, pricing, FAQ, footer.
No colors or fonts outside the system.

PowerPoint in the same look

Claude creates PPTX files right in the chat. With the design system in context, the slides come out on brand instead of Office default. The full workflow is in PowerPoint with Claude.

Create a PowerPoint (10 slides) on [TOPIC] following my design system:
title slide, agenda, 6 content slides, summary, CTA.
Colors, fonts, and spacing strictly from the design system.

Carousels for Instagram and TikTok

Create a carousel (5 slides, 1080x1350) on [TOPIC] following my design system.
Slide 1: hook in the display font, 8 words max.
Slides 2 to 4: one point each, large type, plenty of whitespace.
Slide 5: CTA.
Export as individual PNGs.

Motion graphics

Claude Design animates too: logo reveals, animated stats, short loops for social. The system applies here as well, same colors, same type, same shapes.

Create a short loop animation (5 seconds) following my design system:
[DESCRIPTION, e.g. "number counter from 0 to 88, accent color as highlight"].
Only colors and fonts from the system.

Common mistakes

• Rebuilding the template 1:1. That leaves you with a copy of someone else's work instead of a system of your own. Extract principles, replace brand elements.
• Mixing three templates. One template as the base is enough. Mixing destroys exactly the consistency the system exists for.
• Extracting only colors and fonts. Tone of voice and imagery make the difference between "looks similar" and "is the brand".
• Not saving the system. Without a saved design system (or a DESIGN.md), the next chat starts from zero again.
• Taking fonts without a license. Commercial template fonts need a license. Google Fonts and Fontshare are the safe alternative.

Next steps

1. Pick a template. Framer or Webflow, 15-minute limit, not 2 hours
2. Extract the system with the prompt from step 2
3. Sharpen it into your brand: colors, fonts, tone of voice
4. Test with a carousel. Smallest format, fastest feedback
5. Save it as DESIGN.md and commit it to git. From then on: website, slides, and animations from the same system