From stitch-kit
Creates a new Stitch project container (design workspace) to hold generated UI screens and obtain projectId for screen generation tools. Use at start of Stitch design sessions.
How this skill is triggered — by the user, by Claude, or both
Slash command
/stitch-kit:stitch-mcp-create-projectThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
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`.
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.
Only use this skill when the user explicitly mentions "Stitch" in their request. Never trigger Stitch operations silently during regular conversation.
projectId before calling generate_screen_from_textInfer 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]".
{
"name": "create_project",
"arguments": {
"title": "[Descriptive project title]"
}
}
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": "PHONE",
"projectType": "TEXT_TO_UI",
"designTheme": {
"colorMode": "LIGHT",
"customColor": "",
"colorVariant": "TONAL_SPOT",
"roundness": "ROUND_TWELVE",
"spacingScale": 1,
"headlineFont": "ROBOTO",
"bodyFont": "ROBOTO",
"labelFont": "ROBOTO",
"namedColors": {},
"designMd": ""
}
}
The
designThemepopulates with full values (includingdesignMdandnamedColors) after the first screen is generated. For a brand-new project, expect mostly empty/default theme values.
Extract:
projects/3780309359108792857 → use for list_screens, get_project3780309359108792857 → use for generate_screen_from_text, get_screenStore both values. Announce to the user:
"Created project 'Analytics Dashboard' (ID:
3780309359108792857). Ready to generate screens."
| 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 |
After creating a project, the next step is always stitch-mcp-generate-screen-from-text to generate the first screen.
npx claudepluginhub gabelul/stitch-kit --plugin stitch-kitOrchestrates Stitch UI design workflows: routes from user request through spec, prompt assembly, screen generation, iteration, design system extraction, and framework conversion (Next.js, Svelte, HTML, React Native, SwiftUI).
Creates Stitch UI screens, design systems, variants, and prototypes from briefs, mockups, or product context. Exports Tailwind HTML, screenshots, and local code artifacts. Use for screen exploration, editing Stitch projects, or multi-screen prototypes.
Converts natural-language descriptions or UI spec files into optimized Google Stitch prompts focused on screens, structure, and visual hierarchy. Use for creating, refining, or validating Stitch design directives.