Prompt Library

Copy and customize these proven prompts for faster building.

Starter Prompts by Site Type

These templates follow the Blueprint Formula from our Creator’s Prompt Guide.

Portfolio

“Build a portfolio for a [role] that showcases [type of work]. Include a hero with name, tagline, and CTA, a project grid with [number] items and hover effects, an about section with photo, and a contact form. Style: [aesthetic].”

Landing Page

“Build a landing page for [product/service] targeting [audience]. Include a hero with headline, subheadline, and CTA, [number] feature highlights with icons, a testimonial section, pricing with [number] tiers, and a final CTA. Style: [aesthetic].”

Business Site

“Build a website for [business type]. Include pages for Home, About, Services, and Contact. Home has a hero and service overview. Services page details [offerings]. About includes team/story. Contact has form and location map. Style: [aesthetic].”

Event Microsite

“Build a microsite for [event name] on [date]. Include hero with event name, date, and countdown, speaker lineup with [number] speakers, schedule by day, venue info with map, and ticket CTA. Style: [aesthetic].”

For more detailed examples of each type, see our Common Use Cases guide.

Visual Refinement Prompts

Spacing

“Add more breathing room throughout – increase section padding and element gaps.”

“Tighten the layout – reduce spacing between elements for a more compact feel.”

Typography

“Make headlines bolder and larger. Body text should be lighter weight with more line height.”

“Apply editorial typography – large display headings, refined body text, generous leading.”

Effects

“Soften everything – reduce shadows, lighter borders, more subtle transitions.”

“Add polish – subtle shadows on cards, smooth hover transitions, soft focus states.”

Layout

“Make the hero full-height with centered content.”

“Switch to asymmetric layout – hero with content left (60%) and image right (40%).”

Functional Prompts

Forms

“Add a contact form that collects name, email, and message. Show success message on submit.”

“Add newsletter signup with just email field. Inline error validation. Success toast on submit.”

Navigation

“Make the nav sticky with a subtle shadow on scroll. Smooth scroll to sections on anchor click.”

“Add a mobile hamburger menu that slides in from the right.”

Interactive Elements

“Project cards should lift and add shadow on hover. Smooth 200ms transition.”

“Add a back-to-top button that appears after scrolling 500px.”

Quick Component Prompts

Hero variations:

“Centered hero with gradient background, large headline, subhead, and two CTAs side by side.”

“Split hero with image left, content right. Headline, paragraph, and CTA button.”

Card patterns:

“Feature cards with icon top, title, description. 3-column grid, 4px border radius.”

“Testimonial cards with quote, author photo, name, and role. Subtle shadow, rounded corners.”

Footer patterns:

“Footer with logo left, link columns center, social icons right. Dark background.”

“Minimal footer with copyright and 4 links inline. Centered, light gray background.”

Refinement Pattern

Use this pattern for iterative improvement. Learn more about this workflow in Refine Your Website with Chat:

1. Generate base: Use a starter prompt to create the structure
2. Adjust layout: Modify spacing, alignment, and responsive behavior
3. Polish visuals: Fine-tune colors, typography, and effects
4. Add interactions: Hover states, animations, and feedback