Stitch UI Designer

This skill allows you to design high-quality user interfaces using Google Stitch.

Workflow

Follow this process to help the user design a UI:

1. Setup (First Time Only)

   • Check if the stitch server is configured in mcporter.
   • If not, configure it: mcporter config add stitch --command "npx" --args "-y stitch-mcp-auto"
   • Ensure the user is authenticated with Google Cloud (the tool may prompt for gcloud auth).

2. Generate & Preview

   • Ask for a description of the interface (e.g., "Login screen for a crypto app").
   • Use stitch.generate_screen_from_text with the prompt.
   • Important: This returns a screenId.
   • Immediately fetch the preview image using stitch.fetch_screen_image(screenId).
   • Show the image to the user. Do not fetch the code yet.