stitch

Google Stitch UI 设计工具。根据文本提示生成界面、将设计转换为 React 组件、创建 DESIGN.md 设计系统。适用场景：设计 UI、生成界面、将 Stitch 转换为代码、创建设计令牌。关键词：stitch、设计、UI、界面、生成、react、组件、DESIGN.md、线框图、原型、模型。

SKILL.md

--- frontmatter

name: stitch
description: "Google Stitch UI design tool. Generate screens from text prompts, convert designs to React components, create DESIGN.md design systems. Use when: designing UI, generating screens, converting Stitch to code, creating design tokens. Keywords: stitch, design, UI, screen, generate, react, components, DESIGN.md, wireframe, prototype, mockup."
allowed-tools:
  - "stitch:*"
  - "Read"
  - "Write"
  - "Bash"
  - "WebFetch"

Stitch UI Design Skill

Google Stitch MCP integration for AI-powered UI design generation.

Workflows

1. Generate New Screen

bash

mcp-cli call stitch/generate_screen_from_text '{"projectId": "ID", "prompt": "description", "deviceType": "DESKTOP"}'

2. Export to React

→ Invoke react:components skill after getting screen

3. Create Design System

→ Invoke design-md skill to generate DESIGN.md

MCP Tools

Tool	Parameters
`stitch/list_projects`	filter: "view=owned" or "view=shared"
`stitch/create_project`	title: string
`stitch/get_project`	name: "projects/{id}"
`stitch/list_screens`	projectId: "projects/{id}"
`stitch/get_screen`	projectId, screenId
`stitch/generate_screen_from_text`	projectId, prompt, deviceType, modelId

Related Skills

•design-md - Extract design tokens → DESIGN.md
•react:components - Convert screens → React code