stitch-mcp-cli

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

stitch-mcp CLI

Skill by ara.so — MCP Skills collection.

由 ara.so 开发的Skill — 属于MCP Skills集合。

Overview

概述

stitch-mcp

is a CLI tool that bridges Google's Stitch AI-generated UI design platform with local development workflows. It enables you to:

Preview all screens from a Stitch project on a local dev server
Generate deployable Astro sites by mapping screens to routes
Proxy Stitch MCP tools to coding agents with automatic token refresh
Browse and explore design data interactively in the terminal
Invoke MCP tools directly from the command line

The tool handles authentication, fetching HTML/CSS designs via the Stitch API, and structuring them for development or agent consumption.

stitch-mcp

是一款CLI工具，可衔接Google Stitch AI生成UI设计平台与本地开发工作流。它支持你：

在本地开发服务器上预览Stitch项目的所有页面
通过将页面映射到路由，生成可部署的Astro站点
将Stitch MCP工具代理到编码Agent，并支持自动令牌刷新
在终端中交互式浏览和查看设计数据
直接从命令行调用MCP工具

该工具负责处理认证、通过Stitch API获取HTML/CSS设计，并将其结构化以适配开发或Agent使用。

Installation

安装

Run directly with npx (no installation needed):

bash

npx @_davideast/stitch-mcp <command>

Or install globally:

bash

npm install -g @_davideast/stitch-mcp

使用npx直接运行（无需安装）：

bash

npx @_davideast/stitch-mcp <command>

或全局安装：

bash

npm install -g @_davideast/stitch-mcp

Quick Start

快速开始

1. Initialize Authentication

1. 初始化认证

The

init

command sets up gcloud SDK, OAuth, and MCP client configuration:

bash

npx @_davideast/stitch-mcp init

This wizard will:

Install an isolated gcloud SDK (if needed)
Guide you through OAuth authentication
Enable the Stitch API on your project
Generate MCP client configuration

init

命令用于配置gcloud SDK、OAuth及MCP客户端：

bash

npx @_davideast/stitch-mcp init

该向导会：

安装独立的gcloud SDK（如需要）
引导你完成OAuth认证
在你的项目中启用Stitch API
生成MCP客户端配置

2. Verify Setup

2. 验证配置

bash

npx @_davideast/stitch-mcp doctor

Use

--verbose

flag for detailed diagnostics:

bash

npx @_davideast/stitch-mcp doctor --verbose

bash

npx @_davideast/stitch-mcp doctor

使用

--verbose

标志查看详细诊断信息：

bash

npx @_davideast/stitch-mcp doctor --verbose

3. Preview Designs Locally

3. 本地预览设计

Serve all screens from a project on a Vite dev server:

bash

npx @_davideast/stitch-mcp serve -p <project-id>

