Use Google’s Design.md Standard to Build a Consistent Brand

Open a new project folder, then install the Google Stitch skills for Claude Code.

npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

When the installer asks which plugins to install, you can select the full set for this workflow. The repo lists stitch-design, stitch-build, and stitch-utilities as the main plugin groups.

After install, restart Claude Code or open a fresh Claude Code thread in the same folder. The skills need a new agent session before they are available.

Pro tip: --scope project keeps the skills in the current folder. Use the repo's Codex marketplace or global setup instructions if you want these available across projects.

Before asking for a design, make the agent inspect the skills it just received. This is a small step, but it prevents you from blindly calling tools the agent has not loaded into context.

Use this prompt:

Take a look at the Google Stitch design tools I just installed.
They should be in this project.
Get familiar with them and give me a brief report on what you think of them.
Keep it brief and informal.

The agent should report which skills are available and what each one is for. In our test, Claude found skills for generating designs, converting code to design, extracting static HTML, extracting DESIGN.md, and managing design systems in Stitch.

Google's DESIGN.md repo (https://github.com/google-labs-code/design.md) describes the file as two layers: YAML design tokens at the top, then markdown rationale below. The tokens give the agent exact values. The prose tells it when and why to use them.

You can make the file from a new idea:

Build me a DESIGN.md using the Stitch tools for a tiki bar called Tom's Tiki Drinks.
We want the vibes to be tropical, maximalist, fun to use, and we want surprising but purposeful animations.
I'm thinking lots of golds, yellows, greens, and colors of tropical birds.

You can also extract a file from an existing site:

Use Google Stitch skills to extract a DESIGN.md from this website: [WEBSITE_URL]

The extraction path is useful when you want to redesign an existing brand, build a product page that matches the current site, or turn a prospect's website into a design brief before pitching a new prototype.

Pro tip: The extraction skill may be strongest when it can inspect source code. If it struggles with a live site, give the agent local frontend files, a static HTML snapshot, or a few screenshots.

Open the generated DESIGN.md before you ask for UI. Check that it names the important design choices instead of only listing colors.

In the Tiki bar example, the useful parts were specific:

• a 1960s Polynesian rec-room atmosphere
• saturated gold, yellow, green, and tropical accent colors
• custom typography guidance for drink names and labels
• component rules for cards, buttons, tabs, and navigation
• motion notes for torch flickers, palm fronds, ice clinks, and toucan animation
• banned patterns, including generic SaaS dashboard choices

This is the point of the workflow. You are not asking the agent to remember brand taste from a chat thread. You are giving it a file it can inspect, revise, and reuse.

Once the file looks useful, ask the agent to build something small with it.

Use that DESIGN.md to create a quick, lightweight local prototype so I can see what it looks like in action.

Keep the first build visual and fast. The goal is not production code yet. The goal is to see whether the design file produces a distinct direction.

In our test, the first pass made a dark Tiki drinks site with a strong logo, menu cards, illustrated drink art, custom colors, and small animations. It was not perfect, but it felt much less generic than a normal "make it fun and tropical" prompt.

Then review the output like a design pass. Ask for targeted changes instead of restarting the whole build:

Everything is great, but slow down the ice cube animation.
It goes really fast and it is hard to see.

That kind of tight follow-up works because the agent already has the visual system in the file. You are editing a direction, not renegotiating the whole brand.

The most useful advanced workflow is to use two design files.

First, extract the current site's design system:

Use Google Stitch skills to extract a DESIGN.md from [CURRENT_WEBSITE_URL].
Name it current-site-DESIGN.md.

Then create the new direction:

Create a second DESIGN.md for where we want the brand to go.
Name it new-direction-DESIGN.md.
Focus on [NEW_BRAND_DIRECTION], [KEY_AUDIENCE], [DESIRED_FEEL], and [PATTERNS_TO_AVOID].

Finally, make the agent compare them:

Look at current-site-DESIGN.md and new-direction-DESIGN.md.
Preserve the core brand cues from the current site, then move the prototype toward the new direction.
Return a short design migration plan first.
Then build one lightweight page so I can review the direction visually.

This is better than asking for a redesign in one giant prompt. The agent has to reason about what stays, what changes, and what should never be lost.