Stitch CLI Quickstart

Welcome to the Stitch CLI. Whether you like running commands directly in your terminal or driving your design workflow through a coding agent with /stitch, you can go from a blank folder to a live, interactive design on localhost in a couple of minutes.

Install the CLI

Install @google/stitch globally with npm (Node.js 20 or later):

npm install -g @google/stitch
stitch --version

Or run it on the fly with npx @google/stitch.

Sign in

Run stitch login to sign in through your browser with Google OAuth. One login authenticates both your Stitch Canvas projects and your workspace workflows:

stitch login

If you’re running in a headless environment or CI pipeline, set STITCH_API_KEY or save an API key in your global config (stitch config set apiKey "your_api_key_here" --global). You can check your sign-in status at any time with stitch status.

Add the /stitch skill to your coding agent

If you use a coding agent like Claude Code, Cursor, Gemini CLI, or Antigravity, install the bundled /stitch skill so your agent knows how to drive the CLI for you:

stitch agent-skills add --user

Once installed, you can invoke /stitch right inside your agent’s chat to generate screens, extract and sync a DESIGN.md, or audit your running app:

Generate your first screen from the terminal

You can also run every step directly from your shell. Start by creating a Stitch Canvas project and pinning it to your current directory so you don’t have to pass --project on every command:

stitch create project --title "Checkout Redesign"
stitch config set project <project-id>

Now generate a screen from a prompt:

stitch generate screen \
  --title "Order Summary" \
  --device DESKTOP \
  --prompt "A clean two-column checkout summary on warm paper (#FAF8F5) with itemized billing, shipping selector, and a primary payment button"

Once your screen is generated, spin up the local preview server to inspect the live HTML on localhost, or open the project directly on the Stitch Canvas in your browser:

stitch serve
stitch open project

Where to go next

Depending on what you’re building, pick the workflow that fits:

• Generate & Edit Screens — Create screens, explore creative variations, and refine one detail at a time.
• Iterate with Coding Agents — Upload custom artwork, frame a focused design on the first prompt, and wire up interactive states on localhost.
• Sync Design Systems — Use /stitch or stitch upload design to bind a DESIGN.md specification to your project.
• Capture Live Apps — Snapshot live routes from your local dev server and upload them onto the Stitch Canvas.
• Audit App UI — Run a local design review comparing your running app against DESIGN.md.

Working with an existing repository

When you want Stitch to analyze an entire codebase, discover its routes, and propose UI prototypes based on your product goals, enable workspace features once on your machine:

stitch enable loop

Then check out the workspace guides:

• Connect a Repository — Pair your codebase with a Stitch Workspace and link your Canvas project.
• Priorities & Context — Set standing UI prototyping goals and attach product specs.
• Codebase Prototypes — Turn codebase UX insights and solution specs into Stitch Canvas screens.
• CLI Command Reference — Every command, subcommand, and flag in one place.