### Install the @google/design.md CLI

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Install the CLI globally to use its features. Alternatively, you can run commands directly using npx without a global installation.

```bash
npm install @google/design.md
```

```bash
npx @google/design.md lint DESIGN.md
```

--------------------------------

### Install Google Cloud SDK (Homebrew)

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Install the Google Cloud SDK using the Homebrew package manager.

```bash
brew install --cask google-cloud-sdk
```

--------------------------------

### Overview Section Example

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Example of an 'Overview' section in a DESIGN.md file, defining the brand personality and UI goals.

```markdown
## Overview
A calm, professional interface for a healthcare scheduling platform.
Accessibility-first design with high contrast and generous touch targets.
```

--------------------------------

### Install Google Cloud SDK (Standalone)

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Download and install the Google Cloud SDK using curl and bash. Ensure the shell is reloaded to apply changes.

```bash
# Download and install (simplified for standard environments)
curl https://sdk.cloud.google.com | bash
exec -l $SHELL

# Set local configuration to avoid prompts
export CLOUDSDK_CORE_DISABLE_PROMPTS=1
```

--------------------------------

### Install Code Generation Skills for Stitch

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Installs Stitch skills for generating React components and shadcn-ui elements.

```bash
# Code generation (Stitch to React)
npx skills add google-labs-code/stitch-skills \
  --skills react:components,shadcn-ui
```

--------------------------------

### Install Stitch SDK and AI Packages

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Install the necessary packages for using Stitch SDK with AI SDKs. This includes the Stitch SDK, the AI SDK, and the specific AI provider package.

```bash
npm install @google/stitch-sdk ai @ai-sdk/google
```

--------------------------------

### Install a Specific Stitch Skill

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Installs a single Stitch skill, such as 'generate-design'. Use this if you only need a specific skill and understand its dependencies.

```bash
npx skills add google-labs-code/stitch-skills --skills stitch::generate-design
```

--------------------------------

### Minimal DESIGN.md Example

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

A basic DESIGN.md file for a dark-themed productivity app, demonstrating YAML front matter for design tokens and a markdown body for design rationale.

```markdown
---
name: DevFocus Dark
colors:
  primary: "#2665fd"
  secondary: "#475569"
  surface: "#0b1326"
  on-surface: "#dae2fd"
  error: "#ffb4ab"
typography:
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
rounded:
  md: 8px
---

# Design System

## Overview
A focused, minimal dark interface for a developer productivity tool.
Clean lines, low visual noise, high information density.

## Colors
- **Primary** (#2665fd): CTAs, active states, key interactive elements
- **Secondary** (#475569): Supporting UI, chips, secondary actions
- **Surface** (#0b1326): Page backgrounds
- **On-surface** (#dae2fd): Primary text on dark backgrounds
- **Error** (#ffb4ab): Validation errors, destructive actions

## Typography
- **Headlines**: Inter, semi-bold
- **Body**: Inter, regular, 14–16px
- **Labels**: Inter, medium, 12px, uppercase for section headers

## Components
- **Buttons**: Rounded (8px), primary uses brand blue fill
- **Inputs**: 1px border, subtle surface-variant background
- **Cards**: No elevation, relies on border and background contrast

## Do's and Don'ts
- Do use the primary color sparingly, only for the most important action
- Don't mix rounded and sharp corners in the same view
- Do maintain 4:1 contrast ratio for all text

```

--------------------------------

### Install Import Code Skills for Stitch

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Installs Stitch skills for migrating existing code into the Stitch ecosystem, including design extraction.

```bash
# Import existing code (full migration pipeline)
npx skills add google-labs-code/stitch-skills \
  --skills stitch::code-to-design,stitch::extract-design-md,stitch::extract-static-html,stitch::upload-to-stitch
```

--------------------------------

### Linter Finding Example: Missing Primary Color

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

This example shows a warning finding when colors are defined but no token named 'primary' exists. This can lead to agents auto-generating colors, reducing design control.

