Which integrations are available for this server?

Generates CSS custom properties from design tokens, optionally with dark-mode block. Access Google Stitch design-generation API for project and screen management. Creates structured issue data for Jira from screen designs. Creates structured issue data for Linear from screen designs. Generates style guide documentation in markdown format from a screen. Converts Stitch HTML to React/TSX components with typed props and Tailwind CSS. Extracts design tokens into a complete tailwind.config.ts from a screen.

How do I use Stitch MCP Server?

1. Click on "Deploy Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Stitch MCP Server Generate a screen from text 'modern login page' in project 123" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

Stitch MCP Server

by mattferry

Overview Schema Source Related Servers Discussions Admin

TypeScript

Remote

Stitch MCP Server

The most comprehensive MCP server for Google Stitch — 36 tools for design-to-code workflows.

A modular TypeScript MCP (Model Context Protocol) server that wraps Google Stitch's design-generation API with 36 tools across 9 categories — from upstream proxy and code generation to design analysis, export, and project management.

Built by combining the best of davideast/stitch-mcp and GreenSheep01201/stitch-mcp-auto, then extended with advanced design-to-code utilities.

Features

Core

Full upstream proxy — Access all Google Stitch MCP tools directly
Workspace management — Persist project associations per directory via .stitch-project.json
Auto project resolution — Tools automatically detect the active project from session, workspace, or argument

Design Intelligence

Design context extraction — Pull colors, typography, spacing, and component patterns from any screen
Design system validation — Check screens against approved tokens for compliance scoring
Dark mode generation — Automatically generate dark variants with configurable contrast
Responsive variants — Adapt screens across mobile, tablet, and desktop with layout strategies
Component variants — Generate multiple visual styles of a component for A/B testing

Code Generation

Screen to React — Convert Stitch HTML to TSX with typed props and Tailwind classes
Screen to Tailwind config — Extract a complete tailwind.config.ts from a design
Screen to CSS variables — Generate semantic :root custom properties with optional dark-mode block
Design tokens — Export as CSS variables, Tailwind config, SCSS, or JSON

Analysis & Export

Accessibility audit — WCAG 2.1 compliance checking with severity scoring
Design comparison — Side-by-side diff of two screens (colors, typography, layout, components)
Design diff — Structured element/style/text/class diff for tracking iterations
Bulk export — Export all screens (HTML + screenshots) from a project
Style guide generation — Visual or markdown design documentation from a screen
Project summary — High-level overview with consistency scoring and recommendations

Integration

PM issue generation — Create structured issue data for Plane, Linear, Jira from screen designs
Template library — 10 predefined UI templates (dashboard, login, kanban, chat, etc.)
Trending designs — Apply modern design trends (glassmorphism, bento-grid, aurora gradients, etc.)

Related MCP server: Stitch MCP Auto

Quick Start

# 1. Clone and install
git clone https://github.com/oogleyskr/stitch-mcp-server.git
cd stitch-mcp-server
npm install

# 2. Build
npm run build

# 3. Set authentication (pick one)
export STITCH_API_KEY="your-api-key"
# OR
export STITCH_ACCESS_TOKEN="your-access-token"
# OR have gcloud CLI configured

Authentication

Three methods are supported, checked in priority order:

Priority	Method	Environment Variable	HTTP Header
1	API Key	`STITCH_API_KEY`	`X-Goog-Api-Key: <key>`
2	Access Token	`STITCH_ACCESS_TOKEN`	`Authorization: Bearer <token>`
3	gcloud CLI	(auto-detected)	`Authorization: Bearer <token>`

Method 1: API Key (Recommended)

export STITCH_API_KEY="AIza..."

Method 2: Access Token

export STITCH_ACCESS_TOKEN="ya29...."
export GOOGLE_CLOUD_PROJECT="my-project-id"  # optional, for billing

Method 3: gcloud CLI

gcloud auth login
gcloud auth application-default login
export GOOGLE_CLOUD_PROJECT="my-project-id"  # optional

