What You Can Do

Anything you can do manually in the builder, you can ask the Vibe Panel to do for you. Here's what that looks like in practice.

Generate Full Pages

Describe the page you need and the AI will create it with multiple sections, proper structure, and responsive variants for tablet and mobile.

"Make me a new page about my services as a developer"

"Generate a full pricing page with a hero section, a comparison table for 3 pricing tiers, and an FAQ section"

"Create a contact page with a heading, contact form, and a map"

Make Everything Responsive

Making a site responsive is usually the most tedious part of web design — adjusting layouts, font sizes, and spacing across breakpoints one element at a time. With the Vibe Panel, just describe what you need and it's done in seconds.

"Make this page fully responsive for tablet and mobile"

"Stack the three feature cards vertically on mobile and reduce the heading size"

"The pricing section looks broken on tablet — fix the layout and spacing"

"Make the footer two columns on tablet and single column on mobile"

Modify Styles & Content

Point to any element and describe what you want changed — colors, text, fonts, spacing, effects. You can reference other parts of your site to keep things consistent.

"Change the green of my services section to match the other accent colors"

"Make the hero section background the same as the hero on the home page"

"Change the icon color of the FAQ arrows to white"

Reorder & Restructure

Rearrange sections, move elements between containers, fix layout issues.

"The order of the sections on this page is wrong, fix it — Hero, Services, Tech Stack, then CTA"

"Put the technology stack section directly after the hero section"

"Move the signup button into the hero section and center it"

Create & Edit Components

Build full components with variants, variables, and interactions — or modify existing ones.

"Make me a sliding gallery component with 3 variants"

"Make me a reusable header component"

"Create a button component with default and hover variants, and a text variable for the label"

Copy Effects Between Pages

Reference elements from other pages and the AI will recreate them where you need.

"On the home page hero there's a gradient glow effect floating — add it here as well"

"Insert the ambient glow nodes from the home page hero into this page's hero section"

Add Responsive Viewports

Add tablet and mobile versions to existing pages, or let the AI generate responsive variants automatically when creating new content.

"Add tablet and mobile viewports to this page"

"Make the features section stack vertically on mobile"

Accessibility

Add semantic HTML tags and aria labels across your pages.

"Add accessibility tags to this page"

Analyze & Get Suggestions

Ask the AI to review your site and give you improvement tips.

"Analyze my site and give me tips on how to improve it"

"How many pages do I have and what are their names?"

Custom Code

The AI can inspect and modify custom CSS and JavaScript on any element.

"The particle network background is too slow, reduce the particle count and optimize the animation"

Style Presets

Create and apply reusable style presets from existing elements.

"Make the background of the hero section a color preset and apply it to all the other section backgrounds"