skills.rest
reason-machines
reason-machinesOFFICIAL
Explore all skills by this author →
Website𝕏@reasonmachinesGitHub

stitch-mcp-cli

Preview, export, and build Astro sites from Google Stitch UI designs via CLI.

7|2|Updated May 16, 2026
Search Tags:#cli#MCP#google cloud#ui design#astro#Stitch#site generation
One-click install
npx skills add https://github.com/reason-machines/mcp-skills --skill stitch-mcp-cli-reason-machines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-mcp-cli
Source: https://github.com/reason-machines/mcp-skills/tree/main/skills/stitch-mcp-cli
Command: npx skills add https://github.com/reason-machines/mcp-skills --skill stitch-mcp-cli-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Moving AI-generated UI designs from Google's Stitch platform into a local development workflow requires manual copying of HTML/CSS and custom authentication handling. This Skill bridges Stitch projects with local preview servers, static site generation, and coding agents through a single CLI. ## Core Features & Use Cases - Local Design Preview: Serve all screens from a Stitch project on a Vite dev server and browse design data interactively in the terminal. - Astro Site Generation: Map Stitch screens to routes and generate a complete, deployable Astro project with fetched HTML/CSS. - MCP Agent Integration: Proxy Stitch MCP tools to coding agents with automatic token refresh, exposing virtual tools like build_site, get_screen_code, and get_screen_image. - Use Case: A designer exports three Stitch screens (home, about, contact) and asks an agent to call build_site with route mappings, producing HTML pages ready to integrate into a Next.js project. ## Quick Start Run npx @_davideast/stitch-mcp init to authenticate, then ask the agent to serve my Stitch project locally and build an Astro site from its screens.

Frequently Asked Questions about stitch-mcp-cli

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I preview Google Stitch designs locally?▼

Run npx @_davideast/stitch-mcp serve -p <project-id> after authenticating with the init command. This starts a Vite dev server on localhost:5173 where all project screens are accessible, with a custom port available via the --port flag.

How to build an Astro site from Stitch screens?▼

Run npx @_davideast/stitch-mcp site -p <project-id> and map screens to routes when prompted, or pass a routes.json config file for non-interactive builds. The CLI fetches HTML/CSS per screen and outputs a complete Astro project to ./stitch-site by default.

How do I connect Stitch designs to Claude or Cursor?▼

Add an MCP server entry pointing to npx @_davideast/stitch-mcp proxy in your client config such as claude_desktop_config.json. The proxy exposes virtual tools like build_site, get_screen_code, and get_screen_image with automatic token refresh.

What authentication methods does the Stitch CLI support?▼

Three methods are supported: automatic OAuth via the init wizard, a STITCH_API_KEY environment variable that skips OAuth, or an existing system gcloud configuration enabled with STITCH_USE_SYSTEM_GCLOUD=1. Credentials from OAuth are stored in ~/.stitch-mcp/.

Why does Stitch authentication fail in WSL, SSH, or Docker?▼

Browser-based OAuth cannot open automatically in remote environments. The CLI detects these cases and prints the OAuth URL to stdout, which you copy and open manually in a browser to complete authentication.

Why do Stitch API calls return permission denied errors?▼

Permission errors occur when your GCP role lacks Owner or Editor access, billing is disabled, or the Stitch API is not enabled on the project. Run npx @_davideast/stitch-mcp doctor --verbose for diagnostics and enable the API with gcloud beta services mcp enable.

Related Skills

Explore More Software Engineering Skills→
KhoiwallKhoiwall

stitch

Access and manipulate Google Stitch UI designs via MCP.

Community
Intermediate
rebyteai-templaterebyteai-template
15

web-app-builder

Build and deploy static web apps from local directories to cloud hosting.

Official
Intermediate
joySUSYjoySUSY

design-md

Generates a DESIGN.md design system file by analyzing Stitch project screens via the Stitch MCP Server.

Community
Intermediate
lushly-devlushly-dev
4

implement-designs

Extract Figma design tokens and convert them to CSS custom properties.

Official
Advanced