The server automatically runs gcloud auth print-access-token and validates the token format.

Complete Tool Reference

Upstream Stitch Tools (7)

Tools proxied directly to Google's Stitch MCP endpoint.

Tool	Description	Required Parameters
`list_projects`	List all accessible Stitch projects	—
`get_project`	Get project details	`projectId`
`list_screens`	List screens in a project	`projectId`
`get_screen`	Get screen details with download URLs	`projectId`, `screenId`
`generate_screen_from_text`	Generate a screen from a text prompt	`projectId`, `prompt`
`edit_screens`	Edit existing screens with text instructions	`projectId`, `screenIds[]`, `prompt`
`generate_variants`	Generate design variants of a screen	`projectId`, `screenId`

Code & Build Tools (4)

Tool	Description	Required Parameters	Optional
`get_screen_code`	Fetch raw HTML code of a screen	`projectId`, `screenId`	—
`get_screen_image`	Fetch screenshot as base64 PNG	`projectId`, `screenId`	—
`build_site`	Map screens to routes, fetch all HTML	`projectId`, `routes[]`	—
`list_tools`	List all available tools with schemas	—	—

Workspace Tools (3)

Tool	Description	Required Parameters
`get_workspace_project`	Check if workspace has a linked project	—
`set_workspace_project`	Link a project to current workspace	`projectId`
`clear_workspace_project`	Remove workspace project link	—

Design Tools (6)

Tool	Description	Required Parameters	Optional
`extract_design_context`	Extract colors, typography, spacing, components	`projectId`, `screenId`	`includeComponents`, `includeTypography`, `includeColors`, `includeSpacing`
`apply_design_context`	Generate screen using extracted design context	`projectId`, `designContext`, `prompt`	`deviceType`
`generate_design_tokens`	Generate CSS vars / Tailwind / SCSS / JSON tokens	`projectId`, `screenId`	`format`, `includeSemanticNames`
`generate_responsive_variant`	Create responsive version for different viewport	`projectId`, `screenId`, `targetDevice`	`adaptationStrategy`
`batch_generate_screens`	Generate multiple related screens consistently	`projectId`, `screens[]`	`sharedDesignContext`, `deviceType`
`generate_from_template`	Generate from 10 predefined UI templates	`projectId`, `template`	`customization`, `deviceType`, `style`

Available templates: dashboard, settings, login, profile, pricing, landing-hero, data-table, kanban-board, chat-interface, file-manager

Available styles: modern, minimal, corporate, playful, elegant

Analysis Tools (4)

Tool	Description	Required Parameters	Optional
`analyze_accessibility`	WCAG 2.1 accessibility analysis	`projectId`, `screenId`	`level` (A/AA/AAA), `includeRecommendations`
`compare_designs`	Compare two screens for design inconsistencies	`projectId`, `screenId1`, `screenId2`	`compareAspects[]`
`extract_components`	Extract reusable UI components	`projectId`, `screenId`	`componentTypes[]`, `outputFormat` (json/react/html/vue)
`design_diff`	Structured diff between two screens	`projectId`, `screenId1`, `screenId2`	`includeStyleDiff`, `includeTextDiff`

Export Tools (4)

Tool	Description	Required Parameters	Optional
`generate_style_guide`	Generate visual style guide from a screen	`projectId`, `screenId`	`sections[]`, `format` (visual/documentation/both)
`export_design_system`	Export complete design system package	`projectId`	`screenIds[]`, `includeTokens`, `includeComponents`, `tokenFormat`, `componentFormat`
`suggest_trending_design`	Apply modern design trends to a prompt	`projectId`, `prompt`, `trends[]`	`intensity`, `deviceType`
`export_all_screens`	Bulk export all screens (HTML + screenshots)	`projectId`	`includeHtml`, `includeScreenshots`, `maxScreens`

