name: stitch-ui-designer version: 1.0.0 description: 使用 Google Stitch（通过 MCP）设计、预览和生成 UI 代码。通过首先生成预览帮助开发者选择最佳 UI，允许迭代，然后导出代码。 metadata: openclaw: emoji: 🎨 requires: bins: [“npx”, “mcporter”]
Stitch UI 设计师
此技能允许您使用 Google Stitch 设计高质量的用户界面。
工作流程
遵循此流程帮助用户设计 UI：
-
设置（仅首次使用）
- 检查
mcporter中是否配置了stitch服务器。 - 如果未配置，请配置：
mcporter config add stitch --command "npx" --args "-y stitch-mcp-auto" - 确保用户已通过 Google Cloud 身份验证（工具可能会提示
gcloud auth）。
- 检查
-
生成与预览
- 请求界面描述（例如：“加密应用程序的登录屏幕”）。
- 使用
stitch.generate_screen_from_text并附带提示词。 - 重要：这将返回一个
screenId。 - 立即使用
stitch.fetch_screen_image(screenId)获取预览图像。 - 向用户展示图像。不要立即获取代码。
-
迭代与定制
- 询问用户对预览的反馈。
- 如果需要更改，再次使用
stitch.generate_screen_from_text（可能使用stitch.extract_design_context从前一个屏幕获取上下文以保持风格），或者直接优化提示词。 - 展示新的预览。
-
导出代码
- 一旦用户批准设计（“这看起来很棒”），再获取代码。
- 使用
stitch.fetch_screen_code(screenId)。 - 根据请求呈现 HTML/CSS 代码或将其保存到文件中。
工具（通过 mcporter）
使用 mcporter call stitch.<工具名称> <参数> 调用这些工具：
-
generate_screen_from_text
- 参数：
prompt（字符串），projectId（可选，通常由stitch-mcp-auto自动检测） - 返回：
screenId,name,url - 使用此工具开始设计。
- 参数：
-
fetch_screen_image
- 参数：
screenId（字符串） - 返回：图像数据（向用户展示此数据）。
- 使用此工具展示预览。
- 参数：
-
fetch_screen_code
- 参数：
screenId（字符串） - 返回：
html（字符串），css（字符串）等。 - 仅在用户批准后使用此工具。
- 参数：
-
create_project
- 参数：
name（字符串） - 如果没有项目存在时使用。
- 参数：
提示
- 项目上下文：
stitch-mcp-auto尝试自动管理项目 ID。如果收到关于缺少项目 ID 的错误，请要求用户先使用create_project或通过设置GOOGLE_CLOUD_PROJECT环境变量来创建或选择 Google Cloud 项目。 - 预览优先：始终优先考虑视觉预览。为糟糕的设计生成代码会浪费令牌和时间。
- Stitch MCP Auto：我们使用
stitch-mcp-auto，因为它比标准包更优雅地处理复杂的 Google 身份验证设置。