stitch-ui-designer（缝合 ui 设计师）

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

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

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

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