From stitch-kit
Uploads screenshots, mockups, or wireframes as new screens to Stitch projects. Enables redesign workflows by importing UI images for editing or code conversion.
npx claudepluginhub gabelul/stitch-kit --plugin stitch-kitThis skill is limited to using the following tools:
Uploads one or more images (screenshots, mockups, wireframes) into a Stitch project as new screens. This is the entry point for the "redesign existing UI" workflow — import what you have, then use `edit_screens` to iterate or convert directly to code.
Generates UI screens in Google Stitch from markdown prompt files using MCP tools. Parses sections by markers, sends prompts for generation, fetches images and code, saves to exports and code folders.
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.
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.
Share bugs, ideas, or general feedback.
Uploads one or more images (screenshots, mockups, wireframes) into a Stitch project as new screens. This is the entry point for the "redesign existing UI" workflow — import what you have, then use edit_screens to iterate or convert directly to code.
Only use this skill when the user explicitly mentions "Stitch".
You must have a projectId before calling this. If you don't have one:
stitch-mcp-create-projectstitch-mcp-list-projectsUse the helper script to convert a local image file to base64:
bash scripts/encode-image.sh "path/to/screenshot.png"
The script outputs raw base64 to stdout. Capture it for the API call.
Supported formats and their MIME types:
| Extension | MIME type |
|---|---|
.png | image/png |
.jpg, .jpeg | image/jpeg |
.webp | image/webp |
.gif | image/gif |
{
"name": "upload_screens_from_images",
"arguments": {
"projectId": "3780309359108792857",
"images": [
{
"fileContentBase64": "[base64-encoded-image-data]",
"mimeType": "image/png"
}
]
}
}
projectId — numeric ID only, no prefix✅ "3780309359108792857"
❌ "projects/3780309359108792857"
images — array of image objectsEach image needs:
| Field | Type | Description |
|---|---|---|
fileContentBase64 | string | Base64-encoded image data (no data: prefix) |
mimeType | string | MIME type matching the image format |
You can upload multiple images in a single call — each becomes a separate screen.
Returns session info similar to generate_screen_from_text. The uploaded images appear as new screens in the project.
stitch-mcp-list-screens to find the new screen IDsstitch-mcp-edit-screensstitch-mcp-get-screen → framework conversionstitch-mcp-generate-variantsscripts/encode-image.sh — Base64 encoding helper