Import from your codebase

Your codebase already has a design language — colors scattered across stylesheets, spacing patterns buried in component files, typography choices locked in Tailwind configs. A DESIGN.md captures all of it in one place so Stitch can generate screens that look like they belong to your product instead of a blank-slate default.

There are two ways to get there: a quick prompt you can paste into any coding agent, or a dedicated skill that automates the entire pipeline.

The quick prompt

Copy this prompt into any coding agent (Gemini, Claude Code, Cursor, Antigravity) from a project directory. No skills or plugins required — the agent reads your source files and writes a DESIGN.md from what it finds.

PROMPT

Context — optionalAdd specifics about your codebase’s purpose, critical files, and goals.

InstructionsRead the codebase and/or website before designing. The repo and/or website are the source of truth. Start with real content. Pull product names, taglines, and copy from the README. Pull labels, values, and terminology from config files, CLI help text, schemas, and error messages. Nothing invented, nothing placeholder — if the repo doesn’t contain it, the design doesn’t show it. Look at existing code for visual identity: color values, type scales, spacing tokens, component patterns. If a design system exists, inherit it. If values are scattered across files, collect them — they reveal visual intent even when undocumented. Read the core logic and data structures, not just the docs. They tell you the product’s native shape — a timeline, a graph, a catalog, a pipeline. Let that shape organize the page instead of a section template. Find what the README leads with. That feature dominates the page. Establish its weight before placing anything else — what matters before what measures.

What the prompt does

The prompt tells the agent to work backwards from your code, not forwards from a template. It extracts three layers:

Content — Product names, labels, and copy pulled directly from the source. No filler text, no lorem ipsum.
Visual identity — Colors, fonts, spacing, and component patterns gathered from stylesheets, theme files, and Tailwind configs.
Information architecture — The natural shape of your product’s data, which determines how the page is organized.

The output is a DESIGN.md you can drop into .stitch/DESIGN.md and immediately use for screen generation.

Tips for better results

Point the agent at specific directories. Add lines like “Focus on src/styles/, tailwind.config.ts, and src/components/” to the context block.
Name your stack. Telling the agent “This is a React + Tailwind + shadcn/ui project” helps it look in the right places.
Iterate. The first extraction captures the big picture. Refine it: “The accent color should be the teal from the navbar, not the blue from the footer.”

Automated extraction with Stitch Design Skills

The prompt above works anywhere, but it relies on the agent’s general reasoning. Stitch Design Skills are purpose-built agent instructions that know exactly where to look for design tokens in every major framework — React, Vue, Svelte, Angular, plain CSS, and Tailwind.

What are Stitch Design Skills?

Stitch Design Skills is an open-source collection of 13 agent skills organized into three plugins:

Plugin	What it does
stitch-design	Create and capture designs — extract tokens from code, snapshot running apps, upload to Stitch
stitch-build	Turn designs into code — React components, walkthrough videos, shadcn/ui integration
stitch-utilities	Enhance quality — prompt optimization, premium design systems, autonomous multi-page generation

Skills follow the Agent Skills open standard and work with any compatible coding agent.

Install the plugin suite

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

Replace claude-code with cursor, gemini-cli, or antigravity depending on your agent.

Extract a DESIGN.md from source code

The extract-design-md skill scans your source tree without needing to build or run the application:

PROMPT

Extract the design system from ./src and write it to .stitch/DESIGN.md

The skill automatically detects your stack (Tailwind config, CSS custom properties, theme files, styled-components) and works through each design dimension:

Visual atmosphere — Overall mood, whitespace philosophy, color temperature
Color palette — Every unique color, deduplicated and assigned functional roles
Typography — Font families, type scale hierarchy, weight and spacing patterns
Component styles — Buttons, cards, navigation, inputs, and domain-specific elements
Layout principles — Grid system, responsive breakpoints, spacing strategy

The output includes both YAML frontmatter (machine-readable tokens) and Markdown prose (human-readable design rationale). This bimodal format is what makes DESIGN.md work for both tools and AI agents.

Upload to Stitch

Once you have a DESIGN.md, push it into a Stitch project so every generated screen follows your design system:

PROMPT

Upload .stitch/DESIGN.md to Stitch and create a design system from it.

The manage-design-system skill handles the upload and registers the design system at the project level. All future screens inherit your tokens automatically.

The full code-to-design pipeline

For a complete import — design system extraction, static HTML capture, and Stitch upload in one pass — use the orchestrator skill:

PROMPT

Upload the frontend at ./my-app into a Stitch project called “My App Migration”.

The code-to-design skill chains three steps: extract static HTML from the running app, reverse-engineer the design system from source, and upload everything to Stitch.

Which method should I use?

Situation	Recommended approach
Quick extraction, no setup	Copy the prompt above into any agent
Thorough, framework-aware extraction	Install skills, use `extract-design-md`
Full migration into Stitch	Install skills, use `code-to-design`
Writing a DESIGN.md from scratch	See What is DESIGN.md? for the format