Available trends: glassmorphism, bento-grid, gradient-mesh, aurora-gradients, 3d-elements, micro-interactions, dark-mode, minimalist, brutalist, neomorphism, retro-futurism, organic-shapes, bold-typography

Codegen Tools (1)

Tool	Description	Required Parameters	Optional
`screen_to_react`	Convert screen to React/TSX with Tailwind CSS	`projectId`, `screenId`	`componentName`, `includeResponsive`

Integration Tools (1)

Tool	Description	Required Parameters	Optional
`screen_to_plane_issue`	Generate PM issue data from a screen	`projectId`, `screenId`	`screenName`, `workspaceSlug`, `planeProjectId`, `priority`, `additionalContext`

Advanced Tools (6)

Tool	Description	Required Parameters	Optional
`screen_to_tailwind_config`	Extract complete `tailwind.config.ts`	`projectId`, `screenId`	`prefix`, `includePlugins`
`screen_to_css_variables`	Extract CSS custom properties with semantic names	`projectId`, `screenId`	`includeDarkMode`, `namespace`
`validate_design_system`	Check screen compliance against design tokens	`projectId`, `screenId`	`approvedColors[]`, `approvedFonts[]`, `approvedSpacing[]`, `approvedRadii[]`, `strictMode`
`generate_dark_mode`	Generate dark-mode variant of a screen	`projectId`, `screenId`	`preserveAccents`, `contrast`, `deviceType`
`generate_component_variants`	Generate visual variants of a component	`projectId`, `screenId`, `componentType`	`variantCount`, `variantStyles[]`, `deviceType`
`project_summary`	High-level project overview with consistency score	`projectId`	`analyzeConsistency`, `maxScreensToAnalyze`

Architecture

src/
├── index.ts              # Entry point — MCP server setup, tool routing, project resolution
├── auth.ts               # Authentication (API key, access token, gcloud CLI fallback)
├── stitch-client.ts      # JSON-RPC client, download helpers, screen list parser
├── types.ts              # TypeScript interfaces (auth, RPC, tools, design context)
└── tools/
    ├── helpers.ts         # Shared utilities (extractUnique, extractCssValues, validators)
    ├── upstream.ts        # Proxy to upstream Stitch tools (7 tools)
    ├── code.ts            # Screen code/image retrieval, site building (4 tools)
    ├── workspace.ts       # Workspace project management (3 tools)
    ├── design.ts          # Design context, tokens, responsive, batch, templates (6 tools)
    ├── analysis.ts        # Accessibility, comparison, components, design diff (4 tools)
    ├── export.ts          # Style guides, design system export, trends, bulk export (4 tools)
    ├── codegen.ts         # Screen-to-React conversion (1 tool)
    ├── integration.ts     # Screen-to-PM-issue bridge (1 tool)
    └── advanced.ts        # Tailwind config, CSS vars, validation, dark mode, variants, summary (6 tools)

Key Design Decisions

Modular tool files — Each category has its own file with definitions and handlers
Shared helpers — Common HTML extraction functions centralised in helpers.ts
Input validation — All required parameters validated with requireString/requireNonEmptyArray
Auto project resolution — Three-tier lookup: argument > session cache > .stitch-project.json
Timeout protection — All HTTP requests (RPC, downloads) have configurable timeouts
Immutable patterns — Tool definitions are readonly, args are spread (never mutated)

Integration

Claude Code / Claude Desktop

Add to your MCP config file (.mcp.json or Claude Desktop settings):

{
  "mcpServers": {
    "stitch": {
      "command": "node",
      "args": ["/path/to/stitch-mcp-server/dist/index.js"],
      "env": {
        "STITCH_API_KEY": "your-api-key"
      }
    }
  }
}

MCPJungle

{
  "name": "stitch",
  "command": "node",
  "args": ["/path/to/stitch-mcp-server/dist/index.js"],
  "env": {
    "STITCH_API_KEY": "your-api-key"
  },
  "tags": ["design", "ui", "stitch", "google"]
}

Cursor

Add to .cursor/mcp.json in your project:

