Stitch-kit stitch-mcp-upload-screens-from-images

Uploads screenshots or mockup images into a Stitch project as new screens. Enables the "redesign from screenshot" workflow — import existing UI and then edit or convert.

install

source · Clone the upstream repo

git clone https://github.com/gabelul/stitch-kit

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/gabelul/stitch-kit "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/stitch-mcp-upload-screens-from-images" ~/.claude/skills/gabelul-stitch-kit-stitch-mcp-upload-screens-from-images && rm -rf "$T"

manifest: skills/stitch-mcp-upload-screens-from-images/SKILL.md

source content

Stitch MCP — Upload Screens from Images

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.

Critical prerequisite

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

You must have a

projectId

before calling this. If you don't have one:

Create a new project via
```
stitch-mcp-create-project
```
Or find an existing project via
```
stitch-mcp-list-projects
```

When to use

User provides a screenshot and wants to redesign it in Stitch
User wants to import existing mockups into Stitch for editing
The orchestrator classifies intent as "Upload screenshot"
User says "import this design", "upload this image", or "redesign this screen"

Step 1: Encode the image to base64

Use 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`

Step 2: Call the MCP tool

{
  "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 objects

Each 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.

Output

Returns session info similar to

generate_screen_from_text

. The uploaded images appear as new screens in the project.

After uploading

Call
```
stitch-mcp-list-screens
```
to find the new screen IDs
Offer the user:
- "Edit this screen (change colors, layout, content)?" →
```
stitch-mcp-edit-screens
```
- "Convert directly to code?" →
```
stitch-mcp-get-screen
```
  → framework conversion
- "Generate variants based on this design?" →
```
stitch-mcp-generate-variants
```

References

```
scripts/encode-image.sh
```
— Base64 encoding helper