design-import

To convert Google Stitch designs into build-ready UI specs, use a design import workflow that extracts design tokens, maps components, and reconciles conventions. This translates generated output into a precise specification for engineers without copying raw markup.

Design handoff from Stitch to a Tailwind codebase is the process of translating generated UI layouts into implementation-ready specs. It involves extracting colors and typography to match your Tailwind theme and approved component library conventions.

You extract design tokens from Google Stitch output by pulling structured colors, typography, layout, and state information from the design frames. These tokens are then mapped against your project's existing design language and accessibility rules.

Yes, you need Stitch MCP access to generate implementation-ready design specs. The import workflow requires MCP connectivity to pull structured design data, alongside your project's design rules and a linked DESIGN.md index entry.

Yes, you can map Stitch UI components to your existing Tailwind theme conventions. The import process reconciles imported design choices with your approved component library, Tailwind theme, and accessibility rules to ensure codebase consistency.

The best way to document Stitch design specs for downstream engineering is writing a spec under docs/design and updating the DESIGN.md index. This ensures the coding workflow can cleanly implement the UI without engineers copying raw generated markup.