Generate Design

Create new design screens from text descriptions, images, or mockups, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP.

[!NOTE] Refer to your system prompt for instruction on handling MCP tool prefixes for all tools mentioned in this skill (e.g., list_projects, generate_screen_from_text, edit_screens).

🎨 Prompt Enhancement Pipeline

Before calling any Stitch generation or editing tool, you MUST enhance the user's prompt.

1. Analyze Context

• Project: Use list_projects to find the correct projectId. If no suitable project exists, create one using create_project.
• Design System: Check if a design system exists for the project via list_design_systems. If one exists, design tokens (colors, fonts, roundness) are already applied at the project level, do NOT include any color, font, or theme instructions in the generation prompt. If none exists, delegate to the manage-design-system skill first before generating screens.

2. Refine UI/UX Terminology

Consult Design Mappings to replace vague terms.

• Vague: "Make a nice header"
• Professional: "Sticky navigation bar with glassmorphism effect and centered logo"

Use Prompting Keywords for component names, adjective palettes, color roles, and shape descriptions.

3. Structure the Final Prompt

Format the enhanced prompt for Stitch. Focus exclusively on layout, content, and structure, never include colors, fonts, or theme instructions (these are handled by the manage-design-system skill at the project level).

For new screens, use this template:

[Overall purpose and user intent of the page]

**PLATFORM:** [Web/Mobile], [Desktop/Mobile]-first