```text
warning  colors  No 'primary' color defined. The agent will auto-generate key colors, reducing your control over the palette.
```

--------------------------------

### Token Reference Example

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Demonstrates how to reference other tokens within a YAML structure. References are enclosed in curly braces and specify a path to another value.

```yaml
components:
  button-primary:
    backgroundColor: "{colors.primary-60}"
    textColor: "{colors.primary-20}"
    rounded: "{rounded.md}"
```

--------------------------------

### Install Stitch Design Skills for Cursor

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Installs the Stitch Design Skills suite specifically targeting the Cursor agent.

```bash
npx plugins add google-labs-code/stitch-skills --scope project --target cursor
```

--------------------------------

### Install Stitch SDK with npm

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Use npm to install the Stitch SDK package. This is the standard way to add the SDK to your Node.js project.

```bash
npm install @google/stitch-sdk
```

--------------------------------

### Linter Finding Example: Contrast Ratio

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

This example shows a warning finding for insufficient WCAG contrast ratio between text and background colors. It indicates that the color pair falls below the AA minimum of 4.5:1.

```text
warning  components.card-dark  textColor (#999999) on backgroundColor (#333333) has contrast ratio 3.48:1, below WCAG AA minimum of 4.5:1.
```

--------------------------------

### Install Gemini CLI Stitch Extension

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Install the Stitch extension for the Gemini CLI to enable integration with Stitch projects.

```bash
gemini extensions install https://github.com/gemini-cli-extensions/stitch
```

--------------------------------

### Install Stitch Design Skills for Antigravity

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Installs the Stitch Design Skills suite specifically targeting the Antigravity agent.

```bash
npx plugins add google-labs-code/stitch-skills --scope project --target antigravity
```

--------------------------------

### Install Design Skills for Stitch

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Installs Stitch skills focused on design generation and management, including prompt enhancement.

```bash
# Design only (generate and edit screens)
npx skills add google-labs-code/stitch-skills \
  --skills stitch::generate-design,stitch::manage-design-system,enhance-prompt
```

--------------------------------

### Install Stitch SDK with Bun

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Use Bun to add the Stitch SDK to your project. Bun offers an alternative package management system for Node.js environments.

```bash
bun add @google/stitch-sdk
```

--------------------------------

### Install React Component Skill

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Installs the 'react:components' agent skill globally for use with coding agents. This skill enables the agent to understand how to generate React component systems from Stitch MCP projects.

```bash
npx add-skill google-labs-code/stitch-skills --skill react:components --global
```

--------------------------------

### Install Stitch Design Skills for Gemini CLI

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Installs the Stitch Design Skills suite specifically targeting the Gemini CLI agent.

```bash
npx plugins add google-labs-code/stitch-skills --scope project --target gemini-cli
```

--------------------------------

### Get Project Input Schema

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Schema for retrieving project details. Requires the project resource name.

```json
{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "Required. Resource name. Format: `projects/{project}`. Example: `projects/4044680601076201931`"
    }
  },
  "required": ["name"]
}
```

--------------------------------

### Linter Finding Example: Orphaned Token

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

This example shows a warning finding for a color token that is defined but not referenced by any component. Orphaned tokens can clutter the design system.

```text
warning  colors.tertiary  'tertiary' is defined but never referenced by any component.
```

--------------------------------

### Colors Section Example

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Example of a 'Colors' section, defining the primary and secondary color palettes with their hex codes and semantic roles.

```markdown
## Colors

The palette is rooted in high-contrast neutrals and a single accent color.

- **Primary (#1A1C1E):** Deep ink for headlines and core text.
- **Secondary (#6C7278):** Sophisticated slate for borders, captions, metadata.
- **Tertiary (#B8422E):** The sole driver for interaction.
- **Neutral (#F7F5F2):** Warm limestone foundation.
```

--------------------------------

### Install Stitch Design Skills Plugin

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Installs the Stitch Design Skills plugin suite for your coding agent. Replace `claude-code` with your specific agent (e.g., `cursor`, `gemini-cli`, `antigravity`).

