stitch-mcp-get-screen

Retrieve Stitch screen HTML and screenshot assets from Google Cloud Storage.

38|5|Updated Feb 18, 2026
One-click install
npx skills add https://github.com/gabelul/stitch-kit --skill stitch-mcp-get-screen
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: stitch-mcp-get-screen
Source: https://github.com/gabelul/stitch-kit/tree/main/skills/stitch-mcp-get-screen
Command: npx skills add https://github.com/gabelul/stitch-kit --skill stitch-mcp-get-screen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Manually retrieving Stitch screen assets like HTML source code and screenshots is error-prone because Google Cloud Storage URLs frequently fail with standard AI fetch tools, and this Skill bridges the gap between Stitch design output and production code conversion.

Core Features & Use Cases

  • Robust Screen Asset Retrieval: Fetches full Stitch screen details including HTML download URLs, screenshot URLs, dimensions, and device type.
  • Flexible ID Parsing: Handles multiple input formats for Stitch project and screen IDs, including full resource paths, share URLs, and raw numeric IDs.
  • Use Case: After generating UI designs in Google Stitch, use this Skill to get the required assets to convert the design to Next.js, Svelte, React Native, or other production frameworks.

Quick Start

Use the stitch-mcp-get-screen skill to retrieve the HTML and screenshot assets for the Stitch screen at https://stitch.withgoogle.com/projects/123?node-id=456 so you can convert it to production frontend code.

Frequently Asked Questions about stitch-mcp-get-screen

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I download HTML source code from a Google Stitch screen URL?

To download HTML source code from Google Stitch, you need to parse the project and screen identifiers from the URL and retrieve the HTML download link via the get_screen MCP tool, as standard AI fetch tools fail to access these Google Cloud Storage endpoints.

Why does fetching Stitch screen assets fail with standard AI tools?

Fetching Stitch screen assets fails because the HTML source and screenshots are stored on Google Cloud Storage endpoints that standard AI fetch tools cannot access, requiring a robust curl-based script with retry logic to retrieve the design outputs successfully.

Can I use a full Stitch share URL to extract screen assets?

Yes, you can use a full Stitch share URL to extract screen assets. The retrieval process supports flexible ID parsing, handling multiple input formats including full resource paths, share URLs, and raw numeric IDs to get screenshots and HTML.

What's the best way to convert Google Stitch designs to production frontend frameworks?

The best way to convert Google Stitch designs to production frameworks is to first extract the full screen assets, including the HTML source code and dimensions, using a dedicated retrieval script before translating the design outputs into Next.js, Svelte, or React Native.

What specific assets can I retrieve from a Google Stitch screen?

You can retrieve full Stitch screen assets including the HTML source code download URLs, screenshot URLs, dimensions, and device type, providing the necessary design outputs for frontend conversion or design system analysis.

How do I handle empty file downloads when extracting Stitch UI screens?

To handle empty file downloads when extracting Stitch UI screens, use a curl-based retrieval script that includes robust retry logic and empty file validation to ensure the complete HTML source code is successfully acquired from Google Cloud Storage.