stitch-workflow
Stitch Workflow
This is the entry point for multi-step Google Stitch work (MCP server stitch, tools exposed as mcp__stitch__<tool>). It does not do the design work itself — it sequences the specialist skills (stitch-projects, stitch-design-system, stitch-screens, stitch-iterate, stitch-components, stitch-storybook, stitch-to-code) and tracks the identifiers that flow between them. When a request maps cleanly onto one step, hand off to that specialist skill and let it own the call; use the fallbacks in the routing table below only when the specialist is not installed.
Canonical end-to-end sequence
- Resolve or create a project. Call
list_projectsbeforecreate_projectto avoid duplicating an existing project. Delegate tostitch-projects. - Establish a design system before generating any screens. Delegate to
stitch-design-system(create, upload a design.md, or derive one from an existing screen instance). - Generate screens against that design system. Delegate to
stitch-screens, passing the design system'sassetIdintogenerate_screen_from_text'sdesignSystemparameter. - Iterate. Refine screens with
edit_screensor explore alternatives withgenerate_variants. Delegate tostitch-iterate. - Route out of Stitch. Once screens and the design system are stable, there is no single next step — what the user wants determines which of these to do, and they are not strictly sequential: export design tokens and/or a DESIGN.md from the design system (delegate to
stitch-design-system), slice a generated screen into reusable framework components (delegate tostitch-components), scaffold or extend Storybook with those components and compose page stories (delegate tostitch-storybook), and/or hand off tostitch-to-codefor full application code.stitch-componentsandstitch-to-codeare alternative routes to code, not sequential steps:stitch-componentsproduces a reusable component library,stitch-to-codeproduces application code, and a user may want either, both, or neither.
Do not reorder steps 2 and 3. Skip step 2 only if the user explicitly says the screen is disposable/throwaway and consistency does not matter — otherwise call it out and default to establishing a design system first.
Exporting out of Stitch
The resolved design tokens (namedColors, typography, spacing, bodyFontFamily/headlineFontFamily/labelFontFamily) and the full DESIGN.md text (designTheme.designMd) both come back inside designTheme from get_project (name: "projects/{id}"). There is no dedicated export tool: exporting a DESIGN.md means reading designTheme.designMd from that response and writing it to a file yourself. designMd is not always present, so check that the field actually came back before telling the user an export succeeded. Delegate the detail work here to stitch-design-system; without it installed, the get_project call above is the fallback.
A minimal happy-path call sequence looks like this (ids are illustrative placeholders, not real values):