stitch-mcp-edit-screens

Stitch MCP — Edit Screens

Edits one or more existing screens using a text prompt. This is the primary iteration tool — instead of regenerating a screen from scratch (60–180s), you can refine what you already have with targeted changes.

Critical prerequisite

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

You must have both a projectId AND at least one screenId before calling this. If you don't:

• List screens via stitch-mcp-list-screens to find screen IDs
• Parse from context: projects/123/screens/456 → projectId: 123, screenId: 456

When to use

• User wants to modify an existing Stitch screen (change colors, layout, content, style)
• After generation, user says "make it darker", "change the font", "move the nav to the side"
• The orchestrator's Step 5b offers "Edit this screen"
• Any iterative refinement on a Stitch design

Call the MCP tool

{
  "name": "edit_screens",
  "arguments": {
    "projectId": "3780309359108792857",
    "selectedScreenIds": ["88805abc123def456"],
    "prompt": "Change the background to dark mode (#09090B). Make the primary color indigo (#818CF8). Increase the font size of the header to 32px bold.",
    "deviceType": "DESKTOP",
    "modelId": "GEMINI_3_1_PRO"
  }
}

Parameter reference

projectId — numeric ID only, no prefix

✅ "3780309359108792857"
❌ "projects/3780309359108792857"

selectedScreenIds — array of numeric screen IDs

✅ ["88805abc123def456"]
❌ ["projects/123/screens/88805abc123def456"]
❌ ["screens/88805abc123def456"]

Select one or more screens to edit. All selected screens receive the same edit instruction.

prompt — the edit instruction

Apply the same quality bar as generation prompts:

• Be specific: "Change background to #09090B" not "make it darker"
• Name exact components: "the header navigation" not "the top part"
• Include values: hex colors, px sizes, specific content text
• One focused change per call produces better results than many changes at once