```bash
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code
```

--------------------------------

### DESIGN.md YAML Front Matter Example

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

This YAML front matter block within a `DESIGN.md` file defines machine-readable design tokens for colors, typography, spacing, and components. It serves as the precise values for agents to enforce consistency.

```yaml
---
version: alpha
name: Daylight Prestige
colors:
  primary: "#1A1C1E"
  secondary: "#6C7278"
  tertiary: "#B8422E"
typography:
  h1:
    fontFamily: Public Sans
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.02em
rounded:
  sm: 4px
  md: 8px
spacing:
  sm: 8px
  md: 16px
components:
  button-primary:
    backgroundColor: "{colors.primary-60}"
    textColor: "{colors.primary-20}"
    rounded: "{rounded.md}"
    padding: 12px
---
```

--------------------------------

### Get Screen Input Schema

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Schema for retrieving screen details. Requires resource name and deprecated project/screen IDs.

```json
{
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "Required. Resource name. Format: `projects/{project}/screens/{screen}`"
    },
    "projectId": {
      "type": "string",
      "description": "Required (deprecated). Project ID without prefix."
    },
    "screenId": {
      "type": "string",
      "description": "Required (deprecated). Screen ID without prefix."
    }
  },
  "required": ["name", "projectId", "screenId"]
}
```

--------------------------------

### Get Download URLs for Screen Artifacts

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Retrieve the URLs for downloading the HTML and image artifacts of a screen. This is the first step before saving them to disk.

```javascript
import { stitch } from "@google/stitch-sdk";

const projects = await stitch.projects();
const screens = await projects.at(0).screens();
const screen = screens.at(0);

const htmlUrl = await screen.getHtml();
const imageUrl = await screen.getImage();
```

--------------------------------

### Linter Finding Example: Broken Reference

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

This example shows an error finding from the linter, indicating a token reference that does not resolve to any defined token in the YAML front matter. This rule flags issues with token paths and unknown component sub-token properties.

```text
error  components.button-primary  Reference {colors.accent} does not resolve to any defined token.
```

--------------------------------

### Create Project, Generate Screens, and Apply Design System

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Demonstrates the end-to-end process of creating a Stitch project, generating screens based on descriptions, creating a design system, and applying it to the generated screens.

```typescript
import { stitch } from "@google/stitch-sdk";

const project = await stitch.createProject("Themed App");

// Generate a few screens
const home = await project.generate("A landing page for a productivity app");
const settings = await project.generate("A settings page with dark theme toggle");

// Create and apply a design system
const ds = await project.createDesignSystem({ displayName: "Productivity Theme" });

// Get screen instances for applying
const projectData = await stitch.callTool("get_project", {
  name: `projects/${project.id}`,
});

const instances = projectData.screenInstances.map((si: any) => ({
  id: si.id,
  sourceScreen: si.sourceScreen,
}));

await ds.apply(instances);
console.log("Design system applied to all screens");
```

--------------------------------

### Configure Google Cloud Project and Enable Stitch API

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Set the active Google Cloud project, enable the Stitch API, and grant the Service Usage Consumer role to the user.

```bash
# Replace [YOUR_PROJECT_ID] with your actual Google Cloud Project ID
PROJECT_ID="[YOUR_PROJECT_ID]"

gcloud config set project "$PROJECT_ID"

# Enable the Stitch API
gcloud beta services mcp enable stitch.googleapis.com --project="$PROJECT_ID"

# Grant Service Usage Consumer role
USER_EMAIL=$(gcloud config get-value account)
gcloud projects add-iam-policy-binding "$PROJECT_ID" \
    --member="user:$USER_EMAIL" \
    --role="roles/serviceusage.serviceUsageConsumer" \
    --condition=None
```

--------------------------------

### Initialize Stitch SDK

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Instantiate the Stitch SDK using a StitchToolClient. The StitchToolClient requires an API key, and the Stitch class manages projects.