{
  "mcpServers": {
    "stitch": {
      "command": "node",
      "args": ["/path/to/stitch-mcp-server/dist/index.js"],
      "env": {
        "STITCH_API_KEY": "your-api-key"
      }
    }
  }
}

VS Code (Copilot MCP)

Add to your VS Code settings:

{
  "mcp.servers": {
    "stitch": {
      "command": "node",
      "args": ["/path/to/stitch-mcp-server/dist/index.js"],
      "env": {
        "STITCH_API_KEY": "your-api-key"
      }
    }
  }
}

Environment Variables

Variable	Required	Description
`STITCH_API_KEY`	One of three	Google API key for Stitch access
`STITCH_ACCESS_TOKEN`	One of three	OAuth2 access token
`GOOGLE_CLOUD_PROJECT`	Optional	GCP project ID for billing (Bearer auth)
`GCLOUD_PROJECT`	Optional	Alias for `GOOGLE_CLOUD_PROJECT`
`STITCH_HOST`	Optional	Override the Stitch API endpoint URL (default: `https://stitch.googleapis.com/mcp`)

Examples

1. Design-to-Code Workflow

User: "Generate a dashboard screen and convert it to React"

1. generate_screen_from_text → Creates the design in Stitch
2. get_screen_code           → Fetches the HTML
3. screen_to_react           → Converts to a React/TSX component with Tailwind
4. screen_to_tailwind_config → Extracts a matching tailwind.config.ts

2. Design System Audit

User: "Check if our screens follow the design system"

1. project_summary          → Overview of all screens with consistency score
2. validate_design_system   → Check each screen against approved tokens
3. compare_designs          → Compare inconsistent screens side-by-side
4. export_design_system     → Export the corrected design system for handoff

3. Dark Mode Generation

User: "Create a dark mode version of our app"

1. list_screens             → Find all screens in the project
2. extract_design_context   → Extract the current design DNA
3. generate_dark_mode       → Generate dark variants for each screen
4. screen_to_css_variables  → Export CSS vars with dark-mode overrides

4. Component Library Build

User: "Build a component library from our designs"

1. extract_components           → Pull buttons, cards, forms, nav from a screen
2. generate_component_variants  → Create 3-5 visual variants of each component
3. screen_to_react              → Convert each variant to React
4. generate_style_guide         → Create visual documentation

5. Bulk Project Export

User: "Export everything from this project for handoff"

1. project_summary        → Get the full project overview
2. export_all_screens     → Bulk export all HTML + screenshots
3. export_design_system   → Export tokens, components, and documentation
4. generate_design_tokens → Generate CSS variables and Tailwind config

6. Rapid Prototyping with Templates

User: "Create a SaaS app prototype"

1. generate_from_template → "dashboard" with "dark theme, analytics focus"
2. generate_from_template → "settings" with "minimal style, dark theme"
3. generate_from_template → "pricing" with "3 tiers, annual toggle"
4. generate_from_template → "login" with "social auth, dark background"
5. build_site             → Map all screens to routes

Contributing

Adding a New Tool

Choose the right module — Pick the tool file that matches the category, or create a new one
Define the tool — Add a ToolDefinition to the module's definitions array
Implement the handler — Write an async function that returns McpToolResult
Register in the dispatcher — Add a case to the module's switch statement
Wire into index.ts — If it's a new module, import it and add to the routing logic
Add to TOOLS_REQUIRING_PROJECT — If the tool needs a projectId
Build and test — Run npm run build and verify the tool appears in list_tools

Tool Handler Pattern

async function handleMyNewTool(
  args: Record<string, unknown>,
  creds: AuthCredentials,
  projectId?: string
): Promise<McpToolResult> {
  // 1. Validate inputs
  const pid = requireString(args.projectId, "projectId");

  // 2. Fetch data
  const html = await fetchScreenHtml(pid, screenId, creds, projectId);

  // 3. Process
  const result = analyzeHtml(html);

  // 4. Return structured result
  return {
    content: [{
      type: "text",
      text: JSON.stringify({ success: true, ...result }, null, 2),
    }],
  };
}

