Pagesmith.ai
Start building

AI Prompt Guide

How to write effective prompts and a complete reference of everything Pagesmith AI can do.

Everything you can do with Pagesmith AI, plus tips for getting the best results.

Writing Better Prompts

Be Specific

Vague prompts get vague results. Say exactly what you want.

Bad:  Make the hero better.

Good: Update the hero section:
      - Change headline to "Ship Faster, Focus More"
      - Add a secondary CTA button "Watch Demo" next to the primary
      - Add a gradient overlay on the background image

Structure Your Prompts

Good prompts have four parts: context (what exists), goal (what you want), details (specifics), and constraints (what to avoid).

In the pricing section on the homepage:

- Change the layout from vertical cards to a horizontal comparison table
- Add a monthly/annual toggle with 20% annual discount
- Highlight the "Pro" plan as recommended

Keep the current pricing amounts and feature lists.
Do not change the header or footer.

One Task at a Time

Break complex changes into steps. Ask for one thing, review, then ask for the next.

Reference What Exists

Point to existing elements on your site for consistent results. Use the Select tool in the editor to click on any element — the AI will know exactly which part of the page you mean.

Below the features section, add a "How It Works" section:
- 3 numbered steps horizontally on desktop
- Style similar to the features grid above

You can also reference external sites:

Style the testimonials similar to Linear.app — clean cards
on a dark background with customer photos and company logos.

Site Creation

Generate a New Site

Describe your website and the AI builds it from scratch — complete with pages, navigation, responsive design, and images.

Create a modern portfolio site for a photographer with a dark theme
Build a SaaS landing page for a project management tool
Make a restaurant website with menu, hours, location, and reservation form

Import an Existing Website

Clone or recreate any website by providing its URL. Choose to preserve the original design or enhance it.

Import https://example.com
Clone https://stripe.com and modernize the design
Recreate https://mybusiness.com exactly as it is

The AI scrapes the site, extracts content, images, colors, and structure, then rebuilds it in Astro.

Start from a Template

Use pre-built templates for common site types and customize from there. Templates are available for SaaS, business, portfolio, e-commerce, and content sites.

Pages & Structure

Creating Pages

Create an About page at /about
Add a pricing page with three tiers
Generate a FAQ page with collapsible answers
Create a blog page that lists all posts
Add a documentation hub with sidebar navigation

Managing Pages

Rename the About page to Our Story
Delete the unused Services page
Duplicate the landing page for A/B testing

Sections & Components

Add a testimonials section with cards
Insert a pricing table between the hero and features
Add a newsletter signup section at the bottom
Create a team section with photo grid
Add an FAQ accordion section

Content Editing

Text Changes

Change the headline to "Build Faster, Ship Smarter"
Update the description to say "..."
Replace "old text" with "new text"

Structure Changes

Move the testimonials above the pricing section
Swap the positions of Features and Benefits
Reorder the navigation: Home, Features, Pricing, About

Adding & Removing Elements

Add a button that links to /signup
Add a list of features with icons
Remove the sidebar from the blog page
Hide the banner on mobile

Styling & Design

Colors & Themes

Change the background to dark navy
Use a gradient from purple to blue for the hero
Apply the brand color #FF6B35 to all buttons
Switch to a dark theme
Make the color scheme more professional

Typography

Use Inter for body text and Playfair Display for headings
Increase the heading size
Make the body text more readable
Set line height to 1.7 for paragraphs

Layout & Spacing

Make the hero section full width
Center the content on the page
Add more padding between sections
Use a 3-column grid for the features section
Stack columns vertically on mobile

Effects & Animations

Add a shadow to the cards
Round the corners of all images
Add a hover effect to the service cards
Apply a blur effect to the hero background
Add scroll reveal animations

Responsive Design

On mobile, stack the grid into a single column
Hide the sidebar on screens smaller than 768px
Make the text larger on mobile
Adjust the hero for tablet view
Make the navigation collapse into a hamburger menu on mobile

Blog & Content

The AI creates a full blog system using Astro Content Collections with MDX support.

Setting Up a Blog

Add a blog to my site
Create a blog with categories and tags
Set up a blog with a featured posts section

Blog Features

  • Blog listing page with grid or list layout
  • Individual post pages with reading time
  • Categories and tags for organization
  • Author information and dates
  • Automatic Table of Contents
  • SEO-optimized meta tags per post
  • Draft/publish workflow
  • MDX components (callouts, tabs, code blocks)

Creating Blog Posts

Use the Article Editor to write posts with rich formatting, or ask the AI:

Write a blog post about "Getting Started with Our Product"
Create a draft post about industry trends
Add 3 sample blog posts to get started

Documentation Sites

Build documentation hubs with sidebar navigation, search, and organized sections.

Create a documentation site with Getting Started, API Reference, and Guides sections
Add a docs page for authentication with code examples
Set up documentation with sidebar navigation

Docs Features

  • Sidebar navigation with section grouping
  • MDX-based pages with components
  • Code blocks with syntax highlighting
  • Callout boxes (info, warning, tip)
  • Tabs for multi-language code examples
  • Automatic ordering and hierarchy