```javascript
import { Stitch, StitchToolClient } from "@google/stitch-sdk";

const client = new StitchToolClient({ apiKey: "..." });
const s = new Stitch(client);
```

--------------------------------

### Typography Section Example

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Example of a 'Typography' section, defining different text styles with their semantic roles and font properties.

```markdown
## Typography

- **Headlines:** Public Sans Semi-Bold for an institutional voice.
- **Body:** Public Sans Regular at 16px for long-form readability.
- **Labels:** Space Grotesk for technical data and metadata.
```

--------------------------------

### Do's and Don'ts for Design

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Offers practical guidelines and common pitfalls for design implementation. Emphasizes using primary colors sparingly and maintaining contrast ratios.

```markdown
## Do's and Don'ts

- Do use the primary color only for the single most important action per screen
- Don't mix rounded and sharp corners in the same view
- Do maintain WCAG AA contrast ratios (4.5:1 for normal text)
- Don't use more than two font weights on a single screen
```

--------------------------------

### Import stitch Singleton

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Import the default entry point for the Stitch SDK. This singleton is a lazily-initialized Proxy that combines domain and infrastructure methods. It reads API key and host from environment variables on first access.

```javascript
import { stitch } from "@google/stitch-sdk";
```

--------------------------------

### stitch (Singleton)

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

The default entry point for the Stitch SDK. It's a lazily-initialized Proxy that combines domain and infrastructure methods. It reads API key and host from environment variables.

```APIDOC
## stitch (Singleton)

### Description
The default entry point. A lazily-initialized `Proxy` that combines `Stitch` domain methods and `StitchToolClient` infrastructure methods. Reads `STITCH_API_KEY` and `STITCH_HOST` from environment variables on first access.

```javascript
import { stitch } from "@google/stitch-sdk";
```

### Domain methods

| Method | Returns | Description |
| --- | --- | --- |
| createProject(title) | Promise<Project> | Creates a new project. |
| projects() | Promise<Project[]> | Lists all projects accessible to the authenticated user. |
| project(id) | Project | Creates a Project handle from an existing project ID or resource name. No API call. |

### Infrastructure methods

| Method | Returns | Description |
| --- | --- | --- |
| listTools() | Promise<{ tools: ToolDefinition[] }> | Lists all available MCP tools. |
| callTool<T>(name, params) | Promise<T> | Calls a raw MCP tool by name. |
| close() | Promise<void> | Closes the underlying MCP client connection. |
```

--------------------------------

### Run Stitch build cycle

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

This prompt instructs the system to read the next baton file and execute the Stitch build cycle, which includes generating the screen, downloading assets, and updating site files.

```prompt
Read .stitch/next-prompt.md and execute the stitch-loop build cycle.
```

--------------------------------

### List Screens Input Schema

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Schema for listing screens within a project. Requires the project ID.

```json
{
  "type": "object",
  "properties": {
    "projectId": {
      "type": "string",
      "description": "Required. Project ID (e.g., '4044680601076201931'), without `projects/` prefix."
    }
  },
  "required": ["projectId"]
}
```

--------------------------------

### Discover tools at runtime with listTools()

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Call `listTools()` to retrieve the full catalog of available tools and their JSON Schemas. This allows an agent to understand the arguments required for each tool.

```javascript
const { tools } = await stitch.listTools();
const createTool = tools.find(t => t.name === "create_project");
console.log(JSON.stringify(createTool.inputSchema, null, 2));
```

--------------------------------

### create_design_system

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Creates a new design system for a project, establishing foundational design tokens.

```APIDOC
## POST /create_design_system

### Description
Creates a new design system for a specified project. This establishes foundational design tokens such as colors, typography, shapes, and appearance that will apply across all screens within the project.

### Method
POST

### Endpoint
/create_design_system

### Parameters
#### Request Body
- **projectId** (string) - Required - The ID of the project for which to create the design system.

### Response
#### Success Response (200)
- **designSystem** (object) - Details of the newly created design system.
```