This starts a local server (default: http://localhost:5173) with all project screens accessible.

在Vite开发服务器上托管项目的所有页面：

bash

npx @_davideast/stitch-mcp serve -p <project-id>

这会启动一个本地服务器（默认地址：http://localhost:5173），你可以访问项目的所有页面。

4. Build an Astro Site

4. 构建Astro站点

Generate a deployable Astro project from Stitch screens:

bash

npx @_davideast/stitch-mcp site -p <project-id>

The command will:

Prompt you to map screens to routes (e.g., "/" for home, "/about" for about page)
Fetch HTML/CSS for each screen
Generate a complete Astro project structure
Output to
```
./stitch-site
```
directory by default

Specify output directory:

bash

npx @_davideast/stitch-mcp site -p <project-id> -o ./my-site

从Stitch页面生成可部署的Astro项目：

bash

npx @_davideast/stitch-mcp site -p <project-id>

该命令会：

提示你将页面映射到路由（例如，"/"对应首页，"/about"对应关于页面）
获取每个页面的HTML/CSS
生成完整的Astro项目结构
默认输出到
```
./stitch-site
```
目录

指定输出目录：

bash

npx @_davideast/stitch-mcp site -p <project-id> -o ./my-site

Authentication Methods

认证方式

Method 1: Automatic OAuth (Recommended)

方式1：自动OAuth（推荐）

bash

npx @_davideast/stitch-mcp init

Follow the wizard. Your credentials are stored in

~/.stitch-mcp/

bash

npx @_davideast/stitch-mcp init

跟随向导操作。你的凭证将存储在

~/.stitch-mcp/

目录下。

Method 2: API Key

方式2：API密钥

Set the API key as an environment variable:

bash

export STITCH_API_KEY="your-api-key"

This skips OAuth entirely.

将API密钥设置为环境变量：

bash

export STITCH_API_KEY="your-api-key"

这会完全跳过OAuth流程。

Method 3: System gcloud

方式3：系统gcloud

If you have gcloud CLI already configured:

bash

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

bash

STITCH_USE_SYSTEM_GCLOUD=1 npx @_davideast/stitch-mcp serve -p <project-id>

如果你已配置好gcloud CLI：

bash

gcloud auth application-default login
gcloud config set project <PROJECT_ID>
gcloud beta services mcp enable stitch.googleapis.com --project=<PROJECT_ID>

然后设置

STITCH_USE_SYSTEM_GCLOUD=1

运行：

bash

STITCH_USE_SYSTEM_GCLOUD=1 npx @_davideast/stitch-mcp serve -p <project-id>

Logout

登出

bash

npx @_davideast/stitch-mcp logout

Force logout and clear all config:

bash

npx @_davideast/stitch-mcp logout --force --clear-config

bash

npx @_davideast/stitch-mcp logout

强制登出并清除所有配置：

bash

npx @_davideast/stitch-mcp logout --force --clear-config

MCP Integration

MCP集成

Configure Your Agent

配置你的Agent

Add this to your MCP client config (e.g.,

claude_desktop_config.json

.cursor/config.json

json

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@_davideast/stitch-mcp", "proxy"]
    }
  }
}

Using API key:

json

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@_davideast/stitch-mcp", "proxy"],
      "env": {
        "STITCH_API_KEY": "${STITCH_API_KEY}"
      }
    }
  }
}

Using system gcloud:

json

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@_davideast/stitch-mcp", "proxy"],
      "env": {
        "STITCH_USE_SYSTEM_GCLOUD": "1"
      }
    }
  }
}

将以下内容添加到你的MCP客户端配置文件中（例如

claude_desktop_config.json

、

.cursor/config.json

）：

json

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@_davideast/stitch-mcp", "proxy"]
    }
  }
}

使用API密钥：

json

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@_davideast/stitch-mcp", "proxy"],
      "env": {
        "STITCH_API_KEY": "${STITCH_API_KEY}"
      }
    }
  }
}

使用系统gcloud：

json

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@_davideast/stitch-mcp", "proxy"],
      "env": {
        "STITCH_USE_SYSTEM_GCLOUD": "1"
      }
    }
  }
}

Virtual Tools for Agents

面向Agent的虚拟工具

The proxy exposes high-level tools that combine multiple API calls:

代理服务会暴露组合了多个API调用的高级工具：

build_site

build_site

Builds a site from a project by mapping screens to routes. Returns HTML for each page.

Input schema:

typescript

{
  projectId: string;      // Required
  routes: Array<{
    screenId: string;     // Required
    route: string;        // Required, e.g. "/" or "/about"
  }>;
}

Example usage from CLI:

bash

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.

通过将页面映射到路由，从项目构建站点。返回每个页面的HTML。

输入 schema：

typescript

{
  projectId: string;      // 必填
  routes: Array<{
    screenId: string;     // 必填
    route: string;        // 必填，例如 "/" 或 "/about"
  }>;
}

CLI示例用法：

bash

