Lists all Stitch projects accessible to the authenticated user.

Gets details of a specific Stitch project.

Lists all screens in a Stitch project.

Gets details of a specific screen including download URLs.

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

Edits one or more existing screens based on text instructions.

Generates design variants of an existing screen.

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

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

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.

Lists all available tools with their descriptions and input schemas.

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.

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

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

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

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

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

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

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

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.

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

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

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

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.

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

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

Lists all design systems for a given project.

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.