--------------------------------

### Add progress indicator

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Configures the `remotion` skill to add a progress bar at the top of the video, indicating the user's current position within the walkthrough.

```prompt
Add a thin progress bar at the top showing the current position in the walkthrough.
```

--------------------------------

### Extract design system from existing codebase

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Use this prompt to extract an existing design system from a specified directory into the .stitch/DESIGN.md file.

```prompt
Extract the design system from ./existing-site/src into .stitch/DESIGN.md
```

--------------------------------

### Find a screen to edit

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Retrieve an existing screen from a project to prepare for editing. This involves fetching projects, selecting a project, and then retrieving its screens.

```javascript
import { stitch } from "@google/stitch-sdk";

const projects = await stitch.projects();
const project = projects.at(0);
const screens = await project.screens();
const screen = screens.at(0);

console.log(`Editing screen ${screen.id} in project ${project.id}`);
```

--------------------------------

### Batch Download All Screens in a Project

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Download all HTML and image artifacts for every screen within a project to a specified output directory. This automates the process of saving generated designs.

```javascript
import fs from "fs/promises";
import path from "path";

const outDir = "./designs";
await fs.mkdir(outDir, { recursive: true });

const project = (await stitch.projects()).at(0);
const screens = await project.screens();

for (const screen of screens) {
  const htmlUrl = await screen.getHtml();
  if (htmlUrl) {
    const res = await fetch(htmlUrl);
    await fs.writeFile(path.join(outDir, `${screen.id}.html`), await res.text());
  }

  const imgUrl = await screen.getImage();
  if (imgUrl) {
    const res = await fetch(imgUrl);
    await fs.writeFile(path.join(outDir, `${screen.id}.jpeg`), Buffer.from(await res.arrayBuffer()));
  }
}

console.log(`Downloaded ${screens.length} screens to ${outDir}`);
```

--------------------------------

### generate_screen_from_text

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Generates a new screen from a text prompt. This process normally takes a few minutes. Avoid retrying even when you encounter connection errors. Connection errors don’t necessarily mean failure, try using `get_screen` after a few minutes. If `output_components` contains suggestions, present them to the user. If accepted, call again with the suggestion as the new `prompt`. This is a destructive operation.

```APIDOC
## generate_screen_from_text

### Description
Generates a new screen from a text prompt. This process normally takes a few minutes. Avoid retrying even when you encounter connection errors. Connection errors don’t necessarily mean failure, try using `get_screen` after a few minutes. If `output_components` contains suggestions, present them to the user. If accepted, call again with the suggestion as the new `prompt`.

### Method
POST (assumed, based on destructive annotation and typical REST patterns)

### Endpoint
`/screens:generate` (inferred)

### Parameters
#### Request Body
- **projectId** (string) - Required - Project ID without prefix.
- **prompt** (string) - Required - Text prompt describing the screen to generate.
- **deviceType** (string) - Optional - Enum: `DEVICE_TYPE_UNSPECIFIED`, `MOBILE`, `DESKTOP`, `TABLET`, `AGNOSTIC`.
- **modelId** (string) - Optional - Enum: `MODEL_ID_UNSPECIFIED`, `GEMINI_3_PRO` (deprecated), `GEMINI_3_FLASH`, `GEMINI_3_1_PRO`.

### Request Example
```json
{
  "projectId": "your_project_id",
  "prompt": "A login screen for a mobile app",
  "deviceType": "MOBILE",
  "modelId": "GEMINI_3_1_PRO"
}
```

### Response
#### Success Response (200)
- Returns a `Screen` object. If `output_components` contains suggestions, present them to the user. If accepted, call again with the suggestion as the new `prompt`.

### Example Prompts
PROMPT
Create a new Stitch project called ‘Marketing Site’ Start a new design project Set up a new project for my app
```

--------------------------------

### List Projects Input Schema

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Schema for listing projects. Supports filtering by ownership.