npx @_davideast/stitch-mcp tool build_site -d '{
  "projectId": "123456",
  "routes": [
    { "screenId": "abc123", "route": "/" },
    { "screenId": "def456", "route": "/about" },
    { "screenId": "ghi789", "route": "/contact" }
  ]
}'

给Agent的提示词：

使用build_site工具从我的Stitch项目123456创建网站。
将页面abc123映射到首页，def456映射到/about，ghi789映射到/contact。

get_screen_code

get_screen_code

Retrieves a screen and downloads its HTML code content.

bash

npx @_davideast/stitch-mcp tool get_screen_code -d '{
  "projectId": "123456",
  "screenId": "abc123"
}'

获取页面并下载其HTML代码内容。

bash

npx @_davideast/stitch-mcp tool get_screen_code -d '{
  "projectId": "123456",
  "screenId": "abc123"
}'

get_screen_image

get_screen_image

Retrieves a screen and downloads its screenshot image as base64.

bash

npx @_davideast/stitch-mcp tool get_screen_image -d '{
  "projectId": "123456",
  "screenId": "abc123"
}'

获取页面并下载其截图（base64格式）。

bash

npx @_davideast/stitch-mcp tool get_screen_image -d '{
  "projectId": "123456",
  "screenId": "abc123"
}'

Key Commands

核心命令

Exploration & Browsing

浏览与查看

View Projects

查看项目

bash

npx @_davideast/stitch-mcp view --projects

Opens an interactive browser listing all your Stitch projects.

bash

npx @_davideast/stitch-mcp view --projects

打开交互式浏览器，列出你所有的Stitch项目。

View Specific Project

查看指定项目

bash

npx @_davideast/stitch-mcp view --project <project-id>

Shows all screens in the project.

bash

npx @_davideast/stitch-mcp view --project <project-id>

显示项目中的所有页面。

View Specific Screen

查看指定页面

bash

npx @_davideast/stitch-mcp view --project <project-id> --screen <screen-id>

Interactive browser controls:

Arrow keys: navigate
Enter: drill into nested data
```
c
```
: copy selected value to clipboard
```
s
```
: preview HTML in browser
```
o
```
: open project in Stitch
```
q
```
: quit

bash

npx @_davideast/stitch-mcp view --project <project-id> --screen <screen-id>

交互式浏览器操作：

方向键：导航
回车键：查看嵌套数据
```
c
```
：将选中值复制到剪贴板
```
s
```
：在浏览器中预览HTML
```
o
```
：在Stitch中打开项目
```
q
```
：退出

Browse Screens in Terminal

在终端中浏览页面

bash

npx @_davideast/stitch-mcp screens -p <project-id>

Displays an interactive list of all screens with preview and copy actions.

bash

npx @_davideast/stitch-mcp screens -p <project-id>

显示所有页面的交互式列表，支持预览和复制操作。

Tool Invocation

工具调用

List All Available Tools

列出所有可用工具

bash

npx @_davideast/stitch-mcp tool

bash

npx @_davideast/stitch-mcp tool

Show Tool Schema

查看工具Schema

bash

npx @_davideast/stitch-mcp tool <tool-name> -s

Example:

bash

npx @_davideast/stitch-mcp tool build_site -s

bash

npx @_davideast/stitch-mcp tool <tool-name> -s

示例：

bash

npx @_davideast/stitch-mcp tool build_site -s

Invoke a Tool

调用工具

bash

npx @_davideast/stitch-mcp tool <tool-name> -d '<json-data>'

Example:

bash

npx @_davideast/stitch-mcp tool get_screen_code -d '{
  "projectId": "123456",
  "screenId": "abc123"
}'

bash

npx @_davideast/stitch-mcp tool <tool-name> -d '<json-data>'

示例：

bash

npx @_davideast/stitch-mcp tool get_screen_code -d '{
  "projectId": "123456",
  "screenId": "abc123"
}'

Development Workflow

开发工作流

Serve Project Locally

本地托管项目

bash

npx @_davideast/stitch-mcp serve -p <project-id>

