Vibe Codingfor Product Designers

Create a bento grid hero section with a large title card, a stats card, a testimonial card, and an image card. Use rounded corners and subtle shadows.

Build a split-screen landing page with product info on the left and a large image on the right. Add a CTA button with a gradient background.

Add a testimonial carousel with avatar, name, role, and quote. Include auto-play, dot indicators, and smooth slide transitions.

Create a 3-tier pricing table with a highlighted 'Popular' plan. Include feature checkmarks, monthly/annual toggle, and a CTA button on each card.

Make it feel like a luxury brand: use a dark background (#0a0a0a), gold accents (#c9a84c), serif typography for headings, and generous whitespace.

Style the cards with glassmorphism: frosted glass background, subtle border, backdrop blur, and a soft shadow. Keep text high contrast.

Change the color palette to ocean blues: primary #0c2340, secondary #2d8a9e, accent #5cbdb9. Keep the layout the same.

Add scroll-triggered animations: fade-in from below for cards, stagger the grid items by 100ms each, and add a smooth parallax effect to the hero image.

Create a dashboard with a fixed sidebar, a top header with search and avatar, and a main content area with chart cards and a data table.

Add a contact form with name, email, message fields, and a submit button. Include validation, error states, and a success toast notification.

Redesign with a brutalist aesthetic: thick black borders, raw typography, no rounded corners, high contrast black and white with one accent color (#ff5722).

Make this fully responsive: stack columns on mobile, hide sidebar on small screens with a hamburger menu, and make images fluid.