```json
{
  "type": "object",
  "properties": {
    "filter": {
      "type": "string",
      "description": "Optional. AIP-160 filter on `view` field. Supported: `view=owned` (default), `view=shared`."
    }
  },
  "required": []
}
```

--------------------------------

### Run Script with Bun

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Execute the TypeScript script using Bun. Bun can directly run TypeScript files, providing a fast execution environment.

```bash
bun my-first-design.ts
```

--------------------------------

### Generate First Design with Stitch SDK

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

A TypeScript script demonstrating how to create a project, generate a UI screen from a text prompt, and retrieve URLs for the HTML and image outputs.

```typescript
import { stitch } from "@google/stitch-sdk";

// 1. Create a project
const project = await stitch.createProject("My First App");
console.log(`Project created: ${project.id}`);

// 2. Generate a screen
const screen = await project.generate("A simple login page with email and password fields");
console.log(`Screen generated: ${screen.id}`);

// 3. Get your outputs
const htmlUrl = await screen.getHtml();
const imageUrl = await screen.getImage();

console.log(`HTML:  ${htmlUrl}`);
console.log(`Image: ${imageUrl}`);

```

--------------------------------

### Mix domain and tool APIs

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Use `callTool` for creation-style operations and then switch to the domain API for subsequent actions. This pattern allows bridging raw tool results with a fluent domain API.

```javascript
// Create via callTool (agent-style)
const raw = await stitch.callTool("create_project", { title: "Hybrid Flow" });

// Switch to domain API (human-style)
const project = stitch.project(raw.name);
const screen = await project.generate("A settings page");
const html = await screen.getHtml();
```

--------------------------------

### Generate video with slide transitions

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Configures the `remotion` skill to use directional slide transitions (e.g., from left to right) to illustrate sequential user flows.

```prompt
Use slide transitions from left to right to show the user journey.
```

--------------------------------

### List Stitch Projects

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Use this prompt to list your existing Stitch projects. Ensure the MCP server is running and your API key is valid if you encounter errors.

```text
List my Stitch projects.
```

--------------------------------

### SelectedScreenInstance Schema

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Defines a screen instance for updates, requiring its ID and source screen resource name.

```json
{
  "type": "object",
  "properties": {
    "id": {
      "type": "string",
      "description": "Required. The screen instance ID (NOT the source screen ID). Available from `get_project`."
    },
    "sourceScreen": {
      "type": "string",
      "description": "Required. Resource name. Format: `projects/{project}/screens/{screen}`"
    }
  },
  "required": ["id", "sourceScreen"]
}
```

--------------------------------

### List screens and download screenshots

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Fetches screen metadata from a Stitch project, downloads screenshots, and generates a manifest file. Requires a project ID and access to the Stitch MCP server.

```prompt
List all screens in Stitch project projects/123456 and download their screenshots.
```

--------------------------------

### Generate video with fade transitions

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Configures the `remotion` skill to use default cross-fade transitions between all screens with a specified frame overlap. Best for calm, professional presentations.

```prompt
Use fade transitions between all screens with 15 frames overlap.
```

--------------------------------

### Generate video with zoom effects

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Configures the `remotion` skill to add spring-animated zoom effects to emphasize specific features or moments before transitioning to another screen.

```prompt
Add a zoom-in effect on the hero section of the home screen before transitioning to the features page.
```

--------------------------------

### Generate Access Token and Save to .env

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Generate an access token using gcloud and save it along with the project ID to a .env file. This action overwrites any existing .env file.

```bash
# Print the token
TOKEN=$(gcloud auth application-default print-access-token)

# Note: This overwrites any existing .env file
echo "GOOGLE_CLOUD_PROJECT=$PROJECT_ID" > .env
echo "STITCH_ACCESS_TOKEN=$TOKEN" >> .env

echo "Secrets generated in .env"
```

--------------------------------