License

Apache-2.0 -- Contributions welcome.

Available Tools

44 tools

analyze_accessibilityA

Analyzes a screen for WCAG 2.1 accessibility compliance. Checks color contrast, text sizes, touch targets, semantic structure, and provides actionable recommendations.

Inputs: screenId (required), projectId (required), level, includeRecommendations.

apply_design_contextB

Generates a new screen using a previously extracted design context for visual consistency.

Inputs: prompt (required), projectId (required), designContext (required), deviceType.

apply_design_systemA

Destructive

Applies a design system to a list of screens. Use this tool when the user wants to update one or more screens to match the style of a design system. This tool applies the selected design system's foundational design tokens (colors, fonts, shapes, etc.) to the chosen screens, modifying their appearance to align with the design system.

Inputs: assetId (required), projectId (required), selectedScreenInstances (required). Returns: The output design generated by the agent.

batch_generate_screensB

Generates multiple related screens in a single operation with consistent design language.

Inputs: screens (required), projectId (required), deviceType, sharedDesignContext.

build_siteA

Builds a site from a Stitch project by mapping screens to routes. Returns the design HTML for each page to use as context for code generation.

Inputs: routes (required), projectId (required).

clear_workspace_projectA

Removes the Stitch project association from the current workspace/folder.

Inputs: no named parameters.

compare_designsC

Compares two screens to identify design differences, inconsistencies, and suggest harmonization opportunities.

Inputs: projectId (required), screenId1 (required), screenId2 (required), compareAspects.

create_design_systemA

Destructive

Creates a new design system for a project. Use this tool when the user wants to set or update the overall visual theme, style, or branding of the application. This includes configuring:

Color Palette: Presets, custom primary colors, and saturation levels.
Typography: Font families (e.g., Inter, Roboto, etc.).
Shape: Corner roundness for UI elements.
Appearance: Light and dark mode background colors.
Design MD: Free-form design instructions in markdown. This tool establishes the foundational design tokens that apply across all screens in the project.

Instructions for Tool Call:

Call update_design_system tool immediately after this tool to apply the design system to the project, and display the design system in the UI.

Inputs: designSystem (required), projectId. Returns: An Asset resource.

create_design_system_from_design_mdA

Destructive

Creates a design system for a project, with user uploaded DESIGN.md file, and displays the design system in the UI.

Instructions for Tool Call:

Should call upload_design_md tool first to upload DESIGN.md to a Stitch project.

Inputs: projectId (required), selectedScreenInstance (required), deviceType. Returns: Response message for CreateDesignSystemFromDesignMd.

create_projectA

Destructive

Creates a new Stitch project. A project is a container for UI designs and frontend code.

Inputs: title. Returns: A project is a single app.

delete_projectA

Destructive

Deletes a specific Stitch project using its project name.

Instructions for Tool Call:

This action cannot be undone. Please confirm with "yes" or "no" to proceed.

Inputs: name (required). Returns: Response message for DeleteProject.

design_diffA

Compares two screens by name and returns a structured diff showing added elements, removed elements, style changes, and text changes. Useful for tracking design iterations.

Inputs: projectId (required), screenId1 (required), screenId2 (required), includeTextDiff, +1 more.

edit_screensC

Edits one or more existing screens based on text instructions.

Inputs: prompt (required), projectId (required), screenIds (required).

export_all_screensA

Exports all screens from a Stitch project. Fetches each screen's HTML code and screenshot, returning a complete project export as structured data. Useful for backing up or migrating designs.

Inputs: projectId (required), maxScreens, includeHtml, includeScreenshots.

export_design_systemB

Exports a complete design system package from project screens including tokens, components, documentation, and assets. Ready for developer handoff.

Inputs: projectId (required), screenIds, tokenFormat, includeTokens, +3 more.

