- Rebecca Tomasis
- 6 days ago
- 4 min read
When it comes to vibe coding a website, its all about the prompts you use — both to build your website in the beginning but also to iterate and improve it. Knowing how to chat better with AI website builders, like Base44, will improve the quality and functionality of your website.
Using prompts to create a website with AI works best when you stop treating the AI website builder like a Google search bar and start treating it more like a senior product manager.
The best AI prompts follow a PRD (Product Requirements Document) structure: Identity + Tech stack + Vibe + Core features.
6 AI prompts to create a website
The first step in vibe coding a website is being clear about what type of website you want to build. It will need to be clear to you what your website is for. Understanding how to write AI prompts is at the center of the whole process.
01. Build a responsive dashboard for <industry>
The vibe: Clean, enterprise and trustworthy. Use a color palette of slate blue and white It should feel like Stripe,
Prompts for iteration to add functionality
Create a sidebar, add navigation links for the following — dashboard, clients, schedule and settings.
Add overview cards with a top row showing 4 key metrics (total revenue, active xlients, upcoming events).
Include data viz by creating a main line chart showing revenue over the last 30 days.
Add a recent data activity table with sortable columns, status badges (completed/pending) and row hover effects.
For interactivity make the sidebar collapsible and make the table supports pagination.
02. Design a personal portfolio website for a <role>
The vibe: Dark mode, futuristic, glassmorphism. Use a deep black background (bg-zinc-950) with neon and purple accents. Use the Inter font throughout.
Prompts for iteration to create the website structure:
Add a hero section with large, centered typography that says 'Add your name.' Include below it a scrolling marquee of skills.
Create a work section using a bento-box grid layout (with uneven grid cells). Make each cell a project card with a subtle glow effect when someone hovers. The grid should be fully responsive, with 1 column on mobile, 3 on desktop.
Include an about section with a two-column layout. Place the text on the left, with a placeholder for a headshot on the right with a rounded-rectangle mask.
Add a minimal footer with large social links that underline on hover.
03. Create a high-converting landing page for a <product>
The vibe: Organic, warm but premium. Use cream/beige backgrounds with a dark forest green text. Use Serif fonts for headings to give an editorial look.
Prompts for iteration to create the landing page sections:
Create a sticky navigation, with the logo (provided here) and the Buy Now button on the right. The Buy Now button should use a high-contrast color.
Create a split screen hero section. The left side should include this <Headline> and primary CTA button. The right side should include a large image placeholder for this <Image>.
Add social proof, a strip of 5 grayscale logos of trusted companies, use placeholders for now.
Implement a zig-zag layout, with text on on the left, image right. Include these 3 benefits <benefits>.
Add 3 card for pricing labelled <Pricing tiers>. Highlight the center pricing card with a border and a most popular badge.
Include an FAQ accordian, a clean list of 5 expandable questions at the bottom.
04. Build a modern, conversion-focused Ecommerce storefront for a <niche>
The vibe: Streetwear luxury, high contrast black and white, bold sans-serif typography. Use minimal borders, lots of whitespace.
Prompts for iteration to add the ecommerce website's core features:
Core features:
Add a global cart, designed as a sliding drawer that opens from the right when the cart icon is clicked. It must show items, subtotal and a checkout button.
Include a product grid, a responsive grid (2-col mobile, 4-col desktop). Each product card must have an image with a quick add button that appears to hover, title and price clearly visible, a new arrival badge on the first two items.
Insert filters — a left-sidebar filter for size, color and price range (accordion style).
When I click a product, open a modal showing a larger image, a size selector and an add to cart button.
05. Design a blog for <topic>
The vibe: Editorial and academic. Think Substack or Medium but cleaner. Cream background (bg-[#f9f9f9]), dark gray text (text-slate-800) and a serif font for headlines (Merriweather).
Prompts for iteration of what to include in a blog website:
Create a featured post hero section at the top of the site with a large image on the left and the main headline on the right.
Add category pills, a horizontal scrollable list of topics <your topics> below the hero.
Insert a 3-column grid for standard articles. Each card should show:
Category tag (small and colored).
Estimated read time (e.g., '5 min read').
Author avatar and name.
Create a distinct section in the middle of the feed with a border, asking users to subscribe.
Include a sample single post view that features a sticky table of contents on the left sidebar and a progress bar at the top of the screen.
06. Build a professional corporate website for a <company>
The vibe: Fortune 500 trust. Deep Navy Blue (#0a192f) and Gold/Orange accents. Clean, authoritative sans-serif fonts. The layout should feel stable and grid-aligned.
Prompts for iteration for building a corporate website:
Add a value focused proposition centered on the screen without distracting background images. Just a subtle abstract pattern or gradient. Include two buttons — Request demo (primary) and Watch video (secondary).
Include a trust strip, a gray-scale logo bar of Partners or Clients with low opacity.
For the services tab system, do not just list services. Create a tabbed interface. When I click 'consulting', show content for consulting. When I click 'audit', switch the content.
Include a dark section with 4 animated counters (e.g., '500+ Clients', '99% Uptime').
Create a slider showing 4 team member cards with their LinkedIn icons.
Include a mega footer with 4 columns of links (Company, Solutions, Resources, Legal).
Make the navigation bar sticky and changes background color when scrolling.