Click to Edit and the AI Design Assistant

You have a finished Pilates booking site. But the headline is 2 percent off, the button is a little small, and the photo leans slightly left. In the old world, you'd write a list, send it to a developer, and wait days. When this course ends, you fix it on the spot. Click, drag, drop, done.

VibeCampus editing gives you two hands. One is Click to edit: the precise hand that selects elements directly, moves them, changes them. The other is the AI Design Assistant: the big hand that takes a direction, drafts a plan, and changes the whole.

Let me say it up front: you're allowed to break things. Undo is always there. In this course we smash and restore freely, and that is how we learn.

With a build open, press the Click to edit button and edit mode turns on. A hint appears over the preview: click to select, double-click to type, right-click for more. Those three moves are the whole of editing.

In edit mode the preview becomes a canvas. Hover and each element shows a faint outline, so your eyes always know what can be grabbed. Think of the site as suddenly touchable, like Lego bricks.

Done fixing? Press done and edit mode closes and your result is saved. Turn on, touch, close. That's the entire rhythm.

Double-click any text you want to change. That spot becomes an input, right there. Titles, button labels, prices, intro paragraphs: every visible piece of text can be fixed in place this way. No separate editing window to open.

A single click is selection. The selected element gets a blue outline, and from there you can move it, resize it, or restyle it. Selection is the starting point of every edit.

Sometimes you grab the parent (the bigger block) instead of the element you wanted. Don't panic; click once more. Every extra click narrows the selection further inward.

A selected element can be dragged. Grab the photo and pull it right, grab the button and center it. Wherever you release the mouse becomes its new home.

On the corners and edges of the selection outline sit small dots, the resize handles. Drag them and the size changes. Corner handles scale both directions at once; edge handles scale one. For images, corners are safer because the aspect ratio survives.

Moving and stretching are the most intuitive edits, and also the most accident-prone. Don't change a lot at once; move a little, then look at the whole balance.

If dragging is editing by feel, the inspector is editing by precision. Select an element and a panel opens where you can set properties as values: color, spacing (padding and margins), font size and weight, corner rounding.

The inspector shines when things must match. Two buttons subtly different in size? Instead of eyeballing a drag, set both elements to the same numbers and they match perfectly. The secret of professional design isn't mystical taste, it's the rule of using the same numbers.

When changing colors, type your brand color's exact code. A pile of "roughly similar blues" makes a site look messy. One exact code used everywhere is what consistency means.

Lining up several elements? Use the alignment tools. Align left, center, distribute evenly: alignment beats eyeballing every time. Visitors subconsciously feel the difference between three cards slightly off and three cards ruler-straight.

Selected elements also move with the arrow keys, perfect for the 1-pixel adjustments a mouse can't manage. Big moves by drag, the last hair by arrows. That combination is hand editing in its final form.

The delete key removes elements you don't need. Deleted by accident? Undo is on your side, as always.

Right-click an element and a menu of AI actions opens, aimed at that element. Make this paragraph shorter, redesign just this section, replace this image: you're calling the AI on the part you grabbed, not the whole build.

The division of labor goes like this. Edits whose answer you know (position, size, color, wording) go by hand. Edits whose answer must be created ("make this intro more charming") go to the AI. It applies exactly to the element you grabbed, so there's no worry about anything else shifting.

AI actions consume credits at the normal edit rate. The expected cost shows before you run one, so confirm and proceed.

Now the big hand. The AI Design Assistant is a Pro feature that handles not spot fixes but the whole design's change of direction. Type a goal like "make the whole site more premium, in navy and gold", or pick from the prepared direction buttons (more premium, brighter and friendlier, stronger branding, cleaner and more minimal, new font pairing, new color theme).

The special part: it doesn't change anything right away. The assistant first asks a few questions, then shows a plan that reflects your answers. Which colors go where, which fonts and why, what stays untouched, all written out. You read the plan, and only when you approve does the change apply.

You can also declare what to keep in advance, like "leave the testimonials section as it is, and add a pricing section". It's less like bulldozing, more like conducting.

You've learned the tools; now the standards. First, contrast. Important and unimportant must look decisively different. Background versus text brightness, big titles versus small body. When contrast is weak, nothing catches the eye.

Second, hierarchy. The design should set the order eyes travel in. Give the title, the intro, and the action button a descending scale of size and color, and visitors read along the path you designed. Emphasize everything and you've emphasized nothing.

Third, whitespace. Beginners fill; professionals empty. The space between elements isn't waste, it's the raw material of premium. When a screen feels suffocating, missing whitespace is usually the culprit.

Sometimes the structure and content are right but you want the mood changed completely. That's when you use the full restyle. Ask the AI Design Assistant something like "keep the content and structure, change only the style, all of it, to minimal monochrome", and the layout and copy stay while the colors, type, and texture change outfits altogether.

Comparing before and after is study in itself. Seeing how one tone makes the same content read as a different business teaches you, physically, how much of a brand is style.

After a restyle, inspect the details. It's a large operation, and a stray button color or photo tone can clash with the new style. Finishing touches with Click to edit are part of the restyle.

Now the real thing, on your own build. Open one of your works in the Studio and turn on edit mode. Don't have one? Start one from any template.

The goal isn't a perfect design; it's getting three hand moves into your muscles. Take one mental snapshot of the screen when you start, so you can compare before and after.

Edits save automatically. The autosave indicator on screen is pressing the save button on your behalf, so put down the fear of losing work to a forgotten save.

Unwanted changes rewind one step at a time with undo. And before big changes, making your own return point is the professional habit. If the current state is good, confirm the save, then start the next experiment.

The real meaning of this net is the courage to experiment. Only the certainty that you can always come back produces bold attempts, and bold attempts produce good design.

You're now the person who spots the off detail while looking at a site and fixes it on the spot. You can operate all three tiers of tools: Click to edit the precise hand, AI actions the local support, and the Design Assistant the conductor of the whole.

Contrast, hierarchy, whitespace. Those three words are assets that will outlast any tool. Whatever screen you make from now on, that measuring eye travels with you.

The next course is Trustworthy Results. You'll learn the final gate before launch: verifying that the content you've polished so nicely is safe to send into the world.