stitch::generate-design

1# Generate Design
2 
3Create new design screens from text descriptions, images, or mockups, edit
4existing screens with prompts and design system tokens, and generate design
5variants using Stitch MCP.
6 
7> [!NOTE]
8> Refer to your system prompt for instruction on handling MCP tool prefixes for
9> all tools mentioned in this skill (e.g., `list_projects`,
10> `generate_screen_from_text`, `edit_screens`).
11 
12## 🎨 Prompt Enhancement Pipeline
13 
14Before calling any Stitch generation or editing tool, you MUST enhance the
15user's prompt.
16 
17### 1. Analyze Context
18 
19- **Project**: Use `list_projects` to find the correct `projectId`. If no
20  suitable project exists, create one using `create_project`.
21- **Design System**: Check if a design system exists for the project via
22  `list_design_systems`. If one exists, design tokens (colors, fonts, roundness)
23  are already applied at the project level — do NOT include any color, font, or
24  theme instructions in the generation prompt. If none exists, delegate to the
25  **manage-design-system** skill first before generating screens.
26 
27### 2. Refine UI/UX Terminology
28 
29Consult [Design Mappings](references/design-mappings.md) to replace vague terms.
30 
31- Vague: "Make a nice header"
32- Professional: "Sticky navigation bar with glassmorphism effect and centered
33  logo"
34 
35Use [Prompting Keywords](references/prompt-keywords.md) for component names,
36adjective palettes, color roles, and shape descriptions.
37 
38### 3. Structure the Final Prompt
39…