Custom port:

bash

npx @_davideast/stitch-mcp serve -p <project-id> --port 3000

bash

npx @_davideast/stitch-mcp serve -p <project-id>

自定义端口：

bash

npx @_davideast/stitch-mcp serve -p <project-id> --port 3000

Generate Astro Site

生成Astro站点

bash

npx @_davideast/stitch-mcp site -p <project-id>

Non-interactive mode with config file:

Create

routes.json

json

{
  "routes": [
    { "screenId": "abc123", "route": "/" },
    { "screenId": "def456", "route": "/about" }
  ]
}

Then run:

bash

npx @_davideast/stitch-mcp site -p <project-id> --config routes.json -o ./output

bash

npx @_davideast/stitch-mcp site -p <project-id>

使用配置文件的非交互模式：

创建

routes.json

：

json

{
  "routes": [
    { "screenId": "abc123", "route": "/" },
    { "screenId": "def456", "route": "/about" }
  ]
}

然后运行：

bash

npx @_davideast/stitch-mcp site -p <project-id> --config routes.json -o ./output

Save Screen Snapshot

保存页面快照

bash

npx @_davideast/stitch-mcp snapshot -p <project-id> -s <screen-id> -o ./snapshot.html

bash

npx @_davideast/stitch-mcp snapshot -p <project-id> -s <screen-id> -o ./snapshot.html

MCP Proxy

MCP代理

Start the proxy server for agent integration:

bash

npx @_davideast/stitch-mcp proxy

Debug mode (logs to
/tmp/stitch-proxy-debug.log
):

bash

npx @_davideast/stitch-mcp proxy --debug

启动代理服务器以集成Agent：

bash

npx @_davideast/stitch-mcp proxy

调试模式（日志输出到
/tmp/stitch-proxy-debug.log
）：

bash

npx @_davideast/stitch-mcp proxy --debug

Environment Variables

环境变量

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

变量名	描述
`STITCH_API_KEY`	用于直接认证的API密钥（跳过OAuth）
`STITCH_ACCESS_TOKEN`	已有的访问令牌
`STITCH_USE_SYSTEM_GCLOUD`	使用系统gcloud配置而非独立配置
`STITCH_PROJECT_ID`	覆盖项目ID
`GOOGLE_CLOUD_PROJECT`	项目ID的替代变量
`STITCH_HOST`	自定义Stitch API端点

Common Patterns

常见使用模式

Pattern 1: Preview All Designs Before Building

模式1：构建前预览所有设计

bash

undefined

bash

undefined

1. Browse available screens

1. 浏览可用页面

npx @_davideast/stitch-mcp screens -p <project-id>

2. Serve locally to review designs

2. 本地托管以查看设计

npx @_davideast/stitch-mcp serve -p <project-id>

3. Build site after confirming screens

3. 确认页面后构建站点

npx @_davideast/stitch-mcp site -p <project-id>

undefined

npx @_davideast/stitch-mcp site -p <project-id>

undefined

Pattern 2: Agent-Driven Site Generation

模式2：Agent驱动的站点生成

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.

给Agent的用户提示词：

我有一个Stitch项目，ID为123456。它包含三个页面：
- 首页（页面ID：abc123）
- 关于页面（页面ID：def456）
- 联系页面（页面ID：ghi789）

使用build_site工具为这三个页面生成HTML，路由分别为/、/about和/contact。
然后帮我将它们集成到我的Next.js项目中。

Agent会使用

build_site

工具，并协助你集成生成的HTML。

Pattern 3: Iterative Design Review

模式3：迭代式设计评审

bash

undefined

bash

undefined

View specific screen details

查看指定页面的详细信息

npx @_davideast/stitch-mcp view --project <project-id> --screen <screen-id>

Preview in browser (press 's' in interactive view)

在浏览器中预览（在交互式视图中按's'键）

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

获取HTML代码用于集成

