stitch-mcp-generate-screen-from-text

Name: stitch-mcp-generate-screen-from-text
Author: gabelul

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

代码仓库

关于 stitch-mcp-generate-screen-from-text

一项通过结构化文本提示词使用 Stitch 生成 UI 界面的技能，说明项目准备、生成参数及后续界面获取流程，供设计任务或上游 Stitch 技能调用。

主要功能

01根据文本提示词生成界面
02设置设备类型与模型
03复用 Stitch 设计系统
04指导 PRD 批量生成界面
05获取生成界面详情

适用场景

01按视觉要求创建移动应用界面
02根据产品 PRD 生成仪表盘界面

MCP 相关

它调用 Stitch MCP 工具生成界面，并在生成后查找和获取界面内容。

安装

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

$npx skills add https://github.com/gabelul/stitch-kit --skill stitch-mcp-generate-screen-from-text

安装后在 Claude Code 中输入/stitch-mcp-generate-screen-from-text确认已加载。

附带文件examples/desktop.mdexamples/mobile.md

详细介绍

Stitch MCP — 根据文本生成界面

根据结构化文本提示词生成 UI 设计界面。这是任何 Stitch 工作流中的核心操作——此前的一切（规格生成、提示词组装）都是准备工作，此后的一切（界面检索、代码转换）都是后续工作。

关键前提

仅在用户明确提及 “Stitch” 或由上游技能（例如 stitch-ideate、stitch-orchestrator）调用时，才使用此技能。

调用此工具前，必须先有 projectId。如果没有：

通过 stitch-mcp-create-project 创建新项目
或通过 stitch-mcp-list-projects 查找现有项目

使用场景

用户要求使用 Stitch“设计”“生成”“创建”或“制作”一个界面
编排器已通过 stitch-ui-prompt-architect 组装提示词
用户提供了具体的视觉要求，并希望获得 Stitch 生成的结果

调用 MCP 工具

{
  "name": "generate_screen_from_text",
  "arguments": {
    "projectId": "3780309359108792857",
    "prompt": "[Full structured prompt — see below]",
    "deviceType": "MOBILE",
    "modelId": "GEMINI_3_1_PRO",
    "designSystem": "assets/15996705518239280238"
  }
}

参数参考

`designSystem` — 可选，带前缀的资源 ID

✅ "assets/15996705518239280238"
❌ "15996705518239280238"

这是让生成的界面保持设计一致性的方式——传入来自 stitch-mcp-create-design-system、stitch-mcp-create-design-system-from-design-md 或 stitch-mcp-list-design-systems 的设计系统 name（按原样使用，保留 assets/ 前缀）。这与 apply_design_system 的 assetId 格式相反，后者需要去掉前缀。

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

✅ "3780309359108792857"
❌ "projects/3780309359108792857"

`prompt` — 使用 `[Context] [Layout] [Components]` 结构

[Context & Style]
[Device] [Mode] [screen type] for [product]. [aesthetic]. [theme]. [colors]. [font].

[Layout]
[Describe the structural arrangement]

[Components]
[Specific named UI components with details]

为获得最佳效果，请在调用此工具前使用 stitch-ui-prompt-architect 技能组装提示词。

`deviceType`

值	使用场景
`MOBILE`	移动应用、手机尺寸的 UI（不确定时的默认值）
`DESKTOP`	Web 仪表板、着陆页、SaaS UI
`TABLET`	平板专用布局
`AGNOSTIC`	不针对特定设备——响应式／流式布局

`modelId`

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

生成后

此工具会返回会话信息，但不会返回实际截图／HTML。如需获取设计：

使用 projects/[projectId] 调用 stitch-mcp-list-screens，查找新界面
使用 projectId 和 screenId 调用 stitch-mcp-get-screen，获取截图和 HTML

提示词质量检查清单

调用此工具前，请确认提示词：

指定的设备类型与 deviceType 参数一致
列出具体组件（不要写“几个按钮”，而要写“主要的‘Sign In’按钮”）
包含颜色（十六进制代码或清晰的颜色名称）
使用真实内容（而非 Lorem Ipsum）
明确指定浅色或深色模式

从完整的 PRD 批量生成

当提示词是完整的 PRD 文档（产品概述、设计系统、多个屏幕规格、构建指南）时，Stitch 会在一次调用中生成多个屏幕，而不只是一个。Stitch 每次调用最多生成 10 个屏幕。包含 8 个屏幕规格的 PRD 通常会自动生成 5-7 个屏幕。

这与 Stitch 网页版 Ideate 中“生成所有屏幕”使用的是同一机制。PRD 格式充当综合提示词，Stitch 会在内部对其进行拆解。

如何使用批量生成：

将完整的 PRD 文本作为 prompt 参数发送
对于包含多个屏幕的 PRD，Stitch 每次调用最多生成约 10 个屏幕
根据 MCP 响应是否超时，可能出现以下两种结果：

如果响应返回了数据：
- 检查 output_components 中是否有继续生成的建议（例如“是的，全部生成”“生成剩余屏幕”）
- 自动使用建议文本作为 prompt 再次调用 generate_screen_from_text —— 用户已经发起生成，无需再次确认
- 重复此操作，直到不再出现 output_components 建议（最多继续调用 3 次，以防无限循环）
如果响应为空（HTTP 超时）：
- 生成仍在服务器端进行——请勿重试
- 等待 90-120 秒，然后调用 list_screens 查看已生成的内容
- 如果结果为空，再等待 60 秒后重试列表调用
- 使用引用 PRD 设计系统的精简提示词，逐个生成缺失的屏幕

耗时

Stitch 生成单个屏幕需要 60–180 秒，生成多屏幕 PRD 最多需要 5 分钟。这是正常行为，并非超时。

在此时间范围内请勿重试
耗时超过 60 秒并不代表失败
对于耗时较长的生成，MCP 工具可能返回空结果——之后请检查 list_screens
如果失败：等待 90 秒，检查 list_screens；如果没有生成内容，最多重试一次
每次调用都会创建一次新的生成——重试会导致屏幕重复

参考资料

examples/desktop.md — 桌面仪表板提示词（SaaS 分析、管理面板）
examples/mobile.md — 移动应用提示词（登录、社交动态、电商）

支持 Markdown

登录后评论