Forms & Contact

Contact Forms

Contact forms work without any database — submissions are sent directly to your email.

Add a contact form with name, email, and message fields
Create a contact form that sends submissions to my email
Add a "Get a Quote" form with company and budget fields

Database-Backed Forms

For forms that need to store data (newsletter signups, registrations, bookings), the AI sets up a D1 database.

Create a newsletter signup that saves subscribers
Add a booking form that stores reservations in a database
Build a registration form with user accounts

Form Features

  • Client-side validation
  • Success/error messages
  • Loading states during submission
  • Rate limiting (20 emails/hour)
  • Custom fields (text, email, phone, select, textarea)
  • Optional confirmation emails to submitters

Images

Stock Photos from Unsplash

The AI automatically finds and places relevant images from Unsplash with proper attribution.

Add professional photos to the team section
Find images that match a tech/startup theme
Replace all placeholder images with real photos
Use black and white photos for the gallery

AI-Generated Images

Generate custom images using AI when stock photos don’t fit your needs.

Generate a hero illustration for a fintech app
Create a custom background image with abstract shapes
Generate product mockup images

AI image generation uses 1 credit per image.

Image Features

  • Responsive images with automatic srcset (multiple screen sizes)
  • Lazy loading for performance
  • Alt text for accessibility
  • CDN-hosted for fast delivery
  • Color-filtered search (find images by dominant color)
  • Automatic image optimization

SVG & Icons

The AI can create inline SVG icons and illustrations directly in your site code.

Add social media icons to the footer
Create a custom icon set for the features section
Add an animated SVG illustration to the hero
Design simple iconography for the services grid

SEO Optimization

On-Page SEO

Optimize SEO for all pages
Set the page title to "Best Coffee Shop in Helsinki | CaféNord"
Add meta descriptions to every page
Create proper heading hierarchy
Add alt text to all images

Structured Data (Schema.org)

Add Organization schema to the homepage
Add LocalBusiness structured data with address and hours
Add FAQ schema to the FAQ page
Add Article schema to blog posts
Add Product schema to the product page

Technical SEO

  • Automatic sitemap.xml generation
  • robots.txt configuration
  • Canonical URLs
  • Semantic HTML structure
  • Static HTML output (fast page loads)
  • WCAG AA accessibility compliance

Database & SSR

For sites that need server-side logic, the AI enables SSR with Cloudflare D1 (SQLite).

Database Features

Create a database table for storing contacts
Add a user registration system
Build an admin dashboard to view submissions
Store newsletter subscribers in the database

What You Get

  • D1 database tables with migrations
  • Server-side API routes
  • CRUD operations (create, read, update, delete)
  • Data validation
  • Admin-style data viewing in Pagesmith dashboard

Interactive Components

When you need JavaScript-powered interactivity, the AI creates React islands that hydrate on the client.

Add a live search box that filters results
Create a multi-step form wizard
Build an interactive pricing calculator
Add a modal contact form

Interactive Features

  • React components with Astro island hydration
  • State management for complex UIs
  • Modal dialogs
  • Search with real-time filtering
  • Multi-step forms
  • Price calculators
Make the menu sticky at the top
Add a mobile hamburger menu
Highlight the active page in navigation
Add dropdown menus for sub-pages
Create a footer with site map links

Integrations

Pagesmith supports third-party integrations with secure secret management.

Available Integrations

  • Google Analytics, Plausible, Fathom, and other analytics
  • Custom API integrations via environment variables
  • Instagram feed embedding
  • Social media links
Add Google Analytics tracking
Set up Plausible analytics
Add an Instagram feed to the homepage

Custom API Integration

Connect to a third-party API for dynamic content
Add a weather widget using an external API

Secrets are securely managed per environment (preview vs. production).

Publishing & Domains

Publishing

Publish my site
Republish with latest changes

Every site gets a free .pagesmith.app subdomain. Sites are deployed to Cloudflare Workers for global performance.

Custom Domains

  • Register a new domain directly through Pagesmith
  • Connect an existing domain via nameservers or CNAME
  • Transfer a domain from another registrar
  • Automatic SSL certificates
  • Apex domain support

Version History & Undo

Undo the last change
Revert to the previous version
Start over with the hero section

Every change creates a version you can revert to. Use the Version History panel to browse and restore any previous state.

Code Editing

Pro plan and above can directly edit the source code:

  • Full code editor with syntax highlighting
  • Edit any file (Astro, TypeScript, CSS, MDX)
  • Batch save across multiple files
  • Automatic build and deploy after saving

Export & GitHub

  • Export your project as a ZIP file
  • Push to GitHub — connect your repository and sync changes
  • Full Astro project structure you own

Bulk Operations

Site-Wide Changes

Apply dark theme to all pages
Update the footer across the entire site
Change the primary color site-wide to #2563EB
Replace the logo everywhere

Multiple Items

Add these pages: About, Services, Contact, Blog
Create pricing cards for: Starter, Pro, Enterprise
Update all buttons to use rounded corners