Generated with AI by Tech4SSD
If you have ever used an AI coding tool to build a user interface, you already know the frustration. You describe your colors and spacing, generate a button that looks perfect, then ask for a navigation bar and suddenly the padding is different, the font weight changed, and the hover state uses a color you have never seen before. Google Stitch just solved this with a single file called design.md.
Stitch is an AI design tool from Google Labs that generates full UI designs using Gemini. But its most powerful feature is not the mockups — it is a plain Markdown document that captures your entire design system in a format that AI coding agents like Claude Code can read and apply consistently across every component you build.
Why AI-Generated UI Breaks So Easily
Here is what happens every time. You prompt Claude Code or Cursor to build a card component. You describe your colors, your spacing, your font sizes. It produces clean code. Then you ask for a sidebar. The padding shifts, the font weight changes, and the border radius is completely different from the first component.
This is not because the AI writes bad CSS. It is because each prompt starts fresh with zero memory of your design decisions. Every component becomes a guessing game unless you give the agent something structured to reference — not just a prompt, but a persistent specification file it can check every single time.
The core problem: AI coding agents have no persistent awareness of your design system unless you hand them a structured reference file they can check on every generation.
What Google Stitch Actually Is
Google Stitch is an AI-powered design tool available through Google Labs. It uses Gemini to generate UI designs from text descriptions or reference images. You describe what you want — a SaaS dashboard with a dark navy palette, or a clean e-commerce layout with warm tones — and Stitch generates full screens, components, and a complete design system to support them.
The game-changing difference from other mockup generators is the output format. Alongside the visual designs, Stitch produces a design.md file: a plain-text Markdown document that captures every design decision in a structured, machine-readable way. This file was built specifically to be consumed by AI coding agents.
What Stitch Generates
Full UI screens and components from text descriptions, plus a complete design system exported as a structured Markdown file that any AI agent can read natively.
Why Markdown Works
Plain text that any AI reads natively. No special parsing required. Version-controllable, easy to edit, and compact enough to fit inside a context window without eating your token budget.
What Is Inside a design.md File
The design.md file that Stitch generates is essentially a design specification optimized for AI consumption. Here is everything it includes:
🎨 Color System — Primary, secondary, accent colors with exact hex values. Semantic assignments for success, error, warning, and info. Background and surface colors.
🔤 Typography — Font families, full type scale from H1 to caption, font weights, line heights, and letter spacing values.
📐 Spacing Scale — Base unit (usually 4px or 8px) and named values from xs through 2xl with pixel values.
📊 Layout & Grid — Container max-widths, column grid specs, and responsive breakpoints.
🧩 Components — Visual patterns for buttons, inputs, cards, and navigation. Includes hover, focus, active, and disabled states.
✨ Borders & Shadows — Corner radius values by component type and box shadow definitions with usage context.
It reads like a spec a human designer would write — except it is structured so an LLM can parse and apply it reliably without misinterpreting any values.
Step-by-Step: Setting Up the Workflow
Step 1: Generate Your Design in Stitch
Open Google Stitch and describe what you are building. Be specific about the product type, visual direction, and the screens or components you need. You can upload a screenshot or sketch as a reference image if you want Stitch to match an existing aesthetic.
Spend time here. The quality of your design.md depends entirely on how well-developed the Stitch design is before you export. Vague inputs produce vague design tokens.
Step 2: Export and Place the File
Once you are happy with the design, export the design.md file from Stitch. Save it to the root of your project directory. Keeping it at the root means Claude Code can always find it regardless of which subdirectory it is working in during a session.
Step 3: Wire It Into Your CLAUDE.md
Claude Code reads a file called CLAUDE.md in your project root as persistent context. This is loaded at the start of every session, which makes it the perfect place to tell the agent about your design system. Create or update your CLAUDE.md with instructions like:
# Project Context ## Design System This project uses a design system defined in design.md Always refer to this file when generating or modifying any UI component. - Use only colors, fonts, and spacing values defined in design.md - Do not invent new values or use defaults from any framework - Match component states (hover, focus, active, disabled) to design.md - Follow the typographic scale and weight assignments exactly ## Stack - Framework: Next.js 14 (App Router) - Styling: Tailwind CSS with custom config - Components: Custom — no UI library
Adjust the stack section for your actual project. The critical part is explicitly telling Claude Code to reference design.md and never deviate from it.
Step 4: Start Building Components
Run claude in your terminal from the project root. Claude Code loads your CLAUDE.md and carries those instructions through the entire session. Quick sanity check first — ask it what primary color is defined in the design system. It should return the exact hex value from your file, not a guess.
Then start requesting components naturally:
→ "Build a primary button component using the design system in design.md"
→ "Create a pricing card following the spacing and typography from the project design system"
→ "Add a top navigation bar using the colors and fonts specified in design.md"
Because CLAUDE.md points to design.md, Claude Code references the file each time instead of inventing values. Every component stays on-system from the first to the last.
Pro Tips for Staying Consistent
Translate Tokens to Your CSS Framework
If using Tailwind, ask Claude Code to read design.md and generate a tailwind.config.js that maps every color, spacing, and typography value to custom tokens. This creates a second enforcement layer — even if a prompt drifts, Tailwind utilities constrain output to your actual values.
Name the File in Every Prompt
Even with CLAUDE.md loaded, mentioning the design system file directly in prompts keeps the model focused. "Using the design system in design.md, build a user profile card" works better than a vague request every time.
Run Consistency Audits
After building a batch of components, ask Claude Code to check for drift: "Review /components and identify any that use values not defined in design.md." This catches inconsistencies before they snowball into a bigger problem.
Commit design.md to Git
Treat it like source code. When the design evolves, update the file and commit the change. Everyone on the team works from the same design reference. Claude Code reads the file fresh at each session start, so updated values apply automatically.
Common Mistakes That Will Cost You Hours
Exporting too early from Stitch. If you export design.md before fully developing the design, the file will have gaps — placeholder colors, default spacing, missing component states. Claude Code can only work with what is in the file. Refine the design thoroughly before exporting.
Pointing without instructing. Just telling Claude Code that design.md exists is not enough. Your CLAUDE.md needs to say how to use it. Be explicit: "always use these values, never deviate, never invent new ones."
Not reviewing generated output. The system is consistent but not infallible. Spot-checking generated components against your Stitch designs catches the occasional miss early, before it propagates through your entire codebase.
Forgetting to update CLAUDE.md when your stack changes. If you add a new library or switch from CSS Modules to Tailwind, update the instructions. Claude Code's behavior depends entirely on what that file says.
Leaving the Stitch design vague before exporting is the single biggest mistake. Garbage tokens in, garbage UI out — no amount of clever prompting fixes incomplete design specs.
Does This Work With Other AI Coding Tools?
Yes. Because design.md is plain Markdown, any AI coding tool that accepts file context can work with it. Cursor, Aider, GitHub Copilot Workspace, Windsurf, and custom agents built with LangChain can all reference the file. The CLAUDE.md mechanism is specific to Claude Code, but the pattern of pointing an AI agent to a structured design system file applies to any LLM-backed coding tool in 2026.
What About Existing Design Systems?
Stitch is primarily for generating new designs from scratch. If you already have a design system in Figma, you have two practical options. You can import reference screenshots into Stitch and let it derive a matching system, or you can manually write a design.md that documents your existing tokens. There is no direct Figma-to-design.md export path yet, though the community has started building tools in that direction.
Does It Work for Mobile Development?
The concept transfers, but needs some adaptation. Claude Code can generate React Native components using design tokens from a design.md file. However, since Stitch focuses on web UI, the exported specs are web-oriented. You will need to manually add mobile-specific patterns like safe area handling, platform navigation conventions, and touch target sizing before using it for mobile projects.
Key Takeaways
✅ Google Stitch captures your full design system in a machine-readable design.md file — no more re-describing specs in every prompt.
✅ Claude Code's CLAUDE.md feature lets you embed persistent design instructions at the project level.
✅ The workflow: generate in Stitch → export design.md → add to project → configure CLAUDE.md → generate components.
✅ Translating tokens into your CSS framework config creates a second consistency layer that catches any drift.
✅ Start with one component type. Confirm consistency holds. Then scale to your full component library.
This is one of the most practical approaches available right now for maintaining visual consistency in AI-generated UI. The time you invest in setting up this workflow saves hours of manual cleanup later — and the gap between your Figma designs and your shipped product gets dramatically smaller.
Want more AI development tips like this?
Follow Tech4SSD for daily insights on AI tools, workflows, and the tech that actually moves the needle. Subscribe at tech4ssd.beehiiv.com