Edit Web Designs Using UI Annotations in the Codex Browser

UI Annotation Prompt Example

Change Execution Prompt

How to Edit Designs Using AI Annotations

1. Open your web application or project within Browser Codex.
2. Click on any UI element you want to modify to open the comment/annotation feature.
3. Type specific instructions in the annotation box that appears (e.g., 'the pieces should be bigger').
4. Add additional annotations to other sections if you have more than one change in mind.
5. Click the 'make these changes' button to process all annotations simultaneously.
6. Wait for the AI to generate new code and automatically update the browser view based on your instructions.

Using Immersive Mode for Vibe Coding

1. Click the 'Full Screen' button at the corner of the browser window.
2. Use the message area or annotations within full-screen mode to interact with the AI.
3. Focus on the document or design elements you are working on without distractions from other editor UI components.