1---
2description: Edit an existing design screen using Stitch MCP.
3---
4 
5# Workflow: Edit-Design
6 
7Make targeted changes to an already generated design.
8 
9## Steps
10 
11### 1. Identify the Screen
12Use `list_screens` or `get_screen` to find the correct `projectId` and `screenId`.
13 
14### 2. Formulate the Edit Prompt
15Be specific about the changes you want to make. Do not just say "fix it". 
16- **Location**: "Change the color of the [primary button] in the [hero section]..."
17- **Visuals**: "...to a darker blue (#004080) and add a subtle shadow."
18- **Structure**: "Add a secondary button next to the primary one with the text 'Learn More'."
19 
20### 3. Apply the Edit
21Call the `mcp_StitchMCP_edit_screens` tool.
22 
23```json
24{
25  "projectId": "...",
26  "selectedScreenIds": ["..."],
27  "prompt": "[Your target edit prompt]"
28}
29```
30 
31### 4. Present AI Feedback
32Always show the text description and suggestions from `outputComponents` to the user.
33 
34### 5. Download Design Assets
35After editing, download the updated HTML and screenshot urls from `outputComponents` to the `.stitch/designs` directory, overwriting previous versions to ensure the local files reflect the latest edits.
36 
37### 6. Verify and Repeat
38- Check the output screen to see if the changes were applied correctly.
39- If more polish is needed, repeat the process with a new specific prompt.
40 
41## Tips
42- **Keep it focused**: One edit at a time is often better than a long list of changes.
43- **Reference components**: Use professional terms like "navigation bar", "hero section", "footer", "card grid".
44- **Mention colors**: Use hex codes for precise color matching.
45