stitch-mcp-get-screen
npx machina-cli add skill gabelul/stitch-kit/stitch-mcp-get-screen --openclawStitch 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_screenshas 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
Source
git clone https://github.com/gabelul/stitch-kit/blob/main/skills/stitch-mcp-get-screen/SKILL.mdView on GitHub Overview
Stitch MCP Get Screen retrieves the full output of a Stitch generated screen, including the HTML source URL, the screenshot URL, and the screen dimensions. It acts as the bridge between Stitch design data and framework-specific code generation, guiding the conversion path from design to implementation. Use this to fetch the assets you need before starting your framework conversion.
How This Skill Works
The tool parses projectId and screenId from user input, ensures both are numeric, calls the MCP get_screen endpoint to obtain the screen data, and returns an output schema containing htmlCode, screenshot, width, height, and deviceType. This output informs downstream conversion steps and helps choose the appropriate framework route such as Next.js, Svelte, HTML, React Native, or SwiftUI.
When to Use It
- 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 such as Next.js, Svelte, HTML, React Native, or SwiftUI
- You already have numeric projectId and screenId and want to fetch details directly
- You need the HTML and screenshot URLs along with deviceType to plan the conversion path
Quick Start
- Step 1: Parse IDs from the Stitch screen reference or URL
- Step 2: Call the MCP tool with numeric projectId and screenId
- Step 3: Use the Output schema to proceed with framework-specific conversion
Best Practices
- Ensure IDs are numeric and avoid any prefixes before calling the MCP tool
- Support multiple input formats and correctly parse projectId and screenId from them
- Always quote htmlCode.downloadUrl when downloading to handle special characters
- Check deviceType and dimensions to select the appropriate framework route
- Use a reliable downloader script such as scripts/fetch-stitch.sh to fetch HTML when needed
Example Use Cases
- A designer provides a Stitch screen URL and you plan to generate Next.js components for a mobile screen
- You fetch a screen to obtain HTML for a static HTML or PWA conversion
- You retrieve the screenshot and HTML to review the design before coding in React Native
- You download the HTML reliably to verify the output before starting conversion
- You have numeric IDs and fetch to verify width, height, and deviceType before scaffolding