npx @_davideast/stitch-mcp tool get_screen_code -d '{ "projectId": "<project-id>", "screenId": "<screen-id>" }'

undefined

npx @_davideast/stitch-mcp tool get_screen_code -d '{ "projectId": "<project-id>", "screenId": "<screen-id>" }'

undefined

Pattern 4: Automated Site Builds in CI

模式4：CI中的自动化站点构建

bash

#!/bin/bash

bash

#!/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`:

```json
{
  "routes": [
    { "screenId": "home_abc", "route": "/" },
    { "screenId": "about_def", "route": "/about" },
    { "screenId": "contact_ghi", "route": "/contact" }
  ]
}

cd ./dist/stitch-site npm install npm run build


`stitch-routes.json`：

```json
{
  "routes": [
    { "screenId": "home_abc", "route": "/" },
    { "screenId": "about_def", "route": "/about" },
    { "screenId": "contact_ghi", "route": "/contact" }
  ]
}

Troubleshooting

故障排除

"Permission Denied" Errors

"权限拒绝"错误

Symptoms: API calls fail with 403 or permission errors.

Solutions:

Verify your GCP role (need Owner or Editor):

bash

gcloud projects get-iam-policy <PROJECT_ID> \
  --flatten="bindings[].members" \
  --filter="bindings.members:user:your-email@example.com"

Ensure billing is enabled:

bash

gcloud billing projects describe <PROJECT_ID>

Enable Stitch API:

bash

gcloud beta services mcp enable stitch.googleapis.com --project=<PROJECT_ID>

Run diagnostics:

bash

npx @_davideast/stitch-mcp doctor --verbose

症状： API调用返回403或权限错误。

解决方案：

验证你的GCP角色（需要Owner或Editor权限）：

bash

gcloud projects get-iam-policy <PROJECT_ID> \
  --flatten="bindings[].members" \
  --filter="bindings.members:user:your-email@example.com"

确保已启用计费：

bash

gcloud billing projects describe <PROJECT_ID>

启用Stitch API：

bash

gcloud beta services mcp enable stitch.googleapis.com --project=<PROJECT_ID>

运行诊断：

bash

npx @_davideast/stitch-mcp doctor --verbose

Authentication URL Not Appearing

认证URL未显示

Symptoms: No browser opens or URL not printed during

init

Solutions:

Look for URL in terminal output (5-second timeout)
Check for URLs starting with
```
https://accounts.google.com
```
In proxy debug mode, check
```
/tmp/stitch-proxy-debug.log
```

In remote environments (WSL/SSH/Docker), copy the URL manually:

bash

npx @_davideast/stitch-mcp init
# Copy the URL from terminal output and open in browser

症状：

init

过程中未打开浏览器或未打印URL。

解决方案：

在终端输出中查找URL（5秒超时）
查找以
```
https://accounts.google.com
```
开头的URL
在代理调试模式下，查看
```
/tmp/stitch-proxy-debug.log
```

在远程环境（WSL/SSH/Docker）中，手动复制URL：

bash

npx @_davideast/stitch-mcp init
# 从终端输出复制URL并在浏览器中打开

"Already Authenticated" Issues

"已认证"但命令失败

Symptoms: Shows as logged in but commands fail.

Cause: The bundled gcloud SDK has separate auth from system gcloud.

Solution:

bash

npx @_davideast/stitch-mcp logout --force --clear-config
npx @_davideast/stitch-mcp init

症状： 显示已登录但命令执行失败。

原因： 内置的gcloud SDK与系统gcloud的认证是独立的。

解决方案：

bash

npx @_davideast/stitch-mcp logout --force --clear-config
npx @_davideast/stitch-mcp init

API Connection Fails After Setup

配置后API连接失败

Solutions:

Run full diagnostics:

bash

npx @_davideast/stitch-mcp doctor --verbose

Re-authenticate:

bash

npx @_davideast/stitch-mcp logout --force
npx @_davideast/stitch-mcp init

