Stitch mcp create project

Skill gabelul/stitch-kit/skills/stitch-mcp-create-project

Your coding agent designs terrible UI. stitch-kit wires it into Google Stitch MCP and teaches it the whole pipeline — ideation, screen generation, design systems, production components.

Install

npx -y skills add gabelul/stitch-kit --skill stitch-mcp-create-project

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Creates a new Stitch project container (a design workspace). Call this when starting a new design session to get a projectId for screen generation.

SKILL.md

3.2 KB, as published. Nobody here has run it

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.