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>:

- generatescreenfrom_text

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

- fetchscreenimage

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

- fetchscreencode

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

Stitch UI 设计师

此技能允许您使用 Google Stitch 设计高质量的用户界面。

工作流程

请按照以下流程帮助用户设计 UI：

1. 设置（仅首次）

- 检查 mcporter 中是否已配置 stitch 服务器。 - 如果未配置，请进行配置：mcporter config add stitch --command npx --args -y stitch-mcp-auto - 确保用户已通过 Google Cloud 进行身份验证（该工具可能会提示执行 gcloud auth）。

2. 生成与预览

- 询问界面的描述（例如：加密货币应用的登录界面）。 - 使用 stitch.generatescreenfrom_text 并传入提示词。 - 重要：此操作会返回一个 screenId。 - 立即使用 stitch.fetchscreenimage(screenId) 获取预览图像。 - 向用户展示该图像。不要立即获取代码。

3. 迭代与定制

- 向用户征求对预览的反馈意见。 - 如果需要更改，再次使用 stitch.generatescreenfromtext（可能使用上一屏幕的 stitch.extractdesign_context 来保持风格），或直接优化提示词。 - 展示新的预览。

4. 导出代码

- 一旦用户批准设计（看起来很棒），获取代码。 - 使用 stitch.fetchscreencode(screenId)。 - 呈现 HTML/CSS 代码，或根据要求将其保存到文件中。

工具（通过 mcporter）

使用 mcporter call stitch.<工具名称> <参数> 调用这些工具：

- generatescreenfrom_text

- 参数：prompt（字符串），projectId（可选，通常由 stitch-mcp-auto 自动检测） - 返回：screenId、name、url - 使用此工具开始设计。

- fetchscreenimage

- 参数：screenId（字符串） - 返回：图像数据（向用户展示此数据）。 - 使用此工具显示预览。

- fetchscreencode

- 参数：screenId（字符串） - 返回：html（字符串）、css（字符串）等。 - 仅在用户批准后使用此工具。

- create_project

- 参数：name（字符串） - 如果不存在项目，则使用此工具。

提示

- 项目上下文：stitch-mcp-auto 会尝试自动管理项目 ID。如果遇到缺少项目 ID 的错误，请先要求用户使用 createproject 创建或选择 Google Cloud 项目，或设置 GOOGLECLOUD_PROJECT 环境变量。
先预览：始终优先考虑视觉预览。为糟糕的设计生成代码会浪费令牌和时间。
Stitch MCP Auto：我们使用 stitch-mcp-auto，因为它比标准包更优雅地处理复杂的 Google 身份验证设置。

stitch-ui-designer缝合UI设计器