extract_componentsB

Extracts reusable UI component patterns (buttons, cards, forms, inputs) from a screen with their styles and variants.

Inputs: screenId (required), projectId (required), outputFormat, componentTypes.

extract_design_contextA

Extracts design DNA from an existing screen — colors, typography, spacing, layout patterns, and component styles. Use this to maintain visual consistency across multiple screens.

Inputs: screenId (required), projectId (required), includeColors, includeSpacing, +2 more.

generate_component_variantsA

Analyses a screen to identify a target component (button, card, hero, form, navigation) and generates multiple visual variants of it as separate screens. Useful for A/B testing or building component libraries.

Inputs: screenId (required), projectId (required), componentType (required), deviceType, +2 more.

generate_dark_modeA

Takes a light-mode screen and generates a dark-mode variant. Analyses the existing color palette and instructs Stitch to regenerate with inverted brightness, adjusted contrast, and preserved brand accents.

Inputs: screenId (required), projectId (required), contrast, deviceType, +1 more.

generate_design_tokensC

Generates design tokens (CSS variables, Tailwind config, SCSS, or JSON) from a screen's design.

Inputs: screenId (required), projectId (required), format, includeSemanticNames.

generate_from_templateC

Generates a screen from a predefined UI template with user customizations. Provides 10 common templates (dashboard, settings, login, profile, pricing, landing-hero, data-table, kanban-board, chat-interface, file-manager) as a base prompt, layered with custom instructions for faster UI generation.

Inputs: template (required), projectId (required), style, deviceType, +1 more.

generate_responsive_variantB

Creates a responsive variant of an existing screen for a different device type while maintaining the same design language.

Inputs: screenId (required), projectId (required), targetDevice (required), adaptationStrategy.

generate_screen_from_textC

Generates a new screen from a text prompt describing the desired UI.

Inputs: prompt (required), projectId (required), deviceType.

generate_style_guideB

Generates a comprehensive style guide / design documentation screen from an existing design. Creates a visual reference of colors, typography, components, and usage guidelines.

Inputs: screenId (required), projectId (required), format, sections.

generate_variantsC

Generates design variants of an existing screen.

Inputs: screenId (required), projectId (required), count.

get_projectB

Gets details of a specific Stitch project.

Inputs: projectId (required).

get_screenA

Gets details of a specific screen including download URLs.

Inputs: screenId (required), projectId (required).

get_screen_codeA

Retrieves the HTML code content of a screen. Returns the raw HTML that can be used for code generation or analysis.

Inputs: screenId (required), projectId (required).

get_screen_imageA

Retrieves the screenshot/preview image of a screen as base64-encoded PNG.

Inputs: screenId (required), projectId (required).

get_workspace_projectA

Checks if there is an existing Stitch project associated with the current workspace/folder. Returns project info if found, or null if no project is set. Use this at the start of a session to check for existing projects.

Inputs: no named parameters.

list_design_systemsA

Read-only

Lists all design systems for a given project.

Inputs: projectId. Returns: Response message for ListDesignSystems.

list_projectsA

Lists all Stitch projects accessible to the authenticated user.

Inputs: no named parameters.

list_screensB

Lists all screens in a Stitch project.

Inputs: projectId (required).

list_toolsA

Lists all available tools with their descriptions and input schemas.

Inputs: no named parameters.

project_summaryA

Returns a high-level summary of a Stitch project: screen count, list of screens with names, detected common patterns, design consistency score (based on color/font overlap across screens), and device type distribution.

Inputs: projectId (required), analyzeConsistency, maxScreensToAnalyze.

screen_to_css_variablesA

Extracts CSS custom properties (variables) from a screen's design. Produces a complete :root block with semantic naming for colors, typography, spacing, shadows, and border radii. Supports optional dark-mode variable overrides.

Inputs: screenId (required), projectId (required), namespace, includeDarkMode.

screen_to_plane_issueA

