·11 min read

Google Stitch CLI: Generate UI in Terminal

Stitch CLI tutorial: install it, generate and serve screens, connect coding agents with agent-skills, and tell stitch loop apart from the stitch-loop skill.

S
Stitch Prompt Team
Content Team
StitchClaude CodeTutorialAI

On October 1, 2026, Google Labs released the official Stitch CLI (@google/stitch). The announcement put it simply: Stitch has an MCP. Stitch has an SDK. But it never had a CLI — until now.

That phrasing captures the position of the CLI: it is not another "generate" button, but the third official integration channel for Stitch. For developers who live in the terminal, design generation, prototype preview, and coding-agent integration no longer have to start with a browser tab.

This is a command-level guide: from install and login to a complete workflow, focused on three questions — what the CLI does, how it divides work with MCP and SDK, and whether it is the same thing as the confusingly named stitch-loop skill.

Note: The Stitch CLI is iterating quickly and commands may change. This guide is based on public information from October 2026; always check stitch --help for the current behavior.

1. The Third Piece of Stitch: What the CLI Adds

Before the CLI, Stitch already had two official integration channels. Comparing the three makes the division of labor clear:

ChannelAudienceTypical useNot a good fit when
Stitch MCPCoding agents calling through a protocolLetting Claude Code or Cursor read and write Stitch projectsYou need to control every step manually
Stitch SDKDevelopers writing codeEmbedding generation into your own toolchainYou just want one screen, fast
Stitch CLITerminal users and agentsLocal generation, preview, and agent setup in one placeYou prefer to stay in the browser

The CLI brings three capabilities:

  1. Connecting local coding agents: handing Stitch capabilities to the agent already working in your terminal.
  2. Generating interfaces and design systems: the same core generation engine as the web product, invoked by command.
  3. Sending local dev server snapshots back to Stitch: a new reverse channel that lets Stitch see the interface "as it actually exists in code".

2. Five-Minute Quickstart: From Install to First Screen

Install and login

Requirements: Node.js 20 or newer.

npm install -g @google/stitch
stitch login

Create a project and generate your first screen

stitch create project --title "My App"
stitch generate screen --device DESKTOP --prompt "Clean analytics dashboard with sidebar navigation"
stitch serve

stitch serve starts a local preview server, so you can inspect results immediately without switching back to the web app.

Core command cheat sheet

CommandPurpose
stitch loginSign in to your account
stitch create projectCreate a project
stitch generate screenGenerate one screen; --device selects DESKTOP or MOBILE
stitch generate variantsGenerate variants of the current design; --creative-range controls divergence
stitch servePreview generated results locally
stitch agent-skills add --userInstall Stitch Skills for local coding agents

The --creative-range flag has three levels, consistent with the SDK variants system:

stitch generate variants --creative-range REFINE     # refine the current direction
stitch generate variants --creative-range EXPLORE    # explore adjacent directions
stitch generate variants --creative-range REIMAGINE  # reimagine the design

3. Connect Every Coding Agent with One Command: agent-skills add

stitch agent-skills add --user

This single command installs Stitch Skills for all of the following agents:

  • Claude Code
  • Cursor
  • Codex
  • Gemini CLI
  • Antigravity

Once installed, a /stitch command appears inside the agent, covering three jobs: generating screens, extracting a design system from a URL, and converting Stitch prototypes into React components.

How it compares with installing Skills manually

Previously each agent needed its own Skills setup, and the maintenance cost grew with every agent you added. Now one command covers all of them, and upgrades are just a re-run. If your project was configured the old way, reinstalling via the CLI keeps versions consistent across agents.

4. The Reverse Channel: Sending Dev Server Snapshots to Stitch

The traditional Stitch workflow was one-directional: design generates code. The CLI adds the other direction — sending local dev server snapshots back to Stitch.

The value is context: Stitch sees the interface as it actually runs, not a static screenshot. The next iteration starts from "what the code really renders", which removes the cost of describing the current state in words.

Public details about this capability are still limited; check the official documentation for the exact commands and scope.

5. What Is stitch loop, and How Is It Different from the stitch-loop Skill?

This is the most common source of confusion in recent coverage. The names are nearly identical, but they sit at completely different levels:

  • stitch loop (a CLI command): an agentic workflow long used internally by the team. The agent continuously monitors the codebase, logs, analytics, and user feedback, then proposes insights and improvements on its own.
  • stitch-loop skill (part of Stitch Skills): a relay-style multi-page generation skill that solves "generate a set of pages in one pass".

One sentence to remember: stitch loop is continuous improvement; the stitch-loop skill is batch generation. If this is your first time seeing both names, that distinction prevents most mistakes.

Details about stitch loop are still sparse, and official documentation has not been published yet. Keep an eye on future updates.

6. A Practical Workflow: Generate, Iterate, Freeze DESIGN.md, Implement, Verify

For real projects, a five-step loop works well:

  1. Generate the initial screen with stitch generate screen.
  2. Iterate with --creative-range until the direction feels right.
  3. Capture the final visual rules in a DESIGN.md and freeze it.
  4. Let your coding agent implement pages against that DESIGN.md.
  5. Verify in the browser and feed deviations back into the next iteration.

One caution: do not skip the "freeze DESIGN.md" step. Community practice shows that letting an agent write UI from memory produces a new style on every screen. For how to write and validate DESIGN.md, see DESIGN.md in CI: Turning Design Specs into a Checkable Artifact.

7. Known Limitations and Caveats

  • Alpha stage: features and flags change quickly; pin versions in automated pipelines.
  • Quotas: generation commands depend on account quotas; check usage limits before batch runs.
  • The "false success" problem: the community has reported cases where a change is reported as successful but not actually applied. Review critical steps manually.
  • Agent integration is not magic: clear, specific task descriptions still matter after Skills are installed.

8. FAQ

Q1: Is the Stitch CLI free?

The CLI itself installs from npm for free; generation follows the Stitch account quota system. Check official documentation for current limits.

Q2: I already use MCP. Do I still need the CLI?

If your workflow revolves around a coding agent, MCP is more natural. If you prefer the terminal, or need scripted and batch generation, the CLI is more direct. They coexist; you do not have to choose one.

Q3: The stitch command is not found after installation. What should I do?

Confirm Node.js is 20 or newer, then check that the npm global bin directory is on your PATH. Re-running npm install -g @google/stitch usually resolves it.

9. Summary

The CLI turns Stitch from "a design tool in the browser" into "design capability callable from the terminal and from agents". For developers, three actions matter: install the CLI, connect your agents with agent-skills, and fold DESIGN.md into the workflow.

Keep reading:

← ← Back to Blog