Verify project and billing:

bash

gcloud config get-value project
gcloud billing projects describe $(gcloud config get-value project)

解决方案：

运行完整诊断：

bash

npx @_davideast/stitch-mcp doctor --verbose

重新认证：

bash

npx @_davideast/stitch-mcp logout --force
npx @_davideast/stitch-mcp init

验证项目和计费：

bash

gcloud config get-value project
gcloud billing projects describe $(gcloud config get-value project)

WSL / SSH / Docker Environments

WSL / SSH / Docker环境

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.

症状： 基于浏览器的认证无法自动工作。

解决方案： CLI会检测这些环境。从终端输出复制OAuth URL并手动在浏览器中打开。URL会清晰地打印到标准输出并附带说明。

MCP Proxy Not Responding

MCP代理无响应

Symptoms: Agent can't connect to Stitch tools.

Solutions:

Run proxy with debug logging:

bash

npx @_davideast/stitch-mcp proxy --debug

Check logs:
bash
```
tail -f /tmp/stitch-proxy-debug.log
```

Verify MCP client config syntax:

bash

cat ~/.config/claude/claude_desktop_config.json | jq .

Restart your MCP client (VS Code, Cursor, etc.)

症状： Agent无法连接到Stitch工具。

解决方案：

启用调试日志运行代理：

bash

npx @_davideast/stitch-mcp proxy --debug

查看日志：
bash
```
tail -f /tmp/stitch-proxy-debug.log
```

验证MCP客户端配置语法：

bash

cat ~/.config/claude/claude_desktop_config.json | jq .

重启你的MCP客户端（VS Code、Cursor等）

Tool Invocation Failures

工具调用失败

Symptoms:

tool

command returns errors or empty responses.

Solutions:

Check tool schema:

bash

npx @_davideast/stitch-mcp tool <tool-name> -s

Validate JSON data:
bash
```
echo '{"projectId":"123"}' | jq .
```

Test with simpler tool first:

bash

npx @_davideast/stitch-mcp tool list_projects

Ensure project and screen IDs are correct:
bash
```
npx @_davideast/stitch-mcp view --projects
```

症状：

tool

命令返回错误或空响应。

解决方案：

查看工具Schema：

bash

npx @_davideast/stitch-mcp tool <tool-name> -s

验证JSON数据：
bash
```
echo '{"projectId":"123"}' | jq .
```

先使用简单工具测试：

bash

npx @_davideast/stitch-mcp tool list_projects

确保项目和页面ID正确：

bash

npx @_davideast/stitch-mcp view --projects

Development & Testing

开发与测试

bash

undefined

bash

undefined

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

undefined

bun run verify-pack

undefined

Real-World Agent Prompts

实际场景中的Agent提示词

Example 1: Site Generation

示例1：站点生成

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.

我有一个Stitch项目（ID：456789），包含以下页面：
- 着陆页：screen_landing_001
- 功能页：screen_features_002
- 定价页：screen_pricing_003

请使用build_site工具生成站点，路由设置如下：
- 着陆页对应 /
- 功能页对应 /features
- 定价页对应 /pricing

然后告诉我如何将HTML集成到我现有的React项目中。

Example 2: Design Review

示例2：设计评审

Get the HTML code for screen abc123 from project 456789 using get_screen_code.
Then analyze the CSS and suggest improvements for mobile responsiveness.

使用get_screen_code工具获取项目456789中页面abc123的HTML代码。
然后分析CSS并提出移动端响应式的改进建议。

Example 3: Batch Export

示例3：批量导出

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.

针对项目456789，使用get_screen_image工具将所有页面的截图导出为base64格式。
将它们保存到design-assets/目录，用于我们的设计系统文档。

License

许可证

Disclaimer: This is an experimental, independent project not affiliated with Google LLC or the Stitch team. Use at your own risk.

免责声明： 这是一个实验性独立项目，与Google LLC或Stitch团队无关。请自行承担使用风险。