NotVibesCoded91 prompts for the sections every product page needs: navigation, heroes, pricing, dashboards, sign-in flows and more. Each one describes a proven layout in plain words. Copy a prompt, attach a screenshot of a design you like as the style reference, and hand both to your AI assistant: you get the structure you asked for, in the style you picked.
The wireframe on each card is the layout the prompt describes. Filter by category or search, copying is one click, no sign-up.
Showing all 91 prompts.
Design a clean horizontal navigation bar: logo on the left, navigation links in the center or toward the right, and a primary call-to-action button at the far right. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create a navigation bar where hovering over a top-level link opens a full-width mega menu with sub-links grouped by category, optionally with visuals. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Make a vertical navigation sidebar along the left edge of the page: logo at the top, links stacked below it, and a user or account area pinned at the bottom. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Design a navigation bar shaped like a rounded pill that floats away from the top edge of the page, centered horizontally, with a soft shadow. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build a navigation bar that is transparent while it overlaps the hero section and turns solid once the user scrolls. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create a navigation bar built around a prominent search or command-palette field (⌘K style) in the center, with just a few links around it. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Design a mobile tab bar pinned to the bottom of the screen, app-style, with icons paired with text labels. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create a hero section with centered content at the top (heading, subheading, and call-to-action buttons) and a big product screenshot or visual placed right underneath. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build a split-layout hero. Put the heading, subheading, and CTA buttons on one side, and a product mockup or visual on the other. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Make a hero section with a looping video or animated backdrop behind the headline and CTA buttons. Overlay the text so it stays easy to read. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Design a hero section with an animated gradient-mesh background. Center the heading, subheading, and CTAs on top of it. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build a hero section whose main visual is a terminal window or code editor, featuring a typing animation or a code snippet, positioned alongside the heading and CTAs. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create a hero section where several product screenshots or UI cards float, tilt, or overlap around the central heading and call-to-action buttons. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Make a hero section driven by huge, bold type. The headline should take over most of the viewport, with very little else competing with it. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Design a hero section that puts an email signup right below the heading. Use a single input with its submit button sitting inline next to it, rather than a standalone button. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Lay out a testimonials section as three quote cards side by side, each showing the customer's photo, name, job role, and their quote. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build a testimonials section as an endlessly looping, horizontally scrolling marquee of testimonial tiles. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create a testimonials section as a masonry (Pinterest-style) grid, with cards of differing heights fitted together. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Make a testimonials section built around one large quote, with the customer's photo, name, role, and company logo displayed prominently. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Design a testimonials section as a grid of clickable video thumbnails, each with a play icon plus the customer's name and company. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build a testimonials section as a wall of cards modeled on X/Twitter posts, with an avatar, handle, timestamp, and the quote as the post text. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create a logo cloud: a tidy grid or row of customer and partner logos, introduced by a short heading above. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Make a testimonials section that shows one testimonial at a time in a carousel, with dots or arrows to move between them. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Lay out a features section as a three-column grid. Every cell contains an icon, a feature name, and a brief description. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create a features section as an asymmetric bento grid, with tiles in a mix of sizes arranged in an eye-catching pattern. Give the most important features the biggest tiles. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build a features section as a series of zigzag rows. Each row pairs the feature's text with a visual or screenshot placeholder, and the text/visual sides swap from one row to the next. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Design a features section using tabs. Selecting a tab swaps in a different feature, showing its description beside a screenshot or visual. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Make a features section as a vertical accordion of collapsible rows. Collapsed rows show just the feature title; clicking one opens the full description plus any visuals. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build a features section where a visual stays pinned (sticky) on one side while the feature descriptions scroll by on the other. As each description reaches focus, it should become highlighted in turn. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create a features section as a dense wall of small tiles, each one just an icon and a short label, so lots of features can be scanned at a glance. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Design a features section as a before-and-after comparison, with life without the product shown on one side and life with it on the other. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Lay out a stats bar as one horizontal row with four big numbers, each captioned with a small label beneath it. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build a stats bar where each number counts up from zero when it scrolls into view, with a supporting label under each. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create a stats bar that puts a relevant icon next to every figure, so each number and label is paired with its own symbol. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Design a section that combines a row of customer or partner logos (above or beside) with headline stats such as "10k+ users" or "trusted by 500+ teams". Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Make a stats component stacked vertically so it fits in a narrow column or sidebar, each number sitting above its label. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build a full-width stats section on top of an image or gradient background, with the stats overlaid and high enough in contrast to read clearly. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create a stats bar as a row of separate bordered cards, each holding a single stat and its label. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Lay out a pricing section with three tier cards next to each other (such as Starter, Pro, and Business). Emphasize the middle card as the suggested plan. Each card should show the plan name, price, a feature list, and a call-to-action button. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build a pricing section with a billing-period switch at the top toggling between monthly and annual. Mark the annual option with a "save X%" badge, and make the displayed prices visibly change when the switch is flipped. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create a pricing section in the form of a full comparison table: each plan gets its own column, each feature its own row, and checkmarks or dashes show what every plan includes. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Produce a pricing section built around just one plan. Center a single oversized card containing the price, the complete list of features, and a standout call-to-action button. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Design a pricing section that starts with an interactive slider for usage (seats, users, or requests, for instance). Moving the slider should live-update the price shown underneath. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Make a pricing section as a grid of credit-pack tiles. Every tile shows how many credits it contains and what it costs, and one of them carries a "best value" or "most popular" badge. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build a pricing section divided into two columns, Free on one side and Pro on the other. Contrast them sharply so the benefit of upgrading is immediately clear. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create a pricing section where each tier gets its own full-width card, stacked vertically. Skip any side-by-side comparison; each card should be self-contained and show its entire feature list. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build an edge-to-edge call-to-action banner with a gradient background. Include a centered heading, one short supporting line, and a prominent button. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create a call-to-action banner as a contained card: the heading and description sit on one side, and the action button is aligned on the opposite side. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Make a call-to-action bar that stays fixed to the bottom of the viewport. It should contain a short message, a CTA button, and a way to dismiss it. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Design a call-to-action banner with a subtle pattern or texture (dots, a grid, or noise) behind a centered message and button. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build a call-to-action banner with a heading and supporting text, followed by two buttons side by side: one primary action and one secondary. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create a call-to-action banner with a heading and subheading, followed by an email input and submit button placed together on one line underneath. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Make a call-to-action banner that opens with a customer quote or testimonial, followed by the heading and button, so social proof backs up the ask. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build an FAQ section as a single-column accordion, where clicking a question opens its answer. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create an FAQ section using accordions arranged in two columns, with the questions divided between them. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Design an FAQ section styled like a chat thread, with the questions and answers shown as alternating message bubbles. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Make an FAQ section with a search field at the top that narrows the list of questions as the user types. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build an FAQ section with category tabs along the top (for example Billing, Product, Technical), where each tab shows only its own set of questions. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build a contact section split into two sides: a contact form on one, and contact information (email, phone, address, opening hours) on the other. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Design a contact section as a grid of cards, one per support channel (live chat, email, documentation, community), each with an icon and an action button. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create a contact page with a single centered form: one heading, only the essential fields, and one submit button. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Design a footer as a multi-column sitemap, with link groups such as Product, Company, Resources, and Legal. Place the logo and tagline at the far left and the copyright line along the bottom. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build a minimal one-row footer holding the logo, a handful of key links, and the copyright text, all in line. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create a footer with an enormous wordmark or logo as its centerpiece, with smaller supporting links placed around or beneath it. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Make a footer where the newsletter signup takes center stage (large heading, email input, and button), with the regular navigation links playing a secondary role below. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Design a footer that includes a live system-status indicator (for example an "all systems operational" dot) alongside the normal links and logo. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Design an authentication screen with a two-panel split layout. One half holds the sign-in form (email field, password field, main action button); the other half is a visual panel showing a product screenshot, an illustration, or a branded graphic. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build a login screen where a single card floats in the middle of a full-page background. The card needs a heading, email and password inputs, a main submit button, and a link for people who still need to create an account. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Make a stripped-back auth page with no card or box around it. Stack everything in one clean column: logo first, then a heading, the form inputs, and the submit button. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create a sign-in screen that leads with social login. Put Google, GitHub, and Apple buttons front and center at the top, then add a divider reading "or continue with email" with the regular email and password fields tucked below it as the secondary route. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build a passwordless sign-in screen. It should have one email input and one primary button, nothing else to fill in. Add a brief line of helper text explaining that a sign-in link will be emailed to them. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Design a sign-up flow broken into a short multi-step wizard, with a progress indicator along the top. Spread the account creation over two or three sensible stages (for example email, then password, then profile info) and include back and next controls. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build an onboarding flow as a checklist of setup tasks with progress indicators. Each task should expand to show instructions and a button to complete it. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Design a guided product tour made of tooltip callouts that point at specific UI elements, each with a short explanation and next and skip buttons. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Make an onboarding modal with an embedded walkthrough video as the main feature and a button to close it or get started. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create an empty state featuring a custom illustration, a short heading, one supporting sentence, and a single clear call-to-action button. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Design a dashboard layout with a vertical navigation sidebar on the left and a main content area that fills the remaining viewport. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create a dashboard with a horizontal top navigation bar and content spanning the full width below it. No sidebar. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build a dashboard with three panes: a navigation sidebar, a middle pane listing items or a feed, and a detail panel on the right. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Make a dashboard as a kanban board, with a column for each stage and draggable cards inside every column. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Design a dashboard that opens with a grid of metric cards showing key figures, followed by a larger chart or data visualization below. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create an empty state with a centered illustration or icon, a short heading explaining what's missing, and a clear button to get started. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build a magazine-style blog layout: one large featured post across the top, with smaller post cards arranged in a grid below it. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Design a blog post page as a clean single-column reading view, with comfortable line spacing and a text width that's easy to read. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create a blog post layout with a sticky table-of-contents sidebar that highlights the section currently in view as the reader scrolls. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Make a blog layout as a grid of post cards, with category tags above it that filter which posts show when clicked. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Make a comparison table with your own product in one column and competitors in the rest, using checkmarks and dashes to show which features each one has. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Build a slim announcement bar for the top of the page with a "new" tag, a brief message, an inline link, and a dismiss button. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Design a tidy cookie notice as a card in a bottom corner of the screen, with a short message, accept and reject buttons, and a link to settings. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Create a 404 page with a clear "page not found" message, a brief explanation, and buttons for returning home or contacting support. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.
Make a loading state using a skeleton layout that mirrors the structure of the final content, with a subtle shimmer animation across the placeholder blocks. Use the screenshot I've attached as your style reference and reproduce its look: the color palette, typefaces, and overall design feel.