Creates a structured output from a Stitch screen suitable for creating a Plane (or similar PM tool) issue. Includes a title derived from the screen name, a description with the design preview as base64 image, an implementation checklist extracted from HTML components, and suggested labels. Bridges the Stitch-to-project-management workflow.

Inputs: screenId (required), projectId (required), priority, screenName, +3 more.

screen_to_reactA

Converts a Stitch screen's HTML into a clean React/TSX function component with a typed props interface, Tailwind CSS classes extracted from inline styles where possible, and proper imports. Returns usable React code ready to drop into a project.

Inputs: screenId (required), projectId (required), componentName, includeResponsive.

screen_to_tailwind_configA

Extracts a complete tailwind.config.ts from a screen's design. Analyses colors, fonts, spacing scale, border radii, shadows, and breakpoints to produce a ready-to-use Tailwind CSS configuration object.

Inputs: screenId (required), projectId (required), prefix, includePlugins.

set_workspace_projectA

Associates a Stitch project with the current workspace/folder. The project info is stored in .stitch-project.json in the current directory.

Inputs: projectId (required), projectName.

suggest_trending_designB

Suggests and applies modern UI/UX design trends to a screen prompt. Includes glassmorphism, bento-grid, gradient meshes, micro-interactions, and more.

Inputs: prompt (required), trends (required), projectId (required), intensity, +1 more.

update_design_systemA

Destructive

Updates a design system for a project. Use this tool when the user wants to change the overall visual theme, style, or branding of the application. This includes configuring:

Color Palette: Presets, custom primary colors, and saturation levels.
Typography: Font families (e.g., Inter, Roboto, etc.).
Shape: Corner roundness for UI elements.
Appearance: Light and dark mode background colors.
Design MD: Free-form design instructions in markdown. This tool establishes the foundational design tokens that apply across all screens in the project.

Inputs: name (required), projectId (required), designSystem (required). Returns: An Asset resource.

upload_design_mdA

Destructive

Uploads DESIGN.md to a Stitch project. Use this tool when the user wants to create a design system from a DESIGN.md file.

Instructions for Tool Call:

Call create_design_system_from_design_md tool immediately after this tool to create the design system from the uploaded DESIGN.md, and display the design system in the UI.

Inputs: projectId (required), designMdBase64 (required). Returns: An instance of a screen on the project. Next ID: 18

validate_design_systemA

Validates whether a screen follows a given design token set. Checks colors, fonts, spacing, and border-radii against approved values and reports violations, compliance percentage, and suggestions for fixes.

Inputs: screenId (required), projectId (required), strictMode, approvedFonts, +3 more.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

Deploy Server

Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

TDQS

B3.2/5.0

Scored 2026-09-14 21:50 across 44 tools

Disambiguation2/5

Numerous tools overlap significantly: generate_screen_from_text, edit_screens, generate_variants, batch_generate_screens, generate_from_template, generate_responsive_variant, generate_dark_mode, generate_component_variants, apply_design_context, and suggest_trending_design all involve creating or modifying screens with subtle differences. Similarly, create_design_system and update_design_system are almost identical in description, and generate_design_tokens, screen_to_tailwind_config, screen_to_css_variables, export_design_system, validate_design_system overlap in token extraction. This makes it difficult for an agent to pick the right tool.

Naming Consistency4/5

Most tools follow a clear verb_noun pattern (e.g., list_projects, create_project, generate_screen_from_text). There are a few deviations like design_diff, project_summary, and screen_to_react, but these are still understandable and don't break the overall pattern. The naming is mostly predictable and systematic.

Tool Count2/5

With 44 tools, the server far exceeds the 25+ threshold that typically indicates an excessive count. Even for a complex design tool, this many tools creates cognitive load and makes discovery and selection harder. A leaner set with clearer boundaries would be more appropriate.

Completeness4/5

The tool surface covers a wide range of design workflows: project CRUD, screen listing/generation/editing, design system management, exports, conversions, and analysis. Minor gaps exist (e.g., no delete_screen, no direct screen rename), but for the core purpose of UI generation and design system management, the set is fairly comprehensive and rarely leaves dead ends.

