Edit with Visually Copilot: How to Use the New AI-Powered Editor

1. Select the Section You Want to Edit

• Hover over any section or component in the editor.

• Click on it to reveal the AI editing bar, where you can instruct the AI on the changes you want to make.

   

2. Make Your AI Edits

• To edit additional elements, hover over another component and select it in the sidebar.

• Once you submit your instruction, the AI generates the initial edit.

• After the edit is applied, you can:

  • Use the suggested prompts at the bottom of the sidebar to refine the changes.

  • Or type your own instructions to further customize the edits.

3. Manage Component States

• You can view and change the state of any component you’ve edited.

• Supported states include:

  • Initial

  • Any other states available for that component

• Adjusting component states lets you see how edits behave in different scenarios and make any necessary refinements.

Tips for Best Results

• Hover over each component before editing it: Before selecting a component in the Copilot sidebar for additional edits, hover over it in the editor so Copilot knows exactly which element to apply your changes to.

• Start with clear instructions for the best initial results.

• Use suggested prompts or custom instructions after the first edit to fine-tune your changes.

• Always review component states to ensure edits look and function as expected.