Stitch (agent-first CLI)

Use this skill when the task touches Google Stitch projects, screens, or auth state and a local CLI is preferable to active MCP wiring.

Important naming detail:

• npm package name: stitch-design-cli
• CLI binary name: stitch

Resolution order:

1. If stitch is already on $PATH, use it directly.
2. Otherwise run the published package explicitly with npx -y stitch-design-cli <args>.

Do not guess alternate package names.

Default stance:

• Prefer the official SDK-backed stitch CLI, not browser automation.
• Prefer --json for machine-readable output.
• Prefer read-only inspection before generating or editing screens.
• Use Stitch MCP directly only when a task specifically needs always-on tool use or lower-level surface area than this CLI exposes.

Default workflow

• If auth is missing, run stitch auth set
• Sanity check auth: stitch doctor --json
• Inspect auth state: stitch auth status --json
• List tools: stitch tool list --json
• List projects: stitch project list --json
• Create a project: stitch project create --title "Design Sandbox" --json
• List screens: stitch screen list --project-id <project-id> --json
• Inspect a screen: stitch screen get --project-id <project-id> --screen-id <screen-id> --include-image --json
• Generate a screen: stitch screen generate --project-id <project-id> --prompt "..." --device-type DESKTOP --json
• Edit a screen: stitch screen edit --project-id <project-id> --screen-id <screen-id> --prompt "..." --json
• Generate variants: stitch screen variants --project-id <project-id> --screen-id <screen-id> --prompt "..." --variant-count 3 --creative-range EXPLORE --json

For the common design-iteration flow, the default sequence is:

1. stitch doctor --json
2. stitch project list --json
3. stitch screen list --project-id <project-id> --json
4. stitch screen get --project-id <project-id> --screen-id <screen-id> --include-image --json
5. stitch screen edit --project-id <project-id> --screen-id <screen-id> --prompt "..." --json
6. stitch screen variants --project-id <project-id> --screen-id <screen-id> --prompt "..." --variant-count 3 --json

Auth

The CLI supports both auth modes exposed by the official Stitch SDK:

• API key
• OAuth access token plus project id

If stitch doctor --json reports missing auth:

• Best interactive path: stitch auth set
• Best ephemeral path: STITCHAPIKEY=... stitch doctor --json
• Saved local config: printf '%s' "$STITCHAPIKEY" | stitch auth set --stdin
• OAuth env path: STITCHACCESSTOKEN=... GOOGLECLOUDPROJECT=... stitch doctor --json

Avoid token-bearing CLI flags in examples and automation. Prefer stdin for API keys, env vars for ephemeral OAuth, and local config for repeated use. Do not paste full keys or tokens into logs or chat.

Quick verification

If you are unsure which invocation path works in the current shell:

command -v stitch >/dev/null 2>&1 && stitch doctor --json || npx -y stitch-design-cli doctor --json

Important constraints

• v1 covers project and screen flows only.
• Do not assume design-system operations are exposed yet.
• Do not assume screenshot-upload seeding is exposed yet.
• project get is wired to the official get_project tool.
• screen edit and screen variants both support multiple --screen-id values.
• Before editing a screen, confirm the project id and screen id.

Contract

Stable JSON behavior is documented in docs/CONTRACT_V1.md.