Step by step 6 steps

1. 1

   Step 1 of 6

   Install The Stitch Skills

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

   Copy

   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.

2. 2

   Step 2 of 6

   Make The Agent Read Its New Tools

   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:

   Copy

   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.

3. 3

   Step 3 of 6

   Create Or Extract A DESIGN.md

   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:

   Copy

   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:

   Copy

   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.

4. 4

   Step 4 of 6

   Review The File Before Building

   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.

5. 5

   Step 5 of 6

   Build A Lightweight Prototype

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

   Copy

   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:

   Copy

   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.

6. 6

   Step 6 of 6

   Combine Current Brand And New Direction

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

   First, extract the current site's design system:

   Copy

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

   Then create the new direction:

   Copy

   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:

   Copy

   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.

Background and context

Who This Is Useful For

• Founders and marketers who want quick mockups that still feel tied to an existing brand.
• Designers and product teams who need AI tools to follow colors, typography, components, motion rules, and "do not use" guidance.
• Developers and AI builders who want reusable design context inside Claude Code, Codex, Cursor, or another coding agent.

What You Will Build

You will install Google's Stitch skills, create or extract a DESIGN.md file, and use it to generate a lightweight local prototype. In our test, that file turned a rough Tiki bar idea into a visual system with a palette, typography, component rules, banned patterns, motion guidance, and a working "Tom's Tiki Drinks" prototype.

What You Need To Get Started

• Claude Code, Codex, Cursor, or another supported coding agent. This guide uses Claude Code.
• A project folder where the Stitch skills can install.
• The Google Stitch skills repo (https://github.com/google-labs-code/stitch-skills).
• A design idea, an existing website, or frontend source code to analyze.
• Optional: a Google Stitch (https://stitch.withgoogle.com/) account and API key if you want the agent to push designs into Stitch.

Going Further

If you use Stitch directly, create an API key in Stitch settings and let the agent connect to your account. The Stitch skills can help push design systems and screens into Stitch so you can review them on a canvas and share them outside the coding agent.

You can also keep DESIGN.md in your repo like any other source file. Review diffs before a big redesign, keep one file per app or product surface, and hand the same file to Claude Code, Codex, Cursor, Stitch, or another AI builder.

Google's announcement (https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-design-md/) frames DESIGN.md as a portable way to import and export design rules, and the spec is still marked alpha. Treat it as a strong workflow pattern, not a finished replacement for designers, accessibility review, or brand approval.