Start building

Your brand in Claude Code

One command, and Claude Code builds with your real design system.

Connect Claude Code

What you get

  • Claude Code reads your tokens, components, templates, icons and voice, and uses them as they are instead of guessing from a screenshot.
  • It finds what it needs by keyword with search_brand, so “the primary button” means your button.
  • It grades its own code with check_against_brand before calling it done: worst issue first, with the token to use instead.

Connect Archetype to Claude Code

  1. 1. In a terminal, run:

    claude mcp add archetype \
  --scope user \
  --transport http https://www.heyarchetype.com/api/mcp

  2. 2. Sign in once. In Claude Code, type /mcp, select archetype, then choose Authenticate. The browser asks which brand to share, and whether Claude Code may edit it.

Try it

  • “Build a pricing page for this app with our brand’s components and tokens.”
  • “Replace the hard-coded colors in this folder with our brand’s tokens.”
  • “Check the files changed on this branch against our brand and fix the worst issues.”
  • “Our tokens file has a new warning color. Add it to the brand.”

Questions

Does it cost extra in Claude Code?

Not on Archetype’s side. Connected agents take no seat: seats are for people, so connect as many tools as your team uses. Archetype itself starts with a 14-day trial, no card needed.

Can Claude Code change my brand?

Only if you allowed edits when you connected it, and then one item at a time, when you ask. Every change is logged and can be undone, and you can revoke the connection at any time.

I have several brands. Can I connect them all?

Yes, one connection per brand, each under its own name, like archetype-acme and archetype-nova. Each signs in on its own, and you pick its brand on the consent screen.

Is it on in every project, or just this one?

Every project. The command adds the server with --scope user, so it’s there whichever repo you open Claude Code in.