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.
- Args:
screenId (string)
- Returns: Image data (display this to the user).
-
Use this to show the preview.
- Args:
screenId (string)
- Returns:
html (string),
css (string), etc.
-
Use this ONLY after user approval.
- 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.generate
screenfrom_text 并传入提示词。
-
重要：此操作会返回一个 screenId。
- 立即使用 stitch.fetch
screenimage(screenId) 获取预览图像。
- 向用户展示该图像。
不要立即获取代码。
- 3. 迭代与定制
- 向用户征求对预览的反馈意见。
- 如果需要更改，再次使用 stitch.generate
screenfrom
text（可能使用上一屏幕的 stitch.extractdesign_context 来保持风格），或直接优化提示词。
- 展示新的预览。
- 4. 导出代码
- 一旦用户批准设计（看起来很棒），获取代码。
- 使用 stitch.fetch
screencode(screenId)。
- 呈现 HTML/CSS 代码，或根据要求将其保存到文件中。
工具（通过 mcporter）
使用 mcporter call stitch.<工具名称> <参数> 调用这些工具：
- - generatescreenfrom_text
- 参数：prompt（字符串），projectId（可选，通常由 stitch-mcp-auto 自动检测）
- 返回：screenId、name、url
-
使用此工具开始设计。
- 参数：screenId（字符串）
- 返回：图像数据（向用户展示此数据）。
-
使用此工具显示预览。
- 参数：screenId（字符串）
- 返回：html（字符串）、css（字符串）等。
-
仅在用户批准后使用此工具。
- 参数：name（字符串）
-
如果不存在项目，则使用此工具。
提示
- - 项目上下文：stitch-mcp-auto 会尝试自动管理项目 ID。如果遇到缺少项目 ID 的错误，请先要求用户使用 createproject 创建或选择 Google Cloud 项目，或设置 GOOGLECLOUD_PROJECT 环境变量。
- 先预览：始终优先考虑视觉预览。为糟糕的设计生成代码会浪费令牌和时间。
- Stitch MCP Auto：我们使用 stitch-mcp-auto，因为它比标准包更优雅地处理复杂的 Google 身份验证设置。
