Agent 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.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/stitch-mcp-create-project
SKILL.md
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
projectIdbefore callinggenerate_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": "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:
- Full name:
projects/3780309359108792857→ use forlist_screens,get_project - Numeric ID:
3780309359108792857→ use forgenerate_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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?