mcpField
S
stitch-mcp-create-project

stitch-mcp-create-project

github.com/gabelul设计与 UI4738 次安装14 周前更新
代码仓库

关于 stitch-mcp-create-project

该 Skill 在用户明确提及 Stitch 时创建设计项目，并提取项目 ID 供后续生成屏幕使用。它规定了标题推断、不同工具所需的 ID 格式及下一步流程。

主要功能

  1. 01仅在明确提及 Stitch 时启用
  2. 02根据请求推断项目标题
  3. 03提取并保存完整与数字 ID
  4. 04区分各工具的 ID 格式
  5. 05衔接首个屏幕生成流程

适用场景

  1. 01开始新的 Stitch 设计任务
  2. 02为屏幕生成获取项目 ID

MCP 相关

指导调用 Stitch MCP 的 `create_project` 工具创建项目，并保存后续工具所需的项目标识。

安装

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

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

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

详细介绍

Stitch MCP — 创建项目

创建一个新的 Stitch 项目。项目是一个容器，可存放一个或多个生成的屏幕。调用 generate_screen_from_text 前，你需要先获取 projectId。

关键前提

**仅当用户在请求中明确提及“Stitch”时，才使用此技能。**切勿在常规对话中静默触发 Stitch 操作。

使用场景

  • 开始一项新的设计任务或应用构想
  • 用户说“创建一个 Stitch 项目”“在 Stitch 中开始新项目”“使用 Stitch 设计 X”
  • 调用 generate_screen_from_text 前需要先获取 projectId
  • 开始一个新领域的工作（将相关屏幕放在同一个项目中）

步骤 1：提取有意义的标题

根据用户的请求推断一个描述性项目标题：

用户说→ 标题
“设计一款宠物领养应用”"PawPals" 或 "Pet Adoption App"
“制作一个登录页面”"Login Page"
“用于分析的 SaaS 仪表盘”"Analytics Dashboard"
“电商产品列表”"Product Listing"

如果无法明确判断名称，请使用描述性标签："Design Project [date]"。

步骤 2：调用 MCP 工具

{
  "name": "create_project",
  "arguments": {
    "title": "[Descriptive project title]"
  }
}

步骤 3：提取并存储项目 ID — 至关重要

工具会返回一个 name 字段，格式为 projects/NUMERIC_ID。你必须提取其中的数字部分：

工具响应：

{
  "name": "projects/3780309359108792857",
  "title": "Analytics Dashboard",
  "createTime": "2026-03-24T14:30:00Z",
  "visibility": "PRIVATE",
  "deviceType": "DESKTOP",
  "projectType": "TEXT_TO_UI",
  "designTheme": {
    "colorMode": "LIGHT",
    "customColor": "",
    "colorVariant": "TONAL_SPOT",
    "roundness": "ROUND_TWELVE",
    "spacingScale": 1,
    "headlineFont": "INTER",
    "bodyFont": "INTER",
    "labelFont": "INTER",
    "namedColors": {},
    "designMd": ""
  }
}

第一个屏幕生成后，designTheme 会填入完整值（包括 designMd 和 namedColors）。对于全新项目，主题值大多为空或为默认值。

提取：

  • 完整名称： projects/3780309359108792857 → 用于 list_screens、get_project
  • 数字 ID： 3780309359108792857 → 用于 generate_screen_from_text、get_screen

存储这两个值。向用户说明：

“已创建项目 ‘Analytics Dashboard’（ID：3780309359108792857）。可以开始生成屏幕了。”

ID 格式规则（至关重要 — 不同工具需要不同格式）

工具所需 ID 格式
generate_screen_from_text仅数字：3780309359108792857
get_screen仅数字：3780309359108792857
list_screens完整路径：projects/3780309359108792857
get_project完整路径：projects/3780309359108792857

集成

创建项目后，下一步始终是调用 stitch-mcp-generate-screen-from-text 来生成第一个屏幕。

评论

支持 Markdown