Design System Sync

Aug 31, 2026 · 3 steps

What you need

  • A Claude account with access to Claude Design - claude.ai/design
  • Claude Code installed and running in your project folder
  • Your brand in some form. A GitHub repo, a Figma file, a live site, or an old PDF brand book all work
  1. 1

    Step 1

    Upload your brand

    Go to claude.ai/design and upload whatever you have. Claude reads it and extracts the design system for you, so you do not need a perfectly documented style guide to start.

    What you can upload, ranked by how well it works

    1. A GitHub repo - the best source by far. Claude reads your actual component files and token definitions, so it learns not just what your button looks like but what it is called and how it is composed.
    2. A Figma file - strong for colors, type, spacing, and named components. Make sure your styles and variables are actually defined in Figma rather than hardcoded on each layer.
    3. A live site URL - good for colors and fonts, weaker on components.
    4. A PDF brand book or an old deck - works better than you would expect for palette, typography, and tone. Weakest on components, since there are none to read.

    Check the extracted system before you build anything. This is the step people skip and then blame the output for. Open what Claude pulled and confirm the primary and accent colors, the heading and body fonts, and the spacing scale. A wrong value here quietly follows you through every screen you generate afterwards.

  2. 2

    Step 2

    Run the sync command

    Open Claude Code in your project folder and run:

    Prompt
    /design-sync

    Pick your source, then let Claude index it. It pulls the tokens and components into the project so Claude Code and Claude Design are working from the same system instead of two different ideas of your brand.

    What sync actually indexes

    • Color tokens, including semantic names like surface or danger if your repo defines them
    • The type scale - families, weights, sizes, and line heights
    • Spacing and radius scales
    • Named components and their variants

    Once indexed, you can reference any of it by name in a prompt. That is the part that changes the output.

    Re-run it when your system changes. The sync is a snapshot, not a live connection. If you ship a new component or change your palette, run /design-sync again or Claude keeps building against the old version.

  3. 3

    Step 3

    Prompt with your own component names

    This is where most of the value sits, and it is the part the video does not have time for. Once the system is synced, stop describing components and start naming them.

    Generic prompt (what you did before)Synced prompt (what to do now)
    "A pricing page with three cards and a dark header""A pricing page using my PricingCard component, three across, inside my PageShell"
    "Make the button blue""Use the primary button variant"
    "Add some space between the sections""Use the section spacing token between blocks"
    "A settings screen that matches my app""A settings screen using my existing form components and my SidebarNav"

    Work one screen at a time. Do not prompt a whole product in one go. Generate one screen, confirm it used the right components, then move on. When something drifts off-brand you will know exactly which screen caused it, and you will not have burned tokens on nine other screens built the same wrong way.

The before and after

Run the same prompt before and after syncing and the difference is obvious. Here is what actually changes.

Before syncAfter sync
Invented colors that are close to yours but not yoursYour exact token values, every time
Whatever font the model likes this weekYour heading and body fonts at your real sizes
A brand new button component that duplicates yoursYour existing button, with the right variant
Spacing that looks fine in isolation and wrong in your appYour spacing scale, so the screen drops in cleanly
An hour of cleanup before it shipsCode that matches the codebase it is going into

Troubleshooting

ProblemFix
Claude still invents new componentsYour components are probably not named clearly enough to be indexed. Reference them explicitly by name in the prompt, and check they are exported properly in the repo.
The colors came out slightly offYour source likely had more than one version of the palette. Open the extracted system and delete the duplicates so there is one value per token.
Fonts fall back to a system defaultThe font files or the web font link are not reachable from the project. Confirm the font is actually installed or linked, not just named in the brand doc.
Sync pulled almost nothing from FigmaThe file uses hardcoded values instead of defined styles and variables. Convert them to Figma variables, then sync again.
Output was on-brand yesterday and is not todayYour design system changed since the last sync. Run /design-sync again.
The screen matches the brand but ignores your layout patternsTokens synced, layout components did not. Name your shell or page-layout component directly in the prompt.

Tips

  • Sync before you generate anything, not after. Fixing a generic screen costs more than generating an on-brand one.
  • If you only have a messy repo, sync it anyway. Claude reads more structure out of real code than out of a tidy PDF.
  • Keep one canonical source. If your repo and your Figma file disagree about the brand, sync the one your product actually ships from.
  • Small visual changes belong in the editor, not in a new prompt. Regenerating a whole screen to move padding is the most common way people waste their limit.
  • Once a screen is right, push it to Claude Code and let it ship the implementation with the design context attached.