stitch-mcp-create-project

Name: stitch-mcp-create-project
Author: gabelul

github.com/gabelulDesign & UI4738 installsUpdated 14w ago

About stitch-mcp-create-project

A skill for creating Stitch design projects when Stitch is explicitly mentioned. It guides title selection, project ID extraction, and the next step for generating screens.

Key features

01Requires explicit mention of Stitch
02Infers a project title from the request
03Extracts and stores both project ID forms
04Maps ID formats to specific tools
05Connects project creation to screen generation

Use cases

01Starting a new Stitch design task
02Getting a project ID before generating screens

MCP support

Guides use of Stitch MCP's `create_project` tool and preserves the project identifiers needed by subsequent tools.

Install

Copy the command and run it in a terminal.

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

After installing, type/stitch-mcp-create-projectin Claude Code to confirm it loaded.

Details

From the project README

Stitch MCP — Create Project

Creates a new Stitch project. A project is a container that holds one or more generated screens. You need a projectId before you can call generate_screen_from_text.

Critical prerequisite

Only use this skill when the user explicitly mentions "Stitch" in their request. Never trigger Stitch operations silently during regular conversation.

When to use

Starting a new design task or app concept
The user says "create a Stitch project", "start a new project in Stitch", "design X using Stitch"
You need a projectId before calling generate_screen_from_text
Starting work in a new domain (keep related screens in one project)

Step 1: Extract a meaningful title

Infer a descriptive project title from the user's request:

User says	→ title
"Design a pet adoption app"	`"PawPals"` or `"Pet Adoption App"`
"Make a login page"	`"Login Page"`
"SaaS dashboard for analytics"	`"Analytics Dashboard"`
"E-commerce product listing"	`"Product Listing"`

If no clear name is evident, use a descriptive label: "Design Project [date]".

Step 2: Call the MCP tool

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

Step 3: Extract and store the project ID — CRITICAL

The tool returns a name field in the format projects/NUMERIC_ID. You must extract the numeric portion:

Tool response:

{
  "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": ""
  }
}

The designTheme populates with full values (including designMd and namedColors) after the first screen is generated. For a brand-new project, expect mostly empty/default theme values.

Extract:

Full name: projects/3780309359108792857 → use for list_screens, get_project
Numeric ID: 3780309359108792857 → use for generate_screen_from_text, get_screen

Store both values. Announce to the user:

"Created project 'Analytics Dashboard' (ID: 3780309359108792857). Ready to generate screens."

ID format rules (critical — different tools need different formats)

Tool	ID format required
`generate_screen_from_text`	Numeric only: `3780309359108792857`
`get_screen`	Numeric only: `3780309359108792857`
`list_screens`	Full path: `projects/3780309359108792857`
`get_project`	Full path: `projects/3780309359108792857`

Integration

After creating a project, the next step is always stitch-mcp-generate-screen-from-text to generate the first screen.

Comments

Markdown supported