stitch-mcp-edit-screens

Name: stitch-mcp-edit-screens
Author: gabelul

github.com/gabelul设计与 UI4744 次安装14 周前更新

代码仓库

关于 stitch-mcp-edit-screens

用于通过文本提示修改现有 Stitch 屏幕的 skill，适合设计迭代时定点调整布局、颜色或内容。它要求先有 projectId 和至少一个 screenId，并建议每次聚焦一项修改。

主要功能

01通过提示词编辑一个或多个屏幕
02支持同时对多个屏幕应用同一修改
03提供项目与屏幕 ID 的格式要求
04说明编辑后的复查与迭代流程

适用场景

01调整现有屏幕的颜色或布局
02按反馈修改字体或导航位置
03对多个选定屏幕应用一致调整

MCP 相关

它指导调用 Stitch MCP 的 edit_screens 工具编辑现有屏幕；编辑前需取得 projectId 和 screenId。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/gabelul/stitch-kit --skill stitch-mcp-edit-screens

安装后在 Claude Code 中输入/stitch-mcp-edit-screens确认已加载。

详细介绍

Stitch MCP — 编辑屏幕

使用文本提示词编辑一个或多个现有屏幕。这是主要的迭代工具——无需从头重新生成屏幕（60–180s），你可以通过有针对性的更改来优化已有内容。

关键前提

只有当用户明确提到“Stitch”时，才使用此技能。

调用前必须同时具备 projectId 和至少一个 screenId。如果没有：

通过 stitch-mcp-list-screens 列出屏幕，以查找屏幕 ID
从上下文解析：projects/123/screens/456 → projectId：123，screenId：456

何时使用

用户想修改现有的 Stitch 屏幕（更改颜色、布局、内容、样式）
生成后，用户说“调暗一点”“更改字体”“把导航移到侧边”
编排器的步骤 5b 提供“编辑此屏幕”选项
对 Stitch 设计进行任何迭代优化

调用 MCP 工具

{
  "name": "edit_screens",
  "arguments": {
    "projectId": "3780309359108792857",
    "selectedScreenIds": ["88805abc123def456"],
    "prompt": "Change the background to dark mode (#09090B). Make the primary color indigo (#818CF8). Increase the font size of the header to 32px bold.",
    "deviceType": "DESKTOP",
    "modelId": "GEMINI_3_1_PRO"
  }
}

参数参考

`projectId` — 仅限数字 ID，不带前缀

✅ "3780309359108792857"
❌ "projects/3780309359108792857"

`selectedScreenIds` — 数字屏幕 ID 数组

✅ ["88805abc123def456"]
❌ ["projects/123/screens/88805abc123def456"]
❌ ["screens/88805abc123def456"]

选择一个或多个要编辑的屏幕。所有选中的屏幕都会收到相同的编辑指令。

`prompt` — 编辑指令

应用与生成提示词相同的质量标准：

描述具体：“将背景更改为 #09090B”，而不是“调暗一点”
指明确切组件：“页眉导航”，而不是“顶部部分”
包含具体值：十六进制颜色、px 尺寸、具体内容文本
每次调用专注于一项更改，效果优于一次进行多项更改

`deviceType` — 可选

与 generate_screen_from_text 使用相同的枚举：MOBILE、DESKTOP、TABLET、AGNOSTIC

`modelId` — 可选

值	使用场景
`GEMINI_3_1_PRO`	推荐 — 复杂布局、高保真度
`GEMINI_3_FLASH`	快速迭代、线框图、简单更改
`GEMINI_3_PRO`	已弃用。仍可使用，但将被移除。请改用 `GEMINI_3_1_PRO`。

处理 `output_components`

响应可能包含带有建议的 output_components：

{
  "outputComponents": [
    { "text": "I've updated the background color and adjusted contrast ratios." },
    { "suggestion": "Would you also like me to update the sidebar to match the dark theme?" }
  ]
}

看到建议时：

向用户展示这些建议
如果用户接受：再次调用 edit_screens，将建议作为新的 prompt
这会形成自然的优化循环——持续迭代，直到用户满意

耗时

与生成相同：60–180 秒属于正常范围。

在此期间不要重试
如果耗时超过 60 秒，不要认为操作失败
每次调用都会创建一次新的编辑——重试会产生重复编辑

编辑后

重新获取屏幕：使用相同的 projectId 和 screenId 调用 stitch-mcp-get-screen
向用户展示更新后的截图
提供以下选项：
- “继续编辑？” → 再次调用 edit_screens
- “为此版本生成变体？” → stitch-mcp-generate-variants
- “转换为代码？” → 框架转换工作流

反模式

绝不要发送含糊的编辑提示词——“做得更好”会产生不可预测的结果
绝不要在 projectId 或 screenId 中使用 projects/ID 格式——两者都必须是数字
绝不要批量进行无关的编辑——“更改颜色并彻底重做布局”这类指令效果不佳

支持 Markdown

登录后评论