stitch-mcp-create-project
Create a new Stitch project container via MCP create_project. Use when starting a new design task, app idea, or fresh workspace in Stitch. Extracts a meaningful title from the user request, returns both the full resource name (projects/{id}) and numeric projectId needed for subsequent screen generation.
Best use case
stitch-mcp-create-project is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. Create a new Stitch project container via MCP create_project. Use when starting a new design task, app idea, or fresh workspace in Stitch. Extracts a meaningful title from the user request, returns both the full resource name (projects/{id}) and numeric projectId needed for subsequent screen generation.
Create a new Stitch project container via MCP create_project. Use when starting a new design task, app idea, or fresh workspace in Stitch. Extracts a meaningful title from the user request, returns both the full resource name (projects/{id}) and numeric projectId needed for subsequent screen generation.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "stitch-mcp-create-project" skill to help with this workflow task. Context: Create a new Stitch project container via MCP create_project. Use when starting a new design task, app idea, or fresh workspace in Stitch. Extracts a meaningful title from the user request, returns both the full resource name (projects/{id}) and numeric projectId needed for subsequent screen generation.Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/stitch-mcp-create-project/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How stitch-mcp-create-project Compares
| Feature / Agent | stitch-mcp-create-project | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Create a new Stitch project container via MCP create_project. Use when starting a new design task, app idea, or fresh workspace in Stitch. Extracts a meaningful title from the user request, returns both the full resource name (projects/{id}) and numeric projectId needed for subsequent screen generation.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
## When to use this skill
**CRITICAL PREREQUISITE:**
**You must ONLY use this skill when the user EXPLICITLY mentions "Stitch".**
**ALWAYS use this skill when:**
- The user wants to start a **new** design task or app idea **using Stitch**.
- The user asks to "create a Stitch project", "start a new app in Stitch".
- The user switches context to a completely different domain (e.g., from "Medical App" to "Gaming App") and needs a clean slate.
- You need to obtain a `projectId` before generating screens.
**Trigger phrases include:**
- "Create a new Stitch project" (创建新 Stitch 项目)
- "Start a new Stitch app" (开始一个新 Stitch 应用)
- "Initialize Stitch workspace" (初始化 Stitch 工作区)
## How to use this skill
1. **Analyze the User Request**: Extract a meaningful `title` for the project.
* *User*: "Design a cyberpunk blog." -> *Title*: "Cyberpunk Blog"
* *User*: "Make a login page." -> *Title*: "Login Page Project" (Generic)
2. **Call the MCP Tool**: Invoke `create_project` with the `title`.
* If your client namespaces MCP tools, call `mcp__<serverName>__create_project`.
3. **Handle the Output (CRITICAL)**:
* The tool returns a `name` field (e.g., `projects/123456`).
* **YOU MUST EXTRACT THE NUMERIC ID**.
* *Example*: `projects/123456` -> `123456`.
* Store **BOTH** the full name (`projects/123...`) and the numeric ID (`123...`) in your context.
* **Usage Rule**:
* Use **Numeric ID** (`123...`) for `generate_screen_from_text` and `get_screen`.
* Use **Full Name** (`projects/123...`) for `list_screens` and `get_project`.
## Best Practices
1. **Meaningful Titles**: Always try to infer a descriptive title. Avoid "Untitled Project".
2. **One Project per Domain**: Encourage users to keep related screens (Login, Home, Settings) in the same project. Only create a new project if the domain changes.
3. **Context Persistency**: Explicitly tell the user: "I've created project 'X' (ID: 123). I will use this for our design session."
## Keywords
**English keywords:**
create project, new project, start app, initialize, setup, workspace, container, new design, project id, stitch project
**Chinese keywords (中文关键词):**
创建项目, 新建项目, 开始设计, 初始化, 建立工程, 新应用, 项目ID, 启动项目
## References
- [Examples](examples/usage.md)Related Skills
vscode-project-init
Scaffold a new VS Code extension project using TypeScript via Yeoman generator (yo code), creating src/extension.ts entry point and package.json manifest. Use when the user wants to start a new VS Code extension project from scratch.
uniappx-project
Provides per-component and per-API examples with platform compatibility details for uni-app-x (Vue 3 + TypeScript + Vite). Use when the user needs official uni-app-x built-in components, API references with examples, cross-platform compatibility checks, or conditional compilation guidance for uni-app-x projects.
uniappx-project-creator
Creates new uni-app-x projects with Vue 3 + TypeScript + Vite via CLI or HBuilderX, including tsconfig.json setup, manifest.json and pages.json configuration, and Composition API project templates. Use when the user wants to scaffold a new uni-app-x project, initialize TypeScript project files, or set up the uni-app-x development environment.
uniapp-project
Provides per-component and per-API examples with cross-platform compatibility details for uni-app, covering built-in components, uni-ui components, and APIs (network, storage, device, UI, navigation, media). Use when the user needs official uni-app components or APIs, wants per-component examples with doc links, or needs platform compatibility checks.
uniapp-project-creator
Creates new uni-app projects via the official CLI or HBuilderX with Vue 2/Vue 3 template selection, manifest.json and pages.json configuration, and directory structure setup. Use when the user wants to scaffold a new uni-app project, initialize project files with a single command, or set up the development environment.
stitch-vue-vant-components
Convert Stitch designs into modular Vite + Vue 3 + Vant 4 mobile components. Use when the user mentions Vant or Vue Mobile conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to Vant tokens (mobile-first 375px, safe area), enforces Vue SFC structure with Vant 4 components (van-button, van-field, van-nav-bar, van-tabbar).
stitch-vue-layui-components
Convert Stitch designs into modular Vite + Vue 3 + Layui-Vue components. Use when the user mentions Layui conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to Layui tokens (2px/4px radius), enforces Vue SFC structure with Layui-Vue components (layui-btn, layui-input, lay-card, lay-page-header).
stitch-vue-element-components
Convert Stitch designs into modular Vite + Vue 3 + Element Plus components. Use when the user mentions Element Plus, element-ui, or Vue Desktop conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to Element Plus tokens, enforces Vue SFC structure with el-* components (el-button, el-form, el-table, el-card, el-menu).
stitch-vue-bootstrap-components
Convert Stitch designs into modular Vite + Vue 3 + BootstrapVue/BootstrapVueNext components. Use when the user mentions Bootstrap or BootstrapVue conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to Bootstrap utilities, enforces Vue SFC structure with Bootstrap components (b-container, b-row, b-col, b-button, b-card).
stitch-uviewpro-components
Convert Stitch designs into uni-app + Vue 3 + uView Pro pages and components. Use when the user mentions uView Pro, uviewpro, or uni-app Vue 3 conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to rpx/theme, enforces u-* component contracts (u-tabs, u-form, u-picker, u-card) with script setup.
stitch-uview-components
Convert Stitch designs into uni-app + Vue 2 + uView 2.0 pages and components. Use when the user mentions uView, uView 2, or uni-app Vue 2 conversion from Stitch. Retrieves screen HTML via Stitch MCP get_screen, maps Tailwind to rpx/theme, enforces uni-app page structure with uView 2 u-* components (u-navbar, u-form, u-button, u-cell-group).
stitch-ui-prompt-architect
Build Stitch-ready prompts from vague UI ideas (Path A) or from a Design Spec plus user request (Path B). Use when polishing a UI prompt before Stitch generation, improving a prompt that produced poor results, or merging a Design Spec with framework contracts (uView, Element Plus, Layui, Bootstrap, Vant) into a sectioned Context/Layout/Components prompt.