Design mode allows you to visually select an element on the page and edit it. Flip this switch to activate it and it will ask you to select an element
When you select an element, you may see related elements also highlighted. This usually means they’re represented by the same code (like in a loop or component) and modifying the style of one will modify the others as well
Visual Editing
This interface immediately updates the code without using any AI tokens
- edit copy and typography on the site
- visually adjust padding and margins
- deleting elements
Most AI models like to add extra labels and content to the page that I’m not interested in, so I’ll often jump into design mode after generating some UI, select elements I don’t want, and hit the delete key to get rid of them
If you support dark mode, I recommend using prompts to make color adjustments so it gets the dark mode variations right
Otherwise, you can scroll down in the color selector past the Tailwind palette to get to your custom colors. If your design is not using these semantic colors (and instead has hardcoded them) ask v0 to fix that and then your site will be more readily themable.
You can also edit the text content of elements in some cases
Targeted design prompts
When you select an element, it will appear as a badge in the message input to let you know this prompt will be targeted
This is a faster and more accurate way to make AI changes
Targeting an element does NOT mean v0 is incapable of reading or writing to the code outside of it. It often must read the surroundings to know how it’s positioned where it is and where its data comes from. For example, editing the element’s position may require modifying the flex layout rules of its parent.
Go to code
Right click an element and click Go to Code to jump to its position in the codebase. This is a super useful feature even outside of design mode.
Since v0 is writing almost all of your code, it can be hard to look at a button or piece of text and know exactly where in the codebase it is.
So I like to open design mode, select the element, and then jump straight to it in code.
CMD K code prompts
This is not technically related to design mode but builds upon the previous feature: after you Go to Code, you can press CMD+K to do a targeted prompt on the code.
This WILL only affect the selected area, so if you’re having trouble getting v0 to avoid touching the wrong code, this is a good backup plan
