How do I install the Stitch MCP Get Screen skill?

Run npx skillmds add majiayu000/stitch-mcp-get-screen in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Stitch MCP Get Screen safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Stitch MCP Get Screen?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Stitch MCP Get Screen free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Stitch MCP Get Screen?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Stitch MCP Get Screen by majiayu000

Name: Stitch MCP Get Screen
Rating: 4.2 (5 reviews)
Author: majiayu000

File contents

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

---name: stitch-mcp-get-screendescription: Retrieves full details of a specific Stitch screen — HTML download URL, screenshot URL, dimensions. This is the final step in design retrieval before code conversion.--- # 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.** ```json { "name": "get_screen", "arguments": { "projectId": "3780309359108792857", "screenId": "88805abc123def456" } } ``` ``` ✅ projectId: "3780309359108792857" ❌ projectId: "projects/3780309359108792857" ✅ screenId: "88805abc123def456" ❌ screenId: "screens/88805abc123def456" ``` ## Output schema ```json { "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 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

Frequently asked questions