Skill

stitch-mcp-get-screen

Retrieves HTML download URL, screenshot URL, dimensions, and Figma export for a Stitch screen using projectId and screenId. Prerequisite for converting designs to Next.js, Svelte, HTML, React Native, or SwiftUI.

Figma

Html

Bash

design

npx claudepluginhub gabelul/stitch-kit --plugin stitch-kit

Tool Access

This skill is limited to using the following tools:

stitch*:*BashReadWrite

Preview

Retrieves the full output of a Stitch-generated screen: the HTML source code URL and the screenshot image URL. This is the gateway between Stitch design and framework conversion.

Supporting Assets

scripts/fetch-stitch.sh

SKILL.md

Similar Skills

stitch-mcp-get-screen

328

Retrieves full details of a Stitch screen including HTML code, high-res screenshot URL, metadata, and Figma export. Use to export code, analyze HTML structure, or feed into framework conversion skills. Requires projectId and screenId.

2 files3 tools

partme-ai-full-stack-skills

stitch-orchestrator

Orchestrates Stitch UI design workflows from user requests to design specs, screen generation, iterations, design systems, and code exports to Next.js, Svelte, HTML, React Native, or SwiftUI. Activates explicitly on 'Stitch' mentions.

1 file4 tools

stitch-kit

stitchflow

Generates Stitch UI screens, design variants, Tailwind-friendly HTML, and screenshots from briefs, mockups, or product context. Use for new screen exploration, edits, visual comparisons, or local artifact exports.

6 files

stitchflow

Stats

Stars22

Forks3

Last CommitFeb 18, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

Stitch MCP — Get Screen

Retrieves the full output of a Stitch-generated screen: the HTML source code URL and the screenshot image URL. This is the gateway between Stitch design and framework conversion.

Critical prerequisite

Only use this skill when the user explicitly mentions "Stitch".

If you already have both projectId AND screenId, call this directly — do not call get_project first.

When to use

After list_screens has returned a screenId
User provides a Stitch screen URL and wants to convert it to code
Retrieving assets for any conversion skill: Next.js, Svelte, HTML, React Native, or SwiftUI

Step 1: Parse IDs from context

The user may provide the screen reference in different formats:

Input format	→ projectId	→ screenId
`projects/123/screens/456`	`123`	`456`
`https://stitch.withgoogle.com/projects/123?node-id=456`	`123`	`456`
Separate numeric IDs already known	Use as-is	Use as-is

Step 2: Call the MCP tool

Important: Both IDs must be numeric — no projects/ or screens/ prefix.

{
  "name": "get_screen",
  "arguments": {
    "projectId": "3780309359108792857",
    "screenId": "88805abc123def456"
  }
}

✅ projectId: "3780309359108792857"
❌ projectId: "projects/3780309359108792857"

✅ screenId: "88805abc123def456"
❌ screenId: "screens/88805abc123def456"

Output schema

{
  "name": "projects/3780309359108792857/screens/88805abc123def456",
  "htmlCode": {
    "downloadUrl": "https://storage.googleapis.com/stitch-output/..."
  },
  "screenshot": {
    "downloadUrl": "https://storage.googleapis.com/stitch-screenshots/..."
  },
  "figmaExport": {
    "downloadUrl": "https://storage.googleapis.com/stitch-figma/..."
  },
  "width": 390,
  "height": 844,
  "deviceType": "MOBILE"
}

Step 3: Download the HTML reliably

AI fetch tools frequently fail on Google Cloud Storage URLs. Use the bash script:

bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html"

Always quote the URL to handle special characters.

Step 4: Determine framework and route to conversion

After retrieving the screen, check what the user wants to do with it.

Check the deviceType in the response first — it shapes which options to suggest:

`deviceType`	Sensible defaults to suggest
`DESKTOP`	Next.js, Svelte, HTML
`MOBILE`	Next.js (PWA), Svelte, HTML, React Native, SwiftUI
`AGNOSTIC`	Any

Then route based on user intent:

User intent	→ Load skill
"Convert to Next.js", "React app", "App Router"	`stitch-nextjs-components`
"Convert to Svelte", "SvelteKit"	`stitch-svelte-components`
"Convert to HTML", "PWA", "Capacitor", "Ionic", "web app"	`stitch-html-components`
"React Native", "Expo", "iOS and Android", "cross-platform"	`stitch-react-native-components`
"SwiftUI", "Xcode", "native iOS", "iOS only"	`stitch-swiftui-components`
"Extract design system", "get the colors/fonts"	`stitch-design-system`
"Just show me the screenshot"	Present `screenshot.downloadUrl`
No framework mentioned, desktop design	Ask: Next.js, Svelte, or HTML?
No framework mentioned, mobile design	Ask: React Native, SwiftUI, or HTML (Capacitor)?

References

scripts/fetch-stitch.sh — Reliable GCS HTML downloader