AI Editor: How Scoped Prompt Editing Works
What this means
Scoped editing means AI looks at only the part you picked, not the whole page. This helps stop surprise changes in other places.
Scoped edit loop
Before you start
Quick check
Step-by-step
- Open AI Editor for your site.
- Click the exact part in preview that you want to change.
- Watch for the blue highlight so you know the right part was chosen.
- Type a prompt about that one part only.
- Wait while AI sends back new code for that selected part.
- Check the preview carefully.
- Save only when the result looks right.
Easy examples
Good prompt
Make this hero headline tighter, reduce empty space above the image, and improve mobile spacing for this section only.
Bad prompt
Redo the full website and make everything more premium. This is too broad for scoped editing.
Visual diagrams
Scoped AI edit flow
flowchart TD A[Open AI Editor] --> B[Click preview element] B --> C[Extract selected HTML fragment] C --> D[Collect related CSS and JS] D --> E[Send scoped prompt to AI] E --> F[Receive replacement fragment] F --> G[Merge fragment back into page] G --> H[Review preview] H --> I[Save manually] classDef blue fill:#dbeafe,stroke:#2563eb,stroke-width:2px,color:#0f172a; classDef purple fill:#ede9fe,stroke:#7c3aed,stroke-width:2px,color:#2e1065; classDef green fill:#dcfce7,stroke:#16a34a,stroke-width:2px,color:#052e16; class A,B,C,D blue; class E,F purple; class G,H,I green;
Why selection happens first
flowchart TD A[No selection] --> B[Prompt stays disabled] C[User selects element] --> D[Prompt unlocks] D --> E[AI edits only selected fragment] classDef red fill:#fee2e2,stroke:#dc2626,stroke-width:2px,color:#450a0a; classDef blue fill:#dbeafe,stroke:#2563eb,stroke-width:2px,color:#0f172a; classDef green fill:#dcfce7,stroke:#16a34a,stroke-width:2px,color:#052e16; class A,B red; class C,D blue; class E green;