Stitch UI Designer

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.

3. Iterate & Customize

   • Ask the user for feedback on the preview.
   • If changes are needed, use stitch.generate_screen_from_text again (potentially using stitch.extract_design_context from the previous screen to maintain style) or just refine the prompt.
   • Show the new preview.

4. Export Code

   • Once the user approves the design ("This looks great"), fetch the code.
   • Use stitch.fetch_screen_code(screenId).
   • Present the HTML/CSS code or save it to a file as requested.

Tools (via mcporter)

Call these using mcporter call stitch.<tool_name> <args>:

• generate_screen_from_text

  • Args: prompt (string), projectId (optional, usually auto-detected by stitch-mcp-auto)
  • Returns: screenId, name, url
  • Use this to start a design.

• fetch_screen_image

  • Args: screenId (string)
  • Returns: Image data (display this to the user).
  • Use this to show the preview.

• fetch_screen_code

  • Args: screenId (string)
  • Returns: html (string), css (string), etc.
  • Use this ONLY after user approval.

• create_project

  • Args: name (string)
  • Use if no project exists.

Tips

• Project Context: stitch-mcp-auto tries to manage the project ID automatically. If you get errors about missing project IDs, ask the user to create or select a Google Cloud project first using create_project or by setting the GOOGLE_CLOUD_PROJECT env var.
• Preview First: Always prioritize the visual preview. Generating code for a bad design wastes tokens and time.
• Stitch MCP Auto: We use stitch-mcp-auto because it handles the complex Google auth setup more gracefully than the standard package.