跳到正文
cccskills
免费在 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.

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(1)

  • SKILL.md3.2 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

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.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

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.

中文简介正在准备中。当前显示原文说明。

gabelul/stitch-kit452026年7月21日 更新

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

中文简介正在准备中。当前显示原文说明。

gabelul/stitch-kit452026年7月21日 更新

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.

中文简介正在准备中。当前显示原文说明。

gabelul/stitch-kit452026年7月21日 更新

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.

中文简介正在准备中。当前显示原文说明。

gabelul/stitch-kit452026年7月21日 更新

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.

中文简介正在准备中。当前显示原文说明。

gabelul/stitch-kit452026年7月21日 更新

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.

中文简介正在准备中。当前显示原文说明。

gabelul/stitch-kit452026年7月21日 更新

查看 gabelul 的全部技能

报告此技能的问题