Skip to content
Development
Skill

/stitch-mcp-create-project

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

From plugin
stitch-kit
4736 skills1 agent2 hooks

Claude Code

$ npx -y skills add gabelul/stitch-kit --skill stitch-mcp-create-project --agent claude-code

SKILL.md

stitch-mcp-create-project.SKILL.md
name: stitch-mcp-create-project
description: Creates a new Stitch project container (a design workspace). Call this when starting a new design session to get a projectId for screen generation.
allowed-tools:
  - "stitch*:*"

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.

Read more
@gabelul
Ships withstitch-kit

Your coding agent writes decent code and designs terrible UI. stitch-kit fixes the second half — it wires agents into Google Stitch (text prompts → genuinely beautiful screens) and teaches them to drive it properly.

4736 skills1 agent
Get the whole plugin

Stars on GitHub

Momentum

stars in total
47
Star history of gabelul/stitch-kit on GitHub, a chart by star-history.com

Other skills on stitch-kit.

stitch-a11y

stitch-a11y

Audits Stitch-generated components for WCAG 2.1 AA accessibility issues and applies fixes — semantic HTML, ARIA attributes,…

@gabelul@gabelulInstall Skill
stitch-animate

stitch-animate

Adds a purposeful animation layer to Stitch-generated components — CSS transitions, Framer Motion (React/Next.js), or Svelte…

@gabelul@gabelulInstall Skill
stitch-design-md

stitch-design-md

Analyzes a Stitch project's screens and synthesizes a natural-language DESIGN.md — visual atmosphere, color palette with hex…

@gabelul@gabelulInstall Skill
stitch-design-system

stitch-design-system

Extracts a Stitch design and generates production code artifacts — CSS custom properties with dark mode tokens, a Tailwind v4…

@gabelul@gabelulInstall Skill
stitch-html-components

stitch-html-components

Converts a Stitch screen, a local HTML file, or a URL into clean, platform-agnostic HTML5 + CSS — semantic markup, CSS custom…

@gabelul@gabelulInstall Skill
stitch-ideate

stitch-ideate

Conversational design ideation agent that researches trends, explores visual directions, and refines ideas through adaptive…

@gabelul@gabelulInstall Skill

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills12d309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc13d293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react3d252k
@facebook@facebookInstall Skill

Questions about stitch-mcp-create-project.

Which coding agents can use stitch-mcp-create-project?
stitch-mcp-create-project installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.