### Apply Design System to Screens

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Applies a design system to a list of screen instances, re-rendering them with the new visual tokens. Ensure screen instance objects only contain 'id' and 'sourceScreen' properties.

```javascript
const projectData = await stitch.callTool("get_project", {
  name: `projects/${project.id}`,
});

// Extract screen instances
const instances = projectData.screenInstances.map((si: any) => ({
  id: si.id,
  sourceScreen: si.sourceScreen,
}));

// Apply the design system to all screens
const screens = await ds.apply(instances);
console.log(`Applied to ${screens.length} screens`);
```

--------------------------------

### Extract Design System from Source

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

This skill scans source files to reverse-engineer a design system document, identifying colors, typography, spacing, and component patterns. No build step is required.

```text
Extract the design system from ./my-app/src and write it to .stitch/DESIGN.md
```

--------------------------------

### List Existing Design Systems

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Retrieves a list of all existing design systems associated with a project. It logs the ID and display name of each system.

```javascript
const systems = await project.listDesignSystems();
for (const ds of systems) {
  console.log(`${ds.id}: ${ds.data?.displayName}`);
}
```

--------------------------------

### Generate DESIGN.md for a brand

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Use this prompt to generate a design system file (DESIGN.md) for a brand, specifying visual attributes like tones, typography, and whitespace.

```prompt
Generate a DESIGN.md for an artisanal coffee brand using the taste-design skill. Warm tones, editorial typography, generous whitespace.
```

--------------------------------

### Extract Design System from Source Code

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Use the `extract-design-md` skill to scan your source tree and generate a `DESIGN.md` file. This skill automatically detects your stack and extracts visual atmosphere, color palette, typography, component styles, and layout principles.

```shell
PROMPT

Extract the design system from ./src and write it to .stitch/DESIGN.md
```

--------------------------------

### Instantiate a custom StitchToolClient

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Create a `StitchToolClient` instance directly for scenarios requiring OAuth credentials or connection to a different Stitch environment. This client allows direct interaction with Stitch services.

```javascript
import { StitchToolClient } from "@google/stitch-sdk";

const client = new StitchToolClient({
  accessToken: process.env.STITCH_ACCESS_TOKEN,
  projectId: process.env.GOOGLE_CLOUD_PROJECT,
});

await client.connect();
const tools = await client.listTools();
console.log(`${tools.tools.length} tools available`);

await client.close();
```

--------------------------------

### Upload Design.md to Stitch

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Upload your generated `DESIGN.md` file to Stitch to establish a project-level design system. All future screens will automatically inherit these tokens.

```shell
PROMPT

Upload .stitch/DESIGN.md to Stitch and create a design system from it.
```

--------------------------------

### Full Code-to-Design Pipeline with Orchestrator

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Utilize the `code-to-design` skill for a complete import process, including extracting static HTML, reverse-engineering the design system from source, and uploading everything to Stitch in one pass.

```shell
PROMPT

Upload the frontend at ./my-app into a Stitch project called “My App Migration”.
```

--------------------------------

### Configure Cursor for Stitch MCP

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Set up the .cursor/mcp.json file to connect Cursor to the Stitch MCP server using an API key.

```json
{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}
```

--------------------------------

### Generate Screen from Text Input Schema

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Schema for generating a screen from text. Supports device type and model selection.

```json
{
  "type": "object",
  "properties": {
    "projectId": {
      "type": "string",
      "description": "Required. Project ID without prefix."
    },
    "prompt": {
      "type": "string",
      "description": "Required. Text prompt describing the screen to generate."
    },
    "deviceType": {
      "type": "string",
      "enum": ["DEVICE_TYPE_UNSPECIFIED", "MOBILE", "DESKTOP", "TABLET", "AGNOSTIC"]
    },
    "modelId": {
      "type": "string",
      "enum": ["MODEL_ID_UNSPECIFIED", "GEMINI_3_PRO", "GEMINI_3_FLASH", "GEMINI_3_1_PRO"]
    }
  },
  "required": ["projectId", "prompt"]
}
```

