菜单
CLI for moving AI-generated UI designs from Google's Stitch platform into development workflows with local preview, site generation, and agent integration.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Aradotso/mcp-skills --skill stitch-mcp-cli命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | stitch-mcp-cli |
| description | CLI for moving AI-generated UI designs from Google's Stitch platform into development workflows with local preview, site generation, and agent integration. |
| triggers | ["preview my Stitch designs locally","build an Astro site from Stitch screens","set up Stitch MCP integration","serve Stitch project screens","connect Stitch designs to my coding agent","export Stitch UI to my project","browse Stitch designs in terminal","authenticate with Stitch API"] |
Skill by ara.so — MCP Skills collection.
stitch-mcp is a CLI tool that bridges Google's Stitch AI-generated UI design platform with local development workflows. It enables you to:
The tool handles authentication, fetching HTML/CSS designs via the Stitch API, and structuring them for development or agent consumption.
Run directly with npx (no installation needed):
npx @_davideast/stitch-mcp <command>
Or install globally:
npm install -g @_davideast/stitch-mcp
The command sets up gcloud SDK, OAuth, and MCP client configuration:
initnpx @_davideast/stitch-mcp init
This wizard will:
npx @_davideast/stitch-mcp doctor
Use --verbose flag for detailed diagnostics:
npx @_davideast/stitch-mcp doctor --verbose
Serve all screens from a project on a Vite dev server:
npx @_davideast/stitch-mcp serve -p <project-id>
This starts a local server (default: http://localhost:5173) with all project screens accessible.
Generate a deployable Astro project from Stitch screens:
npx @_davideast/stitch-mcp site -p <project-id>
The command will:
./stitch-site directory by defaultSpecify output directory:
npx @_davideast/stitch-mcp site -p <project-id> -o ./my-site
npx @_davideast/stitch-mcp init
Follow the wizard. Your credentials are stored in ~/.stitch-mcp/.
Set the API key as an environment variable:
export STITCH_API_KEY="your-api-key"
This skips OAuth entirely.
If you have gcloud CLI already configured:
gcloud auth application-default login
gcloud config set project <PROJECT_ID>
gcloud beta services mcp enable stitch.googleapis.com --project=<PROJECT_ID>
Then use with STITCH_USE_SYSTEM_GCLOUD=1:
STITCH_USE_SYSTEM_GCLOUD=1 npx @_davideast/stitch-mcp serve -p <project-id>
npx @_davideast/stitch-mcp logout
Force logout and clear all config:
npx @_davideast/stitch-mcp logout --force --clear-config
Add this to your MCP client config (e.g., claude_desktop_config.json, .cursor/config.json):
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["@_davideast/stitch-mcp", "proxy"]
}
}
}
Using API key:
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["@_davideast/stitch-mcp", "proxy"],
"env": {
"STITCH_API_KEY": "${STITCH_API_KEY}"
}
}
}
}
Using system gcloud:
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["@_davideast/stitch-mcp", "proxy"],
"env": {
"STITCH_USE_SYSTEM_GCLOUD": "1"
}
}
}
}
The proxy exposes high-level tools that combine multiple API calls:
build_siteBuilds a site from a project by mapping screens to routes. Returns HTML for each page.
Input schema:
{
projectId: string; // Required
routes: Array<{
screenId: string; // Required
route: string; // Required, e.g. "/" or "/about"
}>;
}
Example usage from CLI:
npx @_davideast/stitch-mcp tool build_site -d '{
"projectId": "123456",
"routes": [
{ "screenId": "abc123", "route": "/" },
{ "screenId": "def456", "route": "/about" },
{ "screenId": "ghi789", "route": "/contact" }
]
}'
Prompt for agent:
Use the build_site tool to create a website from my Stitch project 123456.
Map screen abc123 to the home page, def456 to /about, and ghi789 to /contact.
get_screen_codeRetrieves a screen and downloads its HTML code content.
npx @_davideast/stitch-mcp tool get_screen_code -d '{
"projectId": "123456",
"screenId": "abc123"
}'
get_screen_imageRetrieves a screen and downloads its screenshot image as base64.
npx @_davideast/stitch-mcp tool get_screen_image -d '{
"projectId": "123456",
"screenId": "abc123"
}'
npx @_davideast/stitch-mcp view --projects
Opens an interactive browser listing all your Stitch projects.
npx @_davideast/stitch-mcp view --project <project-id>
Shows all screens in the project.
npx @_davideast/stitch-mcp view --project <project-id> --screen <screen-id>
Interactive browser controls:
c: copy selected value to clipboards: preview HTML in browsero: open project in Stitchq: quitnpx @_davideast/stitch-mcp screens -p <project-id>
Displays an interactive list of all screens with preview and copy actions.
npx @_davideast/stitch-mcp tool
npx @_davideast/stitch-mcp tool <tool-name> -s
Example:
npx @_davideast/stitch-mcp tool build_site -s
npx @_davideast/stitch-mcp tool <tool-name> -d '<json-data>'
Example:
npx @_davideast/stitch-mcp tool get_screen_code -d '{
"projectId": "123456",
"screenId": "abc123"
}'
npx @_davideast/stitch-mcp serve -p <project-id>
Custom port:
npx @_davideast/stitch-mcp serve -p <project-id> --port 3000
npx @_davideast/stitch-mcp site -p <project-id>
Non-interactive mode with config file:
Create routes.json:
{
"routes": [
{ "screenId": "abc123", "route": "/" },
{ "screenId": "def456", "route": "/about" }
]
}
Then run:
npx @_davideast/stitch-mcp site -p <project-id> --config routes.json -o ./output
npx @_davideast/stitch-mcp snapshot -p <project-id> -s <screen-id> -o ./snapshot.html
Start the proxy server for agent integration:
npx @_davideast/stitch-mcp proxy
Debug mode (logs to /tmp/stitch-proxy-debug.log):
npx @_davideast/stitch-mcp proxy --debug
| Variable | Description |
|---|---|
STITCH_API_KEY | API key for direct authentication (skips OAuth) |
STITCH_ACCESS_TOKEN | Pre-existing access token |
STITCH_USE_SYSTEM_GCLOUD | Use system gcloud config instead of isolated config |
STITCH_PROJECT_ID | Override project ID |
GOOGLE_CLOUD_PROJECT | Alternative project ID variable |
STITCH_HOST | Custom Stitch API endpoint |
# 1. Browse available screens
npx @_davideast/stitch-mcp screens -p <project-id>
# 2. Serve locally to review designs
npx @_davideast/stitch-mcp serve -p <project-id>
# 3. Build site after confirming screens
npx @_davideast/stitch-mcp site -p <project-id>
User prompt to agent:
I have a Stitch project with ID 123456. It has three screens:
- Home page (screen ID: abc123)
- About page (screen ID: def456)
- Contact page (screen ID: ghi789)
Use the build_site tool to generate HTML for all three pages with routes /, /about, and /contact.
Then help me integrate them into my Next.js project.
The agent will use build_site and can help integrate the resulting HTML.
# View specific screen details
npx @_davideast/stitch-mcp view --project <project-id> --screen <screen-id>
# Preview in browser (press 's' in interactive view)
# Or manually:
npx @_davideast/stitch-mcp snapshot -p <project-id> -s <screen-id> -o ./preview.html
open ./preview.html
# Get the HTML code for integration
npx @_davideast/stitch-mcp tool get_screen_code -d '{
"projectId": "<project-id>",
"screenId": "<screen-id>"
}'
#!/bin/bash
# ci-build-stitch.sh
export STITCH_API_KEY="${STITCH_API_KEY}"
PROJECT_ID="123456"
# Generate site with predefined routes
npx @_davideast/stitch-mcp site -p "$PROJECT_ID" \
--config ./stitch-routes.json \
-o ./dist/stitch-site \
--non-interactive
# Deploy the generated site
cd ./dist/stitch-site
npm install
npm run build
stitch-routes.json:
{
"routes": [
{ "screenId": "home_abc", "route": "/" },
{ "screenId": "about_def", "route": "/about" },
{ "screenId": "contact_ghi", "route": "/contact" }
]
}
Symptoms: API calls fail with 403 or permission errors.
Solutions:
Verify your GCP role (need Owner or Editor):
gcloud projects get-iam-policy <PROJECT_ID> \
--flatten="bindings[].members" \
--filter="bindings.members:user:your-email@example.com"
Ensure billing is enabled:
gcloud billing projects describe <PROJECT_ID>
Enable Stitch API:
gcloud beta services mcp enable stitch.googleapis.com --project=<PROJECT_ID>
Run diagnostics:
npx @_davideast/stitch-mcp doctor --verbose
Symptoms: No browser opens or URL not printed during init.
Solutions:
https://accounts.google.com/tmp/stitch-proxy-debug.lognpx @_davideast/stitch-mcp init
# Copy the URL from terminal output and open in browser
Symptoms: Shows as logged in but commands fail.
Cause: The bundled gcloud SDK has separate auth from system gcloud.
Solution:
npx @_davideast/stitch-mcp logout --force --clear-config
npx @_davideast/stitch-mcp init
Solutions:
Run full diagnostics:
npx @_davideast/stitch-mcp doctor --verbose
Re-authenticate:
npx @_davideast/stitch-mcp logout --force
npx @_davideast/stitch-mcp init
Verify project and billing:
gcloud config get-value project
gcloud billing projects describe $(gcloud config get-value project)
Symptoms: Browser-based auth doesn't work automatically.
Solution: The CLI detects these environments. Copy the OAuth URL from terminal output and open it in a browser manually. The URL will be printed to stdout with clear instructions.
Symptoms: Agent can't connect to Stitch tools.
Solutions:
Run proxy with debug logging:
npx @_davideast/stitch-mcp proxy --debug
Check logs:
tail -f /tmp/stitch-proxy-debug.log
Verify MCP client config syntax:
cat ~/.config/claude/claude_desktop_config.json | jq .
Restart your MCP client (VS Code, Cursor, etc.)
Symptoms: tool command returns errors or empty responses.
Solutions:
Check tool schema:
npx @_davideast/stitch-mcp tool <tool-name> -s
Validate JSON data:
echo '{"projectId":"123"}' | jq .
Test with simpler tool first:
npx @_davideast/stitch-mcp tool list_projects
Ensure project and screen IDs are correct:
npx @_davideast/stitch-mcp view --projects
# Clone and install
git clone https://github.com/davideast/stitch-mcp.git
cd stitch-mcp
bun install
# Run locally
bun run dev init
# Run specific command
bun run dev serve -p <project-id>
# Run tests
bun test
# Build
bun run build
# Verify package
bun run verify-pack
I have a Stitch project (ID: 456789) with these screens:
- Landing page: screen_landing_001
- Features page: screen_features_002
- Pricing page: screen_pricing_003
Please use the build_site tool to generate a site with:
- Landing at /
- Features at /features
- Pricing at /pricing
Then show me how to integrate the HTML into my existing React project.
Get the HTML code for screen abc123 from project 456789 using get_screen_code.
Then analyze the CSS and suggest improvements for mobile responsiveness.
For project 456789, use get_screen_image to export all screen screenshots as base64.
Save them to a design-assets/ directory for our design system documentation.
Apache 2.0 © David East
Disclaimer: This is an experimental, independent project not affiliated with Google LLC or the Stitch team. Use at your own risk.