Omk Stitch

Trigger Examples

• "Pull my Stitch designs into code"
• "用 Stitch 做个落地页"
• "把这个截图的风格用到我的网站上"
• "Export design.md from my Stitch project"
• "Convert Stitch design to ShadCN components"

Google Stitch Integration Skill

Core Concept: design.md

Stitch's design system is captured in a design.md file — colors, fonts, themes, component styles. This file is:

• Agent-optimized — uses targeted language agents understand better than raw CSS
• Transferable — give it to Claude Code, Cursor, or any agent and they reproduce the style perfectly
• Auto-created — Stitch generates one for every project, even if you don't ask

Default workflow: Always start by establishing a design.md, then build pages on top of it.

MCP Server

Community package: davideast/stitch-mcp npm: @_davideast/stitch-mcp

Setup

Prerequisites

• Google Cloud CLI (gcloud) installed
• A GCP project with Stitch API enabled

Authentication (OAuth — API Key is NOT supported)

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

MCP Config

Add to your MCP client config (e.g. .kiro/settings/mcp.json):

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

CRITICAL: Must use proxy mode + STITCH_USE_SYSTEM_GCLOUD=1. Direct serverUrl mode is unstable.

Verify Setup

npx @_davideast/stitch-mcp doctor

If doctor times out on API test, verify directly:

ACCESS_TOKEN=$(gcloud auth application-default print-access-token)
curl -s -w "\nHTTP:%{http_code}" \
  -H "Authorization: Bearer $ACCESS_TOKEN" \
  -H "x-goog-user-project: <YOUR_PROJECT_ID>" \
  "https://stitch.googleapis.com/v1/projects"

MCP Tools

CLI Tools (non-MCP)

npx @_davideast/stitch-mcp view --projects          # Browse projects
npx @_davideast/stitch-mcp serve -p <project-id>    # Local preview
npx @_davideast/stitch-mcp site -p <project-id>     # Generate Astro site

Workflows

Path A: Design from Scratch (Default)

1. Establish design system — Create or provide a design.md in Stitch (auto-created if not specified)
2. Generate screens — Prompt Stitch with your requirements; it builds on the design system
3. Pull to local — get_screen_code → HTML/CSS, get_screen_image → screenshot
4. Implement — Convert to target framework (Next.js/Astro/React)
5. Verify — Visual comparison (see Phase: Verification below)

Path B: Redesign from Reference

Use when you have an existing site/screenshot whose style you want to adopt (not copy):

1. Capture reference — Full-page screenshot of the site you like (use GoFullPage or similar)
2. Redesign in Stitch — Upload screenshot; Stitch extracts design language, component patterns, and layout — then applies them to YOUR content
3. Alternative: Import via URL — In Stitch's design system panel, import from any website URL. Stitch crawls it and extracts typography + colors as a design.md
4. Refine — Upload wireframes or annotate specific sections to adjust

Path C: Agent-Integrated Build (Claude Code + Stitch)

For autonomous end-to-end builds using Google's official Stitch skills:

1. Enhanced Prompt — Converts vague user prompts into Stitch-optimized prompts (Stitch relies on adjectives for mood, not exact descriptions)
2. Stitch Loop — Autonomous build loop using Chrome DevTools, maintains prompt tracking across stages
3. React Components — Converts Stitch's monolithic HTML export into modular React components with validation

Workflow order in claude.md:

Enhanced Prompt → Stitch Loop → React Component conversion

Requires Stitch MCP connected. See Google's Stitch skills repo for installation.

Path D: ShadCN UI Conversion

Bare React/HTML from Stitch lacks interactions. Use ShadCN for production-quality components:

1. Connect ShadCN MCP
2. Use Google's ShadCN UI skill to convert Stitch designs into ShadCN components
3. Extend with registries (e.g. glassmorphism, motion-primitives) for premium feel
4. Specify registries in claude.md so conversion is automatic

Phase: Verification (inspired by gstack design-review)

After implementation, run a multi-layer verification. The goal: catch what human eyes miss.