Skip to content
cccskills
FreePublished on GitHub

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.

The English summary is being prepared. Showing the original description.

See how to install

Files included (1)

  • SKILL.md3.2 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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)

ToolID format required
generate_screen_from_textNumeric only: 3780309359108792857
get_screenNumeric only: 3780309359108792857
list_screensFull path: projects/3780309359108792857
get_projectFull path: projects/3780309359108792857

Integration

After creating a project, the next step is always stitch-mcp-generate-screen-from-text to generate the first screen.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Audits Stitch-generated components for WCAG 2.1 AA accessibility issues and applies fixes — semantic HTML, ARIA attributes, keyboard navigation, focus management, and screen reader support.

The English summary is being prepared. Showing the original description.

gabelul/stitch-kit45Updated Jul 21, 2026

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

The English summary is being prepared. Showing the original description.

gabelul/stitch-kit45Updated Jul 21, 2026

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.

The English summary is being prepared. Showing the original description.

gabelul/stitch-kit45Updated Jul 21, 2026

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.

The English summary is being prepared. Showing the original description.

gabelul/stitch-kit45Updated Jul 21, 2026

Converts a Stitch screen, a local HTML file, or a URL into clean, platform-agnostic HTML5 + CSS — semantic markup, CSS custom properties for theming, dark mode via prefers-color-scheme, mobile-first responsive, zero framework dependencies. Works in browsers, WebViews, Capacitor, and Ionic. Only the Stitch route needs an API key.

The English summary is being prepared. Showing the original description.

gabelul/stitch-kit45Updated Jul 21, 2026

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.

The English summary is being prepared. Showing the original description.

gabelul/stitch-kit45Updated Jul 21, 2026

See all skills by gabelul

Report a problem with this skill