Maintenance

ActivityNo data

ResponsivenessOutdated data

Resources

Related MCP Connectors

DATPAQ
com.datpaq
34 production API tools over one hosted MCP endpoint.
Developer Tools
2
https://mcp.datpaq.com/mcp
crowvault
io.github.rajeswaran140
327 dev tools via REST API and MCP. Generate Dockerfiles, schemas, K8s, APIs, and more.
Developer Tools CI/CD & DevOps
2
https://api.crowvault.ai/mcp
OneSimpleAPI
com.onesimpleapi
Screenshots, PDFs, image editing, QR codes, email validation and more through one hosted MCP server.
Image & Video Processing Browser Automation
1
https://onesimpleapi.com/mcp
strata
ai.klavis
MCP server for progressive tool usage at any scale (see https://klavis.ai)
Agent Orchestration Autonomous Agents Developer Tools
25,748
https://strata.klavis.ai/mcp/

Related MCP Servers

Auto Stitch MCP
Developer Tools App Automation Software Architecture
GreenSheep01201
A
license
Not graded
quality
Not graded
maintenance
An automated MCP server for Google Stitch that enables AI-driven UI design generation, screen management, and design system extraction. It provides 19 professional tools for creating consistent web interfaces, conducting accessibility audits, and exporting design tokens.
Updated 10 months ago (2026-01-21 15:33 UTC)
-
Stitch MCP Auto
Developer Tools App Automation Software Architecture
GreenSheep01201
A
license
Not graded
quality
D
maintenance
An automated MCP server for Google Stitch that enables AI-driven UI design generation, accessibility audits, and design system management. It streamlines workflows for creating responsive screens, extracting design tokens, and maintaining visual consistency across professional web projects.
Updated 9 months ago (2026-02-15 14:06 UTC)
61 npm
31
Apache 2.0
Stitch MCP
Developer Tools Image & Video Processing App Automation
Kargatharaakash
A
license
Not graded
quality
D
maintenance
A universal MCP server for Google Stitch that enables AI-powered UI/UX design generation by extracting design context and metadata from existing screens. It allows users to fetch screen code and images to create consistent, styled UI components across multiple projects.
Updated 9 months ago (2026-02-13 09:16 UTC)
703 npm
121
Apache 2.0
Stitch-MCP
Design Tools AI & Machine Learning Project Management
samueljayasingh
F
license
Not graded
quality
D
maintenance
An MCP server that exposes Google Stitch's AI-powered UI design capabilities as local tools. It enables project management, screen generation/editing, and design system operations by forwarding requests to Google's Stitch API.
Updated 7 months ago (2026-04-16 06:07 UTC)
2
-

Stitch MCP Server

Features

Core

Design Intelligence

Code Generation

Analysis & Export

Integration

Quick Start

Authentication

Method 1: API Key (Recommended)

Method 2: Access Token

Method 3: gcloud CLI

Complete Tool Reference

Upstream Stitch Tools (7)

Code & Build Tools (4)

Workspace Tools (3)

Design Tools (6)

Analysis Tools (4)

Export Tools (4)

Codegen Tools (1)

Integration Tools (1)

Advanced Tools (6)

Architecture

Key Design Decisions

Integration

Claude Code / Claude Desktop

MCPJungle

Cursor

VS Code (Copilot MCP)

Environment Variables

Examples

1. Design-to-Code Workflow

2. Design System Audit

3. Dark Mode Generation

4. Component Library Build

5. Bulk Project Export

6. Rapid Prototyping with Templates

Contributing

Adding a New Tool

Tool Handler Pattern

License

Available Tools

Tool Schema Changelog

TDQS

Maintenance

Resources

Related MCP Connectors

Related MCP Servers

Auto Stitch MCP

Stitch MCP Auto

Stitch MCP

Stitch-MCP