--------------------------------

### list_design_systems

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Lists all design systems for a given project or global design systems if no project ID is specified.

```APIDOC
## GET /list_design_systems

### Description
Lists all design systems for a project (or global design systems if no `projectId`).

### Method
GET

### Endpoint
/list_design_systems

### Parameters
#### Query Parameters
- **projectId** (string) - Optional - Project ID. If empty, lists global design systems.

### Response
#### Success Response (200)
- **Array of Assets** - An array of `Asset` objects containing design systems.
```

--------------------------------

### Define Site Vision and Sitemap

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Defines the overall vision, sitemap, and roadmap for a website within a `.stitch/SITE.md` file. This serves as the blueprint for the `stitch-loop` skill.

```markdown
# Site: Artisan Coffee Co.

## Vision
A 5-page portfolio website for a specialty coffee roaster.

## Sitemap
- [ ] index — Landing page with hero and featured blends
- [ ] about — Origin story and roasting philosophy
- [ ] menu — Coffee menu with categories and pricing
- [ ] locations — Store locations with map
- [ ] contact — Contact form and hours
```

--------------------------------

### create_design_system

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Creates a new design system. It can be associated with a project or created as a global asset.

```APIDOC
## POST /create_design_system

### Description
Creates a new design system. It can be associated with a project or created as a global asset.

### Method
POST

### Endpoint
/create_design_system

### Parameters
#### Request Body
- **designSystem** (DesignSystem) - Required - The design system to create.
- **projectId** (string) - Optional - Project ID. If empty, creates a global (unassociated) asset.

### Request Example
```json
{
  "designSystem": {
    "displayName": "My Design System",
    "theme": {
      "colorMode": "LIGHT",
      "headlineFont": "INTER",
      "bodyFont": "DM_SANS",
      "roundness": "ROUND_EIGHT",
      "customColor": "#FF0000"
    }
  }
}
```

### Response
#### Success Response (200)
- **Asset** - The created design system asset.
```

--------------------------------

### Access static tool definitions

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Iterate through the generated `toolDefinitions` array, which contains schemas baked in at build time. This is useful for understanding available tools and their input properties.

```javascript
import { toolDefinitions } from "@google/stitch-sdk/tool-definitions"; // internal

for (const tool of toolDefinitions) {
  console.log(tool.name, Object.keys(tool.inputSchema.properties));
}
```

--------------------------------

### Save Screen Screenshot Image to Disk

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Fetch the image content from a download URL as binary data and save it to a local file. Use arrayBuffer() for image data.

```javascript
const imgResponse = await fetch(imageUrl);
const buffer = await imgResponse.arrayBuffer();
await fs.writeFile(`${screen.id}.jpeg`, Buffer.from(buffer));
```

--------------------------------

### Screen Download Methods

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Methods to retrieve download URLs for the HTML and image representations of a screen. These methods utilize cached URLs if available.

```APIDOC
## getHtml

### Description
Returns the download URL for the HTML version of the screen. If a URL has been previously generated and cached, it will be returned directly.

### Parameters
- None

### Returns
Promise<string> - A promise that resolves to the HTML download URL.
```

```APIDOC
## getImage

### Description
Returns the download URL for the screenshot of the screen. If a URL has been previously generated and cached, it will be returned directly.

### Parameters
- None

### Returns
Promise<string> - A promise that resolves to the screenshot download URL.
```

--------------------------------

### Create Design System Input Schema

Source: https://michaeljeisner.github.io/stitch-docs-llms/llms-full.txt

Defines the structure for creating a new design system, including its display name and theme configuration. The projectId is optional for global assets.

```json
{
  "type": "object",
  "properties": {
    "designSystem": {
      "$ref": "#/$defs/DesignSystem",
      "description": "Required. The design system to create."
    },
    "projectId": {
      "type": "string",
      "description": "Optional. Project ID. If empty, creates a global (unassociated) asset."
    }
  },
  "required": ["designSystem"]
}
```