designseeddocs

Export & integration

Using with Google Stitch

2 min read

Google Stitch is Google's AI UI generator. It turns text prompts and reference images into React + Tailwind UI. DesignDrop doesn't have a first-class integration with Stitch yet, but you can still ground Stitch's output in your design system with a couple of lightweight steps.

What we don't claim

This guide is intentionally short. We don't have a verified step-by-step Stitch integration, and Stitch's surfaces change frequently. If you find a flow that works well in production, please share it via the feedback widget below and we'll fold it in.

Pattern: paste DESIGN.md as context

Anywhere Stitch lets you provide text — a prompt, a chat turn, a "context" or "instructions" surface if one exists — paste the contents of your DESIGN.md from DesignDrop. The file is small enough to fit comfortably in any context surface and structured enough that the underlying model can ingest it as token guidance:

  1. Open your design in DesignDrop and click Export.
  2. Copy the contents of the DESIGN.md tab.
  3. Paste it into Stitch's prompt or context area along with your generation request, e.g. "Use these tokens for every component."

Pair it with a reference screenshot when you have one — the text anchors brand, the screenshot anchors composition.

Pattern: apply tokens.css after generation

Stitch outputs React + Tailwind. Whatever variant of Tailwind it emits, the simplest way to make its output match your brand is to drop tokens.css into the project and reference the CSS variables from your Tailwind config or component classes.

  1. From DesignDrop's Export panel, download tokens.css (CSS Custom Properties for any web project).
  2. Add it to your Stitch-generated project and import it in your global stylesheet.
  3. Reference the variables directly (e.g. style={{ color: 'var(--color-primary)' }}) or wire them into your Tailwind config so utility classes resolve to your tokens.

A two-pass prompt often works well:

  1. Generate the layout you want without worrying about brand fidelity.
  2. Follow up with: "Refactor the generated code to use the CSS custom properties from tokens.css — var(--color-primary), var(--color-ink), etc."

The second pass is usually faster than fighting the first.