generate_design_tokens

MCP tool from Stitch MCP Auto by GreenSheep01201

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

How to use it

generate_design_tokens is exposed by the Stitch MCP Auto MCP server. Add the server to your MCP client (Claude Desktop, Cursor, Windsurf and others), and the generate_design_tokens tool becomes available to the model automatically. See the full listing for setup details and every tool this server provides.

Install Stitch MCP Auto

$npx stitch-mcp-auto-setup

FULL STITCH MCP AUTO LISTING

Other tools in Stitch MCP Auto (33)

analyze_accessibility

Analyzes a screen for WCAG 2.1 accessibility compliance with actionable recommendations.

apply_design_context

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

aspectRatio

1:1, 16:9, 9:16, 4:3, 3:4

assetType

logo, icon, illustration, hero, wireframe, background, pattern

backgroundRemovalMode

"white" \

backgroundThreshold

number

batch_generate_screens

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

check_antigravity_auth

None

clear_workspace_project

🗑️ Clear workspace project association

compare_designs

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

create_project

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

export_design_system

Exports a complete design system package (tokens, components, docs) for developer handoff.

extract_components

Extracts reusable UI component patterns (buttons, cards, forms) with their styles.

extract_design_context

Extracts design DNA (colors, typography, spacing, components) from an existing screen for visual consistency across multiple screens.

fetch_screen_code

Retrieves the actual HTML/Code content of a screen.

fetch_screen_image

Retrieves the screenshot/preview image of a screen.

forceAntigravityAuth

true to trigger browser login

gemini-2.5-pro

✅ Available

gemini-3-pro

✅ Available

generate_design_asset

Antigravity

generate_responsive_variant

Creates responsive variants of an existing screen for different device types.

generate_screen_from_text

Generates a new screen within a project from a text prompt.

generate_style_guide

Generates a comprehensive style guide/design documentation from an existing design.

get_project

Retrieves the details of a specific Stitch project using its project name.

get_screen

Retrieves the details of a specific screen within a project.

get_workspace_project

🔍 Check current workspace project status

list_projects

Lists all Stitch projects accessible to the user. By default, it lists projects owned by the user.

list_screens

Lists all screens within a given Stitch project.

orchestrate_design

Stitch + Antigravity

removeBackground

boolean

saveToFile

true by default (saves to current directory)

set_workspace_project

💾 Manually associate a project with the workspace

suggest_trending_design

Applies 2024-2025 UI trends (glassmorphism, bento-grid, gradient-mesh, etc.) to screen generation.