メニュー
Creates a new Stitch project container (a design workspace). Call this when starting a new design session to get a projectId for screen generation.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| 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*:*"] |
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.
Conversational design ideation agent that researches trends, explores visual directions, and refines ideas through adaptive questioning — then produces a rich PRD document and auto-generates Stitch screens. Your design buddy that thinks deeply before designing.
Master entry point for all Stitch design workflows. Routes from user request → design spec → prompt assembly → screen generation → iteration (edit, variants, design systems) → design system extraction → framework conversion (Next.js, Svelte, HTML, React Native, or SwiftUI) → optional quality pass.
Analyzes a Stitch project's screens and synthesizes a natural-language DESIGN.md — visual atmosphere, color palette with hex values, typography rules, and Stitch-ready prompt snippets. Use this before stitch-loop or any multi-page build to establish design consistency.
Extracts a Stitch design and generates production code artifacts — CSS custom properties with dark mode tokens, a Tailwind v4 @theme block, and a semantic design system document. Run this before framework conversion skills.
Creates a reusable Stitch Design System from theme tokens — colors, fonts, roundness, saturation. Can be applied to future screens for visual consistency.
Edits existing Stitch screens with text prompts — the iteration tool. Change colors, layout, content, or style without regenerating from scratch. Supports refinement loops via output_components suggestions.