4.1 Your design system

Info
⏱ Duration: ~25 min · 🎯 Objective: understand what Claude Design is and set up the Elektra design system before generating a single prototype.

Claude Design is, in official terms, “a new Anthropic Labs product… polished visual work like designs, prototypes, slides, one-pagers”. It lives on the web, at claude.ai/design, and is in research preview for Pro, Max, Team, and Enterprise. But before you ask it for anything, one step decides the quality of everything else: teach it your brand.

Why the design system comes first

During onboarding, “Claude builds a design system for your team by reading your codebase and design files… every project after that uses your colors, typography, and components automatically”. Anthropic’s official recommendation is explicit:

Warning
Turning on Claude Design without a design system in place means your team gets “functional but generic” output. Set it up before rollout — not after.

Step 1 — Open Claude Design

Go to claude.ai/design with your paid-plan account. If you’re on Enterprise and don’t see it, it’s off by default: the admin enables it in Organization settings > Capabilities > Anthropic Labs.

Tip
On Enterprise, who can publish, set-default, or delete design systems is controlled by the Claude Design Admin permission (custom role). Ask your admin for it if you’ll manage the team’s system.

Step 2 — Feed your brand

Upload the Elektra assets from the zip so Claude learns your visual identity. They’re all in the design/ folder of the zip — upload these three:

  • design/paleta-elektra.docx — hex colors, typography, and visual tone.
  • design/logo-elektra.png — the Elektra logo as a bitmap.
  • design/logo-elektra.svg — the same logo in vector form (scalable, ideal for the design system).
Tip
Claude Design can also read a codebase or capture elements directly from a website. For this exercise, the brief and palette from the zip are enough.

Step 3 — Confirm the system is in place

Once the assets are processed, Claude builds your team’s design system. From then on, every project reuses your colors, typography, and components automatically — with no repetition from you.

✅ Checkpoint

  • You have access to claude.ai/design (or your admin enabled it under Anthropic Labs).
  • You loaded paleta-elektra.docx and the logo (.png + .svg); an active design system exists for your team.
Check your understanding — 2 questions
  1. Why set up the design system before generating prototypes? → Because without it the output is “functional but generic”; with it, every project reuses your brand (colors, typography, components) automatically.
  2. On Enterprise, where is Claude Design enabled? → It’s off by default; the admin enables it in Organization settings > Capabilities > Anthropic Labs.